@extends('layouts.app')

@section('title', 'Cursos Virtuales')

@section('css')
    <style>
        #curso thead {
            background-color: #343a40;
            color: white;
        }
        .swal-high-zindex {
            z-index: 10000 !important;
        }
    </style>
@endsection

@section('content')
    <div class="card mt-2">
        <div class="card-header d-flex justify-content-between">
            <h4>Lista de Cursos Virtuales</h4>
            <div class="align-self-center">

                    <a href="{{ route('cursos-virtuales.create') }}" class="btn btn-success btn-sm">Nuevo Curso</a>

            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="curso" class="table table-striped table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th>Nombre</th>
                            <th>Descripción</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!-- Modal para subir contenido -->
    <div class="modal fade" id="uploadContentModal" tabindex="-1" aria-labelledby="uploadContentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadContentModalLabel">Agregar Contenido al Curso</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="uploadContentForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="curso_id" name="curso_id">
                        <div class="mb-3">
                            <label for="tipo_contenido" class="form-label">Tipo de contenido <span class="text-danger">*</span></label>
                            <select class="form-select" id="tipo_contenido" name="tipo_contenido" required>
                                <option value="">Seleccione un tipo</option>
                                <option value="pdf">PDF - Subir archivo</option>
                                {{-- <option value="video">Video - URL de Drive</option> --}}
                            </select>
                        </div>
                        <!-- Campo para PDF (oculto por defecto) -->
                        <div class="mb-3 d-none" id="campo_archivo">
                            <label for="archivo" class="form-label">Seleccionar archivo PDF <span class="text-danger">*</span></label>
                            <input type="file" class="form-control" id="archivo" name="archivo" accept=".pdf">
                            <small class="text-muted">Formato permitido: PDF (Máx. 100MB)</small>
                        </div>
                        <!-- Campo para URL de video (oculto por defecto) -->
                        <div class="mb-3 d-none" id="campo_url">
                            <label for="url_video" class="form-label">URL del video (SharePoint Embed) <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="url_video" name="url_video" rows="3"
                            placeholder="Pega aquí la URL o el código completo del iframe de SharePoint"></textarea>
                            <small class="text-muted">Puedes pegar la URL de embed o el código iframe completo (botón Compartir → Código para insertar)</small>
                        </div>
                        <div id="uploadProgress" class="progress d-none" style="height: 25px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                style="width: 0%">0%</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary" id="btnUpload">Subir Archivo</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal para ver contenido del curso -->
    <div class="modal fade" id="viewContentModal" tabindex="-1" aria-labelledby="viewContentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewContentModalLabel">Contenido del Curso: <span id="courseNameDisplay"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-sm">
                            <thead>
                                <tr>
                                    <th>Orden</th>
                                    <th>Nombre Archivo</th>
                                    <th>Tipo</th>
                                    <th>Tamaño</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="contentTableBody">
                                <!-- Se llenará con JavaScript -->
                            </tbody>
                        </table>
                    </div>
                    <div id="noContentMessage" class="alert alert-info d-none">
                        No hay contenido agregado para este curso.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" onclick="openUploadModalFromView()">
                        <i class="fa-solid fa-plus"></i> Agregar más contenido
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function(){
            $('#curso').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                lengthMenu: [[5, 10, 25], [5, 10, 25]],
                ajax: {
                    url: URLs+'/mostrar-cursos-virtuales',
                    data: function(d) {
                        d.timestamp = new Date().getTime();
                    }
                },
                "columns": [
                    { "data": "nombre" },
                    { "data": "descripcion" },
                    { "data": "action", "orderable": false, "searchable": false },
                ],
                "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"
                    }
                }
            });

            $(document).on('draw.dt', function() {
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl);
                });
            });
        });

        function deleteCursoVirtual(cursoId) {
            Swal.fire({
                title: '¿Estás seguro?',
                text: "No podrás revertir esto!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, desactivarlo!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: URLs+'/cursos-virtuales/' + cursoId,
                        type: 'DELETE',
                        data: {
                            "_token": "{{ csrf_token() }}",
                        },
                        success: function(response) {
                            Swal.fire(
                                'Desactivado!',
                                response.success,
                                'success'
                            );
                            $('#curso').DataTable().ajax.reload(null, false);
                        },
                        error: function(error) {
                            console.log(error);
                            Swal.fire(
                                'Error!',
                                'Algo salió mal al intentar desactivar el registro.',
                                'error'
                            );
                        }
                    });
                }
            });
        };

        function restoreCursoVirtual(cursoId) {
            Swal.fire({
                title: '¿Estás seguro?',
                text: "Quieres restaurar este registro?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, restaurarlo!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: URLs+'/cursos-virtuales/' + cursoId + '/restaurar',
                        type: 'POST',
                        data: {
                            "_token": $('meta[name="csrf-token"]').attr('content'),
                        },
                        success: function(response) {
                            Swal.fire(
                                'Restaurado!',
                                response.success,
                                'success'
                            );
                            $('#curso').DataTable().ajax.reload(null, false);
                        },
                        error: function(error) {
                            console.log(error);
                            Swal.fire(
                                'Error!',
                                'Algo salió mal al intentar restaurar el registro.',
                                'error'
                            );
                        }
                    });
                }
            });
        };

        function openUploadModal(cursoId) {
            $('#curso_id').val(cursoId);
            $('#uploadContentModal').modal('show');
            $('#uploadContentForm')[0].reset();
            $('#uploadProgress').addClass('d-none');
            $('.progress-bar').css('width', '0%').text('0%');
        };

        $('#tipo_contenido').on('change', function() {
            let tipo = $(this).val();
            // Ocultar ambos campos primero
            $('#campo_archivo').addClass('d-none');
            $('#campo_url').addClass('d-none');
            // Limpiar campos
            $('#archivo').val('');
            $('#url_video').val('');
            // Remover required de ambos
            $('#archivo').prop('required', false);
            $('#url_video').prop('required', false);
            // Mostrar el campo correspondiente
            if (tipo === 'pdf') {
                $('#campo_archivo').removeClass('d-none');
                $('#archivo').prop('required', true);
            } else if (tipo === 'video') {
                $('#campo_url').removeClass('d-none');
                $('#url_video').prop('required', true);
            }
        });

        // Limpiar formulario al cerrar modal
        $('#uploadContentModal').on('hidden.bs.modal', function() {
            $('#uploadContentForm')[0].reset();
            $('#campo_archivo').addClass('d-none');
            $('#campo_url').addClass('d-none');
            $('#tipo_contenido').val('');
            $('#archivo').prop('required', false);
            $('#url_video').prop('required', false);
        });

        // Manejo del formulario de subida
        $('#uploadContentForm').on('submit', function(e) {
            e.preventDefault();

            let cursoId = $('#curso_id').val();
            let tipo = $('#tipo_contenido').val();
            if (!tipo) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Atención',
                    text: 'Debe seleccionar el tipo de contenido'
                });
                return;
            }
            // Validar según el tipo
            if (tipo === 'pdf' && !$('#archivo').val()) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Atención',
                    text: 'Debe seleccionar un archivo PDF'
                });
                return;
            }

            if (tipo === 'video' && !$('#url_video').val()) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Atención',
                    text: 'Debe ingresar la URL del video'
                });
                return;
            }
            let formData = new FormData();
            formData.append('_token', $('input[name="_token"]').val());
            formData.append('tipo_contenido', tipo);

            if (tipo === 'pdf') {
                let archivoInput = document.getElementById('archivo');
                if (archivoInput && archivoInput.files.length > 0) {
                    formData.append('archivo', archivoInput.files[0]);
                    console.log('Archivo agregado:', archivoInput.files[0].name, archivoInput.files[0].size, 'bytes');
                }
            } else {
                formData.append('url_video', $('#url_video').val());
            }
            // Deshabilitar botón de subida
            $('#btnUpload').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Subiendo...');
            if (tipo === 'pdf') {
                $('#uploadProgress').removeClass('d-none');
            }
            $.ajax({
                url: URLs + '/cursos/' + cursoId + '/contenido',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                xhr: function() {
                    let xhr = new window.XMLHttpRequest();
                    // Barra de progreso
                    if (tipo === 'pdf') {
                        xhr.upload.addEventListener('progress', function(evt) {
                            if (evt.lengthComputable) {
                                let percentComplete = Math.round((evt.loaded / evt.total) * 100);
                                $('.progress-bar').css('width', percentComplete + '%').text(percentComplete + '%');
                            }
                        }, false);
                    }
                    return xhr;
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: 'Contenido agregado correctamente',
                        timer: 2000
                    });
                    $('#uploadContentModal').modal('hide');
                    // Recargar la tabla si usas DataTables
                    $('#curso').DataTable().ajax.reload();
                },
                error: function(xhr) {
                    $('#uploadContentModal').modal('hide');
                    setTimeout(function() {
                        let errorMsg = 'Error al guardar el contenido';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMsg
                        });
                    }, 300);
                },
                complete: function() {
                    $('#btnUpload').prop('disabled', false).html('<i class="fas fa-upload me-1"></i>Guardar Contenido');
                    $('#uploadProgress').addClass('d-none');
                    $('.progress-bar').css('width', '0%').text('0%');
                }
            });
        });

        function asignarCurso(cursoId) {
            window.location.href = '/cursos-asignaciones/create/' + cursoId;
        }
    </script>

    <!-- Funcion para manejar el contenido del curso -->
    <script>
        let currentCursoId = null;
        // Función para ver contenido del curso
        function verContenido(cursoId) {
            currentCursoId = cursoId;
            $.ajax({
                url: URLs + '/cursos/' + cursoId + '/contenido',
                type: 'GET',
                success: function(response) {
                    if (response.success) {
                        $('#courseNameDisplay').text(response.curso);
                        if (response.contenidos.length > 0) {
                            $('#noContentMessage').addClass('d-none');
                            $('#contentTableBody').empty();
                            response.contenidos.forEach(function(contenido) {
                                let tipoIcon = getTipoIcon(contenido.tipo_archivo);
                                let tamano = formatBytes(contenido.tamano_archivo);
                                let row = `
                                    <tr>
                                        <td>${contenido.orden}</td>
                                        <td><i class="${tipoIcon}"></i> ${contenido.nombre_archivo}</td>
                                        <td><span class="badge bg-info">${contenido.tipo_archivo}</span></td>
                                        <td>${tamano}</td>
                                        <td class="text-center">
                                            <button class="btn btn-danger btn-sm" onclick="deleteContenido(${contenido.id})" title="Eliminar">
                                                <i class="fa-solid fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                `;
                                $('#contentTableBody').append(row);
                            });
                        } else {
                            $('#contentTableBody').empty();
                            $('#noContentMessage').removeClass('d-none');
                        }
                        $('#viewContentModal').modal('show');
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'No se pudo cargar el contenido del curso'
                    });
                }
            });
        }

        // Función para obtener ícono según tipo de archivo
        function getTipoIcon(tipo) {
            const icons = {
                'pdf': 'fa-solid fa-file-pdf text-danger',
                'video': 'fa-solid fa-file-video text-primary',
                'presentation': 'fa-solid fa-file-powerpoint text-warning'
            };
            return icons[tipo] || 'fa-solid fa-file';
        }

        // Función para formatear bytes a KB, MB, GB
        function formatBytes(bytes, decimals = 2) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const dm = decimals < 0 ? 0 : decimals;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        }

        // Función para abrir modal de upload desde el modal de ver contenido
        function openUploadModalFromView() {
            $('#viewContentModal').modal('hide');
            openUploadModal(currentCursoId);
        }

        // Función para eliminar contenido
        function deleteContenido(contenidoId) {
            Swal.fire({
                title: '¿Estás seguro?',
                text: "Esta acción eliminará el archivo del curso",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
                customClass: {
                    container: 'swal-high-zindex'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: URLs + '/contenido/' + contenidoId,
                        type: 'DELETE',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Eliminado!',
                                text: 'Contenido eliminado correctamente',
                                timer: 2000,
                                customClass: {
                                    container: 'swal-high-zindex'
                                }
                            });
                            // Recargar el contenido del modal
                            verContenido(currentCursoId);
                            $('#curso').DataTable().ajax.reload();
                        },
                        error: function(xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'No se pudo eliminar el contenido',
                                customClass: {
                                    container: 'swal-high-zindex'
                                }
                            });
                        }
                    });
                }
            });
        }
    </script>
@endsection