@extends('layouts.app')

@section('content')
<div class="container">

    <div class="row">
        <div class="col-sm-12">
            <table class="table table-bordered" id="tbl_inventory">
                <thead>
                    <tr>
                        <td>Id</td>
                        <td>Linea</td>
                        <td>Codigo</td>
                        <td>Producto</td>
                        <td>Codigo de Barras</td>
                        <td>Disponible</td>
                        <td>Cantidad</td>
                         
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="row">
        <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
        <div class="col-md-12"><a href="#" class="btn btn-success" id="btnGrabar" name="btnGrabar">Grabar</a></div>
    </div>
    <div class="modal fade" id="KardexModal"  tabindex="-1" role="dialog"   aria-labelledby="kardexModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle"></h5>
                    <button type="button" class="close"   data-dismiss="modal"   aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    
                </div>
                <div class="modal-footer">
                    <button type="button"  class="btn btn-default"  data-dismiss="modal">Cerrar</button>
                    
                </div>
            </div>
        </div>
    </div>
</div>
@stop
@push('scripts')
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"> defer</script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script>
var tblInventory;
$( document ).ready(function() {
   
    tblInventory =  $('#tbl_inventory').DataTable({
        processing: true,
        serverSide: false,
        dom: 'Bfrtip',
        buttons: [
            { extend:'pdf',
              exportOptions: {
                modifier: {
                  page: 'all',
                  search: 'none'   
                }
              }
            }
        ],
        ajax: {
          url: '{!! route('inventorydata') !!}',
        },
        language: {
              "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
              },
        buttons: [
          'csv', 'excel', 'pdf'
        ],
        columns: [
            { data: 'id', name: 'id' },
            { data: 'line', name: 'line'},
            { data: 'code', name: 'code' },
            { data: 'productname', name: 'productname' },
            { data: 'barcode', name: 'barcode' },
            { data: 'available', name: 'available' },
            { data: 'status', name: 'status' }
        ],
        aoColumnDefs: [
            {
                "targets": [4],
                "mRender": function ( data,type, row ) {
                    var info = row.barcode == null  ? 0 : row.barcode;
                   // var available = "<a href='#' class='btn btn-warning viewHistory' data-id='"+row.id+"' data-prod='"+row.productname+"'>Historico</a>";
                    var available = "<input type='text' value='"+info+"' >"
                    return available;
                }
            },
            {
                "targets": [6],
                "mRender": function ( data,type, row ) {
                    var info = row.available == null  ? 0 : row.available;
                   // var available = "<a href='#' class='btn btn-warning viewHistory' data-id='"+row.id+"' data-prod='"+row.productname+"'>Historico</a>";
                    var available = "<input type='text' > "
                    return available;
                }
            }
        ]
    });

    $("#btnGrabar").on('click', function() {
        
        var inventory = tblInventory.rows().data();
        var allproducts = [];
        var counter = 0;
        $.each(inventory, function(index,value) {
            allproducts[counter] = new Array();
            allproducts[counter][0] = value[0];
            allproducts[counter][1] =  tblConcept.cell(index,5).nodes().to$().find('input').val();
            allproducts[counter][2] =  tblConcept.cell(index,4).nodes().to$().find('input').val();
            counter++;	
        })

        var dtn = { _token: $("#_token").val(),products: allproducts };
        
        $.ajax({
            type: 'POST',
            url: "{{ route('updateinventory') }}", // call your php file
            data: dtn,
            cache: false,
            success: function(data){
               // var info = JSON.parse(data);
                
            }
        });

    })

    $(document).on('click','.viewHistory', function(e) {
            e.preventDefault();
            var productId = $(this).data('id');
            var name = $(this).data('prod');
            var lineas = "";

        $.ajax({
                type: 'GET',
                url: "{{ route('getproductkardex') }}", // call your php file
                data: 'productId='+productId,
                cache: false,
                success: function(data){
                    //data = JSON.parse(data);
                    lineas += "<table class='table table-bordered'>";
                    lineas += "<tr><td>Fecha</td><td>Inventario Cargado</td><td>Inventario Inicial</td><td>Inventario Final</td></tr>"
                    $.each(data,function(index,element) {
                    
                        lineas +=  "<tr><td>"+element.created_at+"</td><td>"+element.available+"</td><td>"+element.available_initial+"</td><td>"+element.available_final+"</td></tr>"
                    })

                    lineas +=  "</table>";
                    $("#modalTitle").html(name);
                    var mymodal = $('#KardexModal');
                    mymodal.find('.modal-body').html(lineas);
                    mymodal.modal('show');
                                  
                },
                error: function(error){
                    var demo = error;
                }
            });
        
    })
    

    

    
});

</script>
@endpush