@extends('admin.layout.master')

@section('content')
<main>
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <h1>Dashboard</h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('/admin') }}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
            <li><a href="{{ url('/admin') }}">Principal</a></li>
            <li>/ Admin Aula</li>
            <li>/ <a href="{{ url('/admin/imagenesclase') }}">Imágenes Clase</a></li>
        </ol>
    </div>

    <!-- Seleccionar Área -->
    <div class="card mb-30">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Selecciona un Área para ver las imágenes</h3>
            <div id="btn-nueva-imagen" style="display: none;">
                <a href="javascript:void(0)" class="btn btn-info rounded-pill" onclick="agregarNuevaImagen()">
                    <i class='bx bxs-pencil'></i> Nueva Imagen
                </a>
            </div>
        </div>
    
        <div class="card-body">
            <!-- Selección de área -->
            <div class="form-group">
                <label for="area_id">Área:</label>
                <select id="area_id" class="form-control" onchange="cargarImagenesPorArea()">
                    <option value="">Selecciona un área</option>
                    @foreach($areas as $area)
                        <option value="{{ $area->id }}">{{ $area->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Lista de imágenes -->
            <div class="table-responsive">
                <table id="tabla" class="table" cellspacing="0" cellpadding="0" width="100%">
                    <thead>
                        <tr>
                            <th>N.</th>
                            <th>Nombre de la Imagen</th>
                            <th>Imagen</th>
                            <th>Link</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="imagenes-list">
                        <!-- Aquí se cargarán las imágenes dinámicamente -->
                    </tbody>
                </table>
            </div>
        </div>
    
        <!-- Modal para Crear o Editar Imágenes -->
        <div class="modal fade" id="myModalImagen" role="dialog">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content col-lg-6 mx-auto">
                    <div class="modal-header">
                        <h4 class="modal-title">Crear/Editar Imagen</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 imagen -->
                        <form id="imagenForm" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="imagen_id">
                            <input type="hidden" id="area_id_form">
                            <div class="form-group">
                                <label for="nombre">Nombre de la Imagen:</label>
                                <input type="text" id="nombre" class="form-control" placeholder="Ingrese el nombre de la imagen">
                            </div>
                            <div class="form-group">
                                <label for="imagen">Seleccionar Imagen:</label>
                                <input type="file" id="imagen" class="form-control" onchange="previewImagen(event)">
                                <div id="preview" style="margin-top: 10px;">
                                    <img id="img-preview" style="max-width: 100%; height: auto; display: none;" src="" alt="Previsualización de Imagen">
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-success" onclick="guardarImagen()">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>

    <!-- Script para manejar la lógica -->
    <script type='text/javascript'>
        var tablaImagenes;

        function cargarImagenesPorArea() {
            var area_id = $('#area_id').val();

            if (area_id) {
                $('#btn-nueva-imagen').show(); // Mostrar botón de nueva imagen cuando se selecciona un área
                $.ajax({
                    url: '{{ url("/admin/imagenesclase/listar") }}',
                    type: 'POST',
                    data: {
                        area_id: area_id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        var imagenesHtml = '';
                        if (response.imagenes.length > 0) {
                            response.imagenes.forEach(function (imagen, index) {
                                var imageUrl = '{{ asset("imagenes_clase") }}/' + imagen.nombre_unico;
                                imagenesHtml += `
                                    <tr>
                                        <td>${imagen.id}</td>
                                        <td>${imagen.nombre}</td>
                                        <td><img src="${imageUrl}" alt="${imagen.nombre}" style="max-width: 50px;"></td>
                                        <td>
                                            <a href="${imageUrl}" target="_blank">Ver imagen</a>
                                            <button class="btn btn-xs btn-secondary ml-2" onclick="copiarEnlace('${imageUrl}')"><i class="bx bx-copy"></i></button>
                                        </td>
                                        <td>
                                            <button class="btn btn-primary btn-xs" onclick="editarImagen(${imagen.id})">Editar</button>
                                            <button class="btn btn-danger btn-xs" onclick="eliminarImagen(${imagen.id})">Eliminar</button>
                                        </td>
                                    </tr>`;
                            });
                        } else {
                            imagenesHtml = '<tr><td colspan="5">No hay imágenes para esta área.</td></tr>';
                        }
                        if ($.fn.DataTable.isDataTable('#tabla')) {
                            $('#tabla').DataTable().destroy(); // Destruye la tabla actual
                        }
                        $('#imagenes-list').html(imagenesHtml);

                        // Refrescar la tabla después de cargar los datos
                        

                        $('#tabla').DataTable({
                            "paging": true,
                            "lengthChange": false,
                            "searching": true,
                            "ordering": true, 
                            "info": true,
                            "autoWidth": false,
                            "responsive": true,
                            "pageLength": 5,
                            "order": [[0, 'desc']] 
                        });
  
                    },
                    error: function (response) {
                        alert('Error al cargar las imágenes.');
                    }
                });
            } else {
                $('#btn-nueva-imagen').hide(); // Ocultar el botón si no hay área seleccionada
                $('#imagenes-list').html('<tr><td colspan="5">Selecciona un área para ver las imágenes.</td></tr>');
            }
        }

        function copiarEnlace(url) {
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(url).then(function() {
                    alert('Enlace copiado al portapapeles.');
                }, function(err) {
                    alert('Error al copiar el enlace.');
                });
            } else {
                // Método alternativo si la API de Clipboard no está disponible
                var tempInput = document.createElement('input');
                tempInput.value = url;
                document.body.appendChild(tempInput);
                tempInput.select();
                try {
                    document.execCommand('copy');
                    alert('Enlace copiado al portapapeles.');
                } catch (err) {
                    alert('Error al copiar el enlace.');
                }
                document.body.removeChild(tempInput);
            }
        }

        function agregarNuevaImagen() {
            $('#imagen_id').val('');
            $('#nombre').val('');
            $('#imagen').val(''); // Limpiar el input de archivo
            $('#img-preview').attr('src', '').hide(); // Limpiar el preview de imagen y ocultarlo
            $('#area_id_form').val($('#area_id').val()); // Asignar el área seleccionada al formulario
            $('#myModalImagen').modal('show');
        }

        function previewImagen(event) {
            var reader = new FileReader();
            reader.onload = function () {
                $('#img-preview').attr('src', reader.result).show(); // Mostrar la previsualización de la imagen
            };
            reader.readAsDataURL(event.target.files[0]);
        }

        function guardarImagen() {
            var formData = new FormData();
            var id = $('#imagen_id').val();
            var nombre = $('#nombre').val();
            var archivo = $('#imagen')[0].files[0];
            var area_id = $('#area_id_form').val();

            // Validar que la imagen sea requerida solo al crear
            if (!id && !archivo) {
                alert('La imagen es obligatoria.');
                return;
            }

            formData.append('nombre', nombre);
            formData.append('area_id', area_id);
            if (archivo) {
                formData.append('imagen', archivo); // Solo si se selecciona una nueva imagen
            }
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('id', id);

            $.ajax({
                url: '{{ url("/admin/imagenesclase/guardar") }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    $('#myModalImagen').modal('hide');
                    cargarImagenesPorArea(); // Recargar las imágenes después de guardar
                    alert('Imagen guardada exitosamente.');
                },
                error: function (response) {
                    alert('Error al guardar la imagen.');
                }
            });
        }

        function editarImagen(id) {
            $.ajax({
                url: '{{ url("/admin/imagenesclase/editar") }}/' + id,
                type: 'GET',
                success: function (response) {
                    $('#imagen_id').val(response.id);
                    $('#nombre').val(response.nombre);
                    $('#area_id_form').val(response.area_id); // Asignar el área al formulario
                    $('#img-preview').attr('src', '{{ asset("imagenes_clase") }}/' + response.nombre_unico).show(); // Mostrar la imagen actual
                    $('#imagen').val(''); // Dejar el campo de archivo vacío
                    $('#myModalImagen').modal('show');
                },
                error: function (response) {
                    alert('Error al obtener los datos de la imagen.');
                }
            });
        }

        function eliminarImagen(id) {
            if (confirm('¿Estás seguro de eliminar esta imagen?')) {
                $.ajax({
                    url: '{{ url("/admin/imagenesclase/eliminar") }}/' + id,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        cargarImagenesPorArea(); // Recargar las imágenes después de eliminar
                        alert('Imagen eliminada exitosamente.');
                    },
                    error: function (response) {
                        alert('Error al eliminar la imagen.');
                    }
                });
            }
        }
    </script>
</main>
@endsection