@extends('layouts.app')

@section('title', 'Lista Asignados')

@section('css')
<style>
    .swal-overlay {
        z-index: 10000 !important;
    }
    .swal-on-top {
        z-index: 99999 !important;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Encabezado -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4 class="mb-1">👥 Colaboradores Asignados</h4>
                    <p class="text-muted mb-0">
                        Curso: <strong>{{ $curso->nombre }}</strong>
                    </p>
                </div>
                <div class="d-flex gap-2">
                    <!-- Botón Exportar a Excel -->
                    <button type="button" class="btn btn-success waves-effect waves-float waves-light" id="btnExportarExcel" disabled>
                        <i class="fas fa-file-excel me-1"></i>
                        Exportar a Excel
                    </button>

                    <!-- Botón Volver -->
                    <a href="{{ route('cursos-virtuales.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Volver
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <label for="filtro_estado" class="form-label">Filtrar por Estado</label>
                    <select id="filtro_estado" class="form-select">
                        <option value="">Todos los estados</option>
                        <option value="pendiente">Pendiente</option>
                        <option value="en_progreso">En Progreso</option>
                        <option value="completado">Completado</option>
                        <option value="vencido">Vencido</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <!-- Tabla de asignaciones -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table id="tablaAsignados" class="table table-hover">
                    <thead>
                        <tr>
                            <th>Colaborador</th>
                            <th>Fecha Programada</th>
                            <th>Duración</th>
                            <th>Fecha Límite</th>
                            <th>Estado</th>
                            <th>Progreso</th>
                            <th>Asignado Por</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Modal para Extender Fecha -->
    <div class="modal fade" id="modalExtenderFecha" tabindex="-1" aria-labelledby="modalExtenderFechaLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalExtenderFechaLabel">
                        <i class="fas fa-calendar-plus"></i> Extender Plazo del Curso
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formExtenderFecha" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label"><strong>Colaborador:</strong></label>
                            <p id="modalColaboradorNombre" class="text-muted"></p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label"><strong>Fecha Límite Actual:</strong></label>
                            <p id="modalFechaActual" class="text-muted"></p>
                        </div>
                        <div class="mb-3">
                            <label for="nueva_fecha_fin" class="form-label">
                                <strong>Nueva Fecha Límite:</strong> <span class="text-danger">*</span>
                            </label>
                            <input type="date"
                                class="form-control"
                                id="nueva_fecha_fin"
                                name="nueva_fecha_fin"
                                required
                                min="{{ date('Y-m-d') }}">
                            <small class="text-muted">La nueva fecha debe ser posterior a hoy</small>
                        </div>
                        <div class="mb-3">
                            <label for="motivo" class="form-label">
                                <strong>Motivo de la extensión:</strong> <span class="text-muted">(Opcional)</span>
                            </label>
                            <textarea class="form-control" id="motivo" name="motivo" rows="3"
                                    placeholder="Ejemplo: Problemas de salud, solicitud del supervisor, etc."></textarea>
                            <small class="text-muted">Este motivo quedará registrado en el historial de extensiones</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times"></i> Cancelar
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Guardar Cambios
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
    <script>
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: '¡Éxito!',
                text: '{{ session('success') }}',
                timer: 2000,
                timerProgressBar: true,
                showConfirmButton: false
            });
        @endif

        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: '{{ session('error') }}',
                showConfirmButton: true
            });
        @endif

        $(document).ready(function() {
            let tabla = $('#tablaAsignados').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("cursos_virtuales.asignados.data", $curso->id) }}',
                    data: function(d) {
                        // Agregar filtro de estado
                        d.estado = $('#filtro_estado').val();
                    }
                },
                columns: [
                    { data: 'colaborador_nombre', name: 'colaborador_nombre' },
                    { data: 'fecha_programada_formatted', name: 'fecha_programada' },
                    { data: 'duracion_formatted', name: 'duracion_horas' },
                    { data: 'fecha_limite_formatted', name: 'fecha_fin' },
                    { data: 'estado_badge', name: 'status' },
                    { data: 'progreso_badge', name: 'progreso_porcentaje' },
                    { data: 'asignado_por_nombre', name: 'asignado_por_nombre' },
                    { data: 'acciones', name: 'acciones', orderable: false, searchable: false }
                ],
                order: [[1, 'desc']],
                language: {
                        lengthMenu: "Mostrar _MENU_ registros por página",
                        zeroRecords: "Nada encontrado - disculpa",
                        info: "Mostrando la página _PAGE_ de _PAGES_",
                        infoEmpty: "No se encuentran registros",
                        infoFiltered: "(filtrado de _MAX_ registros totales)",
                        search: "Buscar:",
                        paginate: {
                        'next': "Siguiente",
                        'previous': "Anterior"
                    }
                },
                pageLength: 25,
                responsive: true
            });
            // Filtro de estado
            $('#filtro_estado').on('change', function() {
                tabla.ajax.reload();
            });
            // Código que ya tenías para exportar Excel
            $('#btnExportarExcel').on('click', function() {
                let cursoId = '{{ $curso->id }}';
                let estado = $('#filtro_estado').val();
                let url = '{{ route("cursos_virtuales.exportar_asignados") }}?curso_id=' + cursoId;
                if (estado) {
                    url += '&estado=' + estado;
                }
                Swal.fire({
                    title: 'Generando archivo...',
                    text: 'Por favor espera un momento',
                    icon: 'info',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    willOpen: () => {
                        Swal.showLoading();
                    }
                });
                window.location.href = url;
                setTimeout(function() {
                    Swal.close();
                }, 2000);
            });
            // Modal Extender Fecha - Usando delegación de eventos
            $(document).on('click', '.btn-extender-fecha', function() {
                var asignacionId = $(this).data('asignacion-id');
                var colaborador  = $(this).data('colaborador');
                var fechaFin     = $(this).data('fecha-fin');

                // Actualizar contenido del modal
                $('#modalColaboradorNombre').text(colaborador);
                $('#modalFechaActual').text(fechaFin ? fechaFin.split('-').reverse().join('/') : 'Sin límite');

                // Actualizar la acción del formulario
                var formAction = '{{ route("cursos-asignaciones.extender-fecha", ":id") }}';
                formAction = formAction.replace(':id', asignacionId);
                $('#formExtenderFecha').attr('action', formAction);

                // Mostrar el modal
                $('#modalExtenderFecha').modal('show');
            });

            // Manejar el envío del formulario de extender fecha
            $('#formExtenderFecha').on('submit', function(e) {
                e.preventDefault();
                var form = $(this);
                var url  = form.attr('action');
                var data = form.serialize();
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        if(response.success) {
                            $('#modalExtenderFecha').modal('hide');
                            Swal.fire({
                                icon: 'success',
                                title: '¡Éxito!',
                                text: response.message,
                                showConfirmButton: false,
                                timer: 2000,
                                customClass: {
                                    container: 'swal-overlay'
                                }
                            }).then(function() {
                                // Recargar solo la tabla DataTables, no toda la página
                                tabla.ajax.reload(null, false);
                            });
                        }
                    },
                    error: function(xhr) {
                        $('#modalExtenderFecha').modal('hide');
                        setTimeout(function() {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr.responseJSON?.message || 'Ocurrió un error al extender la fecha',
                                customClass: {
                                    container: 'swal-on-top'
                                }
                            });
                        }, 500);
                    }
                });
            });

            // Confirmación de eliminación - Usando delegación de eventos
            $(document).on('submit', '.delete-form', function(e) {
                e.preventDefault();
                var form = $(this);

                Swal.fire({
                    title: '¿Estás seguro?',
                    text: "Se eliminará esta asignación",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: form.attr('action'),
                            type: 'POST',
                            data: form.serialize(),
                            success: function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: '¡Eliminado!',
                                    text: 'La asignación ha sido eliminada',
                                    showConfirmButton: false,
                                    timer: 2000
                                }).then(function() {
                                    // Recargar solo la tabla DataTables
                                    tabla.ajax.reload(null, false);
                                });
                            },
                            error: function(xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Ocurrió un error al eliminar'
                                });
                            }
                        });
                    }
                });
            });

            // Habilitar/deshabilitar botón de exportar según haya datos
            tabla.on('draw', function() {
                let info = tabla.page.info();

                if (info.recordsTotal > 0) {
                    $('#btnExportarExcel').prop('disabled', false);
                } else {
                    $('#btnExportarExcel').prop('disabled', true);
                }
            });

            // Verificar al cargar la página por primera vez
            tabla.on('init', function() {
                let info = tabla.page.info();

                if (info.recordsTotal > 0) {
                    $('#btnExportarExcel').prop('disabled', false);
                } else {
                    $('#btnExportarExcel').prop('disabled', true);
                }
            });
        });
    </script>
@endsection