<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Postulación de Deportistes - StageDance</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-light">

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            
            <!-- Banner de Estado del Formulario -->
            <div id="alertaFase" class="alert d-none shadow-sm mb-4" role="alert">
                <div class="d-flex align-items-center">
                    <i id="iconoAlerta" class="fas fa-info-circle me-3 fs-4"></i>
                    <div id="mensajeAlerta">Comprobando el estado de las inscripciones...</div>
                </div>
            </div>

            <div class="card shadow border-0 rounded-4 mb-4">
                <div class="card-header bg-dark text-white p-4 rounded-top-4">
                    <h3 class="h4 mb-1 fw-bold"><i class="fas fa-id-card-alt me-2 text-primary"></i>Inscripción de Competidoras</h3>
                    <p class="text-muted small mb-0 text-white-50">Introduce las datos de la deportista. Las competencias externas exigen la carga obligatoria de documentos digitales.</p>
                </div>
                <div class="card-body p-4">
                    
                    <form id="formPostulacion" enctype="multipart/form-data" method="POST">
                        <input type="hidden" name="evp_id" id="evp_id" value="<?php echo intval($_GET['evp_id'] ?? 0); ?>">
                        <input type="hidden" name="ins_id" id="ins_id" value="<?php echo intval($_GET['ins_id'] ?? 0); ?>">

                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">Cédula de Identidad de la Deportista *</label>
                                <input type="text" name="pos_cedula" class="form-control" placeholder="Ej: 1726543210" required maxlength="15">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">Fecha de Nacimiento *</label>
                                <input type="date" name="pos_fecha_nacimiento" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">Nombres *</label>
                                <input type="text" name="pos_nombres" class="form-control" required style="text-transform: uppercase;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">Apellidos *</label>
                                <input type="text" name="pos_apellidos" class="form-control" required style="text-transform: uppercase;">
                            </div>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">Categoría de Competición *</label>
                                <select name="pos_categoria" class="form-select" required>
                                    <option value="">Selecciona una categoría...</option>
                                    <option value="NOVATO">NOVATO</option>
                                    <option value="PRINCIPIANTE">PRINCIPIANTE</option>
                                    <option value="INTERMEDIO">INTERMEDIO</option>
                                    <option value="AVANZADO">AVANZADO</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">Estilo Técnico *</label>
                                <select name="pos_estilo" class="form-select" required>
                                    <option value="UNICO">ÚNICO / RECREATIVO</option>
                                    <option value="ARTISTICO">ARTÍSTICO</option>
                                    <option value="CLASICO">CLÁSICO</option>
                                </select>
                            </div>
                        </div>

                        <!-- Sección de Archivos Adjuntos (Se oculta por JS automáticamente si la competencia es INTERNA) -->
                        <div id="seccionDocumentos" class="bg-light p-3 rounded-3 mb-4 border">
                            <h5 class="h6 mb-3 fw-bold text-dark"><i class="fas fa-paperclip me-2 text-primary"></i>Expediente Digital Obligatorio (.pdf, .jpg, .png)</h5>
                            
                            <div class="mb-3">
                                <label class="form-label small text-muted">1. Cédula de Identidad de la Deportista *</label>
                                <input type="file" name="url_cedula_deportista" class="form-control" accept=".pdf, .jpg, .jpeg, .png" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label small text-muted">2. Carta de Autorización de Uso de Imagen Firmada *</label>
                                <input type="file" name="url_autorizacion_imagen" class="form-control" accept=".pdf, .jpg, .jpeg, .png" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label small text-muted">3. Cédula del Representante Legal *</label>
                                <input type="file" name="url_cedula_representante" class="form-control" accept=".pdf, .jpg, .jpeg, .png" required>
                            </div>
                        </div>

                        <div class="text-end">
                            <button type="submit" id="btnEnviar" class="btn btn-primary px-4 fw-bold rounded-pill shadow-sm">
                                <i class="fas fa-cloud-upload-alt me-2"></i>Guardar y Registrar Deportista
                            </button>
                        </div>
                    </form>

                </div>
            </div>

        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const evp_id = document.getElementById('evp_id').value;
    const form = document.getElementById('formPostulacion');
    const btnEnviar = document.getElementById('btnEnviar');
    const alertaFase = document.getElementById('alertaFase');
    const mensajeAlerta = document.getElementById('mensajeAlerta');
    const iconoAlerta = document.getElementById('iconoAlerta');
    const seccionDocumentos = document.getElementById('seccionDocumentos');

    // 1. Validar el tipo y estado de la competencia asíncronamente (Sube 2 niveles para buscar /controlador/)
    fetch(`../../controlador/FaseCompetenciaController.php?action=verificar_fase_registro&evp_id=${evp_id}`)
    .then(res => res.json())
    .then(data => {
        alertaFase.classList.remove('d-none');
        
        if (data.permitir === false) {
            alertaFase.classList.add('alert-danger');
            mensajeAlerta.innerText = data.message;
            iconoAlerta.className = "fas fa-lock me-3 fs-4";
            Array.from(form.elements).forEach(el => el.disabled = true);
            btnEnviar.disabled = true;
            return;
        }

        alertaFase.classList.add('alert-success');
        mensajeAlerta.innerText = `${data.message} (Tipo de competencia: ${data.tipo_competencia})`;
        iconoAlerta.className = "fas fa-unlock me-3 fs-4";

        // Si la competencia es INTERNA, ocultamos la sección de archivos y removemos su obligatoriedad
        if (data.tipo_competencia === 'INTERNA') {
            seccionDocumentos.classList.add('d-none');
            seccionDocumentos.querySelectorAll('input[type="file"]').forEach(input => input.removeAttribute('required'));
        }
    })
    .catch(err => {
        console.error(err);
        alertaFase.classList.remove('d-none');
        alertaFase.classList.add('alert-danger');
        mensajeAlerta.innerText = "Error al conectar con el verificador del controlador.";
    });

    // 2. Procesar el envío de datos al backend
    form.addEventListener("submit", function(e) {
        e.preventDefault();
        btnEnviar.disabled = true;
        btnEnviar.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Guardando datos...`;

        const formData = new FormData(form);

        fetch('../../controlador/FaseCompetenciaController.php?action=postular_bastonera', {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                alert(`✨ ¡Registro Completado!\n\n${data.message}\nEdad calculada al día del evento: ${data.edad_proyectada_evento}`);
                form.reset();
                // Si es interna mantén oculta la sección de subidas tras el reset
                if (seccionDocumentos.classList.contains('d-none')) {
                    seccionDocumentos.querySelectorAll('input[type="file"]').forEach(input => input.removeAttribute('required'));
                }
            } else {
                alert(`❌ Error: ${data.message}`);
            }
        })
        .catch(err => alert("Se ha producido un error de comunicación con el servidor."))
        .finally(() => {
            btnEnviar.disabled = false;
            btnEnviar.innerHTML = `<i class="fas fa-cloud-upload-alt me-2"></i>Guardar y Registrar Deportista`;
        });
    });
});
</script>
</body>
</html>