@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>
        @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>
@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');
                }
            });
        });
    </script>
@endpush