@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-6">
        <form  action="{{ url('importExcel') }}" class="form-horizontal" method="post" enctype="multipart/form-data">
        @csrf

        @if ($errors->any())

            <div class="alert alert-danger">

                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

                <ul>

                    @foreach ($errors->all() as $error)

                        <li>{{ $error }}</li>

                    @endforeach

                </ul>

            </div>

        @endif

        @if (Session::has('success'))

            <div class="alert alert-success">

                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

                <p>{{ Session::get('success') }}</p>

            </div>

        @endif

        <input class="form-group" type="file" name="import_file" />

        <button class="btn btn-primary" >Cargar Archivo</button>

        </form>
        </div>
        <div class="col-md-6">
        <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
            <button class="btn btn-warning" id="btnSaveBarcode" name="btnSaveBarcode">Grabar Codigo Barras</button>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <table class="table table-bordered" id="tbl_products">
                <thead>
                    <tr>
                        <td>Id</td>
                        <td>Codigo</td>
                        <td>Nombre</td>
                        <td>Codigo de Barras</td>
                
                    </tr>
                </thead>
            </table>
        </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 tblProducts;
$( document ).ready(function() {
   
    tblProducts =  $('#tbl_products').DataTable({
        processing: true,
        serverSide: false,
        dom: 'lBfrtip',
        ajax: {
          url: '{!! route('productdata') !!}',
        },
        language: {
              "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
              },
              dom: 'Bfrtip',
        buttons: [
            { extend:'pdf',
              exportOptions: {
                modifier: {
                  page: 'all',
                  search: 'none'   
                }
              },
              customize: function (doc) {
            var tblBody = doc.content[1].table.body;
                for(var i=0;i<tblBody[0].length;i++){
                  tblBody[0][i].fillColor = '#FFFFFF';
                  tblBody[0][i].color = 'black';
                }
           
 
                        var objLayout = {};
                        objLayout['hLineWidth'] = function(i) { return .5; };
                        objLayout['vLineWidth'] = function(i) { return .5; };
                        objLayout['hLineColor'] = function(i) { return '#aaa'; };
                        objLayout['vLineColor'] = function(i) { return '#aaa'; };
                        objLayout['paddingLeft'] = function(i) { return 4; };
                        objLayout['paddingRight'] = function(i) { return 4; };
                        doc.content[1].layout = objLayout;
                        var obj = {};
                        obj['hLineWidth'] =  function(i) { return .5; };
                        obj['hLineColor'] = function(i) { return '#aaa'; };
                     //   doc.content[1].margin = [ 150, 0, 150, 0 ];
            }
            }
        ],
        columns: [
            { data: 'id', name: 'id' },
            { data: 'code', name: 'code' },
            { data: 'name', name: 'name' },
            { data: 'barcode', name: 'barcode' }
        ],
        aoColumnDefs: [
            {
                "targets":[3],
                "mRender": function (data,type, row) {
                    return "<input type='text' class='form-control' value="+data+" >"
                }
            }
        ]
    });

    $("#btnSaveBarcode").on('click',function() {
        
        var data = tblProducts.rows().data();
        var saveProducts = [];
        if(data.length > 0) {
            var counter = 0
            $.each(data, function(index,value) {
                if( tblProducts.cell(index,3).nodes().to$().find('input').val().length > 0 ) {

                    saveProducts[counter] = { 'productId' : value.id, 'barcode': tblProducts.cell(index,3).nodes().to$().find('input').val()                 }
                    counter++;
                }
            })
           
             $.ajax({
                 type: 'POST',
                 url: "{!! action('ProductController@updatebarcode') !!}",  //call your php file
                 data: { products:JSON.stringify( saveProducts ),_token: $("#_token").val() },
                 cache: false,
                 success: function(data){

                 console.log(JSON.parse(data))
                    tblProducts.ajax.reload();
                    alert("Los Codigos de Barras se capturaron correctamente");                    
                 },
                 error: function(error){
                     var demo = error;
                 }
             });

            
        } else {
            alert('Selecionar por lo menos 1 Pedido')
        }
    })
    
});

</script>
@endpush