@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">Lista de Unidades Educativas en la Ciudad</h3>
            <a href="{{ route('unidad_educativa_ciudad.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>Distrito:</h6>
                        <div>
                            <input type="text" name="distrito" id="distrito" placeholder="Ejemplo: Distrito 1" class="form-control">
                        </div>
                        <h6 class="mt-3">CIE:</h6>
                        <div>
                            <input type="text" name="CIE" id="CIE" placeholder="Ejemplo: 12345" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-6">
                   
                        <div>
                            <input type="number" name="total_estudiantes" id="total_estudiantes" placeholder="Ejemplo: 100" class="form-control" hidden>
                        </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>Distrito</th>
                            <th>SIE</th>
                            <th>Cantidad de Familias</th>
                            <th>Cantidad de Estudiantes Masculinos</th>
                            <th>Cantidad de Estudiantes Femeninos</th>
                            <th>Total de Estudiantes</th>
                            <th>Ciudad</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($unidadciudades as $unidadciudad)
                            <tr>
                                <td>{{ $unidadciudad->nombre }}</td>
                                <td>{{ $unidadciudad->distrito }}</td>
                                <td>{{ $unidadciudad->CIE }}</td>
                                <td>{{ $unidadciudad->cant_familia }}</td>
                                <td>{{ $unidadciudad->cant_estudiantes_m }}</td>
                                <td>{{ $unidadciudad->cant_estudiantes_f }}</td>
                                <td>{{ $unidadciudad->total }}</td>
                                <td>{{ $unidadciudad->ciudad->nombre }}</td>
                                <td>
                                    <div class="btn-group">
                                        <a href="{{ route('unidad_educativa_ciudad.show', $unidadciudad->id) }}" class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('unidad_educativa_ciudad.edit', $unidadciudad->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">
                {{ $unidadciudades->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const applyFilters = () => {
        const filters = {
            total_estudiantes: document.getElementById('total_estudiantes').value.trim(),
            distrito: document.getElementById('distrito').value.trim(),
            CIE: document.getElementById('CIE').value.trim(),
            search: document.getElementById('search').value.trim(),
        };

        fetch('{{ route("unidad_educativa_ciudad.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.distrito}</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.ciudad.nombre}</td>
                            <td>
                                <div class="btn-group">
                                    <a href="/unidad_educativa_ciudad/${unidad.id}" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="/unidad_educativa_ciudad/${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="9" 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