@extends('layouts.app')

@section('title', 'Estudiantes - CampusDocs')

@section('content')
<div class="container-fluid py-4 students-container">

    <div class="card mb-4 shadow-sm border-0">
        <div class="card-body">
            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-3">
                <div>
                    <h2 class="card-title mb-1">
                        <i class="fas fa-user-graduate me-2 text-primary"></i>Directorio de Estudiantes
                    </h2>
                    <p class="card-text text-muted mb-0">Gestione todos los estudiantes y sus estados de acceso.</p>
                </div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-success text-nowrap" data-bs-toggle="modal"
                        data-bs-target="#modalCargaMasiva">
                        <i class="fas fa-file-import me-1"></i> Carga Masiva
                    </button>
                    <a href="{{ route('estudiantes_crud.create') }}" class="btn btn-primary text-nowrap">
                        <i class="fas fa-user-plus me-1"></i> Añadir Manual
                    </a>
                </div>
            </div>

            <form method="GET" action="{{ route('estudiantes_crud.index') }}" id="filterForm" class="bg-light p-3 rounded border">
                <div class="row g-3">
                    <div class="col-12 col-md-4">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-graduation-cap me-1"></i> Carrera</label>
                        <select name="carrera" class="form-select form-select-sm border-secondary" onchange="document.getElementById('filterForm').submit()">
                            @if(!empty(session('user_context')['is_admin']))
                                <option value="todas" {{ $carreraSeleccionada === 'todas' ? 'selected' : '' }}>Todas las carreras</option>
                            @endif
                            @foreach($carrerasDisponibles as $carrera)
                                <option value="{{ $carrera }}" {{ $carreraSeleccionada === $carrera ? 'selected' : '' }}>
                                    {{ $carrera }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 col-md-4">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-toggle-on me-1"></i> Estado de Acceso</label>
                        <select name="estado" class="form-select form-select-sm border-secondary" onchange="document.getElementById('filterForm').submit()">
                            <option value="habilitados" {{ $estadoSeleccionado === 'habilitados' ? 'selected' : '' }}>Habilitados (Activos)</option>
                            <option value="deshabilitados" {{ $estadoSeleccionado === 'deshabilitados' ? 'selected' : '' }}>Deshabilitados (Suspendidos)</option>
                            <option value="todos" {{ $estadoSeleccionado === 'todos' ? 'selected' : '' }}>Mostrar Todos</option>
                        </select>
                    </div>

                    <div class="col-12 col-md-4">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-server me-1"></i> Tipo de Ingreso</label>
                        <select name="origen" class="form-select form-select-sm border-secondary" onchange="document.getElementById('filterForm').submit()">
                            <option value="todos" {{ $origenSeleccionado === 'todos' ? 'selected' : '' }}>Todos los orígenes</option>
                            <option value="ucampus" {{ $origenSeleccionado === 'ucampus' ? 'selected' : '' }}>Sincronización Ucampus</option>
                            <option value="manual" {{ $origenSeleccionado === 'manual' ? 'selected' : '' }}>Ingreso Manual</option>
                        </select>
                    </div>
                </div>
            </form>
            
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body p-3">
            <div class="table-responsive">
                <table id="estudiantesManualesTable" class="table table-hover table-striped align-middle" style="width:100%">
                    <thead class="table-light">
                        <tr>
                            <th>RUT</th>
                            <th>Nombres</th>
                            <th>Apellidos</th>
                            <th>Carrera</th>
                            <th class="text-center">Origen</th>
                            <th class="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($estudiantes as $est)
                        @php 
                            // Asumimos que si es null, es activo (1)
                            $esActivo = $est->Activo ?? 1; 
                            $rutFormateado = $est->getRutFormateadoAttribute();
                        @endphp
                        <tr>
                            <td class="text-muted fw-semibold">{{ $rutFormateado }}</td>
                            <td class="fw-bold">{{ $est->Nombres }}</td>
                            <td>{{ $est->Apellidos }}</td>
                            <td>{{ $est->Carrera }}</td>
                            <td class="text-center">
                                @if($est->TipoEstudiante === 'Sin registro')
                                    <span class="badge bg-warning text-dark" title="Ingresado manualmente">
                                        <i class="fas fa-hand-paper me-1"></i> Manual
                                    </span>
                                @else
                                    <span class="badge bg-info text-dark" title="Sincronizado desde Ucampus">
                                        <i class="fas fa-sync me-1"></i> Ucampus
                                    </span>
                                @endif
                            </td>
                            <td class="text-center">
                                <div class="d-flex justify-content-center align-items-center gap-2">
                                    <a href="{{ route('perfil', ['rut' => encrypt($rutFormateado)]) }}" 
                                       class="btn btn-sm btn-primary" 
                                       title="Ver Ficha del Estudiante">
                                        <i class="fas fa-eye me-1"></i> Ficha
                                    </a>

                                    <button class="btn btn-sm btn-toggle-activo {{ $esActivo ? 'btn-success' : 'btn-danger' }}" 
                                            data-id="{{ $est->idEstudianteCarrera }}" 
                                            data-activo="{{ $esActivo ? 1 : 0 }}"
                                            style="width: 120px;">
                                        <i class="fas {{ $esActivo ? 'fa-toggle-on' : 'fa-toggle-off' }} me-1"></i>
                                        <span class="btn-text">{{ $esActivo ? 'Habilitado' : 'Deshabilitado' }}</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalCargaMasiva" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fas fa-file-import me-2"></i>Carga Masiva de Estudiantes</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    id="btnCloseModalMasivo"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info small">
                    <i class="fas fa-info-circle me-2"></i> Copia una columna de RUTs desde tu Excel y pégala aquí (uno
                    por línea). El sistema limpiará los puntos y guiones automáticamente.
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Carrera por defecto</label>
                        <select id="carreraMasiva" class="form-select mb-3">
                            @foreach ($carrerasDisponibles as $c)
                                <option value="{{ $c }}">{{ $c }}</option>
                            @endforeach
                        </select>

                        <label class="form-label fw-bold">Lista de RUTs</label>
                        <textarea id="listaRutsMasivos" class="form-control font-monospace" rows="8"
                            placeholder="Ejemplo:&#10;19.773.760-3&#10;20123456K&#10;09.123.456-0"></textarea>
                        <div class="mt-3">
                            <button type="button" class="btn btn-success w-100" id="btnIniciarCarga">
                                <i class="fas fa-play me-1"></i> Iniciar Importación
                            </button>
                        </div>
                    </div>

                    <div class="col-md-6 border-start">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="form-label fw-bold mb-0">Progreso</label>
                            <span id="progresoTexto" class="badge bg-secondary">0 / 0</span>
                        </div>
                        <div class="progress mb-3" style="height: 20px;">
                            <div id="barraProgreso"
                                class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                                role="progressbar" style="width: 0%;"></div>
                        </div>

                        <label class="form-label fw-bold">Registro de Operaciones</label>
                        <div id="logResultados" class="border rounded bg-light p-2"
                            style="height: 200px; overflow-y: auto; font-size: 0.85rem;">
                            <div class="text-muted text-center mt-5">Los resultados aparecerán aquí...</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar y Recargar
                    Tabla</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        
        // 1. Inicializar DataTable
        $('#estudiantesManualesTable').DataTable({
            language: {
                url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json'
            },
            pageLength: 10,
            responsive: true,
            ordering: true,
            order: [[1, 'asc']] // Ordenar por Nombres
        });

        // 2. Token CSRF global
        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

        // 3. Evento AJAX para el botón Toggle
        $('#estudiantesManualesTable tbody').on('click', '.btn-toggle-activo', function() {
            const btn = $(this);
            const idEstudiante = btn.data('id');
            
            // Bloqueamos el botón para evitar doble clic
            btn.prop('disabled', true);
            
            // Ícono de carga visual
            const icon = btn.find('i');
            const originalIconClass = icon.attr('class');
            icon.attr('class', 'fas fa-spinner fa-spin me-1');

            $.ajax({
                url: "{{ route('estudiantes_crud.toggle') }}",
                type: 'POST',
                data: {
                    _token: csrfToken,
                    id: idEstudiante
                },
                success: function(response) {
                    if (response.success) {
                        // Actualizar UI del botón según el nuevo estado
                        if (response.activo) {
                            btn.removeClass('btn-danger').addClass('btn-success');
                            icon.attr('class', 'fas fa-toggle-on me-1');
                            btn.find('.btn-text').text('Habilitado');
                            btn.data('activo', 1);
                        } else {
                            btn.removeClass('btn-success').addClass('btn-danger');
                            icon.attr('class', 'fas fa-toggle-off me-1');
                            btn.find('.btn-text').text('Deshabilitado');
                            btn.data('activo', 0);
                        }

                        // SweetAlert que se cierra solo en 1.5 segundos
                        Swal.fire({
                            icon: response.activo ? 'success' : 'warning',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500,
                            toast: true,
                            position: 'top-end'
                        });
                    }
                },
                error: function() {
                    icon.attr('class', originalIconClass); // Restaurar ícono si falla
                    Swal.fire({
                        icon: 'error',
                        title: 'Error de conexión',
                        text: 'No se pudo cambiar el estado. Inténtalo de nuevo.',
                        showConfirmButton: false,
                        timer: 2000
                    });
                },
                complete: function() {
                    btn.prop('disabled', false);
                }
            });
        });

    });
    
    document.addEventListener('DOMContentLoaded', function() {
            const btnIniciar = document.getElementById('btnIniciarCarga');
            const txtRuts = document.getElementById('listaRutsMasivos');
            const selectCarrera = document.getElementById('carreraMasiva');
            const barraProgreso = document.getElementById('barraProgreso');
            const progresoTexto = document.getElementById('progresoTexto');
            const logResultados = document.getElementById('logResultados');
            const btnCloseModal = document.getElementById('btnCloseModalMasivo');

            // Token CSRF
            const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

            btnIniciar.addEventListener('click', async function() {
                // Obtener y limpiar la lista (separar por salto de línea y quitar vacíos)
                const rawRuts = txtRuts.value.split(/\r?\n/).map(r => r.trim()).filter(r => r !== '');

                if (rawRuts.length === 0) {
                    Swal.fire('Atención', 'Debes ingresar al menos un RUT.', 'warning');
                    return;
                }

                // Bloquear UI
                btnIniciar.disabled = true;
                txtRuts.disabled = true;
                selectCarrera.disabled = true;
                btnCloseModal.disabled = true;
                logResultados.innerHTML = ''; // Limpiar log

                const total = rawRuts.length;
                let exitosos = 0;
                let fallidos = 0;

                // Procesar secuencialmente para no saturar la API
                for (let i = 0; i < total; i++) {
                    const rutActual = rawRuts[i];
                    const progreso = Math.round(((i + 1) / total) * 100);

                    // Actualizar barra
                    barraProgreso.style.width = progreso + '%';
                    progresoTexto.textContent = `${i + 1} / ${total}`;

                    try {
                        const response = await fetch("{{ route('estudiantes_crud.masivo') }}", {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': csrfToken
                            },
                            body: JSON.stringify({
                                rut: rutActual,
                                carrera_fallback: selectCarrera.value
                            })
                        });

                        const result = await response.json();

                        // Agregar al log visual
                        let icon = '';
                        let colorClass = '';

                        if (result.status === 'success') {
                            icon = '<i class="fas fa-check-circle text-success"></i>';
                            colorClass = 'text-success fw-bold';
                            exitosos++;
                        } else if (result.status === 'exists') {
                            icon = '<i class="fas fa-info-circle text-primary"></i>';
                            colorClass = 'text-primary';
                        } else {
                            icon = '<i class="fas fa-exclamation-triangle text-danger"></i>';
                            colorClass = 'text-danger';
                            fallidos++;
                        }

                        logResultados.insertAdjacentHTML('afterbegin',
                            `<div class="border-bottom py-1">${icon} <strong>${rutActual}</strong>: <span class="${colorClass}">${result.message}</span></div>`
                            );

                    } catch (error) {
                        logResultados.insertAdjacentHTML('afterbegin',
                            `<div class="border-bottom py-1"><i class="fas fa-times-circle text-danger"></i> <strong>${rutActual}</strong>: <span class="text-danger">Error de servidor</span></div>`
                            );
                        fallidos++;
                    }
                }

                // Desbloquear UI al terminar
                btnIniciar.disabled = false;
                btnIniciar.innerHTML = '<i class="fas fa-redo me-1"></i> Importar otra lista';
                txtRuts.disabled = false;
                txtRuts.value = '';
                selectCarrera.disabled = false;
                btnCloseModal.disabled = false;

                Swal.fire('Proceso Terminado',
                    `Se procesaron ${total} RUTs.<br>Importados/Actualizados: ${exitosos}<br>Fallidos o No encontrados: ${fallidos}`,
                    'info');

                // Al cerrar el modal, recargar la página para ver la tabla actualizada
                document.getElementById('modalCargaMasiva').addEventListener('hidden.bs.modal',
                    function() {
                        window.location.reload();
                    });
            });
        });
</script>
@endpush