@php
    $user = Auth::user();
    $isCongresoRestricted = $user->isAdminCongreso() && $user->congreso_id;
    $selectedCongresoId = old('congreso_id', $invitado->congreso_id ?? ($user->congreso_id ?? ''));
    $congresoId = $selectedCongresoId;
@endphp

    <div x-data="{
    congresoId: '{{ $selectedCongresoId }}',
    plantillas: [], // No precargar, cargar dinámicamente
    plantillasFiltradas: [],
    plantillaSeleccionada: '{{ old('plantilla_invitacion_id', $invitado->plantilla_invitacion_id ?? '') }}',
    isCongresoRestricted: {{ $isCongresoRestricted ? 'true' : 'false' }},

    init() {
        this.cargarPlantillas();
        // Observar cambios en congresoId si el campo no está deshabilitado
        if (!this.isCongresoRestricted) {
            this.$watch('congresoId', () => this.cargarPlantillas());
        }
    },
    cargarPlantillas() {
        if (!this.congresoId) {
            this.plantillasFiltradas = [];
            return;
        }
        fetch(`/api/congresos/${this.congresoId}/plantillas-invitacion`)
            .then(res => {
                if (!res.ok) {
                    throw new Error('Error al cargar plantillas. Acceso no autorizado o congreso no encontrado.');
                }
                return res.json();
            })
            .then(data => {
                this.plantillasFiltradas = data;
                if (!this.plantillasFiltradas.find(p => p.id == this.plantillaSeleccionada)) {
                    this.plantillaSeleccionada = '';
                }
            })
            .catch(error => {
                console.error(error);
                this.plantillasFiltradas = [];
                this.plantillaSeleccionada = '';
                // Opcional: mostrar un mensaje al usuario
                // alert(error.message);
            });
    }
}" x-init="init()">
@csrf
<div class="space-y-6">

    <div>
        <x-input-label for="congreso_id" value="Congreso" />
        <select id="congreso_id" name="congreso_id" x-model="congresoId"
            class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full"
            required :disabled="isCongresoRestricted">
            @if($congresos->isEmpty())
                <option value="">No hay congresos disponibles</option>
            @else
                <option value="">Selecciona un congreso</option>
                @foreach($congresos as $congresoOption)
                    <option value="{{ $congresoOption->id }}" @selected((string) $selectedCongresoId === (string) $congresoOption->id)>{{ $congresoOption->nombre }}</option>
                @endforeach
            @endif
        </select>
        @if($isCongresoRestricted)
            <input type="hidden" name="congreso_id" x-bind:value="congresoId">
        @endif
        <x-input-error class="mt-2" :messages="$errors->get('congreso_id')" />
    </div>
    <div>
        <x-input-label for="plantilla_invitacion_id" value="Plantilla de Invitación" />
        <select id="plantilla_invitacion_id" name="plantilla_invitacion_id" x-model="plantillaSeleccionada" :disabled="!congresoId || plantillasFiltradas.length === 0"
            class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full" required>
            <option value="">Selecciona una plantilla...</option>
            <template x-for="plantilla in plantillasFiltradas" :key="plantilla.id">
                <option :value="plantilla.id" x-text="plantilla.nombre_plantilla"></option>
            </template>
        </select>
        <template x-if="congresoId && plantillasFiltradas.length === 0">
            <p class="text-sm text-red-600 mt-1">No hay plantillas de invitación para este congreso.</p>
        </template>
        <x-input-error class="mt-2" :messages="$errors->get('plantilla_invitacion_id')" />
    </div>

    <hr>

    <div>
        <x-input-label for="nombre_completo" value="Nombre Completo del Invitado" />
        <x-text-input id="nombre_completo" name="nombre_completo" type="text" class="mt-1 block w-full" :value="old('nombre_completo', $invitado->nombre_completo ?? '')" required />
        <x-input-error class="mt-2" :messages="$errors->get('nombre_completo')" />
    </div>

    <div>
        <x-input-label for="email" value="Email del Invitado" />
        <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $invitado->email ?? '')" required />
        <x-input-error class="mt-2" :messages="$errors->get('email')" />
    </div>
    <div>
        <x-input-label for="cargo" value="Cargo o Puesto (Opcional)" />
        <x-text-input id="cargo" name="cargo" type="text" class="mt-1 block w-full" :value="old('cargo', $invitado->cargo ?? '')" />
        <x-input-error class="mt-2" :messages="$errors->get('cargo')" />
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <x-input-label for="sector_id" value="Sector (Opcional)" />
            <select id="sector_id" name="sector_id" class="... w-full">
                <option value="">Selecciona un sector</option>
                @foreach($sectores as $sector)
                    <option value="{{ $sector->id }}" @selected(old('sector_id', $invitado->sector_id ?? '') == $sector->id)>{{ $sector->nombre }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <x-input-label for="dependencia_id" value="Dependencia (Opcional)" />
            <select id="dependencia_id" name="dependencia_id" class="... w-full">
                <option value="">Selecciona una dependencia</option>
                @foreach($dependencias as $dependencia)
                    <option value="{{ $dependencia->id }}" @selected(old('dependencia_id', $invitado->dependencia_id ?? '') == $dependencia->id)>{{ $dependencia->nombre }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="flex items-center gap-4">
        <x-primary-button>{{ $buttonText }}</x-primary-button>
        <a href="{{ route('admin.invitados.index') }}" class="text-gray-600 hover:text-gray-900">Cancelar</a>
    </div>
</div>