@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;
    }
</style>
<div class="col-12">
    <div class="col-12 bg-white p-3 rounded pb-5 mb-3">
        <div class="col-12">
            <div class="col-12">
                <div class="row g-3">
                    <div class="col-6">
                        <span class="mb-0">Tienda</span>
                    </div>
                    <div class="col-6 text-end">
                        <button data-bs-toggle="modal" data-bs-target="#modalAgregarPais" class="btn btn-dark">PAÍS</button>
                        <button data-bs-toggle="modal" data-bs-target="#modalAgregarCategorias" class="btn btn-dark">CATEGORÍAS</button>
                        <button onclick="mostrarDatosTienda()" data-bs-toggle="modal" data-bs-target="#modalAgregarTienda" class="btn btn-dark">+ AGREGAR</button>
                    </div>
                </div>
            </div>
        </div> 

        <div class="col-12 mt-3">
            <table class="table table-stripped border dataTable" id="dataTable_tienda">
                <thead>
                    <tr>
                        <th style="width: 110px;">Imagen</th>
                        <th>Tienda</th>
                        <th>URL</th>
                        <th>Categorías</th>
                        <th>Pais</th>
                        <th>Situación</th>
                        <th style="width: 100px;"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($tienda as $t)
                        <tr class="align-middle">
                            <td>
                                <img src="{{ asset('uploads/tienda/'.$t->path) }}" style="width: 100px;" alt="">
                            </td>
                            <td>{{ $t->nombre }}</td>
                            <td>{{ $t->link }}</td>
                            <td>{{ $t->nombre_categoria }}</td>
                            <td>{{ $t->nombre_pais }}</td>
                            <td>
                                @if($t->activo == 1)
                                    Activo
                                @else   
                                    Inactivo
                                @endif
                            </td>
                            <td>
                                <button onclick="enviarTiendaEditar('{{ $t->id }}')" data-bs-toggle="modal" data-bs-target="#modalEditarTienda" class="btn btn-light text-success">
                                    <i class="fa-solid fa-pen"></i>
                                </button>
                                <button onclick="eliminarTienda('{{ $t->id }}')" class="btn btn-light text-danger">
                                    <i class="fa-solid fa-trash-can"></i>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

    </div> 
</div>

<!-- Modal Agregar Pais-->
<div class="modal fade" id="modalAgregarPais" 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="exampleModalLabel">País</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="col-12">
                    <div class="row g-3">
                        <div class="col-9">
                            <div class="form-floating">
                                <input type="text" id="nombre_pais" class="form-control">
                                <label for="">País</label>
                            </div>
                        </div>
                        <div class="col-3 text-end">
                            <button onclick="agregarPais()" class="btn btn-dark w-100 h-100">AGREGAR</button>
                        </div>
                        <div class="col-12" id="tablaPais">
                            @include('back.tienda.tablas.tablaPais')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalAgregarCategorias" 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="exampleModalLabel">Categorías</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="col-12">
                    <div class="row g-3">
                        <div class="col-9">
                            <div class="form-floating">
                                <input type="text" id="nombre_categoria" class="form-control">
                                <label for="">Categoría</label>
                            </div>
                        </div>
                        <div class="col-3 text-end">
                            <button onclick="agregarCategorias()" class="btn btn-dark w-100 h-100">AGREGAR</button>
                        </div>
                        <div class="col-12" id="tablaCategoria">
                            @include('back.tienda.tablas.tablaCategorias')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Agregar Tienda --}}
<div class="modal fade" id="modalAgregarTienda" 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="exampleModalLabel">Agregar Tienda</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="agregarTienda">
                <div class="modal-body">
                    <div class="col-12">
                        <div class="row g-3">
                            <div class="col-lg-12">
                                <div class="col-12 border rounded imagen_previa" id="imagen_previa_tienda" style="height: 206px;"></div>

                                <div class="col-12 mt-3">
                                    <div class="form-floating">
                                        <input type="file" name="file" id="fileAgregarTienda" class="form-control">
                                        <label for="">Logo</label>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="form-floating">
                                        <input type="text" name="nombre" class="form-control">
                                        <label for="">Nombre de la tienda</label>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="form-floating">
                                        <select name="id_categoria" id="agregarTiendaCategorias" class="form-control">
                                            
                                        </select>
                                        <label for="">Categorías</label>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="form-floating">
                                        <select name="id_pais" id="agregarTiendaPais" class="form-control">
                                            
                                        </select>
                                        <label for="">País</label>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="form-floating">
                                        <input name="link" type="text" 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 Tienda --}}
<div class="modal fade" id="modalEditarTienda" 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="exampleModalLabel">Editar Tienda</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="editarTienda">
                <div class="modal-body">
                    <div class="col-12">
                        <div class="row g-3">
                            <div class="col-lg-12">
                                <input type="hidden" id="id_tienda_editar" name="id" class="form-control">
                                <div class="col-12 border rounded imagen_previa" id="imagen_previa_tienda_editar" style="height: 206px;"></div>

                                <div class="col-12 mt-3">
                                    <div class="form-floating">
                                        <input type="file" name="file" id="fileAgregarTienda_editar" class="form-control">
                                        <label for="">Logo</label>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="form-floating">
                                        <input type="text" name="nombre" id="nombre_tienda_editar" class="form-control">
                                        <label for="">Nombre de la tienda</label>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="form-floating">
                                        <select name="id_categoria" id="agregarTiendaCategorias_editar" class="form-control">
                                            
                                        </select>
                                        <label for="">Categorías</label>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="form-floating">
                                        <select name="id_pais" id="agregarTiendaPais_editar" class="form-control">
                                            
                                        </select>
                                        <label for="">País</label>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="form-floating">
                                        <input name="link" id="link_tienda_editar" type="text" class="form-control">
                                        <label for="">Link</label>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="activo_editar">
                                        <label class="form-check-label" for="activo_editar">
                                            Activo
                                        </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>

<script src="{{ asset('js/jquery.js') }}"></script>
<script>
    function eliminarTienda(id) {
        if (!confirm('¿Seguro que deseas eliminar esta Tienda?')) return;

        $.ajax({
            type: "POST", 
            url: "{{ route('back.eliminarTienda') }}", 
            data: { id: id, _token: "{{ csrf_token() }}" }, 
            success: function(data) {
                //location.reload();
            }
        })
    }

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

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

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

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

    document.getElementById("fileAgregarTienda_editar").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('fileAgregarTienda_editar').files[0].name;
        document.getElementById('fileAgregarTienda_editar').innerHTML = imagen;

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

            image.src = reader.result;

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

    function enviarTiendaEditar(id) {
        $.ajax({
            type: "GET", 
            data: { id: id }, 
            url: "{{ route('back.enviarTiendaEditar') }}", 
            success: function(data) {
                $('#id_tienda_editar').val(data.tienda.id);
                var imagen = '<img src="../uploads/tienda/'+data.tienda.path+'">';
                $('#imagen_previa_tienda_editar').empty().html(imagen);
                $('#nombre_tienda_editar').val(data.tienda.nombre);
                $('#link_tienda_editar').val(data.tienda.link);

                // var activo = $('#activo_editar').is(':checked') ? 1 : 0;
                if(data.tienda.activo == true) {
                    $('#activo_editar').prop('checked', true);
                } else {
                    $('#activo_editar').prop('checked', false);
                }

                var pais = '';
                var categorias = '';

                categorias += '<option selected disabled>Seleccione ..</option>';
                for(var c = 0; c < data.categorias.length; c++) {
                    if(data.tienda.id_categoria == data.categorias[c].id) {
                        categorias += '<option value="'+data.categorias[c].id+'" selected>'+data.categorias[c].nombre_categoria+'</option>';
                    } else {
                        categorias += '<option value="'+data.categorias[c].id+'">'+data.categorias[c].nombre_categoria+'</option>';
                    }
                }
                $('#agregarTiendaCategorias_editar').empty().append(categorias);

                pais += '<option selected disabled>Seleccione ..</option>';
                for(var p = 0; p < data.pais.length; p++) {
                    if(data.tienda.id_pais == data.pais[p].id) {
                        pais += '<option value="'+data.pais[p].id+'" selected>'+data.pais[p].nombre_pais+'</option>';
                    } else {
                        pais += '<option value="'+data.pais[p].id+'">'+data.pais[p].nombre_pais+'</option>';
                    }
                }
                $('#agregarTiendaPais_editar').empty().append(pais);
            }
        });
    }

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

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

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

    document.getElementById("fileAgregarTienda").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('fileAgregarTienda').files[0].name;
        document.getElementById('fileAgregarTienda').innerHTML = imagen;

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

            image.src = reader.result;

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

    function mostrarDatosTienda() {
        $.ajax({
            type: "GET", 
            url: "{{ route('back.mostrarDatosTienda') }}",
            success: function(data) {
                var pais = '';
                var categorias = '';

                categorias += '<option selected disabled>Seleccione ..</option>';
                for(var c = 0; c < data.categorias.length; c++) {
                    categorias += '<option value="'+data.categorias[c].id+'">'+data.categorias[c].nombre_categoria+'</option>';
                }
                $('#agregarTiendaCategorias').empty().append(categorias);

                pais += '<option selected disabled>Seleccione ..</option>';
                for(var p = 0; p < data.pais.length; p++) {
                    pais += '<option value="'+data.pais[p].id+'">'+data.pais[p].nombre_pais+'</option>';
                }
                $('#agregarTiendaPais').empty().append(pais);
            }
        })
    }

    $(document).ready(function() {
        // Editar nombre del país
        $('#tablaCategoria').on('blur', '.editable', function() {
            let td = $(this);
            let nuevoValor = td.text().trim();
            let campo = td.data('campo');
            let id = td.closest('tr').data('id');

            $.ajax({
                url: '/editarCategoria/' + id,
                type: 'PUT',
                data: {
                    _token: '{{ csrf_token() }}',
                    [campo]: nuevoValor
                },
                success: function(res) {
                    console.log('Actualizado');
                },
                error: function(err) {
                    alert('Error al actualizar');
                }
            });
        });

        // Eliminar país
        $('#tablaCategoria').on('click', '.btn-eliminar-categoria', function() {
            if (!confirm('¿Seguro que deseas eliminar esta Categoría?')) return;

            let fila = $(this).closest('tr');
            let id = fila.data('id');

            $.ajax({
                url: '/eliminarCategoria/' + id,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(res) {
                    fila.remove();
                },
                error: function(err) {
                    alert('Error al eliminar');
                }
            });
        });
    });

    function agregarCategorias() {
        var nombre = $('#nombre_categoria').val(); 
        $.ajax({
            type: "POST", 
            data: { nombre: nombre, _token: "{{ csrf_token() }}" }, 
            url: "{{ route('back.agregarCategorias') }}", 
            success: function(data) {
                $('#nombre_categoria').val('');
                buscarTablaCategorias();
                setTimeout(() => {
                    $('#nombre_categoria').focus();
                }, 500);
            }
        })
    }

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

    $(document).ready(function() {
        // Editar nombre del país
        $('#tablaPaises').on('blur', '.editable', function() {
            let td = $(this);
            let nuevoValor = td.text().trim();
            let campo = td.data('campo');
            let id = td.closest('tr').data('id');

            $.ajax({
                url: '/editarPais/' + id,
                type: 'PUT',
                data: {
                    _token: '{{ csrf_token() }}',
                    [campo]: nuevoValor
                },
                success: function(res) {
                    console.log('Actualizado');
                },
                error: function(err) {
                    alert('Error al actualizar');
                }
            });
        });

        // Eliminar país
        $('#tablaPaises').on('click', '.btn-eliminar', function() {
            if (!confirm('¿Seguro que deseas eliminar este país?')) return;

            let fila = $(this).closest('tr');
            let id = fila.data('id');

            $.ajax({
                url: '/eliminarPais/' + id,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(res) {
                    fila.remove();
                },
                error: function(err) {
                    alert('Error al eliminar');
                }
            });
        });
    });

    function agregarPais() {
        var nombre = $('#nombre_pais').val(); 
        $.ajax({
            type: "POST", 
            data: { nombre: nombre, _token: "{{ csrf_token() }}" }, 
            url: "{{ route('back.agregarPais') }}", 
            success: function(data) {
                $('#nombre_pais').val('');
                buscarTablaPais();
                setTimeout(() => {
                    $('#nombre_pais').focus();
                }, 500);
            }
        })
    }

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

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

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

        // 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"
                }
            }
        });
    }
</script>

@endsection