@extends('adminlte::page')

@section('title', 'Lista de Difuntos')

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
    .search-container {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
    }

    .search-container input {
        width: 100%;
        max-width: 400px;
        padding: 8px 12px;
        border-radius: 10px;
        border: 1px solid #ccc;
        outline: none;
    }

    .card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card:hover {
        transform: scale(1.03);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .pagination-custom {
        display: flex;
        list-style: none;
        padding: 0;
    }

    .pagination-custom li {
        margin: 5px;
    }

    .pagination-custom a,
    .pagination-custom span {
        padding: 10px 18px;
        border-radius: 25px;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s ease;
        border: 2px solid #007bff;
        color: #007bff;
        background-color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
    }

    .pagination-custom a:hover {
        background-color: #007bff;
        color: white;
        transform: translateY(-2px);
    }

    .pagination-custom .active span {
        background-color: #007bff;
        color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .pagination-custom .disabled span {
        background-color: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
        border: 2px solid #d6d6d6;
        box-shadow: none;
    }

    .pagination-custom a i {
        margin: 0 5px;
    }
</style>
@stop

@section('content')
<br>
<div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0">Lista de Difuntos</h4>
</div>

<!-- Formulario de búsqueda en vivo -->
<div class="search-container">
    <input type="text" id="search-input" placeholder="Buscar por nombre o apellido">
</div>

<!-- Contenedor donde se mostrarán los difuntos filtrados -->
<div id="filtered-difuntos" class="row row-cols-1 row-cols-md-6"></div>

<!-- Contenedor con la paginación de Laravel -->
<div id="paginated-difuntos">
    @if($difuntos->isEmpty())
        <p class="alert alert-warning text-center">No hay difuntos registrados.</p>
    @else
    <div class="row row-cols-1 row-cols-md-6">
        @foreach($difuntos as $DIFUNTO)
        <div class="col mb-4 difunto-card">
            <div class="card shadow-sm h-100">
                <div class="card-body p-2 d-flex flex-column justify-content-center align-items-center">
                    <div class="d-flex justify-content-center align-items-center">
                        <i class="fas fa-cross mr-2"></i>
                        <h6 class="card-text mb-0 text-center font-weight-bold">
                            {{ $DIFUNTO->nombre }} {{ $DIFUNTO->apellido_paterno }} {{ $DIFUNTO->apellido_materno }}
                        </h6>
                    </div>
<div class="btn-group mt-3">
    <button type="button" class="btn btn-outline-primary btn-sm btn-view" data-id="{{ $DIFUNTO->id }}">
        <i class="fas fa-eye"></i>
    </button>
    <button type="button" class="btn btn-outline-secondary btn-sm btn-edit" data-id="{{ $DIFUNTO->id }}">
        <i class="fas fa-edit"></i>
    </button>
</div>

                </div>
            </div>
        </div>
        @endforeach
    </div>
    @endif

    <!-- Paginación personalizada corregida -->
    @if ($difuntos->hasPages())
    <div class="pagination-container">
        <ul class="pagination-custom">
            <!-- Botón Previous -->
            @if ($difuntos->onFirstPage())
                <li class="disabled"><span><i class="fas fa-angle-left"></i> Anterior</span></li>
            @else
                <li><a href="{{ $difuntos->previousPageUrl() }}"><i class="fas fa-angle-left"></i> Anterior</a></li>
            @endif

            <!-- Verificar si hay elementos antes de recorrer -->
            @if (!empty($difuntos->links()->elements) && isset($difuntos->links()->elements[0]))
                @foreach ($difuntos->links()->elements[0] as $page => $url)
                    @if ($page == $difuntos->currentPage())
                        <li class="active"><span>{{ $page }}</span></li>
                    @else
                        <li><a href="{{ $url }}">{{ $page }}</a></li>
                    @endif
                @endforeach
            @endif

            <!-- Botón Next -->
            @if ($difuntos->hasMorePages())
                <li><a href="{{ $difuntos->nextPageUrl() }}">Siguiente <i class="fas fa-angle-right"></i></a></li>
            @else
                <li class="disabled"><span>Siguiente <i class="fas fa-angle-right"></i></span></li>
            @endif
        </ul>
    </div>
    @endif
</div>

<!-- Sección de Modales -->
@foreach($todos_difuntos as $DIFUNTO)
    @include('difunto.view', ['DIFUNTO' => $DIFUNTO])
    @include('difunto.update', ['DIFUNTO' => $DIFUNTO])
@endforeach

@stop

@section('js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('search-input');
        const filteredDifuntosContainer = document.getElementById('filtered-difuntos');
        const paginatedDifuntosContainer = document.getElementById('paginated-difuntos');

        // Obtener todos los difuntos desde Laravel
        const allDifuntos = @json($todos_difuntos);

        searchInput.addEventListener('keyup', function () {
            const searchValue = searchInput.value.toLowerCase().trim();
            filteredDifuntosContainer.innerHTML = '';

            if (searchValue === '') {
                paginatedDifuntosContainer.style.display = 'block';
                filteredDifuntosContainer.innerHTML = ''; 
                return;
            }

            paginatedDifuntosContainer.style.display = 'none';

            let filteredResults = allDifuntos.filter(difunto => {
                let fullName = `${difunto.nombre} ${difunto.apellido_paterno} ${difunto.apellido_materno}`.toLowerCase();
                return fullName.includes(searchValue);
            });

            if (filteredResults.length === 0) {
                filteredDifuntosContainer.innerHTML = '<p class="alert alert-warning text-center">No se encontraron resultados.</p>';
                return;
            }

            let htmlContent = '';
            let modalsContent = ''; // Para generar los modales dinámicamente

            filteredResults.forEach(difunto => {
                // Verificar si existen datos del nicho y del pabellón
                let pabellonNombre = difunto.nicho && difunto.nicho.pabellon ? difunto.nicho.pabellon.nombre_pabellon : 'No disponible';
                let pabellonLado = difunto.nicho && difunto.nicho.pabellon ? difunto.nicho.pabellon.lado_pabellon : 'No disponible';
                let nichoFila = difunto.nicho ? difunto.nicho.fila : 'No disponible';
                let nichoColumna = difunto.nicho ? difunto.nicho.columna : 'No disponible';

                // Construcción del HTML para los familiares
                let familiaresContent = '';
                if (difunto.familiares && difunto.familiares.length > 0) {
                    difunto.familiares.forEach(familiar => {
                        familiaresContent += `
                            <p><strong>DNI:</strong> ${familiar.dni}</p>
                            <p><strong>Nombre:</strong> ${familiar.nombre}</p>
                            <p><strong>Apellido Paterno:</strong> ${familiar.apellido_paterno}</p>
                            <p><strong>Apellido Materno:</strong> ${familiar.apellido_materno}</p>
                        `;
                    });
                } else {
                    familiaresContent = `<p>No hay solicitantes registrados.</p>`;
                }

                htmlContent += `
                    <div class="col mb-4 difunto-card">
                        <div class="card shadow-sm h-100">
                            <div class="card-body p-2 d-flex flex-column justify-content-center align-items-center">
                                <h6 class="card-text mb-0 text-center font-weight-bold">
                                    ${difunto.nombre} ${difunto.apellido_paterno} ${difunto.apellido_materno}
                                </h6>
                                <div class="btn-group mt-3">
                                    <button type="button" class="btn btn-outline-primary btn-sm btn-view" data-id="${difunto.id}">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm btn-edit" data-id="${difunto.id}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                // Agregamos el modal de vista con los detalles del nicho y solicitantes
                modalsContent += `
                    <div class="modal fade" id="view${difunto.id}" tabindex="-1" aria-labelledby="viewModalLabel${difunto.id}" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="viewModalLabel${difunto.id}">Información</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <h5>Detalles del Difunto</h5>
                                    <p><strong>Nombre:</strong> ${difunto.nombre}</p>
                                    <p><strong>DNI:</strong> ${difunto.dni}</p>
                                    <p><strong>Apellido Paterno:</strong> ${difunto.apellido_paterno}</p>
                                    <p><strong>Apellido Materno:</strong> ${difunto.apellido_materno}</p>
                                    <p><strong>Causa de Muerte:</strong> ${difunto.causa_de_muerte}</p>
                                    <p><strong>Fecha Muerte:</strong> ${difunto.fecha_muerte}</p>

                                    <h5>Detalles del Nicho</h5>
                                    <p><strong>Pabellón:</strong> ${pabellonNombre}</p>
                                    <p><strong>Lado:</strong> ${pabellonLado}</p>
                                    <p><strong>Fila:</strong> ${nichoFila}</p>
                                    <p><strong>Columna:</strong> ${nichoColumna}</p>

                                    <h5>Detalles del Solicitante</h5>
                                    ${familiaresContent}
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            });

            filteredDifuntosContainer.innerHTML = htmlContent;
            document.getElementById('modals-container').innerHTML = modalsContent; // Reemplazar los modales
        });

        // Delegación de eventos para los botones de "Ver" y "Editar"
        document.addEventListener('click', function (event) {
            if (event.target.closest('.btn-view')) {
                const btn = event.target.closest('.btn-view');
                const id = btn.getAttribute('data-id');

                if (document.getElementById(`view${id}`)) {
                    $(`#view${id}`).modal('show');
                } else {
                    console.error(`No se encontró el modal con id: view${id}`);
                }
            }

            if (event.target.closest('.btn-edit')) {
                const btn = event.target.closest('.btn-edit');
                const id = btn.getAttribute('data-id');

                if (document.getElementById(`update${id}`)) {
                    $(`#update${id}`).modal('show');
                } else {
                    console.error(`No se encontró el modal con id: update${id}`);
                }
            }
        });
    });
</script>

<!-- Contenedor donde se generarán los modales dinámicamente -->
<div id="modals-container"></div>

@stop