@extends('layouts.app')

@section('content')
<div class="container">
    <form method="post" id="upload_form" enctype="multipart/form-data">
    {{ csrf_field() }}
        <div class="row pb-4">
            <div class="col-sm-4">
                <fieldset>
                    <legend>Sin Comprobante</legend>
                    <a class="btn btn-success" href="{{ route('expenses.create') }}">Nueva Cuenta x Pagar</a>
                </fieldset>
            </div>
             
            <div class="col-sm-4">  
                <legend>Con Comprobante</legend>
                <input type="file" class="form-control-file" name="file[]" id="file" aria-describedby="fileHelp" multiple="multiple">      
            </div>
            <div class="col-md-4 p-4">
                <input type="submit" name="upload" id="upload" class="btn btn-primary" value="Subir Archivo">
            </div> 
                     
        </div>
    </form>
    <div class="row">
        <div class="col-sm-12">
            <table class="table table-bordered" id="tbl_expenses">
                <thead>
                    <tr>
                        <td>Id</td>
                        <td>Tipo Comprobante</td>
                        <td>Folio</td>
                        <td>Razon Social</td>
                        <td>Fecha Emision</td>
                        <td>Estatus</td>
                        <td>Accion</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 tblExpenses;
$( document ).ready(function() {
   
    tblExpenses =  $('#tbl_expenses').DataTable({
        processing: true,
        serverSide: false,
        dom: 'lBfrtip',
        ajax: {
          url: '{!! route('expensesdata') !!}',
        },
        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: 'tipocomprobante', name: 'tipocomprobante' },
            { data: 'foliofiscal', name: 'foliofiscal' },
            { data: 'razonsocial', name: 'razonsocial' },
            { data: 'fechaemision', name: 'fechaemision' },
            { data: 'nombreEstatus', name: 'nombreEstatus' },
            { data: 'id', name: 'id' }
           
        ],
        aoColumnDefs: [
            {
                "targets":[6],
                "mRender": function (data,type, row) {
                    var url ='{{ action("ExpensesController@edit", ["id" => "#demo"]) }}'
                    var newurl = url.replace("#demo",data);
                    return "<a href="+newurl+" class='btn btn-success showdetail' data-id="+data+">Editar</a>"
                }
            }
        ]
    });

   

    $("#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@store') !!}",  //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();                    
                 },
                 error: function(error){
                     var demo = error;
                 }
             });

            
        } else {
            alert('Selecionar por lo menos 1 Pedido')
        }
    })
    
    $('#upload_form').on('submit', function(event){
        event.preventDefault();
        var form_data = new FormData();

        // Read selected files
        var totalfiles = 2
        var Files = $('#file')[0].files; 

        $.each(Files, function(index,value) {

          
            var formData = new FormData;
            formData.append('file',value);
            formData.append('_token',  $("input[name=_token]").val() )
           
            $.ajax({
                url:"{{ route('uploadexpenses') }}",
                method:"POST",
                data: formData,
                dataType:'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success:function(data)
                {
                    tblExpenses.ajax.reload();
                }
            })

        });

  

    });

});

</script>
@endpush