@extends('layouts.app')

@section('content')
<script src="https://www.google.com/recaptcha/api.js?hl=es" async defer></script>

{{-- Overlay de carga --}}
<div id="loading-overlay" class="d-none position-fixed w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center" style="background: rgba(255,255,255,0.9); z-index: 9999;">
    <div class="text-center">
        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem; color: #C9A050 !important;"></div>
        <p class="mt-3 fw-bold">Subiendo postulación oficial...<br><span class="text-muted small">Procesando imágenes de alta resolución.</span></p>
    </div>
</div>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
            
            <div class="card shadow-lg border-0 overflow-hidden">
                {{-- Encabezado Fijo --}}
                <div class="card-header bg-dark text-white p-4 text-center" style="border-bottom: 4px solid #C9A050;">
                    <img src="{{ asset('img/logo_50_aniversario.png') . '?' . filemtime(public_path('img/logo_50_aniversario.png')) }}" 
                        alt="50 Años" 
                        class="mb-2" 
                        style="max-height: 60px;">
                    <h3 class="mb-0 fw-bold">Inscripción al Concurso</h3>
                    
                    {{-- Indicador de Pasos --}}
                    <div class="d-flex justify-content-center mt-3">
                        <div class="step-indicator active" id="dot-1"></div>
                        <div class="step-indicator" id="dot-2"></div>
                        <div class="step-indicator" id="dot-3"></div>
                        <div class="step-indicator" id="dot-4"></div>
                        <div class="step-indicator" id="dot-5"></div>
                    </div>
                </div>

                <div class="card-body p-4 p-md-5">
                    <form action="{{ route('concurso.save') }}" method="POST" enctype="multipart/form-data" id="form-inscripcion">
                        @csrf

                        <div class="step-screen active" id="step-1">
                            <h4 class="fw-bold mb-4" style="color: #7a2a1e;"><i class="bi bi-incognito me-2"></i>Paso 1: Tu Seudónimo</h4>
                            <div class="mb-4">
                                <label class="form-label fw-bold">Seudónimo de participación</label>
                                <input type="text" id="input-seudonimo" name="seudonimo" class="form-control form-control-lg border-2" value="{{ old('seudonimo') }}" placeholder="Ej: HorizonteRojo" required>
                                <div id="seudonimo-error" class="text-danger small fw-bold d-none mt-1">
                                    <i class="bi bi-x-circle"></i> Este seudónimo ya está en uso. Por favor, elige otro.
                                </div>
                                <div class="form-text mt-2">Este es el nombre que verá el jurado al evaluar tus fotos.</div>
                            </div>
                            <div class="d-flex justify-content-end mt-5">
                                <button type="button" class="btn btn-primary btn-lg px-5 next-step" style="background-color: #C9A050; border: none; color: black;">Siguiente <i class="bi bi-arrow-right"></i></button>
                            </div>
                        </div>

                        <div class="step-screen d-none" id="step-2">
                            <h4 class="fw-bold mb-4" style="color: #7a2a1e;"><i class="bi bi-person-badge me-2"></i>Paso 2: Datos Personales</h4>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label small fw-bold">Nombres</label>
                                    <input type="text" name="nombres" class="form-control" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label small fw-bold">Apellidos</label>
                                    <input type="text" name="apellidos" class="form-control" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label small fw-bold">DNI</label>
                                    <input type="text" id="input-dni" name="dni" class="form-control" placeholder="Solo números" required>
                                    <div id="dni-error" class="text-danger small d-none fw-bold mt-1">
                                        <i class="bi bi-x-circle"></i> Este DNI ya está inscrito en el concurso.
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label small fw-bold">Fecha de Nacimiento</label>
                                    <input 
                                        type="date" 
                                        id="fecha_nacimiento" 
                                        name="fecha_nacimiento" 
                                        class="form-control" 
                                        value="{{ old('fecha_nacimiento') }}" 
                                        max="{{ date('Y-m-d') }}" 
                                        required
                                    >
                                </div>
                                <div class="col-12 mb-3">
                                    <label class="form-label small fw-bold">Email de contacto</label>
                                    <input type="email" name="email" class="form-control" required>
                                    <div class="form-text fw-bold small"><i class="bi bi-exclamation-circle" style="#C9A050"></i> Canal de comunicación oficial único.</div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between mt-5">
                                <button type="button" class="btn btn-outline-secondary btn-lg prev-step">Atrás</button>
                                <button type="button" class="btn btn-primary btn-lg px-5 next-step" style="background-color: #C9A050; border: none; color: black;">Siguiente</button>
                            </div>
                        </div>

                        <div class="step-screen d-none" id="step-3">
                            <h4 class="fw-bold mb-4" style="color: #7a2a1e;"><i class="bi bi-camera-fill me-2"></i>Paso 3: Concurso de Fotografía</h4>
                            
                            {{-- Opción para participar: Se quitó 'checked' para que sea opcional por defecto --}}
                            <div class="p-3 border border-primary rounded bg-light mb-4 shadow-sm" style="border-left: 5px solid #C9A050 !important;">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="switchConcurso" name="participa_concurso">
                                    <label class="form-check-label fw-bold" for="switchConcurso">Participar en el Concurso de Fotografía </label>
                                </div>
                            </div>

                            {{-- Contenedor dinámico: Agregamos 'd-none' para que inicie oculto --}}
                            <div id="seccion-concurso" class="d-none">
                                <div class="alert alert-info border-0 shadow-sm mb-4" style="background-color: #f0f7ff;">
                                    <div class="d-flex">
                                        <i class="bi bi-info-circle-fill me-2 fs-5 text-primary"></i>
                                        <div class="small">
                                            <strong>Importante:</strong> Las categorías son <strong>excluyentes</strong>. Debes elegir una sola para tus fotos. Puedes subir un <strong>máximo de 3 obras</strong>.
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-4 bg-light p-3 border rounded shadow-sm">
                                    <label class="form-label fw-bold small text-uppercase">Selecciona tu Categoría</label>
                                    <select name="categoria" id="select-categoria" class="form-select border-2">
                                        <option value="" disabled selected>Elegir categoría...</option>
                                        <option value="profesional">Fotógrafos Profesionales</option>
                                        <option value="aficionado">Aficionados</option>
                                    </select>
                                </div>

                                <div id="contenedor-fotos-concurso">
                                    {{-- Se genera vía JS --}}
                                </div>

                                <div class="text-center mb-4">
                                    <button type="button" id="btn-add-concurso" class="btn btn-sm btn-dark px-3 shadow-sm">
                                        <i class="bi bi-plus-circle me-1"></i> Agregar otra foto <span id="counter-concurso">(0 de 3)</span>
                                    </button>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between mt-5">
                                <button type="button" class="btn btn-outline-secondary btn-lg prev-step">Atrás</button>
                                <button type="button" class="btn btn-primary btn-lg px-5 next-step" style="background-color: #C9A050; border: none; color: black;">Siguiente</button>
                            </div>
                        </div>

                       <div class="step-screen d-none" id="step-4">
                            <h4 class="fw-bold mb-4" style="color: #854d0e;">
                                <i class="bi bi-journal-album me-2"></i>Paso 4: Fotos Históricas
                            </h4>
                            
                            <div class="p-3 border border-warning rounded bg-light mb-4 shadow-sm">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="switchHistorica" name="participa_historica">
                                    <label class="form-check-label fw-bold" for="switchHistorica">Participar en la Convocatoria Histórica</label>
                                </div>
                            </div>

                            <div id="seccion-historica" class="d-none">
                                <div id="contenedor-fotos-historicas"></div>
                                <div class="text-center mb-4">
                                    <button type="button" id="btn-add-historica" class="btn btn-outline-warning text-dark btn-sm shadow-sm">
                                        <i class="bi bi-plus-circle"></i> Agregar Foto Histórica (Máx 10)
                                    </button>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between mt-5">
                                <button type="button" class="btn btn-outline-secondary btn-lg prev-step">Atrás</button>
                                <button type="button" class="btn btn-primary btn-lg px-5 next-step" style="background-color: #C9A050; border: none; color: black;">Siguiente</button>
                            </div>
                        </div>

                        <div class="step-screen d-none" id="step-5">
                            <h4 class="fw-bold mb-4" style="color: #1a4731;">
                                <i class="bi bi-check-circle-fill me-2"></i>Paso 5: Finalizar Inscripción
                            </h4>

                            <div class="alert alert-info border-0 shadow-sm mb-4" style="background-color: #f8f9fa;">
                                <p class="small mb-0">Estás a un paso de completar tu inscripción. Por favor, revisa que los datos sean correctos y acepta los términos legales.</p>
                            </div>

                            <div class="mt-4 p-4 border rounded bg-white shadow-sm" style="border-left: 5px solid #C9A050 !important;">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="checkBases" required>
                                    <label class="form-check-label fw-bold" for="checkBases">
                                        Acepto las Bases y Condiciones del Concurso.
                                    </label>
                                    <div class="mt-2">
                                        <div class="mt-2">
                                            <a href="{{ route('bases_condiciones.index') }}" 
                                            class="small text-decoration-none text-muted fw-bold" 
                                            target="_blank">
                                            <i class="bi bi-file-earmark-pdf me-1"></i>Ver Bases y Condiciones completas
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="my-5 d-flex flex-column align-items-center">
                                <label class="form-label small fw-bold mb-3">Verificación de seguridad:</label>
                            <div class="g-recaptcha" data-sitekey="6LeyKIUsAAAAAAdxZN41-2XV4Us3Q6Gh_rh9HR_h"></div>
                            </div>

                            <div class="d-flex justify-content-between">
                                <button type="button" class="btn btn-outline-secondary btn-lg prev-step">Atrás</button>
                                <button type="submit" class="btn btn-success btn-lg px-5 shadow fw-bold text-black" style="background-color: #C9A050; border:none;">
                                    Enviar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- FOOTER --}}
<footer class="pt-5 mt-5 text-muted border-top text-center pb-5 bg-white">
    <div class="container">
        <div class="mb-4">
            <img src="{{ asset('img/logo_coirco.png') }}" alt="COIRCO" style="max-height: 60px; filter: grayscale(100%); opacity: 0.6;">
        </div>
        <p class="mb-1 fw-bold text-dark text-uppercase">Comité Interjurisdiccional del Río Colorado (COIRCO)</p>
        <p class="small mb-0">1976 - 2026 | 50 Años de Gestión Interjurisdiccional</p>
        <div class="mt-3">
            <a href="{{ route('bases_condiciones.index') }}" class="text-decoration-none text-dark fw-bold mx-2 small">Reglamento y Bases</a>
        </div>
    </div>
</footer>

<style>
    .step-indicator { width: 15px; height: 15px; border-radius: 50%; background: #444; margin: 0 8px; transition: 0.3s; }
    .step-indicator.active { background: #C9A050; transform: scale(1.3); box-shadow: 0 0 10px rgba(201,160,80,0.5); }
    .border-dashed { border: 2px dashed #C9A050 !important; background-color: #fffdf9 !important; border-radius: 12px; }
    .border-coirco { border-left: 5px solid #C9A050 !important; }
    .btn-remove-foto { position: absolute; top: -10px; right: -10px; border-radius: 50%; width: 30px; height: 30px; border: 2px solid white; display: flex; align-items: center; justify-content: center; z-index: 100; }
</style>

{{-- MODAL DE AVISOS --}}
<div class="modal fade" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title fw-bold" id="validationModalLabel">
                    <i class="bi bi-exclamation-circle-fill text-warning me-2"></i> Atención
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 text-center">
                <p id="modalMessage" class="fs-5 mb-0"></p>
            </div>
            <div class="modal-footer border-0 justify-content-center pb-4">
                <button type="button" class="btn btn-dark px-4 fw-bold" data-bs-dismiss="modal" style="background-color: #C9A050; border: none; color: black;">Entendido</button>
            </div>
        </div>
    </div>
</div>

<script>

    
    // --- FUNCIÓN PARA MOSTRAR EL MODAL ---
    function showAlert(message) {
        const modalMessage = document.getElementById('modalMessage');
        modalMessage.innerText = message;
        const myModal = new bootstrap.Modal(document.getElementById('validationModal'));
        myModal.show();
    }

    let currentStep = 1;
    const totalSteps = 5;

    // --- NAVEGACIÓN ENTRE PANTALLAS ---
    document.querySelectorAll('.next-step').forEach(btn => {
        btn.addEventListener('click', () => {
            if (validateCurrentStep()) {
                changeStep(currentStep + 1);
            }
        });
    });

    document.querySelectorAll('.prev-step').forEach(btn => {
        btn.addEventListener('click', () => changeStep(currentStep - 1));
    });

    function changeStep(newStep) {
        document.getElementById(`step-${currentStep}`).classList.add('d-none');
        document.getElementById(`dot-${currentStep}`).classList.remove('active');
        
        currentStep = newStep;
        
        document.getElementById(`step-${currentStep}`).classList.remove('d-none');
        document.getElementById(`dot-${currentStep}`).classList.add('active');
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

function validateCurrentStep() {
    const activeStep = document.getElementById(`step-${currentStep}`);
    
    // 1. Validar campos requeridos estándar
    const inputs = activeStep.querySelectorAll('input[required], select[required], textarea[required]');
    for (let input of inputs) {
        // --- LA CLAVE: Si el campo está dentro de una sección oculta (d-none), NO lo valides ---
        if (input.closest('.d-none')) {
            continue; 
        }

        if (!input.value.trim()) {
            showAlert(`Por favor, completa todos los campos obligatorios.`);
            input.focus();
            return false;
        }
    }

    // --- VALIDACIÓN ESPECÍFICA PASO 1: SEUDÓNIMO ---
    if (currentStep === 1) {
        const inputSeudonimo = document.getElementById('input-seudonimo');
        if (inputSeudonimo.dataset.disponible === "false") {
            showAlert("El seudónimo ya está en uso. Por favor, elige otro.");
            inputSeudonimo.focus();
            return false;
        }
        if (!inputSeudonimo.dataset.disponible && inputSeudonimo.value.length > 0) {
            showAlert("Estamos verificando el seudónimo, aguarda un segundo...");
            return false;
        }
    }

    // --- VALIDACIÓN ESPECÍFICA PASO 2: DNI ---
    if (currentStep === 2) {
        const inputDni = document.getElementById('input-dni');
        if (inputDni.dataset.disponible === "false") {
            showAlert("Este DNI ya se encuentra registrado en el concurso.");
            inputDni.focus();
            return false;
        }
    }

    // --- VALIDACIÓN ESPECÍFICA PASO 3: FOTOS CONCURSO ---
    if (currentStep === 3) {
        if (document.getElementById('switchConcurso').checked) {
            const categoria = activeStep.querySelector('select[name="categoria"]');
            const inputFotos = document.querySelector('input[name="fotos_concurso[]"]');
            
            let erroresPaso3 = [];

            // 1. Validar Categoría
            if (!categoria || !categoria.value) {
                erroresPaso3.push("seleccionar una categoría");
                categoria.classList.add('is-invalid'); // Opcional: Resaltar en rojo
            } else {
                categoria.classList.remove('is-invalid');
            }

            // 2. Validar Fotos (Al menos el primer input debe tener archivo)
            // Buscamos todos los inputs de fotos del concurso y verificamos si al menos uno tiene archivos
            const todosLosInputsConcurso = document.querySelectorAll('input[name="fotos_concurso[]"]');
            let tieneAlMenosUnaFoto = Array.from(todosLosInputsConcurso).some(input => input.files.length > 0);

            if (!tieneAlMenosUnaFoto) {
                erroresPaso3.push("cargar al menos una foto");
                if(inputFotos) inputFotos.classList.add('is-invalid');
            } else {
                if(inputFotos) inputFotos.classList.remove('is-invalid');
            }

            // 3. Mostrar alertas acumuladas
            if (erroresPaso3.length > 0) {
                // Esto armará algo como: "Para el concurso debes seleccionar una categoría y cargar al menos una foto."
                const mensaje = "Para el concurso debes " + erroresPaso3.join(" y ") + ".";
                showAlert(mensaje);
                return false;
            }
        }
    }

    // --- PASO 4: HISTÓRICA ---
    if (currentStep === 4) {
        if (document.getElementById('switchHistorica').checked) {
            const contenedor = document.getElementById('contenedor-fotos-historicas');
            if (contenedor.children.length === 0) {
                showAlert("Debes cargar al menos una foto histórica.");
                return false;
            }
        }
    }

    // --- VALIDACIÓN ESPECÍFICA PASO 5: CONTROL CRUZADO ---
    if (currentStep === 5) {
        const pConcurso = document.getElementById('switchConcurso').checked;
        const pHistorica = document.getElementById('switchHistorica').checked;
        const check = document.getElementById('checkBases');
        
        // Nueva validación para reCAPTCHA
        const recaptchaResponse = grecaptcha.getResponse();

        if (!pConcurso && !pHistorica) {
            showAlert("Para enviar, debes participar al menos en una sección (Paso 3 o Paso 4).");
            return false;
        }

        if (!check.checked) {
            showAlert("Debes aceptar las Bases y Condiciones.");
            return false;
        }

        // Verificamos si la respuesta del captcha está vacía
        if (recaptchaResponse.length === 0) {
            showAlert("Por favor, completa la verificación de seguridad (reCAPTCHA).");
            return false;
        }
    }

    return true; 
}

    // --- LÓGICA DE FOTOS DINÁMICAS ---
    let countConcurso = 0;
    let countHistorica = 0;

    // Agregar foto de concurso
    document.getElementById('btn-add-concurso').addEventListener('click', () => {
        if (countConcurso < 3) {
            countConcurso++;
            const div = createFotoDiv(countConcurso, 'concurso', 'primary');
            document.getElementById('contenedor-fotos-concurso').appendChild(div);
            updateConcursoCounter();
            if(countConcurso === 3) document.getElementById('btn-add-concurso').classList.add('d-none');
        }
    });

    // Switch para sección histórica
    document.getElementById('switchHistorica').addEventListener('change', function() {
        const seccion = document.getElementById('seccion-historica');
        seccion.classList.toggle('d-none', !this.checked);
        if (this.checked && countHistorica === 0) {
            addHistorica();
        }
    });

    // Agregar foto histórica
    document.getElementById('btn-add-historica').addEventListener('click', addHistorica);

    function addHistorica() {
        if (countHistorica < 10) {
            countHistorica++;
            const div = createFotoDiv(countHistorica, 'historica', 'warning text-dark');
            document.getElementById('contenedor-fotos-historicas').appendChild(div);
            if(countHistorica === 10) document.getElementById('btn-add-historica').classList.add('d-none');
        }
    }

    function updateConcursoCounter() {
        const counter = document.getElementById('counter-concurso');
        if(counter) counter.innerText = `(${countConcurso} de 3)`;
    }

    function createFotoDiv(num, type, color) {
        const div = document.createElement('div');
        div.className = `foto-item card mb-4 border-dashed position-relative shadow-sm`;
        
        // El label cambia según si es concurso o histórica
        const labelNum = type === 'concurso' ? `OBRA N°${num}` : `FOTO HISTÓRICA N°${num}`;
        
        div.innerHTML = `
            <button type="button" class="btn btn-danger btn-sm btn-remove-foto" title="Eliminar">
                <i class="bi bi-trash"></i>
            </button>
            <div class="card-body">
                <span class="badge bg-dark text-white mb-3">${labelNum}</span>
                <div class="mb-3">
                    <label class="form-label fw-bold small">Título</label>
                    <input type="text" name="titulos_${type}[]" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold small text-${color}">Archivo (JPG)</label>
                    <input type="file" name="fotos_${type}[]" class="form-control" accept=".jpg,.jpeg" required>
                </div>
                <div class="mb-0">
                    <label class="form-label fw-bold small">Descripción / Fecha aprox.</label>
                    <textarea name="detalles_${type}[]" class="form-control" rows="2" required></textarea>
                </div>
            </div>
        `;

        div.querySelector('.btn-remove-foto').addEventListener('click', () => {
            div.remove();
            if (type === 'concurso') {
                countConcurso--;
                updateConcursoCounter();
                document.getElementById('btn-add-concurso').classList.remove('d-none');
            } else {
                countHistorica--;
                document.getElementById('btn-add-historica').classList.remove('d-none');
                if (countHistorica === 0) {
                    document.getElementById('switchHistorica').checked = false;
                    document.getElementById('seccion-historica').classList.add('d-none');
                }
            }
        });
        return div;
    }

    // --- SUBMIT FINAL ---
    document.getElementById('form-inscripcion').addEventListener('submit', function(e) {
    e.preventDefault();

    if (!validateCurrentStep()) return;
    if (grecaptcha.getResponse().length === 0) {
        showAlert("Por favor, completa el reCAPTCHA.");
        return;
    }
    // 0
    const files = document.querySelectorAll('input[type="file"]');
    let errorPeso = ""; // Usamos un string para ser específicos con el error

    /*files.forEach((input, index) => {
        if (input.files.length > 0) {
            const pesoMB = input.files[0].size / (1024 * 1024);
            
            if (pesoMB < 5) {
                errorPeso = "Algunas imágenes son demasiado pequeñas (mínimo 5MB).";
                input.classList.add('is-invalid'); // Resaltado visual
            } else if (pesoMB > 20) {
                errorPeso = "Algunas imágenes superan el límite de 20MB.";
                input.classList.add('is-invalid');
            } else {
                input.classList.remove('is-invalid');
            }
        }
    });*/

    if (errorPeso !== "") {
        showAlert(errorPeso + " Por favor, verifica los archivos antes de continuar.");
        return; // Bloquea el envío
    }

    // 1. UI: Mostrar overlay y resetear barra de progreso
    const overlay = document.getElementById('loading-overlay');
    const submitBtn = this.querySelector('button[type="submit"]');
    overlay.classList.remove('d-none');
    if (submitBtn) submitBtn.disabled = true;

    const formData = new FormData(this);
    const xhr = new XMLHttpRequest();

    // 2. RASTREO DE PROGRESO (Vital para archivos de 5MB+)
    xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
            const percentComplete = Math.round((e.loaded / e.total) * 100);
            // Si tienes un texto de porcentaje en tu overlay, actualízalo aquí:
            const statusText = overlay.querySelector('p');
            if (statusText) statusText.innerHTML = `Subiendo imágenes: ${percentComplete}%<br><span class="text-muted small">No cierres esta ventana.</span>`;
        }
    });

    // 3. MANEJO DE RESPUESTA
    xhr.onload = function() {
        if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            if (data.success) {
                window.location.href = "{{ route('concurso.gracias') }}";
            } else {
                handleError(data.message || "Error en los datos.");
            }
        } else {
            // Manejo de errores de validación (422) o servidor (500)
            const data = JSON.parse(xhr.responseText || "{}");
            handleError(data.message || "Error en el servidor.");
        }
    };

    xhr.onerror = function() {
        handleError("Error de red o conexión interrumpida.");
    };

    function handleError(msg) {
        overlay.classList.add('d-none');
        if (submitBtn) submitBtn.disabled = false;
        showAlert("Error: " + msg);
    }

    // 4. EJECUCIÓN
    xhr.open("POST", this.action, true);
    xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.send(formData);
});

document.getElementById('input-seudonimo').addEventListener('blur', function() {
    const seudonimo = this.value.trim();
    const errorDiv = document.getElementById('seudonimo-error');
    const input = this;

    if (seudonimo.length > 0) {
        // Opcional: podrías deshabilitar el botón "Siguiente" mientras consulta
        fetch("{{ route('concurso.verificarSeudonimo') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ seudonimo: seudonimo })
        })
        .then(response => response.json())
        .then(data => {
            if (data.exists) {
                errorDiv.classList.remove('d-none');
                input.classList.add('is-invalid'); // Marca de error
                input.dataset.disponible = "false"; // Guardamos el estado
            } else {
                errorDiv.classList.add('d-none');
                input.classList.remove('is-invalid');
                input.classList.add('is-valid');
                input.dataset.disponible = "true"; // Guardamos el estado
            }
        });
    }
});

document.getElementById('input-dni').addEventListener('blur', function() {
    const dni = this.value.trim();
    const errorDiv = document.getElementById('dni-error');
    const input = this;

    if (dni.length > 5) { // Validar solo si tiene un largo razonable
        fetch("{{ route('concurso.verificarDni') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ dni: dni })
        })
        .then(response => response.json())
        .then(data => {
            if (data.exists) {
                errorDiv.classList.remove('d-none');
                input.classList.add('is-invalid');
                input.dataset.disponible = "false";
            } else {
                errorDiv.classList.add('d-none');
                input.classList.remove('is-invalid');
                input.dataset.disponible = "true";
            }
        });
    }
});

// --- LÓGICA PARA MOSTRAR LA SECCIÓN DEL CONCURSO ---

document.getElementById('switchConcurso').addEventListener('change', function() {
    const seccionConcurso = document.getElementById('seccion-concurso');
    const selectCategoria = document.getElementById('select-categoria');
    
    if (this.checked) {
        // 1. Mostrar la sección con una transición suave (si usas Bootstrap)
        seccionConcurso.classList.remove('d-none');
        
        // 2. Hacer obligatoria la categoría si participa
        selectCategoria.setAttribute('required', 'required');

        // 3. Si no hay fotos cargadas aún, inicializar la primera
        if (countConcurso === 0) {
            countConcurso = 1;
            const primeraFoto = createFotoDiv(countConcurso, 'concurso', 'primary');
            document.getElementById('contenedor-fotos-concurso').appendChild(primeraFoto);
            updateConcursoCounter();
        }
        
        // Scroll suave hacia la sección abierta
        seccionConcurso.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else {
        // 4. Ocultar y limpiar si el usuario se arrepiente
        seccionConcurso.classList.add('d-none');
        selectCategoria.removeAttribute('required');
        
        // Opcional: Podrías vaciar el contenedor de fotos aquí si deseas 
        // que empiece de cero cada vez que apague/encienda el switch.
    }
});

// --- RECOMENDACIÓN PARA EL CONTADOR INICIAL ---
// Asegúrate de que tu función de actualización de contador refleje el estado real
function updateConcursoCounter() {
    const counter = document.getElementById('counter-concurso');
    if (counter) {
        counter.innerText = `(${countConcurso} de 3)`;
    }
}



</script>
@endsection