@extends('admin.layout.master')

@section('content')
<main>
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <h1>Gestión de Sesiones</h1>
        <ol class="breadcrumb">
            <li class=""><a href="{{ url('/admin') }}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
            <li class=""><a href="{{ url('/admin') }}">Principal</a></li>
            <li class="">&nbsp;&nbsp;/ Sesiones</li>
        </ol>
    </div>
    <!-- End Breadcrumb Area -->

    <div class="card mb-30">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Lista de Sesiones</h3>
            <a href="javascript:void(0)" class="btn btn-info rounded-pill" data-toggle="modal" data-target="#myModalSesion" onclick="agregarNuevaSesion()">
                <i class='bx bxs-pencil'></i> Nueva Sesión
            </a>
        </div>

        <div class="card-body">
            <!-- Tabla de Sesiones -->
            <div class="table-responsive">
                <table id="tabla" class="table" cellspacing="0" cellpadding="0" width="100%">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>Docente</th>
                            <th>Referencia</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($sesiones as $key => $sesion)
                        <tr>
                            <td>{{ $sesion->id}}</td>
                            <td>{{ $sesion->nombre }}</td>
                            <td>{{ $sesion->docentes->nombre??'Sin docente' }} {{ $sesion->docentes->apellido_paterno??'' }} {{ $sesion->docentes->apellido_materno??'' }}</td>
                            <th>{{ $sesion->ayuda_memoria}}</th>
                            <td>
                                <button type="button" class="btn btn-primary btn-xs" onclick="editarSesion({{ $sesion->id }})">
                                    <span class='bx bx-pencil'></span> Editar
                                </button>
                                <button type="button" class="btn btn-danger btn-xs" onclick="eliminarSesion({{ $sesion->id }})">
                                    <span class='bx bx-trash'></span> Eliminar
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Modal para Crear o Editar Sesión -->
        <div class="modal fade" id="myModalSesion" role="dialog">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content col-lg-12 mx-auto">
                    <div class="modal-header">
                        <h4 class="modal-title">Crear/Editar Sesión</h4>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Formulario para crear o editar sesión -->
                        <form id="sesionForm" class="form-horizontal" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="sesion_id" id="sesion_id">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="nombre">Nombre de la Sesión:</label>
                                        <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Ingrese el nombre" required>
                                    </div>

                                    <div class="form-group">
                                        <label for="docente">Docente:</label>
                                        <select name="docente" id="docente" class="form-control">
                                            <option value="" selected disabled>Seleccione ..</option>
                                            @foreach($docentes as $docente)
                                            <option value="{{ $docente->id }}">{{ $docente->nombre }} {{ $docente->apellido_paterno }} {{ $docente->apellido_materno }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="tipo_media">Tipo de Media:</label>
                                        <select class="form-control" id="tipo_media" name="tipo_media" onchange="toggleMediaInputs()">
                                            <option value="" selected disabled>Seleccione ..</option>
                                            <option value="video">Video</option>
                                            <option value="imagen">Imagen</option>
                                        </select>
                                    </div>
                                    <div class="form-group" id="video_link_input">
                                        <label for="link_video">Link del Video:</label>
                                        <input type="url" class="form-control" id="link_video" name="link_video" placeholder="Ingrese el enlace del video">
                                        <a href="#" id="videoLinkPreview" target="_blank" style="display:none;">Abrir Video</a>
                                    </div>

                                    
                                </div>

                                <div class="col-md-6">
                                    <!-- Inputs para archivos multimedia -->
                                   <!--  <div class="form-group">
                                        <label for="imagen_miniatura">Imagen Miniatura:</label>
                                        <input type="file" class="form-control" id="imagen_miniatura" name="imagen_miniatura" accept="image/*" onchange="previewImage('imagen_miniatura', 'previewMiniatura')">
                                        <img id="previewMiniatura" src="#" alt="Previsualización de Miniatura" style="display:none; max-width: 100px; margin-top: 10px;">
                                        <a href="#" id="miniaturaLink" target="_blank" style="display:none;">Abrir Imagen Miniatura</a>
                                    </div> -->
                                    <div class="form-group">
                                        <label for="duracion">Duración (en minutos):</label>
                                        <input type="number" class="form-control" id="duracion" name="duracion" placeholder="Ingrese la duración">
                                    </div>
                                    <div class="form-group">
                                        <label for="tipo_acceso">Tipo de Acceso:</label>
                                        <select name="tipo_acceso" id="tipo_acceso" class="form-control">
                                            <option value="" selected disabled>Seleccione ..</option>
                                            @foreach($accesos as $tipo_acceso)
                                            <option value="{{ $tipo_acceso->id }}">{{ $tipo_acceso->tipo_acceso}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="imagen_grande">Imagen Grande:</label>
                                        <input type="file" class="form-control" id="imagen_grande" name="imagen_grande" accept="image/*" onchange="previewImage('imagen_grande', 'previewGrande')">
                                        <img id="previewGrande" src="#" alt="Previsualización de Imagen Grande" style="display:none; max-width: 100px; margin-top: 10px;">
                                        <a href="#" id="grandeLink" target="_blank" style="display:none;">Abrir Imagen Grande</a>
                                    </div>
                                    <div class="form-group">
                                        <label for="audio">Audio:</label>
                                        <input type="file" class="form-control" id="audio" name="audio" accept="audio/*">
                                        <a href="#" id="audioLink" target="_blank" style="display:none;">Abrir Audio</a>
                                    </div>
                                    <div class="form-group">
                                        <label for="archivos">Seleccionar Archivo:</label><br>
                                        <select name="document" id="document" class="form-control" style="width: 100%;" multiple>
                                            @foreach($archivos as $archivo)
                                            <option value="{{ $archivo->id }}">{{ $archivo->nombre_original }}({{$archivo->id}})
                                            ({{$archivo->ayuda_memoria}})
                                            </option>
                                            @endforeach
                                        </select>
                                        <!-- <a href="#" id="documentLink" target="_blank" style="display:none;">Abrir Documento</a> -->
                                    </div>

                                    <!-- <div class="form-group">
                                        <label for="vista">Mostrar en Vista:</label>
                                        <input type="checkbox" id="vista" name="vista">
                                    </div> -->

                                    <!-- <div class="form-group">
                                        <label for="orden_vista">Orden de Vista:</label>
                                        <select class="form-control" id="orden_vista" name="orden_vista">
                                            <option value="" selected disabled>Seleccione ..</option>
                                            @for($i = 1; $i <= 20; $i++)
                                                <option value="{{ $i }}">{{ $i }}</option>
                                                @endfor
                                        </select>
                                    </div> -->
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="descripcion">Referencia():</label>
                                <textarea class="form-control" id="ayuda_memoria" name="ayuda_memoria" rows="1" placeholder="Ingrese una referencia  para mapear las sesiones">

                                </textarea>
                            </div>
                            <div class="form-group">
                                <label for="descripcion">Descripción:</label>
                                <textarea class="form-control" id="descripcion" name="descripcion" rows="2" placeholder="Ingrese la descripción"></textarea>
                            </div>

                            <div class="form-group">
                                <button type="button" class="btn btn-success" onclick="guardarSesion()">Guardar</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Inicializar DataTable
            $('#tabla').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
               "ordering": true, // Enable ordering
               "order": [[0, "desc"]], 
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "pageLength": 10
            });
        });
        $('#document').select2({
                placeholder: "Seleccionar archivo",
                allowClear: true
            });

        function agregarNuevaSesion() {
            $('#sesion_id').val('');
            $('#sesionForm')[0].reset(); // Resetea el formulario
            /* $('#previewMiniatura').hide(); */
            $('#previewGrande').hide();
            $('#audioLink').hide();
           /*  $('#documentLink').hide(); */
           /*  $('#miniaturaLink').hide(); */
            $('#grandeLink').hide();
            $('#videoLinkPreview').hide();
            $('#link_video').prop('disabled', false); // Habilitar campo de video por defecto
            $('#myModalSesion').modal('show');
        }

        // Función para alternar entre inputs de video y deshabilitar/ocultar según el tipo de media
        function toggleMediaInputs() {
            var tipoMedia = $('#tipo_media').val();

            if (tipoMedia === 'video') {
                $('#link_video').prop('disabled', false); // Habilitar campo de video
            } else if (tipoMedia === 'imagen') {
                $('#link_video').prop('disabled', true); // Deshabilitar campo de video
            }
        }

        function previewImage(inputId, previewId) {
            var input = document.getElementById(inputId);
            var preview = document.getElementById(previewId);
            var reader = new FileReader();

            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            };

            reader.readAsDataURL(input.files[0]);
        }

        function guardarSesion() {
            var formData = new FormData($('#sesionForm')[0]);

            // Verificar el estado del checkbox 'vista'
           /*  var vista = $('#vista').is(':checked') ? 1 : 0; */
            /* formData.append('vista', vista); */ // Añadir el valor 1 o 0 al FormData

            $.ajax({
                url: '{{ url("/admin/sesion/guardar") }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    $('#myModalSesion').modal('hide');
                    location.reload();
                    alert('Sesión guardada exitosamente');
                },
                error: function(response) {
                    alert('Error al guardar la sesión');
                }
            });
        }

        function editarSesion(id) {
            $.ajax({
                url: '{{ url("/admin/sesion/editar") }}/' + id,
                type: 'GET',
                success: function(response) {
                    $('#sesion_id').val(response.id);
                    $('#nombre').val(response.nombre);
                    $('#duracion').val(response.duracion);
                    $('#link_video').val(response.link_video);
                    $('#tipo_acceso').val(response.tipo_acceso);
                    $('#tipo_media').val(response.tipo_media);
                    $('#docente').val(response.docente);
/* 
                    if (response.vista === 1) {
                        $('#vista').prop('checked', true); // Marcar el checkbox
                    } else {
                        $('#vista').prop('checked', false); // Desmarcar el checkbox
                    } */
/* 
                    $('#orden_vista').val(response.orden_vista); */
                    $('#descripcion').val(response.descripcion);
                    $('#ayuda_memoria').val(response.ayuda_memoria);

                    // Mostrar el enlace de audio si existe
                    if (response.audio) {
                        $('#audioLink').attr('href', '{{ asset("audios_sesion") }}/' + response.audio).show();
                    }

                    // Mostrar el enlace del documento si existe
                    if (response.document) {
                       /*  $('#documentLink').attr('href', '{{ asset("documentos_sesion") }}/' + response.document).show(); */
                       $('#document').val(response.document).trigger('change');
                    }

                    /* // Mostrar enlaces de imágenes
                    if (response.imagen_miniatura) {
                        $('#miniaturaLink').attr('href', '{{ asset("imagenes_sesion") }}/' + response.imagen_miniatura).show();
                    } */
                    if (response.imagen_grande) {
                        $('#grandeLink').attr('href', '{{ asset("imagenes_sesion") }}/' + response.imagen_grande).show();
                    }

                    // Mostrar el enlace del video si existe
                    if (response.link_video) {
                        $('#videoLinkPreview').attr('href', response.link_video).show();
                    }

                    $('#myModalSesion').modal('show');
                },
                error: function(response) {
                    alert('Error al obtener los datos de la sesión');
                }
            });
        }

        function eliminarSesion(id) {
            if (confirm('¿Estás seguro de eliminar esta sesión?')) {
                $.ajax({
                    url: '{{ url("/admin/sesion/eliminar") }}/' + id,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        _method: 'POST'
                    },
                    success: function(response) {
                        location.reload();
                        alert('Sesión eliminada exitosamente');
                    },
                    error: function(response) {
                        alert('Error al eliminar la sesión');
                    }
                });
            }
        }
    </script>
</main>
@endsection