@extends('layouts.admin')

@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/datatablesb5/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatablesb5/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatablesb5/colReorder.bootstrap5.min.css') }}">

    <style>
        /* Resaltado de búsqueda */
        mark {
            padding: 0.2em;
            background-color: #fff8dd;
            color: #ff3e1d;
            font-weight: bold;
            border-radius: 4px;
        }

        /* Estilo para fila de stock bajo */
        tr.low-stock td {
            background-color: #ffe0db !important;
            /* Rojo suave */
            color: #ff3e1d;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0">

                    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                        <h5 class="m-0 fw-bold text-primary">
                            <i class="fas fa-boxes me-2"></i>Listado de Artículos
                        </h5>
                        <a class="btn btn-primary shadow-sm" href="{{ route('articulo.nuevo') }}">
                            <i class="fa fa-plus me-1"></i> Registrar Artículo
                        </a>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped align-middle" id="table_id" width="100%">
                                <thead class="table-light">
                                    <tr>
                                        <th width="10%">Acciones</th>
                                        <th>Nombre</th>
                                        {{-- <th>Descripción</th>
                                        <th>Categoría</th>
                                        <th>Proveedor</th> --}}
                                        <th>Precio Venta</th>
                                        <th>Stock</th>
                                        <th>Mínimo</th>
                                        <th>Cód. Barras</th>
                                        <th>Detalles</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    
    {{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> --}}

    <script src="{{ asset('plugins/datatablesb5/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/dataTables.bootstrap5.min.js') }}"></script>

    <script src="{{ asset('plugins/datatablesb5/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.print.min.js') }}"></script>

    <script src="{{ asset('plugins/datatablesb5/jszip.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/pdfmake.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/vfs_fonts.js') }}"></script>

    <script src="{{ asset('plugins/datatablesb5/dataTables.colReorder.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/dataTables.rowReorder.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/jquery.mark.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/dataTables.searchHighlight.min.js') }}"></script>

    <script>
        var ruta = "{{ route('articulo.getArticulos') }}";

        $(document).ready(function() {
            const table = $("#table_id").DataTable({
                // DOM modificado para alinear botones a la izquierda y buscador a la derecha
                dom: "<'row mb-3'<'col-sm-12 col-md-6'B><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

                processing: true,
                serverSide: true,
                ajax: ruta,

                // Configuraciones extra
                autoFill: true,
                stateSave: true,
                stateDuration: 60 * 60 * 24, // 24 horas
                colReorder: true,

                // Menú de longitud
                lengthMenu: [10, 25, 50, 100],

                // ------------------------------------------
                // CONFIGURACIÓN DE BOTONES AGRUPADOS
                // ------------------------------------------
                buttons: [{
                        extend: 'collection',
                        text: '<i class="fas fa-file-export me-1"></i> Exportar',
                        className: 'btn btn-outline-secondary btn-sm dropdown-toggle',
                        buttons: [{
                                extend: 'copy',
                                text: '<i class="fas fa-copy me-2"></i> Copiar',
                                className: 'dropdown-item',
                                action: exportarTodosLosRegistros, //
                                exportOptions: {
                                    columns: ':visible :not(:first-child)'
                                }
                            },
                            {
                                extend: 'csv',
                                text: '<i class="fas fa-file-csv me-2"></i> CSV',
                                className: 'dropdown-item',
                                action: exportarTodosLosRegistros, //
                                exportOptions: {
                                    columns: ':visible :not(:first-child)'
                                }
                            },
                            {
                                extend: 'excel',
                                text: '<i class="fas fa-file-excel me-2"></i> Excel',
                                className: 'dropdown-item',
                                action: exportarTodosLosRegistros, //
                                exportOptions: {
                                    columns: ':visible :not(:first-child)'
                                }
                            },
                            {
                                extend: 'pdf',
                                text: '<i class="fas fa-file-pdf me-2"></i> PDF',
                                className: 'dropdown-item',
                                action: exportarTodosLosRegistros, //
                                orientation: 'landscape',
                                exportOptions: {
                                    columns: ':visible :not(:first-child)'
                                }
                            },
                            {
                                extend: 'print',
                                text: '<i class="fas fa-print me-2"></i> Imprimir',
                                className: 'dropdown-item',
                                action: exportarTodosLosRegistros, //
                                exportOptions: {
                                    columns: ':visible :not(:first-child)'
                                }
                            }
                        ]
                    },
                    {
                        extend: 'colvis',
                        text: '<i class="fas fa-columns me-1"></i> Columnas',
                        columns: ':not(.noVis)',
                        className: 'btn btn-outline-secondary btn-sm'
                    },
                    {
                        extend: 'pageLength',
                        className: 'btn btn-outline-secondary btn-sm'
                    }
                ],

                language: {
                    url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json"
                },

                // ------------------------------------------
                // DEFINICIÓN DE COLUMNAS
                // ------------------------------------------
                columns: [{
                        data: null,
                        orderable: false,
                        searchable: false,
                        className: 'noVis text-center',
                        render: function(data, type, row) {
                            // AQUÍ ESTABA EL ERROR: Se eliminaron los espacios dentro de < y >
                            return `
                <div class="btn-group">
                    <button class="btn btn-sm btn-outline-primary editar" data-id="${row.id}" title="Editar">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger eliminar" data-id="${row.id}" title="Eliminar">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>`;
                        },
                    },


                    {
                        data: "nombre",
                        name: "nombre",
                        className: "fw-bold"
                    },
                    //  {
                    //     data: "descripcion",
                    //     name: "descripcion",
                    //     render: function(data) {
                    //         if (!data) return '';
                    //         // Truncar texto para que no rompa la tabla, mostrar tooltip
                    //         let corto = data.length > 50 ? data.substring(0, 50) + '...' : data;
                    //         return `<span title="${data}">${corto}</span>`;
                    //     }
                    // }, {
                    //     data: "categoria_nombre",
                    //     name: "categoria_nombre",
                    //     render: function(data) {
                    //         return `<span class="badge bg-label-info text-info">${data}</span>`;
                    //     }
                    // }, {
                    //     data: "proveedor_nombre",
                    //     name: "proveedor_nombre"
                    // }, 
                    {
                        data: "p_venta",
                        name: "p_venta",
                        className: "text-end fw-bold text-success",
                        render: function(data) {
                            return new Intl.NumberFormat("es-GT", {
                                style: 'currency',
                                currency: 'GTQ'
                            }).format(data);
                        },
                    }, {
                        data: "stock",
                        name: "stock",
                        className: "text-center"
                    }, {
                        data: "min_stock",
                        name: "min_stock",
                        className: "text-center"
                    }, {
                        data: "cod_barras",
                        name: "cod_barras"
                    }, {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function(data) {
                            return `
                            <small class="text-muted">
                                <div><i class="fas fa-industry me-1"></i> ${data.fabricante || '-'}</div>
                                <div><i class="fas fa-ruler me-1"></i> ${data.medida || '-'}</div>
                                <div><i class="fas fa-map-marker-alt me-1"></i> ${data.ubicacion || '-'}</div>
                            </small>
                        `;
                        }
                    }
                ],

                // Callback para pintar fila roja si hay poco stock
                rowCallback: function(row, data) {
                    if (parseFloat(data.stock) <= parseFloat(data.min_stock)) {
                        $(row).addClass('low-stock');
                    }
                },

                // Callback para resaltar texto buscado
                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();
                    }

                    // Inicializar tooltips de Bootstrap en cada redibujado
                    /* var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                      return new bootstrap.Tooltip(tooltipTriggerEl)
                    })
                    */
                }
            });

            // ------------------------------------------
            // EVENTOS (EDITAR Y ELIMINAR)
            // ------------------------------------------

            $("#table_id").on("click", ".editar", function() {
                var id = $(this).data("id");
                let rutaEdit = `{{ route('articulo.show', ':id') }}`;
                window.location.href = rutaEdit.replace(':id', id);
            });

            $("#table_id").on("click", ".eliminar", function(e) {
                var id = $(this).data("id");
                var rutaDelete = `{{ route('articulo.delete', ':id') }}`.replace(':id', id);

                if (confirm("¿Estás seguro de eliminar este artículo?")) {
                    $.ajax({
                        url: rutaDelete,
                        method: "GET",
                        data: {
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            // Importante: En ServerSide NO usamos row.remove(), recargamos ajax
                            table.ajax.reload(null, false);
                            alert("Artículo eliminado correctamente.");
                        },
                        error: function(error) {
                            console.error("Error:", error);
                            let msg = error.responseJSON ? error.responseJSON.message :
                                "Error desconocido";
                            alert("Hubo un error al eliminar: " + msg);
                        },
                    });
                }
            });
        });

        // Función para forzar la descarga de todos los registros antes de exportar
        function exportarTodosLosRegistros(e, dt, button, config) {
            var self = this;
            var oldStart = dt.settings()[0]._iDisplayStart;

            dt.one('preXhr', function(e, s, data) {
                // Le pedimos al servidor TODOS los registros (length = -1)
                data.start = 0;
                data.length = -1;

                dt.one('preDraw', function(e, settings) {
                    // Verificamos qué botón se presionó y disparamos su acción original
                    if (button[0].className.indexOf('buttons-copy') >= 0) {
                        $.fn.dataTable.ext.buttons.copyHtml5.action.call(self, e, dt, button, config);
                    } else if (button[0].className.indexOf('buttons-excel') >= 0) {
                        $.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config);
                    } else if (button[0].className.indexOf('buttons-csv') >= 0) {
                        $.fn.dataTable.ext.buttons.csvHtml5.action.call(self, e, dt, button, config);
                    } else if (button[0].className.indexOf('buttons-pdf') >= 0) {
                        $.fn.dataTable.ext.buttons.pdfHtml5.action.call(self, e, dt, button, config);
                    } else if (button[0].className.indexOf('buttons-print') >= 0) {
                        $.fn.dataTable.ext.buttons.print.action(e, dt, button, config);
                    }

                    dt.one('preXhr', function(e, s, data) {
                        // Restauramos la paginación a como estaba antes de exportar
                        settings._iDisplayStart = oldStart;
                        data.start = oldStart;
                    });

                    // Recargamos la tabla en segundo plano para dejarla como estaba
                    setTimeout(dt.ajax.reload, 0);

                    // Cancelamos el renderizado de los miles de registros en el HTML para que no se congele la pantalla
                    return false;
                });
            });

            // Disparamos la petición Ajax con los nuevos parámetros
            dt.ajax.reload();
        }
    </script>
@endsection