@extends('layout')
@section('almacenes-active', 'active')
@section('producto-active', 'active')

@section('bread-module', 'Almacén')
@section('bread-submodule', 'Productos')
@section('hero-title', 'Lista de Productos')
@section('hero-subtitle', 'Productos')
@section('btn-add')
    <a class="main-btn-add" href="#" id="btn_añadir_producto">
        <i class="fas fa-plus-circle"></i> Nuevo
    </a>
@endsection

@section('content')

    @include('almacenes.productos.modals.mdl_producto_stocks')
    @include('almacenes.productos.modals.mdl_importar_productos')

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>Productos</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content" id="div_productos">
                        <div class="row justify-content-center">
                            <div class="col-12 mb-3" style="text-align: end;">
                                <button type="button" class="btn btn-success mr-2" id="btn_importar_productos">
                                    <i class="fas fa-file-import"></i> IMPORTAR
                                </button>
                                <a href="{{ route('almacenes.producto.getExcel') }}" class="btn btn-primary">
                                    <i class="fas fa-file-excel"></i> EXCEL
                                </a>
                            </div>
                            <div class="col-12">
                                <div class="table-responsive">
                                    @include('almacenes.productos.tables.tbl_list_productos')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let table = null;
        const bodyTableShowStocks = document.querySelector('#tableShowStocks tbody');
        let dtProductoColores = null;
        let dtProductoTallas = null;
        let dtProductos = null;

        document.addEventListener('DOMContentLoaded', () => {
            iniciarDataTableProductos();
            cargarSelect2();
            events();
        })

        function events() {
            $('#btn_añadir_producto').on('click', añadirProducto);
            $('#btn_importar_productos').on('click', function () {
                $('#mdl_importar_productos').modal('show');
            });
            eventsMdlStocks();
            eventsMdlImportProducts();
        }

        function cargarSelect2() {
            $(".select2_almacen").select2({
                placeholder: "SELECCIONAR",
                allowClear: true,
                width: '100%',
                appendTo: "#mdl_producto_stocks .modal-body"
            });
        }

        function iniciarDataTableProductos() {
            dtProductos = $('.dataTables-producto').DataTable({
                "responsive": true,
                "serverSide": true,
                "processing": true,
                "order": [],
                "ajax": "{{ route('almacenes.producto.getTable') }}",
                "columns": [{
                        data: 'codigo',
                        className: "text-left",
                        name: "p.codigo"
                    },
                    {
                        data: 'nombre',
                        className: "text-left",
                        name: "p.nombre"
                    },
                    {
                        data: 'modelo',
                        className: "text-left",
                        name: "mo.descripcion"
                    },
                    {
                        data: 'marca',
                        className: "text-left",
                        name: "ma.marca"
                    },
                    {
                        data: 'categoria',
                        className: "text-left",
                        name: "ca.descripcion"
                    },
                    {
                        data: 'colores',
                        className: "text-center",
                        searchable: false,
                        orderable: false,
                        render: function(data) {

                            if (!data) {
                                return '<span class="badge badge-secondary">Sin colores</span>';
                            }

                            let colores = data.split(',');
                            let tooltip = colores.map(c => c.trim()).join(', ');

                            let html = `<div data-toggle="tooltip" data-html="true" title="${tooltip}">`;

                            colores.slice(0, 3).forEach(color => {
                                html += `
                                    <span class="badge badge-info mr-1 mb-1" style="font-size:11px;">
                                        ${color.trim()}
                                    </span>
                                `;
                            });

                            if (colores.length > 3) {
                                html += `<span class="badge badge-light">+${colores.length - 3}</span>`;
                            }

                            html += `</div>`;

                            return html;
                        }
                    },
                    {
                        data: 'id',
                        defaultContent: "",
                        searchable: false,
                        className: "text-center",
                        render: function(data, type, row) {

                            const btnStock = `<a onclick="openMdlStocks(${data});"     data-id=${data} class='btn btn-success' href='javascript:void(0);' title='STOCKS'>
                                                <i class='fa fa-eye ver-stocks-producto'></i> Ver
                                            </a>`;

                            return btnStock;
                        }
                    },
                    {
                        data: null,
                        defaultContent: "",
                        searchable: false,
                        className: "text-center",
                        render: function(data) {
                            //Ruta Detalle
                            var url_detalle = '{{ route('almacenes.producto.show', ':id') }}';
                            url_detalle = url_detalle.replace(':id', data.id);

                            //Ruta Modificar
                            var url_editar = '{{ route('almacenes.producto.edit', ':id') }}';
                            url_editar = url_editar.replace(':id', data.id);


                            // <li>
                            //     <a class='dropdown-item' href='${url_detalle}' title='Detalle'>
                            //     <i class='fa fa-eye'></i> Ver
                            //     </a>
                            // </li>

                            return `
                        <div class='btn-group' style='text-transform:capitalize;'>
                            <button data-toggle='dropdown' class='btn btn-success btn-sm dropdown-toggle'>
                            <i class='fa fa-bars'></i>
                            </button>
                            <ul class='dropdown-menu'>

                            <li>
                                <a class='dropdown-item modificarDetalle' href='${url_editar}' title='Modificar'>
                                <i class='fa fa-edit'></i> Editar
                                </a>
                            </li>
                            <li>
                                <a class='dropdown-item' href='#' onclick='eliminar(${data.id})' title='Eliminar'>
                                <i class='fa fa-trash'></i> Eliminar
                                </a>
                            </li>
                            </ul>
                        </div>
                        `;

                        }
                    }
                ],
                language: {
                    processing: "Procesando...",
                    search: "Buscar codigo,nombre,modelo,marca,categoria:",
                    lengthMenu: "Mostrar _MENU_ registros",
                    info: "Mostrando de _START_ a _END_ de _TOTAL_ registros",
                    infoEmpty: "Mostrando 0 a 0 de 0 registros",
                    infoFiltered: "(filtrado de _MAX_ registros totales)",
                    infoPostFix: "",
                    loadingRecords: "Cargando...",
                    zeroRecords: "No se encontraron registros coincidentes",
                    emptyTable: "No hay datos disponibles en la tabla",
                    paginate: {
                        first: "Primero",
                        previous: "Anterior",
                        next: "Siguiente",
                        last: "Último"
                    },
                    aria: {
                        sortAscending: ": activar para ordenar la columna ascendente",
                        sortDescending: ": activar para ordenar la columna descendente"
                    },
                    select: {
                        rows: {
                            _: "Has seleccionado %d filas",
                            0: "Haz clic en una fila para seleccionarla",
                            1: "Has seleccionado 1 fila"
                        }
                    }
                },
                createdRow: function(row, data, dataIndex, cells) {
                    $(row).addClass('fila_lote');
                    $(row).attr('data-href', "");
                },
            });
        }

        $(document).on('draw.dt', function() {
            $('[data-toggle="tooltip"]').tooltip();
        });


        // Funciones de Eventos
        function añadirProducto() {
            window.location = "{{ route('almacenes.producto.create') }}";
        }

        function eliminar(id) {
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger',
                },
                buttonsStyling: false
            })
            Swal.fire({
                title: 'Opción Eliminar',
                text: "¿Seguro que desea guardar cambios?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: "#1ab394",
                confirmButtonText: 'Si, Confirmar',
                cancelButtonText: "No, Cancelar",
            }).then((result) => {
                if (result.isConfirmed) {
                    //Ruta Eliminar
                    var url_eliminar = '{{ route('almacenes.producto.destroy', ':id') }}';
                    url_eliminar = url_eliminar.replace(':id', id);
                    $(location).attr('href', url_eliminar);

                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    swalWithBootstrapButtons.fire(
                        'Cancelado',
                        'La Solicitud se ha cancelado.',
                        'error'
                    )
                }
            })
        }

        $(".btn-modal-file").on('click', function() {
            $("#modal_file").modal("show");
        });

        function resetearTabla() {
            bodyTableShowStocks.innerHTML = '';
        }


        function cargarDataTables() {
            table = new DataTable('#tableShowStocks', {
                language: {
                    processing: "Traitement en cours...",
                    search: "BUSCAR: ",
                    lengthMenu: "MOSTRAR _MENU_ ELEMENTOS",
                    info: "MOSTRANDO _START_ A _END_ DE _TOTAL_ ELEMENTOS",
                    infoEmpty: "MOSTRANDO 0 ELEMENTOS",
                    infoFiltered: "(FILTRADO de _MAX_ PRODUCTOS)",
                    infoPostFix: "",
                    loadingRecords: "CARGA EN CURSO",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: "NO HAY PRODUCTOS DISPONIBLES",
                    paginate: {
                        first: "PRIMERO",
                        previous: "ANTERIOR",
                        next: "SIGUIENTE",
                        last: "ÚLTIMO"
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    }
                }
            });

        }
    </script>
@endpush