@extends('layouts.edit')


<x-app-layout>
    <x-slot name="header">
    </x-slot>
    <div>
        <x-card-form :title="__('Consultar Por Departamento')" :description="__(
            'seleccione el departamento deseado de la lista para acceder y consultar la información correspondiente.',
        )" :action="route('personas.buscarPorDepartamento')" method="GET">

            <x-slot name="form">
                <div class="col-span-6 sm:col-span-4 flex items-center justify-center space-x-4">
                    <div class="flex flex-col items-center">
                        <label for="departamento" class="font-bold">Departamento:</label>
                        <div class="flex space-x-2">
                            <select id="departamento" name="departamento"
                                class="border border-gray-300 rounded-md shadow-sm w-full" required
                                onchange="setDepartamentoName(this)">
                                <option value="">{{ __('Seleccione un departamento') }}</option>
                                @foreach ($departamentos as $departamento)
                                    <option value="{{ $departamento['cod_dependencia'] ?? '' }}"
                                        data-nombre="{{ $departamento['nombre'] ?? '' }}">
                                        {{ $departamento['nombre'] ?? '' }}
                                    </option>
                                @endforeach
                            </select>
                            <!-- Campo oculto para enviar el nombre -->
                            <input type="hidden" id="nombreDepartamento" name="nombreDepartamento">
                        </div>

                    </div>
                </div>
            </x-slot>

            <x-slot name="actions">

                <x-button variant="success">Aceptar</x-button>
            </x-slot>
            @if (isset($personas) && !$personas->isEmpty())
                <ul>
                    @foreach ($personas as $persona)
                        <li>{{ $persona->nombre }} - {{ $persona->cedula }}</li>
                    @endforeach
                </ul>
            @else
                <p class="text-red-500">No se encontraron personas en el departamento seleccionado.</p>
            @endif
        </x-card-form>
    </div>
</x-app-layout>

@section('scripts')
    <script>
        // Configuración de Toastr
        toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
        };

        // Mostrar mensajes de éxito o error general (si los hay)
        @if (session('message'))
            toastr.success("{{ session('message') }}");
        @endif

        @if (session('error'))
            toastr.error("{{ session('error') }}");
        @endif

        function setDepartamentoName(select) {
            var selectedOption = select.options[select.selectedIndex];
            var nombre = selectedOption.getAttribute('data-nombre');
            document.getElementById('nombreDepartamento').value = nombre;
            console.log("Departamento seleccionado: ", nombre); // Debug
        }
    </script>