@extends('layouts.default')
@section('scripts')
    {{ Jqgrid::scripts() }}

    <!-- SheetJS (js-xlsx) CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.3/xlsx.full.min.js"></script>


    <script type="text/javascript">

        options = {
             includeLabels : true,
             includeGroupHeader : true,
             includeFooter: true,
             fileName : "jqGridExport.xlsx",
             mimetype : "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
             maxlength : 40,
             onBeforeExport : null,
             replaceStr : null,
             loadIndicator : true
        }

        $(document).ready(function() {
            $('#jqgrid').jqGrid({
                url: '{{{ url("stock/datagrid") }}}',
                colModel: {{ Jqgrid::js_colmodel() }},
                gridComplete: function() {
                    $.jgrid.defaults.gridComplete();
                    $('#btn_editar>div.btn').addClass('disabled'); // deshabilita boton editar
                    $('#btn_eliminar>div.btn').addClass('disabled'); // deshabilita boton eliminar
                },
                onSelectRow: function(row_id) {
                    row_data = $("#jqgrid").getRowData(row_id);
                    $('#producto_editar_id').val(row_data['NREGUIST']); // setear id producto
                    $('#producto_eliminar_id').val(row_data['NREGUIST']); // setear id producto
                },
                sortname: 'STK_FISICO',
                sortorder: "desc",
                sortable: true
            });

            $('#jqgrid').jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});

            // Botones
            $('#jqgrid').jqGrid('navGrid', '#jqgrid_pager', {add: false, edit: false, del: false, search: false});


            $('#jqgrid2').jqGrid({
                url: '{{{ url("stock/movimientos/0") }}}',
                colModel: {{ Jqgrid::js_colmodel('movimientos') }},
                gridComplete: function() {
                    $.jgrid.defaults.gridComplete();
                    $('#btn_editar>div.btn').addClass('disabled'); // deshabilita boton editar
                    $('#btn_eliminar>div.btn').addClass('disabled'); // deshabilita boton eliminar
                },
                onSelectRow: function(row_id) {
                    row_data = $("#jqgrid2").getRowData(row_id);
                    $('#producto_editar_id').val(row_data['NREGUIST']); // setear id producto
                    $('#producto_eliminar_id').val(row_data['NREGUIST']); // setear id producto
                },
                sortname: 'FECHA',
                sortorder: "asc",
            });
            $('#jqgrid2').jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});

            // Botones
            $('#jqgrid2').jqGrid('navGrid', '#jqgrid_pager2', {add: false, edit: false, del: false, search: false});

            /*
			$("#excel").on("click", function()
            {
                alert('EXCELL');
                $("#jqGrid").jqGrid('exportToExcel', options);               
            });
            */

            // Añadir el botón Excel a la barra de navegación
            $('#jqgrid').jqGrid('navButtonAdd', '#jqgrid_pager', {
                caption: "Exportar a Excel",
                buttonicon: "ui-icon-save", // Puedes cambiar el icono según tus necesidades
                onClickButton: function () {
                      exportarAExcel();
                },
                position: "last", // Puedes ajustar la posición del botón en la barra de navegación
                title: "Exportar a Excel"
            });

            function exportarAExcel() {
                /*
                var grid = $("#jqgrid");
                var gridData = [];
                var ids = grid.jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    gridData.push(grid.jqGrid('getRowData', ids[i]));
                }
                */

                var gridData = [];
                $.get('{{ url('stock/saldo_productos/') }}', function(data) {
                    /*
                    $.each(data, function(index, value) {
                        console.log(value);
                        gridData.push(grid.jqGrid('getRowData', value));
                    });
                    */
                    // Crear un objeto de libro de Excel
                    var workbook  = XLSX.utils.book_new();
                    var worksheet = XLSX.utils.json_to_sheet(data);

                    console.log(worksheet);

                    // Aplicar formato al título (por ejemplo, en la celda A1)
                    /*
                    let title = 'INVENTARIO DE PRODUCTOS';
 
                    let titleRow = 1; // Ajusta la posición de la fila para que el título esté en la primera fila
                    let titleCell = { v: title, s: { font: { bold: true, color: { rgb: '000000' } }, alignment: { horizontal: 'center' } } };
                    worksheet[XLSX.utils.encode_cell({ r: titleRow, c: 0 })] = titleCell;
                    */

                    // Agregar la hoja al libro
                    XLSX.utils.book_append_sheet(workbook, worksheet, "Datos");

                    // Guardar el archivo
                    XLSX.writeFile(workbook, 'datos.xlsx');

                }, 'json');
            }

            $(document).on('click', 'button[name*="stock"]', function() {
                // Valor de las celdas
                var codigo =  $(this).parents("tr").find("td").eq(1).text();
                var nombre =  $(this).parents("tr").find("td").eq(3).text();                
                
                $('#nombreProducto').html('Código: ' + codigo + ' Nombre: ' + nombre);

                $.get('{{ url('stock/movimientos') }}/' + codigo, function(data) {
                    $('#det_oc_content').html('');
                    var tsaldo         = 0;
                    $.each(data, function(index, value) {
                        var CODIGO     = value.CODIGO;
                        var NOMBRE     = value.NOMBRE;
                        var LOTE       = value.LOTE;
                        var FECHA      = value.FECHA;
                        var TIPO_DOCTO = value.TIPO_DOCTO;
                        var DOCTO      = value.DOCTO;
                        var PRECIO     = value.PRECIO;
                        var ENTRADAS   = value.ENTRADAS;
                        var SALIDAS    = value.SALIDAS;

                        var estilo     = 'style="color: red;"';
                        tsaldo         = tsaldo + (ENTRADAS - SALIDAS);
                        if (tsaldo     >0)
                        {
                            var estilo = 'style="color: green;"';
                        }

                        template = '<tr class="item-det-oc" data-numrecor="' + value.NUMRECOR + '" data-ncodart="' + value.NCODART + '" data-preciounitoc="' + parseInt(value.PRECUNIT) + '" data-seqocdet="' + value.SEQOCDET + '">' +
                            '<td>' + FECHA      + '</td>' +
                            '<td>' + TIPO_DOCTO + '</td>' +
                            '<td>' + DOCTO      + '</td>' +
                            '<td>' + LOTE       + '</td>' +
                            '<td>' + currency(parseFloat(PRECIO).toFixed(2))                  + '</td>' +
                            '<td style="color: green;"><b>' + parseFloat(ENTRADAS).toFixed(3) + '</b></td>' +
                            '<td style="color: red  ;"><b>' + parseFloat(SALIDAS).toFixed(3)  + '</b></td>' +
                            '<td '+estilo+'><b>' + parseFloat(tsaldo).toFixed(3)              + '</b></td>' +

                        '</tr>';
                        $('#det_oc_content').append(template);
                    });
                }, 'json');

                $('#productos_editar_modal').modal('show');
            });

            // al cerrar modals, resetear form
            $('#productos_agregar_modal, #productos_editar_modal, #productos_eliminar_modal').on('hidden.bs.modal', function () {
                form = $(this).find('form').trigger('reset');
                clean_form_errors(form);
            });
        });
    </script>
    @endsection

    @section('content')
    @include('subviews.jqgrid_widget')
    <!-- Modal Editar -->
    <!-- Modal -->
    <div class="modal fade" id="productos_editar_modal" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style='width: 90%;'>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" tabindex="-1" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                </div>
                <div class="modal-body">
                     <div class="row">
                          <div class="col-md-12">

                              <!-- widget grid -->
                              <section id="widget-grid" class="">
                                  <!-- row -->
                                  <div class="table">
                                       <!-- NEW WIDGET START -->
                                           <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                               <!-- Widget ID (each widget will need unique ID)-->
                                               <div class="jarviswidget jarviswidget-color-darken" id="wid-id-2">
                                                    <header>
                                                        <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                                                        <h2><div id='nombreProducto'></div></h2>
                                                    </header>
                                                    <!-- widget div-->
                                                    <div class="table-responsive">
                                                       <div class="row">
                                                            <table class="table table-hover">
                                                               <thead>
                                                                 <tr>
                                                                     <th>Fecha</th>
                                                                     <th>Tipo Docto</th>
                                                                     <th>Docto</th>
                                                                     <th>Lote</th>
                                                                     <th>Precio Unit.</th>
                                                                     <th>Entradas</th>
                                                                     <th>Salidas</th>
                                                                     <th>Saldo</th>
                                                                 </tr>
                                                               </thead>
                                                               <tbody id="det_oc_content">
                                                               <tr>
                                                                    <td colspan="8" class="text-center">Sin detalle</td>
                                                               </tr>
                                                               </tbody>
                                                            </table>
                                                        </div>
                                                       <!-- end widget content -->
                                                    </div>
                                                    <!-- end widget div -->
                                               </div>
                                           <!-- end widget -->
                                           </article>
                                       <!-- WIDGET END -->
                                  </div>
                                  <!-- end row -->
                              </section>
                              <!-- end widget grid -->

                          </div>
                     </div>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-danger" data-dismiss="modal">Volver</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@endsection