@extends('layouts1.app')

@section('title', 'Dashboard')

@section('content') <!-- Inicio de la sección 'content' -->
<!-- CSS y Scripts necesarios -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>

<style>
    /* Estilos personalizados */
    .table thead th {
        background-color: #f8f9fa; /* Color claro para el encabezado */
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
    }

    .table tbody td {
        vertical-align: middle; /* Centrar contenido verticalmente */
    }

    .table-hover tbody tr:hover {
        background-color: #f1f1f1; /* Fondo claro al pasar el cursor */
    }

    .table td, .table th {
        text-align: center; /* Alinear texto en el centro */
    }

    .btn-group .btn {
        margin-right: 5px; /* Espaciado entre botones */
    }

    .modal-header, .modal-footer {
        background-color: #f8f9fa;
    }

    .search-container input {
        width: 300px;
        border: 1px solid #ccc;
        padding: 8px;
        border-radius: 5px;
    }

    .btn-filters {
        background-color: #6c63ff;
        color: #fff;
        border: none;
        padding: 8px 12px;
        border-radius: 5px;
    }

    .btn-filters:hover {
        background-color: #5848c2;
    }
</style>

<div class="container mt-5">
    <div class="card shadow-sm">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h3 class="mb-0">Personal</h3>
            <a href="{{ route('personal.create') }}" class="btn btn-primary">Registrar Personal</a>
        </div>
        <div class="card-body">

            <!-- Botón de Filtros y Buscador -->
            <div class="d-flex justify-content-between mb-3">
                <button type="button" class="btn-filters" data-bs-toggle="modal" data-bs-target="#filterModal">
                    <i class="fas fa-filter"></i> Filtros
                </button>
                <div class="search-container">
                    <input type="text" id="search" placeholder="Buscar por nombre..." class="form-control" />
                </div>
            </div>

            <!-- Modal de Filtros -->
            <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="filterModalLabel">Filtros</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Cargo:</h6>
                                    @foreach(['Director', 'Secretario', 'Regente', 'Portero', 'Auxiliar', 'Niñera'] as $cargo)
                                    <div>
                                        <input type="checkbox" name="cargo" value="{{ $cargo }}" class="filter-checkbox"> {{ $cargo }}
                                    </div>
                                    @endforeach
                                </div>
                                <div class="col-md-6">
                                    <h6>Género:</h6>
                                    @foreach(['Masculino', 'Femenino'] as $genero)
                                    <div>
                                        <input type="checkbox" name="genero" value="{{ $genero }}" class="filter-checkbox"> {{ $genero }}
                                    </div>
                                    @endforeach
                                    <h6 class="mt-3">Ítem:</h6>
                                    @foreach(['Sí', 'No'] as $item)
                                    <div>
                                        <input type="checkbox" name="item" value="{{ $item }}" class="filter-checkbox"> {{ $item }}
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                            <button type="button" class="btn btn-primary" id="applyFilters">Aplicar Filtros</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabla -->
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Nombre Completo</th>
                            <th>Cargo</th>
                            <th>Género</th>
                            <th>Ítem</th>
                            <th class="text-center" style="width: 150px;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($silla as $personal)
                        <tr>
                            <td>{{ $personal->nombre }}</td>
                            <td>{{ $personal->cargo }}</td>
                            <td>{{ $personal->genero }}</td>
                            <td>{{ $personal->item }}</td>
                            <td class="text-center">
                                <a href="{{ route('personal.show', $personal->id) }}" class="btn btn-outline-primary btn-sm me-2"><i class="fas fa-eye"></i></a>
                                <a href="{{ route('personal.edit', $personal->id) }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-pencil-alt"></i></a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="mt-3">
                    {{ $silla->links('pagination::bootstrap-5') }}
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const applyFilters = () => {
            const filters = {
                cargo: Array.from(document.querySelectorAll('input[name="cargo"]:checked')).map(cb => cb.value),
                genero: Array.from(document.querySelectorAll('input[name="genero"]:checked')).map(cb => cb.value),
                item: Array.from(document.querySelectorAll('input[name="item"]:checked')).map(cb => cb.value),
                search: document.getElementById('search').value.trim(),
            };

            fetch('{{ route("personal.filter") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify(filters),
            })
            .then(response => response.json())
            .then(data => {
                const tbody = document.querySelector('table tbody');
                tbody.innerHTML = '';

                if (data.length > 0) {
                    data.forEach(personal => {
                        tbody.innerHTML += `
                            <tr>
                                <td>${personal.nombre}</td>
                                <td>${personal.cargo}</td>
                                <td>${personal.genero}</td>
                                <td>${personal.item}</td>
                                <td class="text-center">
                                    <a href="/personal/${personal.id}" class="btn btn-outline-primary btn-sm me-2"><i class="fas fa-eye"></i></a>
                                    <a href="/personal/${personal.id}/edit" class="btn btn-outline-secondary btn-sm"><i class="fas fa-pencil-alt"></i></a>
                                </td>
                            </tr>`;
                    });
                } else {
                    tbody.innerHTML = '<tr><td colspan="5" class="text-center">No se encontraron resultados.</td></tr>';
                }
            })
            .catch(error => {
                console.error('Error al aplicar filtros:', error);
            });
        };

        document.getElementById('applyFilters').addEventListener('click', applyFilters);
        document.getElementById('search').addEventListener('input', applyFilters);
    });
</script>

@endsection