@extends('layouts.edit')

<x-app-layout>
    <x-slot name="header"></x-slot>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if ($personas->isEmpty())
        <div class="alert alert-warning" role="alert">
            No se encontraron resultados para la búsqueda.
        </div>
    @else
        <div class="py-20">
            @if (count($personas) == 0)
                <!-- Vista de una sola persona -->
                <div class="bg-white overflow-hidden shadow-2xl sm:rounded-lg p-4 max-w-7xl mx-auto my-4 border">
                    <h2 class="font-semibold mb-2 text-center">Resultados de la Búsqueda</h2>
                    <div class="container mx-auto">
                        <div class="overflow-x-auto">
                            @foreach ($personas as $persona)
                                <div class="mb-8 border border-gray-300 rounded-lg shadow-md p-4">
                                    <h3 class="text-lg font-semibold text-center text-gray-700 mb-4">
                                        Información de: {{ $persona->primer_nombre }} {{ $persona->primer_apellido }}
                                    </h3>
                                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                                        <!-- Información Personal -->
                                        <div class="p-4 border border-gray-300 rounded-lg shadow-md">
                                            <h2 class="text-xl font-semibold text-gray-800 mb-4">Información Personal</h2>
                                            <p><strong>Cédula:</strong> {{ $persona->cedula }}</p>
                                            <p><strong>Primer Nombre:</strong> {{ $persona->primer_nombre }}</p>
                                            <p><strong>Segundo Nombre:</strong> {{ $persona->segundo_nombre }}</p>
                                            <p><strong>Primer Apellido:</strong> {{ $persona->primer_apellido }}</p>
                                            <p><strong>Segundo Apellido:</strong> {{ $persona->segundo_apellido }}</p>
                                        </div>


                                        <!-- Información de Contacto -->
                                        <div class="p-4 border border-gray-300 rounded-lg shadow-md">
                                            <h2 class="text-xl font-semibold text-gray-800 mb-4">Información de Contacto</h2>
                                            <p><strong>Correo:</strong>
                                                @if (isset($persona->email))
                                                    {{ $persona->email }}
                                                @elseif (isset($persona->correo))
                                                    {{ $persona->correo }}
                                                @else
                                                    No disponible
                                                @endif
                                            </p>
                                            <p><strong>Extensión:</strong>
                                                @if (isset($persona->extension))
                                                    @if (is_array($persona->extension))
                                                        {{ implode(', ', $persona->extension) }}
                                                    @else
                                                        {{ $persona->extension }}
                                                    @endif
                                                @else
                                                    No disponible
                                                @endif
                                            </p>
                                        </div>

                                        <!-- Información de Cargo -->
                                        <div class="p-4 border border-gray-300 rounded-lg shadow-md">
                                            <h2 class="text-xl font-semibold text-gray-800 mb-4">Detalles del Cargo</h2>
                                            <p><strong>Cargo:</strong> {{ $persona->cargo ?? 'No disponible' }}</p>
                                            <p><strong>Departamento:</strong> {{ $persona->departamento ?? 'No disponible' }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="flex justify-center mt-8">
                            <x-button href="{{ route('back') }}" variant="neutral" id="btnAtras">
                                Atrás
                            </x-button>
                        </div>
                    </div>
                </div>
            @else
<!-- Vista de lista de personas -->
    <div id="resultados">
        <div class="bg-white overflow-hidden shadow-2xl sm:rounded-lg p-4 max-w-7xl mx-auto my-4 border">
            <h2 class="font-semibold mb-2 text-center">Resultados de la Búsqueda</h2>
            <div class="container mx-auto">
                <div class="overflow-x-auto">
                    <table id="tablaPersonas" class="display w-full">
                        <thead>
                            <tr>
                                <th>Información</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($personas as $persona)
                            <tr class="tarjeta">
                                <td>
                                    <div class="info-persona">
                                        <span class="nombre">
                                            {{ $persona->primer_nombre }} {{ $persona->segundo_nombre }}
                                            {{ $persona->primer_apellido }} {{ $persona->segundo_apellido }}
                                        </span>
                                        <span class="cedula">Cédula: {{ $persona->cedula }}</span>
                                    </div>
                                </td>
                                <td>
                                    <button class="btn-detalles" onclick="verDetalles('{{ $persona->cedula }}')">
                                        Ver detalles
                                    </button>
                                    <div id="detalles-{{ $persona->cedula }}" class="mt-4 hidden"></div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        <div class="flex justify-center mt-8">
            <x-button href="{{ route('back') }}" variant="neutral" id="btnAtras">
                Atrás
            </x-button>
        </div>
    </div>
</div>       
            @endif
        </div>
    @endif

</x-app-layout>

<style>
/* Ocultar las líneas de la tabla y darle el efecto de tarjetas */
#tablaPersonas {
    border-collapse: separate;
    border-spacing: 0 15px; /* Espacio entre las filas */
    width: 100%;
}

#tablaPersonas thead {
    display: none; /* Ocultamos el encabezado */
}

#tablaPersonas tbody tr.tarjeta {
    background: white;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#tablaPersonas tbody tr.tarjeta td {
    border: none;
    padding: 15px;
}

.info-persona {
    display: flex;
    flex-direction: column;
}

.nombre {
    font-weight: bold;
    font-size: 18px;
}

.cedula {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* Botón "Ver detalles" */
.btn-detalles {
    padding: 8px 15px;
    background-color: #4A90E2;
    color: white;
    border-radius: 8px;
    font-weight: bold;
    transition: background 0.3s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-top: 5px;
}

.btn-detalles:hover {
    background-color: #357ABD;
}

/* Estilo para los detalles desplegados */
.detalles td {
    padding: 15px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

.contenido-detalles {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Ajustes para DataTables */
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 10px;
}

/* Centrar la paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none !important;
    background: none !important;
    color: #4A90E2 !important;
    font-weight: bold;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    text-decoration: underline;
}
</style>

<script>
$(document).ready(function() {
    $('#tablaPersonas').DataTable({
        "paging": true,
        "searching": true,
        "ordering": false, // Quitamos el ordenamiento
        "info": false, // Ocultamos información de paginación
        "language": {
            "decimal": ",",
            "thousands": ".",
            "search": "Buscar:",
            "lengthMenu": "Mostrar _MENU_ registros",
            "zeroRecords": "No se encontraron resultados",
            "info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
            "infoEmpty": "No hay registros disponibles",
            "infoFiltered": "(filtrado de _MAX_ registros en total)",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "paginate": {
                "first": "Primero",
                "last": "Último",
                "next": "Siguiente",
                "previous": "Anterior"
            },
            "aria": {
                "sortAscending": ": activar para ordenar ascendente",
                "sortDescending": ": activar para ordenar descendente"
            },
            "emptyTable": "No hay datos disponibles en la tabla"
        }
    });
});

// Función para ver detalles
function verDetalles(cedula) {
    let detallesFila = $("#detalles-" + cedula);
    if (detallesFila.hasClass("hidden")) {
        $(".detalles").addClass("hidden"); // Ocultar otros detalles abiertos
        detallesFila.removeClass("hidden");

        // Aquí deberías hacer una petición AJAX si necesitas cargar los datos dinámicamente
        $(".contenido-detalles").html("<p>Cargando detalles...</p>");
        
        // Simulando carga de datos
        setTimeout(() => {
            $(".contenido-detalles").html("<p>Detalles cargados de " + cedula + "</p>");
        }, 1000);
    } else {
        detallesFila.addClass("hidden");
    }
}
</script>



<script>

    // Función para cargar los detalles usando AJAX
    function verDetalles(cedula) {
        var detallesDiv = document.getElementById('detalles-' + cedula);

        // Verificar si los detalles ya fueron cargados
        if (detallesDiv.classList.contains('hidden')) {
            detallesDiv.classList.remove('hidden');
            detallesDiv.innerHTML = '<p>Cargando...</p>';

            // Solicitar los detalles de la persona usando AJAX
            fetch('/persona/detalles/' + cedula)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        let p = data.data;
                        detallesDiv.innerHTML = `
                            <div class="bg-white p-4 border border-gray-300 rounded-lg shadow-md">
                                <h3 class="text-xl font-semibold text-gray-800">Detalles de la Persona</h3>
                                <p><strong>Cédula:</strong> ${p.cedula}</p>
                                <p><strong>Primer Nombre:</strong> ${p.primer_nombre}</p>
                                <p><strong>Segundo Nombre:</strong> ${p.segundo_nombre}</p>
                                <p><strong>Primer Apellido:</strong> ${p.primer_apellido}</p>
                                <p><strong>Segundo Apellido:</strong> ${p.segundo_apellido}</p>
                                <p><strong>Departamento:</strong> ${p.departamento}</p>
                                <p><strong>Cargo:</strong> ${p.cargo}</p>
                                <p><strong>Correo:</strong> ${p.email ? p.email : (p.correo ? p.correo : 'No disponible')}</p>
                                 <p><strong>Extensión:</strong> ${p.extension}</p>
                            </div>
                        `;
                    } else {
                        detallesDiv.innerHTML = `<p class="text-red-500">${data.message}</p>`;
                    }
                })
                .catch(error => {
                    detallesDiv.innerHTML = '<p class="text-red-500">Ocurrió un error al cargar los detalles.</p>';
                    console.error('Error AJAX:', error);
                });
        } else {
            // Si los detalles ya están cargados, los ocultamos
            detallesDiv.classList.add('hidden');
        }
    }
</script>