@extends('layouts.public') 

@section('content')
    <div class="container">
        <h2 class="destacado mb-5">Formulario para solicitar una audiencia de lobby</h2>


        <script type="application/json" id="solicitudes-audiencia-form-page-config">
            @json($solicitudesAudienciaFormPageConfig)
        </script>
        {{-- Apunta a la ruta POST pública --}}
        <!-- <form id="SolicitudAudienciaPublicaForm" method="POST" action="{{ route('publico.solicitudes.store', ['institucion' => $institucion->id]) }}"> -->
        <form id="SolicitudesAudienciaForm" method="POST" action="{{ route('publico.solicitudes.store', ['institucion' => $institucion->id]) }}">
            @csrf

            {{-- LLAMAMOS AL ARCHIVO COMPARTIDO --}}
            @include('admin.solicitudes._campos_audiencia', ['isReadonly' => false])

            <div class="form-group mt-5 text-center">
                <div class="checkbox mb-4 d-flex justify-content-center align-items-center">
                    <label class="d-flex align-items-center" style="font-size: 1.1rem;">
                        <input type="checkbox" id="politicasCheckbox" name="politicasCheckbox" value="1" style="width: 20px; height: 20px; margin-right: 10px;">
                        <a href="{{ asset('js/buenas_practicas_lobby.pdf')}}" target="_blank" class="text-primary text-decoration-none">
                            Declaro tener conocimiento del código de buenas prácticas para lobbistas
                        </a>
                    </label>
                </div>
                <div id="mensajePolitica" class="text-danger d-none mb-4">
                    <small>Debe aceptar las políticas para continuar.</small>
                </div>

                <!-- {{-- 2. Cloudflare Turnstile --}} -->
                @if(isset($captchaEnabled) && $captchaEnabled)
                    <div class="d-flex justify-content-center mb-4">
                        <div class="cf-turnstile" data-sitekey="{{ $captchaSiteKey }}"></div>
                    </div>
                    <script src="{{ $captchaScriptUrl }}" async defer></script>
                @endif

                <!-- {{-- 3. Botones de Acción --}} -->
                <div class="mt-4 mb-5">
                    {{-- Llamamos a la función global del JS legacy para el submit --}}
                    <button type="button" id="btnSolicitar" class="btn btn-success btn-lg px-5 me-3" onclick="window.SolicitudesAudienciaAdmin.submitForm()">
                        Solicitar Audiencia
                    </button>
                    <a href="{{ url('/') }}" class="btn btn-outline-secondary btn-lg px-4">
                        Cancelar
                    </a>
                </div>
            </div>
        </form>

        @include ('admin.solicitudes._invitados')
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const selectMedio = document.getElementById('medio');
        const divTelefono = document.getElementById('telefonoDiv');
        const divEmail = document.getElementById('emailDiv');
        const inputTelefono = document.getElementById('mediotelefono');
        const inputEmail = document.getElementById('medioemail');


        function actualizarCamposContacto() {
            if (!selectMedio) return;
            
            // Ocultamos ambos por defecto
            divTelefono.classList.add('d-none');
            divEmail.classList.add('d-none');
            inputTelefono.removeAttribute('required');
            inputEmail.removeAttribute('required');

            // Mostramos el seleccionado y lo hacemos obligatorio
            if (selectMedio.value === 'telefono') {
                divTelefono.classList.remove('d-none');
                inputTelefono.setAttribute('required', 'required');
            } else if (selectMedio.value === 'email') {
                divEmail.classList.remove('d-none');
                inputEmail.setAttribute('required', 'required');
            }
        }

        // Ejecutar al cambiar el selector
        if (selectMedio) {
            selectMedio.addEventListener('change', actualizarCamposContacto);
            // Ejecutar al cargar la página por si hay un valor "old()" de Laravel
            actualizarCamposContacto();
        }
    });
</script>

@endpush

@push('audiencia-publica')
    <script src="{{ asset('js/solicitud-audiencia.js') }}"></script>
@endpush