@extends('layouts.app')

@section('styles')
    {{-- estilos específicos de students --}}
    <link rel="stylesheet" href="{{ asset('css/students.css') }}">
    <script src="{{ asset('js/upload-modal-index.js') }}"></script>
@endsection

@section('content')
    <div class="container-fluid py-4 students-container">
        {{-- Usamos los partials que compartiste (students.*) --}}
        @include('students.partials.header')
        @include('students.partials.filters')
        <div aria-live="polite" aria-atomic="true" class="position-fixed top-0 end-0 p-3" style="z-index: 1056">
            <div id="toastContainer" class="toast-container"></div>
        </div>
        <div class="d-flex justify-content-end">
          <button class="btn btn-success shadow-sm fw-bold mb-3" id="btnDescargarTodaLaPagina">
            <i class="fas fa-download-all me-1"></i> Descargar Documentos Seleccionados
          </button>
        </div>
        @include('students.partials.table')
        <div class="row mt-3">
            <div class="col-md-6 text-muted">
                Mostrando {{ $paginator->firstItem() }} a {{ $paginator->lastItem() }} de {{ $paginator->total() }}
                estudiantes
            </div>
            <div class="col-md-6 d-flex justify-content-end">
                {{-- Esto genera los botones: < 1 2 3 > --}}
                {{ $paginator->links() }}
            </div>
        </div>
        @include('students.partials.modals')

        @include('documentos.modal')

        <div class="modal fade" id="emailModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-danger text-white">
                        <h5 class="modal-title"><i class="fas fa-envelope me-2"></i>Enviar Correo</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="emailForm">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Destinatario:</label>
                                <input type="text" class="form-control-plaintext" id="emailRecipientName" readonly>
                                <input type="hidden" id="emailRecipientEmail" name="email">
                                <small class="text-muted" id="emailRecipientDisplay"></small>
                            </div>
                            <div class="mb-3">
                                <label for="emailMessage" class="form-label fw-bold">Mensaje:</label>
                                <small>(El contenido del correo debe ser de al menos 5 caracteres)</small>
                                <textarea class="form-control" id="emailMessage" name="message" rows="5" required
                                    placeholder="Escribe aquí el mensaje para el alumno..."></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-primary" id="btnSendEmail">
                            <i class="fas fa-paper-plane me-1"></i> Enviar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="modalDescargaMasiva" tabindex="-1" aria-labelledby="modalDescargaMasivaLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <form action="{{ route('documentos.descargar.masivo') }}" method="POST" id="formDescargaMasiva">
                    @csrf
                    <input type="hidden" name="ruts" id="rutsMasivosInput">
    
                    <div class="modal-header border-0 bg-primary text-white" style="background: linear-gradient(135deg, #1e3c72, #2a5298);">
                        <h5 class="modal-title" id="modalDescargaMasivaLabel">
                            <i class="fas fa-file-archive me-2"></i> Configurar Descarga Masiva (ZIP)
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    
                    <div class="modal-body py-4">
                        <p class="text-muted small">
                            Selecciona los tipos de documentos específicos que deseas incluir en la descarga comprimida. Si no seleccionas ninguno, se incluirán todos por defecto.
                        </p>
                        
                        <div class="alert alert-info py-2 small mb-3">
                            <i class="bi bi-info-circle me-1"></i> Por razones de rendimiento y almacenamiento, las descargas de gran volumen se fragmentarán automáticamente en sub-archivos de un máximo de <strong>24 MB</strong>.
                        </div>
    
                        <label class="form-label fw-bold text-secondary mb-2">📄 Documentos Obligatorios</label>
                        <div class="row mb-3 px-2">
                            <div class="col-6 form-check mb-2">
                                <input class="form-check-input" type="checkbox" name="tipos_docs[]" value="Covid" id="zipCovid" checked>
                                <label class="form-check-label ms-1" for="zipCovid" style="cursor:pointer;">Vacc. Covid</label>
                            </div>
                            <div class="col-6 form-check mb-2">
                                <input class="form-check-input" type="checkbox" name="tipos_docs[]" value="Hepatitis B" id="zipHepatitis" checked>
                                <label class="form-check-label ms-1" for="zipHepatitis" style="cursor:pointer;">Vacc. Hepatitis B</label>
                            </div>
                            <div class="col-6 form-check mb-2">
                                <input class="form-check-input" type="checkbox" name="tipos_docs[]" value="Influenza" id="zipInfluenza" checked>
                                <label class="form-check-label ms-1" for="zipInfluenza" style="cursor:pointer;">Vacc. Influenza</label>
                            </div>
                            <div class="col-6 form-check mb-2">
                                <input class="form-check-input" type="checkbox" name="tipos_docs[]" value="Fotografía" id="zipFoto" checked>
                                <label class="form-check-label ms-1" for="zipFoto" style="cursor:pointer;">Fotografía Alumno</label>
                            </div>
                        </div>
    
                        <label class="form-label fw-bold text-secondary mb-2">📁 Documentos Clínicos Adicionales</label>
                        <div class="px-2">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" name="tipos_docs[]" value="Adicional" id="zipAdicional" checked>
                                <label class="form-check-label ms-1" for="zipAdicional" style="cursor:pointer;">Documentos Extras / Anexos</label>
                            </div>
                        </div>
                    </div>
    
                    <div class="modal-footer border-0 bg-light">
                        <button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary px-4 fw-bold">
                            <i class="fas fa-download me-1"></i> Descargar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        window.studentsData = {!! json_encode($studentsForJs ?? [], JSON_UNESCAPED_UNICODE) !!};
        window.validationRoute = "{{ route('documentos.toggleValidation') }}";

        function abrirPDF(url) {
            window.open(url, "_blank", "noopener,noreferrer");
            return false;
        }
    </script>
    <script src="{{ asset('js/students/main.js') }}"></script>
    <script src="{{ asset('js/students/students-events.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Obtener el token CSRF del meta tag
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;

            // Configurar CSRF token para AJAX (Headers globales)
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            // Manejar clic en botón de validación (ASÍNCRONO)
            $(document).on('click', '.btn-validation-toggle', function(e) {
                e.preventDefault();
                e.stopPropagation();

                const button = $(this);
                const rut = button.data('student-rut');
                const currentState = parseInt(button.data('validated')) || 0;
                const newState = currentState ? 0 : 1;

                // Bloquear botón momentáneamente
                button.prop('disabled', true);

                // Cambiar apariencia inmediatamente (Optimistic UI)
                if (newState) {
                    button.removeClass('btn-secondary').addClass('btn-success');
                    button.html('<i class="fas fa-check-circle me-1"></i> Validado');
                    button.data('validated', 1);
                } else {
                    button.removeClass('btn-success').addClass('btn-secondary');
                    button.html('<i class="fas fa-times-circle me-1"></i> No validado');
                    button.data('validated', 0);
                }

                // ENVIAR SOLICITUD ASÍNCRONA
                const ajaxData = {
                    _token: csrfToken, // CORRECCIÓN 2: Enviamos el token explícitamente aquí para evitar error 419
                    rut: rut,
                    estado: newState
                };

                $.ajax({
                    url: window.validationRoute,
                    type: 'POST',
                    data: ajaxData,
                    dataType: 'json',
                    success: function(response) {
                        if (response && response.success) {
                            showToast(
                                newState ? 'Estudiante validado exitosamente' :
                                'Validación removida exitosamente',
                                newState ? 'success' : 'warning'
                            );
                        } else {
                            revertButtonState(button, newState);
                            showToast('Error del servidor: ' + (response?.message ||
                                'Desconocido'), 'error');
                        }
                    },
                    error: function(xhr, status, error) {
                        revertButtonState(button, newState);

                        let errorMessage = 'Error de conexión';
                        if (xhr.status === 419) {
                            errorMessage = 'Token CSRF inválido o expirado. Recarga la página.';
                        } else if (xhr.status === 422) {
                            errorMessage = 'Error de validación de datos.';
                        } else if (xhr.status === 500) {
                            errorMessage = 'Error interno del servidor.';
                        }

                        showToast(errorMessage, 'error');
                    },
                    complete: function() {
                        button.prop('disabled', false);
                    }
                });
            });

            function revertButtonState(button, attemptedState) {
                if (attemptedState) {
                    button.removeClass('btn-success').addClass('btn-secondary');
                    button.html('<i class="fas fa-times-circle me-1"></i> No validado');
                    button.data('validated', 0);
                } else {
                    button.removeClass('btn-secondary').addClass('btn-success');
                    button.html('<i class="fas fa-check-circle me-1"></i> Validado');
                    button.data('validated', 1);
                }
            }

            function showToast(message, type = 'info') {
                const toastId = 'toast-' + Date.now();
                let bgClass, iconClass;

                switch (type) {
                    case 'success':
                        bgClass = 'bg-success text-white';
                        iconClass = 'fas fa-check-circle';
                        break;
                    case 'error':
                        bgClass = 'bg-danger text-white';
                        iconClass = 'fas fa-exclamation-circle';
                        break;
                    case 'warning':
                        bgClass = 'bg-warning text-dark';
                        iconClass = 'fas fa-exclamation-triangle';
                        break;
                    default:
                        bgClass = 'bg-info text-white';
                        iconClass = 'fas fa-info-circle';
                }

                const toastHtml = `
                    <div id="${toastId}" class="toast ${bgClass}" role="alert" aria-live="assertive" aria-atomic="true">
                        <div class="d-flex">
                            <div class="toast-body">
                                <i class="${iconClass} me-2"></i>${message}
                            </div>
                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                        </div>
                    </div>
                `;

                $('#toastContainer').append(toastHtml);
                const toastElement = document.getElementById(toastId);
                const toast = new bootstrap.Toast(toastElement, {
                    autohide: true,
                    delay: 3000
                });
                toast.show();

                toastElement.addEventListener('hidden.bs.toast', function() {
                    $(this).remove();
                });
            }
        });
    </script>

    <script>
        // Definir ruta de correo
        window.emailRoute = "{{ route('documentos.sendEmail') }}";

        // 1. Abrir Modal
        $(document).on('click', '.btn-open-email-modal', function() {
            const email = $(this).data('email');
            const name = $(this).data('name');

            $('#emailRecipientName').val(name);
            $('#emailRecipientEmail').val(email);
            $('#emailRecipientDisplay').text(email);
            $('#emailMessage').val(''); // Limpiar mensaje anterior

            const modal = new bootstrap.Modal(document.getElementById('emailModal'));
            modal.show();
        });

        // 2. Enviar Correo AJAX
        $('#btnSendEmail').on('click', function() {
            const message = $('#emailMessage').val();
            const email = $('#emailRecipientEmail').val();
            const btn = $(this);

            if (!message.trim()) {
                Swal.fire('Atención', 'Debes escribir un mensaje.', 'warning');
                return;
            }

            // Bloquear botón y mostrar carga
            btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Enviando...');

            // Obtener token (reutilizamos la lógica que ya arreglamos)
            const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

            $.ajax({
                url: window.emailRoute,
                type: 'POST',
                data: {
                    _token: csrfToken, // Importante para evitar 419
                    email: email,
                    message: message
                },
                success: function(response) {
                    if (response.success) {
                        bootstrap.Modal.getInstance(document.getElementById('emailModal')).hide();
                        Swal.fire('Enviado', 'El correo ha sido enviado correctamente.', 'success');
                    } else {
                        Swal.fire('Error', response.message, 'error');
                    }
                },
                error: function(xhr) {
                    let msg = 'Error al enviar el correo.';
                    if (xhr.status === 422) msg = 'Verifica los datos ingresados.';
                    Swal.fire('Error', msg, 'error');
                },
                complete: function() {
                    btn.prop('disabled', false).html('<i class="fas fa-paper-plane me-1"></i> Enviar');
                }
            });
        });
        
        document.addEventListener("DOMContentLoaded", function () {
            const modalDescarga = new bootstrap.Modal(document.getElementById('modalDescargaMasiva'));
            const inputRuts = document.getElementById('rutsMasivosInput');
        
            // --- NUEVO: Lógica del checkbox "Seleccionar Todos" ---
            const selectAllCheckbox = document.getElementById('selectAllRuts');
            if (selectAllCheckbox) {
                selectAllCheckbox.addEventListener('change', function() {
                    const isChecked = this.checked;
                    document.querySelectorAll('.rut-checkbox').forEach(cb => {
                        cb.checked = isChecked;
                    });
                });
            }
        
            // 1. Descarga Individual (Botón en cada fila)
            document.querySelectorAll('.btn-descarga-estudiante').forEach(btn => {
                btn.addEventListener('click', function (e) {
                    e.preventDefault();
                    inputRuts.value = this.getAttribute('data-rut');
                    modalDescarga.show();
                });
            });
        
            // 2. Descarga Masiva (Botón superior que lee los checkboxes)
            const btnMasivo = document.getElementById('btnDescargarTodaLaPagina');
            if (btnMasivo) {
                btnMasivo.addEventListener('click', function (e) {
                    e.preventDefault();
        
                    // Buscar todos los checkboxes que estén marcados
                    const checkboxesSeleccionados = document.querySelectorAll('.rut-checkbox:checked');
                    
                    if (checkboxesSeleccionados.length === 0) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Ningún estudiante seleccionado',
                            text: 'Debes marcar al menos una casilla en la tabla para descargar sus documentos.',
                            confirmButtonColor: '#3085d6'
                        });
                        return;
                    }
        
                    // Extraer los valores (RUTs) y unirlos por comas
                    const rutsColectados = Array.from(checkboxesSeleccionados).map(cb => cb.value).join(',');
        
                    // Inyectar en el formulario y abrir el modal
                    inputRuts.value = rutsColectados;
                    modalDescarga.show();
                });
            }
        });
    </script>
@endpush