@if (auth()->user()->can('Asistencias - Visor') ||
        auth()->user()->can('Asistencias - Creador') ||
        auth()->user()->can('Asistencias - Editor') ||
        auth()->user()->can('Asistencias - Eliminador'))
    @extends('layouts.app')
    @section('tituloModulo', 'ASISTENCIAS')
    @section('contenido')
        <style>
            .badge-entrada {
                background-color: #28a745;
                color: white;
            }
            .badge-salida {
                background-color: #dc3545;
                color: white;
            }
            .info-detail {
                margin-bottom: 0.5rem;
            }
            .info-detail strong {
                display: inline-block;
                min-width: 120px;
            }
            .filter-section {
                background-color: #f8f9fa;
                padding: 15px;
                border-radius: 8px;
                margin-bottom: 20px;
            }
        </style>
        <div class="card">
            <div class="card-body">
                @can('Asistencias - Creador')
                    <a href="{{ route('alumnos.validaciones') }}" class="btn btn-success mt-3 mb-3">
                        <i class="bx bxs-folder-plus"></i> Registrar asistencia
                    </a>
                @endcan
                <!-- Sección de Filtros -->
                <div class="filter-section">
                    <form action="{{ route('asistencias.index') }}" method="GET" id="formFiltros">
                        <div class="row">
                            @if ($mostrarFiltrosCompletos)
                                <!-- Búsqueda general -->
                                <div class="col-md-12 col-12">
                                    <label for="search" class="form-label">Buscar</label>
                                    <input type="text" class="form-control" id="search" name="search"
                                        placeholder="Nombre, matrícula o código..." value="{{ request('search') }}">
                                </div>
                                <!-- Filtro por Curso -->
                                @if ($cursos->isNotEmpty())
                                    <div class="col-md-2 col-12">
                                        <label for="curso" class="form-label">Curso</label>
                                        <select class="form-select" id="curso" name="curso">
                                            <option value="">Todos los cursos</option>
                                            @foreach ($cursos as $curso)
                                                <option value="{{ $curso->id }}"
                                                    {{ request('curso') == $curso->id ? 'selected' : '' }}>
                                                    {{ $curso->nombre_curs }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endif
                                <!-- Filtro por Grupo -->
                                @if ($grupos->isNotEmpty())
                                    <div class="col-md-2 col-12">
                                        <label for="grupo" class="form-label">Grupo</label>
                                        <select class="form-select" id="grupo" name="grupo">
                                            <option value="">Todos los grupos</option>
                                            @foreach ($grupos as $grupo)
                                                <option value="{{ $grupo->id }}"
                                                    {{ request('grupo') == $grupo->id ? 'selected' : '' }}>
                                                    {{ $grupo->nombre_grup }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endif
                            @endif
                            <!-- Filtros de fecha (disponibles para todos) -->
                            <div class="col-md-2 col-12">
                                <label for="fecha_inicio" class="form-label">Fecha Inicio</label>
                                <input type="date" class="form-control" id="fecha_inicio" name="fecha_inicio"
                                    value="{{ request('fecha_inicio', Carbon\Carbon::now()->startOfMonth()->format('Y-m-d')) }}">
                            </div>
                            <div class="col-md-2 col-12">
                                <label for="fecha_fin" class="form-label">Fecha Fin</label>
                                <input type="date" class="form-control" id="fecha_fin" name="fecha_fin"
                                    value="{{ request('fecha_fin', Carbon\Carbon::now()->endOfMonth()->format('Y-m-d')) }}">
                            </div>
                            <!-- Botones de acción -->
                            <div class="col-md-2 col-6 d-flex align-items-end mt-2">
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="bx bx-search"></i> Filtrar
                                </button>
                            </div>
                            @if (request()->hasAny(['search', 'curso', 'grupo', 'fecha_inicio', 'fecha_fin']))
                                <div class="col-md-2 col-6 d-flex align-items-end mt-2">
                                    <a href="{{ route('asistencias.index') }}" class="btn btn-secondary w-100">
                                        <i class="bx bx-refresh"></i> Limpiar
                                    </a>
                                </div>
                            @endif
                        </div>
                    </form>
                </div>
                <!-- Información de resultados -->
                <div class="mb-3">
                    <small class="text-muted">
                        Mostrando {{ $datos->firstItem() ?? 0 }} - {{ $datos->lastItem() ?? 0 }}
                        de {{ $datos->total() }} registros
                        @if (request('fecha_inicio') && request('fecha_fin'))
                            | Período: {{ Carbon\Carbon::parse(request('fecha_inicio'))->format('d/m/Y') }}
                            - {{ Carbon\Carbon::parse(request('fecha_fin'))->format('d/m/Y') }}
                        @else
                            | Mes actual: {{ Carbon\Carbon::now()->format('F Y') }}
                        @endif
                    </small>
                </div>
                <!-- Tabla de asistencias -->
                <table class="table table-hover">
                    <thead>
                        <tr class="text">
                            @if (!auth()->user()->hasRole('Alumno'))
                                <th data-sortable="true" scope="col">ALUMNO</th>
                            @endif
                            <th data-sortable="true" scope="col">FECHA/HORA</th>
                            @if ($mostrarFiltrosCompletos)
                                <th data-sortable="true" scope="col">REGISTRADO POR</th>
                            @endif
                            <th data-sortable="true" scope="col">TIPO</th>
                            @canany(['Asistencias - Editor', 'Asistencias - Eliminador'])
                                <th data-sortable="true" scope="col">ACCIÓN</th>
                            @endcanany
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($datos as $item)
                            @php
                                $datosAlumno = json_decode($item->datos_asis, true);
                            @endphp
                            <tr>
                                @if (!auth()->user()->hasRole('Alumno'))
                                <td data-title="ALUMNO">
                                    <div>
                                        <strong>{{ $datosAlumno['nombre_alumno'] ?? 'Sin nombre' }}</strong><br>
                                        <small class="text-muted">
                                            Mat: {{ $datosAlumno['matricula'] ?? 'N/A' }} |
                                            {{ $datosAlumno['grupo'] ?? 'Sin grupo' }}
                                        </small>
                                    </div>
                                </td>
                                @endif
                                <td data-title="FECHA/HORA">
                                    {{ Carbon\Carbon::parse($item->fecha_hora_asis)->format('d/m/Y H:i:s') }}
                                </td>
                                @if ($mostrarFiltrosCompletos)
                                    <td data-title="REGISTRADO POR">
                                        {{ $datosAlumno['usuario_registro']['nombre'] ?? 'N/A' }}
                                    </td>
                                @endif
                                <td data-title="TIPO">
                                    <span class="badge badge-{{ $item->tipo_asis }}">
                                        {{ strtoupper($item->tipo_asis) }}
                                    </span>
                                </td>

                                @canany(['Asistencias - Editor', 'Asistencias - Eliminador'])
                                    <td data-title="ACCIÓN">
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-outline-primary dropdown-toggle btn-sm"
                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                Acción <i class="mdi mdi-chevron-down"></i>
                                            </button>
                                            <div class="dropdown-menu">
                                                @can('Asistencias - Editor')
                                                    <button type="button" class="dropdown-item btn-editar"
                                                        data-codigo="{{ $item->codigo_asis }}" data-bs-toggle="modal"
                                                        data-bs-target="#modalEditar">
                                                        <i class="bx bxs-edit"></i> Editar
                                                    </button>
                                                @endcan
                                                @can('Asistencias - Eliminador')
                                                    <form action="{{ route('asistencias.delete', $item->codigo_asis) }}"
                                                        method="POST" class="form-delete d-inline">
                                                        @csrf
                                                        <button class="dropdown-item" type="submit">
                                                            <i class="bx bxs-trash"></i> Eliminar
                                                        </button>
                                                    </form>
                                                @endcan
                                            </div>
                                        </div>
                                    </td>
                                @endcanany
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ $mostrarFiltrosCompletos ? '6' : '4' }}" class="text-center">
                                    <div class="py-4">
                                        <i class="bx bx-search-alt" style="font-size: 3rem; color: #dee2e6;"></i>
                                        <p class="text-muted mt-2">No se encontraron registros de asistencia</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                <!-- Paginación -->
                <div class="d-flex justify-content-center mt-3">
                    {{ $datos->appends(request()->all())->links() }}
                </div>
            </div>
        </div>
        <!-- Modal de Edición (fuera del foreach) -->
        <div class="modal fade" id="modalEditar" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Editar Asistencia</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="formEditar" method="POST">
                        @csrf
                        <div class="modal-body">
                            <div class="row">
                                <!-- Información del alumno (solo lectura) -->
                                <div class="col-12 mb-3">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h6>Información del Alumno</h6>
                                            <div id="infoAlumno">
                                                <div class="info-detail"><strong>Nombre:</strong> <span
                                                        id="info-nombre"></span></div>
                                                <div class="info-detail"><strong>Matrícula:</strong> <span
                                                        id="info-matricula"></span></div>
                                                <div class="info-detail"><strong>Grupo:</strong> <span
                                                        id="info-grupo"></span></div>
                                                <div class="info-detail"><strong>Curso:</strong> <span
                                                        id="info-curso"></span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Campos editables -->
                                <div class="col-md-6 col-12">
                                    <label class="control-label is-required">Tipo de Asistencia</label>
                                    <select class="form-control" name="tipo" id="edit-tipo" required>
                                        <option value="entrada">Entrada</option>
                                        <option value="salida">Salida</option>
                                    </select>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label is-required">Fecha y Hora</label>
                                    <input type="datetime-local" class="form-control" name="fecha_hora"
                                        id="edit-fecha-hora" required>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success">
                                <i class="bx bx-save"></i> Actualizar
                            </button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                                <i class="bx bxs-x-circle"></i> Cerrar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Obtener referencias a los elementos
                const cursoSelect = document.getElementById('curso');
                const grupoSelect = document.getElementById('grupo');
                const fechaInicio = document.getElementById('fecha_inicio');
                const fechaFin = document.getElementById('fecha_fin');

                // Solo agregar event listeners si los elementos existen
                if (cursoSelect && grupoSelect) {
                    cursoSelect.addEventListener('change', function() {
                        const cursoId = this.value;
                        grupoSelect.innerHTML = '<option value="">Todos los grupos</option>';

                        if (cursoId) {
                            // Mostrar loading en el select
                            grupoSelect.innerHTML = '<option value="">Cargando grupos...</option>';
                            grupoSelect.disabled = true;

                            fetch(`{{ url('/asistencias/grupos-por-curso') }}/${cursoId}`)
                                .then(response => {
                                    if (!response.ok) {
                                        throw new Error('Error al cargar grupos');
                                    }
                                    return response.json();
                                })
                                .then(grupos => {
                                    grupoSelect.innerHTML = '<option value="">Todos los grupos</option>';
                                    grupos.forEach(grupo => {
                                        const option = new Option(grupo.nombre_grup, grupo.id);
                                        grupoSelect.add(option);
                                    });
                                    grupoSelect.disabled = false;
                                })
                                .catch(error => {
                                    console.error('Error cargando grupos:', error);
                                    grupoSelect.innerHTML = '<option value="">Error al cargar grupos</option>';
                                    grupoSelect.disabled = false;
                                });
                        }
                    });
                }

                // Validar fechas
                if (fechaInicio && fechaFin) {
                    fechaInicio.addEventListener('change', function() {
                        fechaFin.min = this.value;
                        if (fechaFin.value && fechaFin.value < this.value) {
                            fechaFin.value = this.value;
                        }
                    });

                    fechaFin.addEventListener('change', function() {
                        if (fechaInicio.value && this.value < fechaInicio.value) {
                            this.value = fechaInicio.value;
                        }
                    });
                }

                // Manejar clic en botón editar
                document.querySelectorAll('.btn-editar').forEach(button => {
                    button.addEventListener('click', function() {
                        const codigo = this.getAttribute('data-codigo');

                        // Limpiar formulario antes de cargar nuevos datos
                        document.getElementById('formEditar').reset();

                        // Obtener datos de la asistencia
                        fetch(`{{ url('/asistencias/get') }}/${codigo}`)
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Error al obtener datos');
                                }
                                return response.json();
                            })
                            .then(data => {
                                console.log('Datos recibidos:', data);

                                // Parsear datos_asis si viene como string
                                let datosAlumno = {};
                                if (typeof data.datos_asis === 'string') {
                                    try {
                                        datosAlumno = JSON.parse(data.datos_asis);
                                    } catch (e) {
                                        console.error('Error al parsear datos_asis:', e);
                                        datosAlumno = {};
                                    }
                                } else {
                                    datosAlumno = data.datos_asis || {};
                                }

                                // Actualizar información del alumno
                                document.getElementById('info-nombre').textContent = datosAlumno.nombre_alumno || 'N/A';
                                document.getElementById('info-matricula').textContent = datosAlumno.matricula || 'N/A';
                                document.getElementById('info-grupo').textContent = datosAlumno.grupo || 'N/A';
                                document.getElementById('info-curso').textContent = datosAlumno.curso || 'N/A';

                                // Actualizar campos del formulario
                                document.getElementById('edit-tipo').value = data.tipo_asis || 'entrada';

                                // Asignar fecha con verificación
                                if (data.fecha_hora_asis) {
                                    document.getElementById('edit-fecha-hora').value = data.fecha_hora_asis;
                                }

                                // Actualizar action del formulario
                                document.getElementById('formEditar').action = `{{ url('/asistencias/update') }}/${codigo}`;
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'No se pudieron cargar los datos de la asistencia'
                                });

                                // Cerrar el modal si hay error
                                const modal = bootstrap.Modal.getInstance(document.getElementById('modalEditar'));
                                if (modal) {
                                    modal.hide();
                                }
                            });
                    });
                });

                // Confirmación para eliminar
                document.querySelectorAll('.form-delete').forEach(form => {
                    form.addEventListener('submit', function(e) {
                        e.preventDefault();

                        Swal.fire({
                            title: '¿Está seguro?',
                            text: "Esta acción cambiará el estatus a 'Eliminado'",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Sí, eliminar',
                            cancelButtonText: 'Cancelar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                this.submit();
                            }
                        });
                    });
                });

                // Auto-submit del formulario cuando cambian los filtros (opcional)
                const formFiltros = document.getElementById('formFiltros');

            });
        </script>
    @endsection
@endif