@extends('layouts1.app')

@section('title', 'Dashboard')

@section('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-fluid 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">Unidades Educativas en la Provincia</h3>
            <a href="{{ route('unidad_educativa_provincia.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Registrar Unidad Educativa
            </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 de unidad educativa..." 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>Provincia:</h6>
                                    @foreach($provincia as $prov)
                                    <div>
                                        <input type="checkbox" name="provincia_id" value="{{ $prov->id }}" class="filter-checkbox"> {{ $prov->nombre }}
                                    </div>
                                    @endforeach
                                </div>
                                <div class="col-md-6">
                                   
                                    <div>
                                        <input type="number" name="cant_familia" id="cant_familia" placeholder="Ejemplo: 50" class="form-control" hidden>
                                    </div>
                                    <h6 class="mt-3">SIE:</h6>
                                    <div>
                                        <input type="text" name="CIE" id="CIE" placeholder="Ejemplo: 12345" class="form-control">
                                    </div>
                                </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</th>
                            <th>SIE</th>
                            <th>Cantidad de Familias</th>
                            <th>Estudiantes Masculinos</th>
                            <th>Estudiantes Femeninos</th>
                            <th>Total de Estudiantes</th>
                            <th>Provincia</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($unidadprovincias as $unidadprovincia)
                        <tr>
                            <td>{{ $unidadprovincia->nombre }}</td>
                            <td>{{ $unidadprovincia->CIE }}</td>
                            <td>{{ $unidadprovincia->cant_familia }}</td>
                            <td>{{ $unidadprovincia->cant_estudiantes_m }}</td>
                            <td>{{ $unidadprovincia->cant_estudiantes_f }}</td>
                            <td>{{ $unidadprovincia->total }}</td>
                            <td>{{ $unidadprovincia->provincia->nombre }}</td>
                            <td>
                                <div class="btn-group">
                                    <a href="{{ route('unidad_educativa_provincia.show', $unidadprovincia->id) }}" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('unidad_educativa_provincia.edit', $unidadprovincia->id) }}" class="btn btn-outline-secondary btn-sm">
                                        <i class="fas fa-pencil-alt"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Paginación -->
            <div class="mt-3">
                {{ $unidadprovincias->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
</div>

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

        fetch('{{ route("unidad_educativa_provincia.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(unidad => {
                    tbody.innerHTML += `
                        <tr>
                            <td>${unidad.nombre}</td>
                            <td>${unidad.CIE}</td>
                            <td>${unidad.cant_familia}</td>
                            <td>${unidad.cant_estudiantes_m}</td>
                            <td>${unidad.cant_estudiantes_f}</td>
                            <td>${unidad.total}</td>
                            <td>${unidad.provincia.nombre}</td>
                            <td>
                                <div class="btn-group">
                                    <a href="/unidad_educativa_provincia/${unidad.id}" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="/unidad_educativa_provincia/${unidad.id}/edit" class="btn btn-outline-secondary btn-sm">
                                        <i class="fas fa-pencil-alt"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>`;
                });
            } else {
                tbody.innerHTML = '<tr><td colspan="8" 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