@extends('back.layouts.admin_main')
@section('administrador')
<style>
    .imagen_previa {
        height: 300px; 
        display: flex; 
        align-items: center;
        overflow: hidden;
    }
    .imagen_previa img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .table tr td p {
        margin-bottom: 0 !important;
    }
    #sortable_items tr {
        cursor: move;
    }
</style>

<div class="col-12">
    {{-- <div class="col-12 mb-2">
        <p class="mb-0">Página principal</p>
    </div> --}}

    <div class="col-12 bg-white p-3 rounded">
        <div class="col-12">
            <p class="mb-0" style="display: flex; align-items: center; justify-content:space-between;">
                <span>Carusel principal </span>
                <button data-bs-toggle="modal" data-bs-target="#modalAgregarSlider" class="btn btn-dark">+ AGREGAR</button>
            </p>
        </div>
        <div class="col-12 mt-3">
            <table class="table border" id="dataTable">
                <thead>
                    <tr>
                        <th style="width: 60px;" class="text-center">Orden</th>
                        <th style="width: 110px;">Imagen</th>
                        <th>Contenido</th>
                        <th style="width: 100px;">Acciones</th>
                    </tr>
                </thead>
                <tbody id="tablecontents">
                    @foreach($sliderPrincipal as $sp)
                        <tr class="align-middle row1" data-id="{{ $sp->id }}">
                            <td class="text-center">{{ $sp->orden }}</td>
                            <td>
                                <img src="{{ asset('uploads/slider/'.$sp->path) }}" style="width: 100px;" alt="">
                            </td>
                            <td>
                                <small class="mb-0">
                                    {{ $sp->titulo }}
                                </small>
                            </td>
                            <td>
                                <button onclick="enviarParaEditarSliderPrincipal('{{ $sp->id }}')" data-bs-toggle="modal" data-bs-target="#modalEditarSlider" class="btn btn-light">
                                    <i class="fa-solid fa-pen text-success"></i>
                                </button>
                                <button onclick="enviarPAraEliminarSliderPrincipal('{{ $sp->id }}')" data-bs-toggle="modal" data-bs-target="#modalEliminarSlider" class="btn btn-light">
                                    <i class="fa-solid fa-trash-can text-danger"></i>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="col-12 bg-white p-3 rounded mt-3">
    <div class="col-12 mb-3">
        <p class="mb-0" style="display: flex; align-items: center; justify-content:space-between;">
            <span>Por qué elegirnos</span>
        </p>
    </div>
    @php
        $n = $nosotros[0] ?? null;
    @endphp
    <form action="" id="agregarSobreNosotros">
        <div class="col-12">
            <div class="row g-3">
                <div class="col-12">
                    <input type="hidden" name="id" value="{{ $n->id ?? '' }}" class="form-control">
                    <label for="" style="font-size: 12px;">Subtitulo</label>
                    <div class="form-floating">
                        <textarea name="subtitulo" id="" cols="30" rows="10" class="form-control summernote_titulo">{!! $n->subtitulo ?? '' !!}</textarea>
                    </div>
                </div>
                <div class="col-12">
                    <label for="" style="font-size: 12px;">Titulo</label>
                    <div class="form-floating">
                        <textarea name="titulo" id="" cols="30" rows="10" class="form-control summernote_titulo">{!! $n->titulo ?? '' !!}</textarea>
                    </div>
                </div>
                <div class="col-lg-6">
                    <label for="" style="font-size: 12px;">Contenido Izquierda</label>
                    <div class="form-floating">
                        <textarea name="contenido_izq" id="" cols="30" rows="10" class="form-control summernote">{!! $n->contenido_izq ?? '' !!}</textarea>
                    </div>
                </div>
                <div class="col-lg-6">
                    <label for="" style="font-size: 12px;">Contenido Derecha</label>
                    <div class="form-floating">
                        <textarea name="contenido_der" id="" cols="30" rows="10" class="form-control summernote">{!! $n->contenido_der ?? '' !!}</textarea>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-floating">
                        <input type="text" name="nombre_boton" value="{{ $n->nombre_boton ?? '' }}" class="form-control">
                        <label for="">Nombre botón</label>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-floating">
                        <input type="text" name="link_boton" value="{{ $n->link_boton ?? '' }}" class="form-control">
                        <label for="">Link botón</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 border-top mt-3 pt-3 text-end bg-white">
            @if(isset($nosotros[0]))
                <button type="submit" class="btn btn-dark btn_sobre_nosotros">MODIFICAR</button>
            @else   
                <button type="submit" class="btn btn-dark btn_sobre_nosotros">AGREGAR</button>
            @endif
        </div>
    </form>
</div>

<div class="col-12 bg-white p-3 rounded mt-3 mb-5">
    <div class="col-12 mb-3">
        <p class="mb-0" style="display: flex; align-items: center; justify-content:space-between;">
            <span>Presentación</span>
        </p>
    </div>
    @php
        $p = $presentacion[0] ?? null;
    @endphp
    <div class="col-12">
        <div class="row g-3">
            <form action="" id="agregarPresentacion">
                <div class="col-12">
                    <div class="row g-3">
                        <input type="hidden" name="id" value="{{ $p->id ?? '' }}" class="form-control">
                        <div class="col-6">
                            <label for="" style="font-size: 12px;">Subtitulo</label>
                            <div class="form-floating">
                                <textarea name="subtitulo" id="" class="summernote_titulo" cols="30" rows="10">{!! $p->subtitulo ?? '' !!}</textarea>
                            </div>
                        </div> 
                        <div class="col-6">
                            <label for="" style="font-size: 12px;">Titulo</label>
                            <div class="form-floating">
                                <textarea name="titulo" id="" class="summernote_titulo" cols="30" rows="10">{!! $p->titulo ?? '' !!}</textarea>
                            </div>
                        </div> 
                        <div class="col-12">
                            <label for="" style="font-size: 12px;">Contenido</label>
                            <div class="form-floating">
                                <textarea name="contenido" id="" class="summernote" cols="30" rows="10">{!! $p->contenido ?? '' !!}</textarea>
                            </div>
                        </div>
                        <div class="col-12 text-end">
                            @if(isset($presentacion[0]))
                                <button type="submit" class="btn btn-dark btn_presentacion">MODIFICAR</button>
                            @else   
                                <button type="submit" class="btn btn-dark btn_presentacion">AGREGAR</button>
                            @endif
                        </div>
                    </div>
                </div>
            </form>

            @if(isset($presentacion[0]))
                <div class="col-12 border-top pt-3">
                    <div class="col-12 mb-3">
                        <p class="mb-0" style="display: flex; align-items: center; justify-content:space-between;">
                            <span>Items </span>
                            <button data-bs-toggle="modal" data-bs-target="#modalAgregarItems" class="btn btn-dark">+ AGREGAR</button>
                        </p>
                    </div>
                </div>
                    
                <div class="col-12" id="tablaPresentacionItems">
                    @include('back.principal.tablas.tablaPrincipalPresentacionItems')
                </div>
            @endif
        </div> 
    </div>
</div>


<!-- Modal Agregar Slider -->
<div class="modal fade" id="modalAgregarSlider" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Agregar Slider</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="agregarSliderPrincipal">
                <div class="modal-body">
                    <div class="col-12">
                        <div class="col-12 imagen_previa border rounded" id="imagen_portada_agregar">

                        </div>
                        <div class="col-12 mt-3">
                            <div class="row g-3">
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="file" name="file" id="file_agregar" class="form-control">
                                        <label for="">IMAGEN</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="text" name="titulo" class="form-control">
                                        <label for="">TITULO</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <textarea type="text" name="subtitulo" class="form-control summernote"></textarea>
                                        <label for="">CONTENIDO</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-check">
                                        <input class="form-check-input" name="habilitado" type="checkbox" value="" id="habilitado" checked>
                                        <label class="form-check-label" for="habilitado">
                                            Habilitar botón
                                        </label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-floating">
                                        <input type="text" name="nombre_boton" class="form-control">
                                        <label for="">NOMBRE LINK</label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-floating">
                                        <input type="text" name="link_boton" class="form-control">
                                        <label for="">LINK</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CERRAR</button>
                    <button type="submit" class="btn btn-dark">AGREGAR</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Editar Slider -->
<div class="modal fade" id="modalEditarSlider" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Editar Slider</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="editarSliderPrincipal">
                <div class="modal-body">
                    <div class="col-12">
                        <input type="hidden" name="id" id="id_editar_Slider_principal" class="form-control">
                        <div class="col-12 imagen_previa border rounded" id="imagen_portada_editar_slider_principal">

                        </div>
                        <div class="col-12 mt-3">
                            <div class="row g-3">
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="file" name="file" id="file_editar_slider_principal" class="form-control">
                                        <label for="">IMAGEN</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="text" name="titulo" id="titulo_editar_slider_principal" class="form-control">
                                        <label for="">TITULO</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <textarea type="text" name="subtitulo" id="subtitulo_editar_slider_principal" class="form-control summernote"></textarea>
                                        <label for="">CONTENIDO</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-check">
                                        <input class="form-check-input" name="habilitado" id="habilitado_editar_slider_principal" type="checkbox" value="" id="habilitado">
                                        <label class="form-check-label" for="habilitado_editar_slider_principal">
                                            Habilitar botón
                                        </label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-floating">
                                        <input type="text" name="nombre_boton" id="nombre_boton_editar_slider_principal" class="form-control">
                                        <label for="">NOMBRE LINK</label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-floating">
                                        <input type="text" name="link_boton" id="link_boton_editar_slider_principal" class="form-control">
                                        <label for="">LINK</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CERRAR</button>
                    <button type="submit" class="btn btn-dark">MODIFICAR</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Eliminar slider principal -->
<div class="modal fade" id="modalEliminarSlider" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <p class="mb-0">Eliminar Slider principal</p>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="eliminarSliderPrincipal">
                <div class="modal-body">
                    <div class="col-12">
                        <input type="hidden" id="id_eliminar_slider_principal" name="id" class="form-control">
                        <p class="mb-0 text-danger">Desea aliminar este slider?</p>
                        <p class="mb-0">
                            Esta acción no se puede revertir
                        </p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-danger"><i class="fa-solid fa-trash-can" style="margin-right: 7px;"></i> Eliminar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Agregar items en presentacion -->
<div class="modal fade" id="modalAgregarItems" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Agregar Items</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="agregarItems">
                <div class="modal-body">
                    <div class="col-12">
                        <input type="hidden" name="id" id="id_presentacion_items" value="{{ $p->id ?? '' }}" class="form-control">
                        <div class="row g-3">
                            <div class="col-lg-12">
                                <div id="imagen_previa_items" class="col-12 border rounded imagen_previa" style="height: 150px;"></div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-floating">
                                    <input type="file" name="file" id="file_items" class="form-control">
                                    <label for="">Icono</label>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-floating">
                                    <input type="text" name="titulo" class="form-control">
                                    <label for="">Titulo</label>
                                </div>
                            </div>
                            <div class="col-lg-12 mt-2">
                                <label style="font-size: 12px;" for="">Contenido</label>
                                <div class="form-floating">
                                    <textarea name="contenido" id="contenido_items" cols="30" rows="10" class="form-control summernote"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CERRAR</button>
                    <button type="submit" class="btn btn-dark">AGREGAR</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Editar items en presentacion -->
<div class="modal fade" id="modalEditarItems" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Editar Items</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="editarItems">
                <div class="modal-body">
                    <div class="col-12">
                        <input type="hidden" name="id_items" id="id_items_editar" class="form-control">
                        <input type="hidden" name="id" id="id_presentacion_items_editar" value="{{ $p->id ?? '' }}" class="form-control">
                        <div class="row g-3">
                            <div class="col-lg-12">
                                <div id="imagen_previa_items_editar" class="col-12 border rounded imagen_previa" style="height: 150px;"></div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-floating">
                                    <input type="file" name="file" id="file_items_eitar" class="form-control">
                                    <label for="">Icono</label>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-floating">
                                    <input type="text" name="titulo" id="titulo_items_editar" class="form-control">
                                    <label for="">Titulo</label>
                                </div>
                            </div>
                            <div class="col-lg-12 mt-2">
                                <label style="font-size: 12px;" for="">Contenido</label>
                                <div class="form-floating">
                                    <textarea name="contenido" id="contenido_items_editar" cols="30" rows="10" class="form-control summernote"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CERRAR</button>
                    <button type="submit" class="btn btn-dark">MODIFICAR</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Editar items en presentacion -->
<div class="modal fade" id="modalEliminarItems" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5 text-danger" id="staticBackdropLabel">Eliminar Items</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="eliminarItems">
                <div class="modal-body">
                    <input type="hidden" id="id_presentacion_items_eliminar" name="id" class="form-control">
                    <p class="mb-0">Desea eliminar este item?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CERRAR</button>
                    <button type="submit" class="btn btn-danger">ELIMINAR</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="{{ asset('js/jquery.js') }}"></script>
<script>
    $('#eliminarItems').submit(function(e){
        e.preventDefault();

        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');

        $.ajax({
            url: "{{ route('back.eliminarItems') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                $('#eliminarItems')[0].reset();
                $('#modalEliminarItems').modal('hide');
                buscarItems();
            }
        })
    })

    function enviarParaEliminarPresentacionItems(id) {
        $('#id_presentacion_items_eliminar').val(id);
    }
    
    $('#editarItems').submit(function(e){
        e.preventDefault();

        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');

        $.ajax({
            url: "{{ route('back.editarItems') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                $('#editarItems')[0].reset();
                $('#imagen_previa_items_editar').empty();
                $('#contenido_items_editar').summernote('code', '');

                $('#modalEditarItems').modal('hide');
                buscarItems();
            }
        })
    })

    function enviarParaEditarPresentacionItems(id) {
        $.ajax({
            data: { id: id }, 
            type: "GET", 
            url: "{{ route('back.enviarParaEditarPresentacionItems') }}", 
            success: function(data) {
                $('#id_items_editar').val(data.items.id); 
                $('#titulo_items_editar').val(data.items.titulo); 
                $('#contenido_items_editar').summernote('code', data.items.contenido);

                var imagen = '<img src="/uploads/icono/'+data.items.path+'">';
                $('#imagen_previa_items_editar').empty().html(imagen);
            }
        })
    }

    $('#agregarItems').submit(function(e){
        e.preventDefault();

        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');

        $.ajax({
            url: "{{ route('back.agregarItems') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                $('#agregarItems')[0].reset();
                $('#imagen_previa_items').empty();
                $('#contenido_items').summernote('code', '');

                $('#modalAgregarItems').modal('hide');
                buscarItems();
            }
        })
    })

    function buscarItems() {
        $.ajax({
            type: "GET", 
            url: "{{ route('back.buscarItems') }}", 
            success: function(data) {
                $('#tablaPresentacionItems').empty().html(data);

                // 🔄 Destruir cualquier DataTable anterior (opcional, pero recomendado si ya existe)
                if ($.fn.DataTable.isDataTable('.dataTable_items')) {
                    $('.dataTable_items').DataTable().destroy();
                }

                // ✅ Re-inicializar después de cargar el nuevo HTML
                inicializarDataTableItems();    
            }
        })
    }

    $(document).ready(function() {
        inicializarDataTableItems('#dataTable_items');
    });

    function inicializarDataTableItems() {
        const selector = '#dataTable_items';

        // Destruir si ya está instanciado
        if ( $.fn.DataTable.isDataTable(selector) ) {
            $(selector).DataTable().destroy();
        }   

        // Vuelve a inicializar
        $(selector).DataTable({
            pageLength: 10,
            language: {
                decimal: "",
                emptyTable: "No hay información",
                info: "",
                infoEmpty: "Mostrando 0 a 0 de 0 entradas",
                infoFiltered: "(filtrado de MAX entradas totales)",
                loadingRecords: "Cargando...",
                processing: "Procesando...",
                search: "Buscar:",
                zeroRecords: "Sin resultados encontrados",
                paginate: {
                    first: "Primero",
                    last: "Último",
                    next: "Siguiente",
                    previous: "Anterior"
                }
            }
        });

        // 🧲 Activamos sortable sobre el tbody
        $("#sortable_items").sortable({
            items: "tr",
            cursor: 'move',
            opacity: 0.6,
            update: function() {
                guardarOrdenItems();
            }
        });
    }

    function guardarOrdenItems() {
        let orden = [];

        $('#sortable_items tr').each(function(index, element) {
            orden.push({
                id: $(this).data('id'),
                position: index + 1
            });
        });

        $.ajax({
            url: "{{ route('back.ordenarItems') }}",
            method: 'POST',
            data: {
                order: orden,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                

                // Refrescar la tabla
                buscarItems(); // o volver a llamar a inicializarDataTableItems() si es necesario
            }
        });
    }

    document.getElementById("file_items").onchange = function(e) {
        // Creamos el objeto de la clase FileReader
        let reader = new FileReader();

        // Leemos el archivo subido y se lo pasamos a nuestro fileReader
        reader.readAsDataURL(e.target.files[0]);
        var imagen = document.getElementById('file_items').files[0].name;
        document.getElementById('file_items').innerHTML = imagen;

        // Le decimos que cuando este listo ejecute el código interno
        reader.onload = function(){
            let preview = document.getElementById('imagen_previa_items'),
                    image = document.createElement('img');

            image.src = reader.result;

            preview.innerHTML = '';
            preview.append(image);
        };
    }

    $('#agregarPresentacion').submit(function(e){
        e.preventDefault();

        var tipo = $('.btn_presentacion').text();

        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('tipo', tipo);

        $.ajax({
            url: "{{ route('back.agregarPresentacion') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                location.reload();
            }
        })
    })

    $('#agregarSobreNosotros').submit(function(e){
        e.preventDefault();

        var tipo = $('.btn_sobre_nosotros').text();

        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('tipo', tipo);

        $.ajax({
            url: "{{ route('back.agregarSobreNosotros') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                location.reload();
            }
        })
    })

    function enviarPAraEliminarSliderPrincipal(id) {
        $('#id_eliminar_slider_principal').val(id);
    }

    $('#eliminarSliderPrincipal').submit(function(e){
        e.preventDefault();

        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');

        $.ajax({
            url: "{{ route('back.eliminarSliderPrincipal') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                location.reload();
            }
        })
    })

    $('#editarSliderPrincipal').submit(function(e){
        e.preventDefault();

        var habilitado = $('#habilitado').is(':checked') ? 1 : 0;

        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('habilitado', habilitado);


        $.ajax({
            url: "{{ route('back.editarSliderPrincipal') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                location.reload();
            }
        })
    })

    document.getElementById("file_editar_slider_principal").onchange = function(e) {
        // Creamos el objeto de la clase FileReader
        let reader = new FileReader();

        // Leemos el archivo subido y se lo pasamos a nuestro fileReader
        reader.readAsDataURL(e.target.files[0]);
        var imagen = document.getElementById('file_editar_slider_principal').files[0].name;
        document.getElementById('file_editar_slider_principal').innerHTML = imagen;

        // Le decimos que cuando este listo ejecute el código interno
        reader.onload = function(){
            let preview = document.getElementById('imagen_portada_editar_slider_principal'),
                    image = document.createElement('img');

            image.src = reader.result;

            preview.innerHTML = '';
            preview.append(image);
        };
    }

    function enviarParaEditarSliderPrincipal(id) {
        $.ajax({
            type: "GET", 
            data: { id: id }, 
            url: "{{ route('back.enviarParaEditarSliderPrincipal') }}", 
            success: function(data) {
                $('#id_editar_Slider_principal').val(data.slider.id);
                var imagen = '<img src="/uploads/slider/' + data.slider.path + '" alt="Imagen" style="max-width: 100%;">';
                $('#imagen_portada_editar_slider_principal').empty().html(imagen);
                $('#titulo_editar_slider_principal').val(data.slider.titulo);
                $('#subtitulo_editar_slider_principal').summernote('code', data.slider.subtitulo);
                $('#habilitado_editar_slider_principal').prop('checked', Boolean(Number(data.slider.habilitado_boton)));
                $('#nombre_boton_editar_slider_principal').val(data.slider.nombre_boton);
                $('#link_boton_editar_slider_principal').val(data.slider.link_boton);
            }
        })
    }

    $(function () {
        $("#dataTable").DataTable({
            'pageLength': 10,
            language: {
                "decimal": "",
                "emptyTable": "No hay información",
                "info": "",
                "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
                "infoFiltered": "(Filtrado de MAX total Productos)",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            }
        });

        $("#tablecontents").sortable({
            items: "tr",
            cursor: 'move',
            opacity: 0.6,
            update: function() {
                sendOrderToServer();
                location.reload();
            }
        });

        function sendOrderToServer() {
            var order = [];
            $('#tablecontents tr').each(function(index, element) {
                order.push({
                    id: $(this).attr('data-id'),
                    position: index + 1
                });
            });

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{{ route('back.ordenarSliderPrincipal') }}",
                data: {
                    order: order,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    console.log(response.message);
                    // Podés agregar una notificación visual aquí si querés
                },
                error: function(xhr) {
                    console.error('Error al guardar el orden', xhr);
                }
            });
        }
    });

    $('#agregarSliderPrincipal').submit(function(e){
        e.preventDefault();

        var habilitado = $('#habilitado').is(':checked') ? 1 : 0;

        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('habilitado', habilitado);


        $.ajax({
            url: "{{ route('back.agregarSliderPrincipal') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                location.reload();
            }
        })
    })

    document.getElementById("file_agregar").onchange = function(e) {
        // Creamos el objeto de la clase FileReader
        let reader = new FileReader();

        // Leemos el archivo subido y se lo pasamos a nuestro fileReader
        reader.readAsDataURL(e.target.files[0]);
        var imagen = document.getElementById('file_agregar').files[0].name;
        document.getElementById('file_agregar').innerHTML = imagen;

        // Le decimos que cuando este listo ejecute el código interno
        reader.onload = function(){
            let preview = document.getElementById('imagen_portada_agregar'),
                    image = document.createElement('img');

            image.src = reader.result;

            preview.innerHTML = '';
            preview.append(image);
        };
    }
</script>

@endsection