@extends('layouts.app')

@section('content')
{{-- Script de Google ReCAPTCHA --}}
<script src="https://www.google.com/recaptcha/api.js?hl=es" async defer></script>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            
            {{-- Mensaje de Éxito --}}
            @if(session('success'))
                <div class="alert alert-success shadow-sm mb-4 border-0 animate__animated animate__fadeIn">
                    <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
                </div>
            @endif

            {{-- Errores Generales (como el del SMTP que definimos en el controlador) --}}
            @if($errors->has('error'))
                <div class="alert alert-danger shadow-sm mb-4 border-0 border-start border-4 border-danger">
                    <i class="bi bi-exclamation-octagon-fill me-2"></i> {{ $errors->first('error') }}
                </div>
            @endif

            <div class="card shadow-lg border-0 overflow-hidden">
                <div class="card-header bg-dark text-white p-4 text-center" style="border-bottom: 4px solid #C9A050;">
                    <h3 class="mb-0 fw-bold"><i class="bi bi-envelope-paper me-2"></i> Consultas y Contacto</h3>
                    <p class="mb-0 opacity-75 small mt-2">
                        ¿Tenés dudas sobre las bases o dificultades en la postulación? <br>
                        Envianos tu mensaje y te responderemos por correo electrónico.
                    </p>
                </div>

                <div class="card-body p-4 p-md-5">
                    <form action="{{ route('contacto.send') }}" method="POST" id="form-contacto">
                        @csrf
                        
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-uppercase text-muted">Nombre Completo</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="bi bi-person text-primary"></i></span>
                                <input type="text" name="nombre" class="form-control border-start-0 @error('nombre') is-invalid @enderror" value="{{ old('nombre') }}" placeholder="Ej: Juan Pérez" required>
                                @error('nombre') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-uppercase text-muted">Correo Electrónico</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="bi bi-envelope text-primary"></i></span>
                                <input type="email" name="email" class="form-control border-start-0 @error('email') is-invalid @enderror" value="{{ old('email') }}" placeholder="nombre@ejemplo.com" required>
                                @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-uppercase text-muted">Motivo de la consulta</label>
                            <select name="asunto" class="form-select @error('asunto') is-invalid @enderror" required>
                                <option value="" selected disabled>Seleccioná una opción...</option>
                                <option value="Problemas técnicos en la carga" {{ old('asunto') == 'Problemas técnicos en la carga' ? 'selected' : '' }}>Problemas técnicos en la carga de fotos</option>
                                <option value="Duda sobre bases y condiciones" {{ old('asunto') == 'Duda sobre bases y condiciones' ? 'selected' : '' }}>Duda sobre bases y condiciones</option>
                                <option value="Consulta general" {{ old('asunto') == 'Consulta general' ? 'selected' : '' }}>Consulta general</option>
                                <option value="Otro" {{ old('asunto') == 'Otro' ? 'selected' : '' }}>Otro</option>
                            </select>
                            @error('asunto') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-uppercase text-muted">Mensaje o Detalle del problema</label>
                            <textarea name="mensaje" class="form-control @error('mensaje') is-invalid @enderror" rows="5" 
                                placeholder="Por favor, contanos detalladamente en qué podemos ayudarte. Mínimo 10 caracteres." required>{{ old('mensaje') }}</textarea>
                            @error('mensaje') 
                                <div class="invalid-feedback fw-bold">El mensaje debe ser más extenso para poder ayudarte mejor.</div> 
                            @enderror
                        </div>

                        {{-- Contenedor de Error para Captcha (UI más linda que el alert) --}}
                        <div id="captcha-error" class="alert alert-warning py-2 d-none mb-3 text-center border-0 shadow-sm">
                            <i class="bi bi-robot me-2"></i> <span class="small fw-bold">Por favor, confirma que no eres un robot.</span>
                        </div>

                        {{-- Google reCAPTCHA --}}
                        <div class="mb-4 d-flex justify-content-center">
                            <div class="g-recaptcha" data-sitekey="6LeyKIUsAAAAAAdxZN41-2XV4Us3Q6Gh_rh9HR_h" data-callback="clearCaptchaError"></div>
                        </div>

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

<script>
    function clearCaptchaError() {
        document.getElementById('captcha-error').classList.add('d-none');
    }

    document.getElementById('form-contacto').addEventListener('submit', function(e) {
        const errorDiv = document.getElementById('captcha-error');
        const response = grecaptcha.getResponse();
        
        if(response.length == 0) {
            e.preventDefault();
            errorDiv.classList.remove('d-none');
            errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
            return false;
        }

        const btn = document.getElementById('btn-enviar');
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Enviando consulta...';
        btn.classList.add('disabled');
        
        // Pequeño delay para asegurar el envío del token
        setTimeout(() => {
            btn.style.pointerEvents = 'none';
        }, 50);
    });
</script>

<style>
    .form-control:focus, .form-select:focus {
        border-color: #C9A050;
        box-shadow: 0 0 0 0.25rem rgba(201, 160, 80, 0.25);
    }
    .input-group-text { color: #C9A050; }
    .is-invalid { border-color: #dc3545 !important; }
</style>
{{-- 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