@extends('layouts.edit')
<x-app-layout>
    <x-slot name="header"></x-slot>

    @if ($personas->isEmpty())
        <div class="py-4">

            <div class="alert alert-warning" role="alert">
                No se encontraron resultados para la búsqueda.
            </div>
        </div>
    @else
        <div class="py-20"> <!-- Cambié py-12 por py-4 -->
            <div class="bg-white overflow-hidden shadow-2xl sm:rounded-lg p-4 max-w-7xl mx-auto my-4 border">
                <!-- Cambié p-8 por p-4 y my-8 por my-4 -->
                <h4 class="text font-semibold mb-4 text-center">
                    {{ $nombreDepartamento }}
                </h4>
                <!-- Cambié mb-4 por mb-2 -->
                <div class="container mx-auto">
                    <!-- Tabla de Resultados -->
                    <div class="overflow-x-auto">
                        <div class="overflow-x-auto">
                            {{-- regresar si se ve mal --}}
                            <table id="TableUser">
                                <thead>
                                    <tr class="bg-gray-100 border-b">
                                        <!-- Columnas de la tabla -->
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-700">Cédula</th>
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-700">Nombres</th>
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-700">Apellidos</th>
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-700">Correo</th>
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-700">extensión</th>
                                        <th class="py-2 px-4 text-left text-sm font-medium text-gray-700">Cargo</th>

                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($personas as $persona)
                                        <tr class="border-b">
                                            <td class="py-2 px-4 text-sm text-gray-700">
                                                {{ is_string($persona['cedula']) ? $persona['cedula'] : 'No disponible' }}
                                            </td>
                                            <td class="py-2 px-4 text-sm text-gray-700">
                                                {{ is_string($persona['primer_nombre']) ? $persona['primer_nombre'] : 'No disponible' }}
                                                {{ is_string($persona['segundo_nombre']) ? $persona['segundo_nombre'] : '' }}
                                            </td>
                                            <td class="py-2 px-4 text-sm text-gray-700">
                                                {{ is_string($persona['primer_apellido']) ? $persona['primer_apellido'] : 'No disponible' }}
                                                {{ is_string($persona['segundo_apellido']) ? $persona['segundo_apellido'] : '' }}
                                            </td>
                                            <td class="py-2 px-4 text-sm text-gray-700">
                                                {{ is_string($persona['email']) ? $persona['email'] : 'No disponible' }}
                                            </td>
                                            <td class="py-2 px-4 text-sm text-gray-700">
                                                {{ is_string($persona['telefono_oficina']) ? $persona['telefono_oficina'] : 'No disponible' }}
                                            </td>
                                            <td class="py-2 px-4 text-sm text-gray-700">
                                                {{ is_string($persona['descripcion_cargo']) ? $persona['descripcion_cargo'] : 'No asignado' }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="py-4">
                    <div class="flex space-x-4 mt-4">
                        <x-button href="{{ route('department.search-department') }}" variant="neutral" id="btnAtras">
                            Atrás
                        </x-button>
                        <a href="{{ route('export.pdf', ['departamento' => $codigoDepartamento,'nombreDepartamento' => $nombreDepartamento]) }}"
                            class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
                            Descargar PDF
                        </a>

                        <a href="{{ route('export.excel', ['departamento' => $codigoDepartamento,'nombreDepartamento' => $nombreDepartamento]) }}"
                            class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
                            Descargar Excel
                        </a>
                    </div>
                </div>
            </div>
        </div>

    @endif
</x-app-layout>

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {
        $('#TableUser').DataTable({
            "pageLength": 20,
            "lengthMenu": [10, 20, 50, 100],
            "responsive": true, // Habilita la opción responsive
            "language": {
                "emptyTable": "No hay datos disponibles en la tabla",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                "infoEmpty": "Mostrando 0 a 0 de 0 registros",
                "lengthMenu": "Mostrar _MENU_ registros por página",
                "loadingRecords": "Cargando...",
                "search": "Buscar:",
                "paginate": {
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            }
        });
    });
</script>

<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

    @if ($errors->any())
        @foreach ($errors->all() as $error)
            toastr.error("{{ $error }}");
        @endforeach
    @endif
</script>