@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 Profesores</h3>
            <a href="{{ route('profesor.create') }}" class="btn btn-primary">Registrar Profesor</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>Asignatura:</h6>
                                    @foreach($asignatura as $asignatura)
                                    <div>
                                        <input type="checkbox" name="asignatura" value="{{ $asignatura->id }}" class="filter-checkbox"> {{ $asignatura->nombre }}
                                    </div>
                                    @endforeach
                                </div>
                                <div class="col-md-6">
                                    <h6>Horas Académicas:</h6>
                                    <div>
                                        <input type="number" name="horas_academicas" id="horas_academicas" placeholder="Ejemplo: 20" class="form-control">
                                    </div>

                                    <h6 class="mt-3">Turno:</h6>
                                    @foreach(['Mañana', 'Tarde', 'Noche'] as $turno)
                                    <div>
                                        <input type="checkbox" name="turno" value="{{ $turno }}" class="filter-checkbox"> {{ $turno }}
                                    </div>
                                    @endforeach

                                    <h6 class="mt-3">Género:</h6>
                                    @foreach(['Masculino', 'Femenino'] as $genero)
                                    <div>
                                        <input type="checkbox" name="genero" value="{{ $genero }}" class="filter-checkbox"> {{ $genero }}
                                    </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>Celular</th>
                            <th>Turno</th>
                            <th>Horas Académicas</th>
                            <th>Asignatura</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($silla as $profesor)
                        <tr>
                            <td>{{ $profesor->nombre }}</td>
                       
                            <td>{{ $profesor->celular }}</td>
                            <td>{{ $profesor->turno }}</td>
                            <td>{{ $profesor->horas_academicas }}</td>
                            <td>{{ $profesor->asignatura->nombre }}</td>
                            <td>
                                <div class="btn-group">
                                    <a href="{{ route('profesor.show', $profesor->id) }}" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('profesor.edit', $profesor->id) }}" class="btn btn-outline-secondary btn-sm">
                                        <i class="fas fa-pencil-alt"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

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

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

            fetch('{{ route("profesor.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(profesor => {
                        tbody.innerHTML += `
                            <tr>
                                <td>${profesor.nombre}</td>
                                <td>${profesor.apellido}</td>
                                <td>${profesor.celular}</td>
                                <td>${profesor.turno}</td>
                                <td>${profesor.horas_academicas}</td>
                                <td>${profesor.asignatura.nombre}</td>
                                <td>
                                    <div class="btn-group">
                                        <a href="/profesor/${profesor.id}" class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="/profesor/${profesor.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="7" 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