@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/datatable/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('plugins/datatables/buttons.dataTables.min.css')}}">
<style>
    mark {
        padding: 0;
        background-color: rgb(255, 136, 176);
        border-radius: 0.28571429rem;
    }
</style>
<link rel="stylesheet" type="text/css" href="{{asset('plugins/datatables/colReorder.dataTables.min.css')}}" />
<link rel="stylesheet" type="text/css" href="{{asset('plugins/datatables/rowReorder.dataTables.min.css')}}" />
@endsection

@section('content')
<div class="row">
    <div class="col">
        <div class="card mb-4">
            <div class="card-body table-responsive">
                <div class="d-flex justify-content-sm-between">
                    <h3 class="card-title">Listado de Articulos</h3>
                    <div class=""><a class="btn btn-primary" href="{{route('articulo.nuevo')}}"> <i class="fa fa-plus" aria-hidden="true"></i> Registrar Articulo</a></div>
                </div>
                <table class="table table-hover" id="table_id" data-page-length="20">
                    <thead style=" cursor: pointer;">
                        <tr>
                            <th></th>
                            <th>Nombre </th>
                            <th>Descripcion </th>
                            <th>Categoria</th>
                            <th>Proveedor</th>
                            <th>Precio Venta</th>
                            <th>Stock</th>
                            <th>Minimo Stock</th>
                            <th>Codigo de Barras</th>
                            <th>Detalles</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <!-- <tfoot>
                        <tr>
                            <th></th>
                            <th>Nombre</th>
                            <th>Descripcion</th>
                            <th>Categoria</th>
                            <th>Proveedor</th>
                            <th>Precio Venta</th>
                            <th>Stock</th>
                            <th>Minimo Stock</th>
                            <th>Detalles</th>
                        </tr>
                    </tfoot> -->
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')


<script src="{{asset('plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugins/datatable/js/dataTables.bootstrap4.min.js')}}"></script>

<script src="{{asset('plugins/datatables/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('plugins/datatables/jszip.min.js')}}"></script>
<script src="{{asset('plugins/datatables/pdfmake.min.js')}}"></script>
<script src="{{asset('plugins/datatables/vfs_fonts.js')}}"></script>
<script src="{{asset('plugins/datatables/buttons.html5.min.js')}}"></script>
<script src="{{asset('plugins/datatables/buttons.print.min.js')}}"></script>

<script src="{{asset('plugins/datatables/buttons.colVis.min.js')}}"></script>
<script src="{{asset('plugins/datatables/jquery.mark.min.js')}}"></script>
<script src="{{asset('plugins/datatables/dataTables.searchHighlight.min.js')}}"></script>
<script type="text/javascript" src="{{asset('plugins/datatables/dataTables.colReorder.min.js')}}"></script>
<script type="text/javascript" src="{{asset('plugins/datatables/dataTables.rowReorder.min.js')}}"></script>

<script>
    var ruta = " {{ route('articulo.getArticulos') }}";
    $(document).ready(function() {
        const table = $("#table_id").DataTable({
            dom: 'Bfrtip',
            processing: true,
            serverSide: true,
            ajax: ruta,


            autoFill: true,


            scrollCollapse: true,
            scrollY: '60vh',
            scrollX: false,


            // esto lo que realiza es que solo al presionar enter se realiza la búsqueda
            search: {
                return: true
            },

            // esto es para cambiar la cantidad de registros a mostrar

            lengthMenu: [10, 25, 50, -1],





            language: {
                search: "Buscar Articulo",
                // Puedes añadir más traducciones aquí si lo deseas
                "lengthMenu": "Mostrar _MENU_ registros por página",
                "zeroRecords": "No se encontraron resultados",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                "infoEmpty": "Mostrando 0 a 0 de 0 registros",
                "infoFiltered": "(filtrado de _MAX_ registros totales)",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print', 'pageLength',
                // Agregado para Visibilidad de Columnas
                {
                    extend: 'colvis',
                    text: 'Columnas',
                    columns: ':not(.noVis)', // Evita que la primera columna de acciones se pueda ocultar
                    className: 'btn btn-secondary btn-sm' // Estilo opcional para el botón
                }
            ],
            columns: [{
                    data: null,
                    orderable: false,
                    searchable: false,
                    className: 'noVis', // Clase para que ColVis la ignore si aplicas el filtro
                    render: function(data, type, row) {
                        return ` <button class="btn btn-sm btn-primary editar" data-id="${row.id}"><i class="fas fa-edit"></i></button>
                                 <button class="btn btn-sm btn-danger eliminar" data-id="${row.id}"><i class="fa fa-trash" aria-hidden="true"></i></button>`;
                    },
                },
                {
                    data: "nombre",
                    name: "nombre"
                },
                {
                    data: "descripcion",
                    name: "descripcion",
                    render: function(data) {
                        var texto = data;
                        var longitud = 30;
                        // Usar regex para dividir el texto cada 'longitud' caracteres
                        var arrayText = texto ? texto.match(new RegExp('.{1,' + longitud + '}', 'g')) : [''];
                        var resultado = "";
                        arrayText.forEach(function(elemento, indice, array) {
                            resultado += elemento + (indice < array.length - 1 ? "<br>" : "");
                        });
                        return `<span class="text-wrap">${resultado}</span>`;
                    }
                },
                {
                    data: "categoria_nombre",
                    name: "categoria_nombre"
                },
                {
                    data: "proveedor_nombre",
                    name: "proveedor_nombre"
                },
                {
                    data: "p_venta",
                    name: "p_venta",
                    render: function(data) {
                        return ("Q " + new Intl.NumberFormat("es-GT", {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2,
                        }).format(data));
                    },
                },
                {
                    data: "stock",
                    name: "stock"
                },
                {
                    data: "min_stock",
                    name: "min_stock"
                },
                {
                    data: "cod_barras",
                    name: "cod_barras"
                },
                {
                    data: null,
                    name: "detalles",
                    orderable: false, // Probablemente no querrás ordenar por este campo renderizado
                    searchable: false, // La búsqueda sobre este renderizado podría ser compleja si no manejas en el server
                    render: function(data) {
                        return `
                            Fabricante: ${data.fabricante || 'N/A'}<br>
                            Medida: ${data.medida || 'N/A'}<br>
                            Unidad: ${data.unidad || 'N/A'}<br>
                            Ubicación: ${data.ubicacion || 'N/A'}
                        `;
                    }
                }
            ],
            rowCallback: function(row, data) {
                if (data.stock < data.min_stock) {
                    $(row).css('background-color', 'rgb(71 116 123)');
                    $(row).css('color', 'black');
                }
                // Ejemplo de barra de progreso en Stock
                // const stockCell = $('td:eq(6)', row); // Índice de la columna 'Stock'
                // const maxStock = 100; // Asume un valor máximo para la barra, o tráelo de los datos
                // const percentage = (data.stock / maxStock) * 100;
                // const color = percentage > 75 ? 'bg-success' : (percentage > 25 ? 'bg-warning' : 'bg-danger');
                // stockCell.html(`
                //     <div class="progress">
                //         <div class="progress-bar ${color}" role="progressbar" style="width: ${percentage}%" aria-valuenow="${data.stock}" aria-valuemin="0" aria-valuemax="${maxStock}">
                //             <span class="text-dark">${data.stock}</span>
                //         </div>
                //     </div>
                // `);
            },
            drawCallback: function(settings) {
                var api = this.api();
                var search = api.search();
                if (search) {
                    $(api.table().body()).unmark();
                    $(api.table().body()).mark(search, {
                        "caseSensitive": false
                    });
                } else {
                    $(api.table().body()).unmark();
                }
            },
            // ----------------------------------------------------
            // EJEMPLOS DE OTRAS FUNCIONES (descomenta y adapta)
            // ----------------------------------------------------

            // 1. Filtrado por Columnas Individuales (¡Requiere tfoot en el HTML!)
            // initComplete: function() {
            //     this.api().columns().every(function(colIdx) {
            //         // Evita las columnas que no quieres filtrar (ej. la de acciones y detalles)
            //         if (colIdx === 0 || colIdx === 8) { // Ajusta los índices de las columnas según tus necesidades
            //             $(this.footer()).html(''); // Limpia el footer de estas columnas si no quieres input
            //             return;
            //         }
            //         var column = this;
            //         var input = $('<input type="text" placeholder="Buscar..." class="form-control form-control-sm"/>')
            //             .appendTo($(column.footer()).empty())
            //             .on('keyup change clear', function() {
            //                 if (column.search() !== this.value) {
            //                     column.search(this.value).draw();
            //                 }
            //             });
            //     });
            // },

            // // 3. Reordenamiento de Columnas (ColReorder)
            // colReorder: true,
            // // 2. Redimenciones de Columnas (ColResize)
            // colResize: {
            //     resizeCallback: function(column) {
            //         this.api().columns.adjust().draw();
            //     }
            // },
            stateSave: true, // Guarda el estado de la tabla (paginación, búsqueda, orden)
            stateDuration: 60 * 60 * 24, // Guarda el estado por 24 horas (en segundos)



            // initComplete: function() {
            //     this.api()
            //         // .column(0) // Si quieres aplicar a otra columna, cambia el índice
            //         // .columns() // Aplica a todas las columnas
            //         .column(3)
            //         .every(function() {
            //             let column = this;

            //             // Create select element
            //             let select = document.createElement('select');
            //             select.add(new Option(''));
            //             column.footer().replaceChildren(select);

            //             // Apply listener for user change in value
            //             select.addEventListener('change', function() {
            //                 column
            //                     .search(select.value, {
            //                         exact: true
            //                     })
            //                     .draw();
            //             });

            //             // Add list of options
            //             column
            //                 .data()
            //                 .unique()
            //                 .sort()
            //                 .each(function(d, j) {
            //                     select.add(new Option(d));
            //                 });
            //         });
            // }


        });


        // esto es para hacer enfacis en la columna seleccionada

        // table.on('mouseenter', 'td', function() {
        //     let colIdx = table.cell(this).index().column;

        //     table
        //         .cells()
        //         .nodes()
        //         .each((el) => el.classList.remove('highlight'));

        //     table
        //         .column(colIdx)
        //         .nodes()
        //         .each((el) => el.classList.add('highlight'));
        // });



        // table.on('click', 'tbody tr', (e) => {
        //     let classList = e.currentTarget.classList;

        //     if (classList.contains('selected')) {
        //         classList.remove('selected');
        //     } else {
        //         table.rows('.selected').nodes().each((row) => row.classList.remove('selected'));
        //         classList.add('selected');
        //         console.log('seleccionado', $(this).data);

        //     }
        // });









        // Manejar eventos de clic en los botones (esto permanece igual)
        $("#table_id").on("click", ".editar", function() {
            var id = $(this).data("id");
            let ruta = `{{ route('articulo.show', ':id') }}`
            window.location.href = ruta.replace(':id', id);
        });




        $("#table_id").on("click", ".eliminar", function(e) {

            // e.preventDefault();


            var id = $(this).data("id");
            var ruta = `{{ route('articulo.delete', ':id') }}`
            ruta = ruta.replace(':id', id);

            if (confirm("¿Estás seguro de eliminar este artículo?")) {
                $.ajax({
                    url: ruta,
                    method: "GET",
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(e) {


                        // console.log("Artículo eliminado correctamente", e);

                        // Elimina la fila actual de la tabla sin recargar


                        table.row($(e.target).closest('tr')).remove().draw(false);

                        table.ajax.reload(null, false);





                        alert("Artículo eliminado correctamente2.");



                    },
                    error: function(error) {
                        console.error("Error al eliminar el artículo:", error.responseJSON.message);
                        alert("Hubo un error al eliminar el artículo." + error.responseJSON.message);
                    },
                });
            } else {
                alert("Eliminación cancelada.");
            }
        });
    });
</script>
@endsection