@extends('layouts.app')

@section('content')
{{-- Forzamos la carga del JS de Google al principio para evitar errores de renderizado --}}
<script src="https://www.google.com/recaptcha/api.js?hl=es" async defer></script>

<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.8); z-index: 9999;">
    <div class="text-center">
        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
        <p class="mt-3 fw-bold text-dark">Enviando postulación y archivos...<br><span class="text-muted small">Por favor, no cierres la ventana.</span></p>
    </div>
</div>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-9 col-lg-8">
            
            {{-- Errores de Validación de Laravel --}}
            @if ($errors->any())
                <div class="alert alert-danger shadow-sm mb-4">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="card shadow-lg border-0">
                <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') }}" alt="50 Años" class="mb-2" style="max-height: 80px; filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5));">
                    <h2 class="mb-0 fw-bold">Formulario de Inscripción</h2>
                    <p class="mb-0 opacity-75" style="color: #C9A050;">Concurso Fotográfico Río Colorado</p>
                </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
                        
                        <h5 class="text-primary fw-bold mb-3"><i class="bi bi-person-fill"></i> Datos Personales</h5>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small">Nombre(s)</label>
                                <input type="text" name="nombres" class="form-control" value="{{ old('nombres') }}" placeholder="Ej: Juan Ignacio" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small">Apellido(s)</label>
                                <input type="text" name="apellidos" class="form-control" value="{{ old('apellidos') }}" placeholder="Ej: Pérez" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small">Email de Contacto</label>
                                <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="nombre@ejemplo.com" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small">Celular (Opcional)</label>
                                <input type="text" name="celular" class="form-control" value="{{ old('celular') }}" placeholder="Ej: 291 1234567">
                            </div>
                        </div>

                        <hr class="my-4">
                        
                        <h5 class="text-primary fw-bold mb-3"><i class="bi bi-camera-fill"></i> Tus Fotografías</h5>
                        
                        <div class="mb-4">
                            <label class="form-label fw-bold small">Categoría de Participación</label>
                            <select name="categoria" id="categoriaSelect" class="form-select border-2">
                                <option value="fotografia" {{ old('categoria') == 'fotografia' ? 'selected' : '' }}>Fotografía Actual (Máximo 5)</option>
                                <option value="historica" {{ old('categoria') == 'historica' ? 'selected' : '' }}>Archivo Histórico (Máximo 15)</option>
                            </select>
                            <div class="alert alert-info py-2 mt-2 border-0 small" id="infoCategoria">
                                <i class="bi bi-info-circle-fill me-1"></i> Puedes subir hasta 5 fotografías en esta categoría.
                            </div>
                        </div>

                        {{-- Contenedor de fotos dinámicas --}}
                        <div id="contenedor-fotos">
                            <div class="foto-item card bg-light mb-4 border-dashed position-relative shadow-sm">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-md-5 mb-2">
                                            <label class="form-label small fw-bold text-uppercase text-primary"><i class="bi bi-image me-1"></i> 1. Seleccionar Imagen</label>
                                            <input type="file" name="fotos[]" class="form-control" accept="image/jpeg,image/png" required>
                                        </div>
                                        <div class="col-md-7 mb-2">
                                            <label class="form-label small fw-bold text-uppercase">Historia o detalle</label>
                                            <textarea name="detalles[]" class="form-control" rows="2" placeholder="Lugar, fecha aproximada o qué representa..."></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center">
                            <button type="button" id="btn-agregar-foto" class="btn btn-outline-primary btn-sm mb-4 px-4 fw-bold">
                                <i class="bi bi-plus-circle me-1"></i> Agregar otra foto
                            </button>
                        </div>

                        <div class="mb-4 p-3 border rounded bg-light">
                            <label class="form-label fw-bold small text-muted"><i class="bi bi-file-earmark-pdf"></i> Autorización de Menores (Solo si corresponde)</label>
                            <input type="file" name="autorizacion_menores" class="form-control form-control-sm" accept="image/*,application/pdf">
                            <div class="form-text x-small">Si en las fotos aparecen menores, adjuntá el permiso escaneado de los tutores.</div>
                        </div>

                        <div class="form-check mb-4 p-3 border rounded shadow-sm bg-white">
                            <input type="checkbox" name="acepta_bases" class="form-check-input ms-0 me-2" id="checkBases" required>
                            <label class="form-check-label small" for="checkBases">
                                Declaro que soy autor de las obras y acepto las 
                                <a href="{{ asset('docs/bases_y_condiciones.pdf') }}" target="_blank" class="fw-bold text-primary text-decoration-none">
                                    Bases y Condiciones <i class="bi bi-box-arrow-up-right small"></i>
                                </a> del concurso.
                            </label>
                        </div>

                        <div class="mb-4 d-flex justify-content-center">
                            {{-- Renderizado manual del captcha con tu SITE_KEY --}}
                            <div class="g-recaptcha" data-sitekey="6LdIUKgaAAAAAPDoRFbU6Am-N75DobUlmx3GePye"></div>
                        </div>

                        <div class="d-grid">
                            <button type="submit" id="btn-submit" class="btn btn-primary btn-lg py-3 shadow fw-bold border-2 text-uppercase">
                                <i class="bi bi-send-fill me-2"></i> Enviar mi Postulación
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .border-dashed { border: 2px dashed #C9A050 !important; background-color: #fffdf9 !important; }
    .btn-remove-foto { 
        position: absolute; 
        top: -10px; 
        right: -10px; 
        border-radius: 50%; 
        width: 32px; 
        height: 32px; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        z-index: 10;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    .foto-item:hover { border-color: #1a1a1a !important; }
    .x-small { font-size: 0.75rem; }
</style>

<script>
    const contenedor = document.getElementById('contenedor-fotos');
    const btnAgregar = document.getElementById('btn-agregar-foto');
    const categoriaSelect = document.getElementById('categoriaSelect');
    const infoCategoria = document.getElementById('infoCategoria');
    const form = document.getElementById('form-inscripcion');
    const loadingOverlay = document.getElementById('loading-overlay');
    
    let contadorFotos = 1;

    // Validación y Bloqueo de envío
    form.addEventListener('submit', function(e) {
        // Verificar reCAPTCHA
        const response = grecaptcha.getResponse();
        
        if(response.length == 0) {
            e.preventDefault();
            alert("Por favor, marca la casilla 'No soy un robot' antes de continuar.");
            return false;
        }

        // Si el captcha está OK, procedemos
        loadingOverlay.classList.remove('d-none');
        
        // Un pequeño delay para que el navegador procese el token antes de deshabilitar el botón
        setTimeout(() => {
            document.getElementById('btn-submit').disabled = true;
        }, 100);
    });

    btnAgregar.addEventListener('click', function() {
        const maxFotos = (categoriaSelect.value === 'fotografia') ? 5 : 15;
        
        if (contadorFotos < maxFotos) {
            contadorFotos++;
            
            const div = document.createElement('div');
            div.className = 'foto-item card bg-light mb-4 border-dashed position-relative shadow-sm';
            div.innerHTML = `
                <button type="button" class="btn btn-danger btn-sm btn-remove-foto" title="Quitar esta foto"><i class="bi bi-trash"></i></button>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-5 mb-2">
                            <label class="form-label small fw-bold text-uppercase"><i class="bi bi-image me-1"></i> ${contadorFotos}. Seleccionar Imagen</label>
                            <input type="file" name="fotos[]" class="form-control" accept="image/jpeg,image/png" required>
                        </div>
                        <div class="col-md-7 mb-2">
                            <label class="form-label small fw-bold text-uppercase">Historia o detalle</label>
                            <textarea name="detalles[]" class="form-control" rows="2" placeholder="Lugar, fecha o breve reseña..."></textarea>
                        </div>
                    </div>
                </div>
            `;
            contenedor.appendChild(div);

            div.querySelector('.btn-remove-foto').addEventListener('click', function() {
                div.remove();
                contadorFotos--;
                actualizarEstadoBoton();
                renumerarFotos();
            });

            actualizarEstadoBoton();
        }
    });

    function actualizarEstadoBoton() {
        const maxFotos = (categoriaSelect.value === 'fotografia') ? 5 : 15;
        if (contadorFotos >= maxFotos) {
            btnAgregar.classList.add('disabled');
            btnAgregar.innerText = "Límite de fotos alcanzado";
        } else {
            btnAgregar.classList.remove('disabled');
            btnAgregar.innerHTML = '<i class="bi bi-plus-circle me-1"></i> Agregar otra foto';
        }
    }

    function renumerarFotos() {
        const labels = contenedor.querySelectorAll('.foto-item label:first-child');
        let index = 1;
        labels.forEach((label) => {
            if (label.innerText.includes('SELECCIONAR')) {
                label.innerHTML = `<i class="bi bi-image me-1"></i> ${index}. Seleccionar Imagen`;
                index++;
            }
        });
    }

    categoriaSelect.addEventListener('change', () => {
        if(categoriaSelect.value === 'fotografia') {
            infoCategoria.innerHTML = '<i class="bi bi-info-circle-fill me-1"></i> <strong>Fotografía Actual:</strong> Puedes subir hasta 5 fotografías.';
        } else {
            infoCategoria.innerHTML = '<i class="bi bi-info-circle-fill me-1"></i> <strong>Archivo Histórico:</strong> Puedes subir hasta 15 fotografías.';
        }
        actualizarEstadoBoton();
    });
</script>

{{-- FOOTER --}}
<footer class="pt-5 mt-5 text-muted border-top text-center pb-5 bg-light">
    <div class="container">
        <div class="mb-4">
            <img src="{{ asset('img/logo_coirco.png') }}" alt="COIRCO" style="max-height: 80px; filter: grayscale(100%); opacity: 0.6;">
        </div>
        <p class="mb-1 fw-bold">Comité Interjurisdiccional del Río Colorado (COIRCO)</p>
        <p class="small mb-0">&copy; 2026 - Comisión Organizadora del 50 Aniversario</p>
    </div>
</footer>
@endsection