@extends('layouts.app', ['activePage' => 'clientes', 'titlePage' => __('Autos')])

@section('content')

<style>
    #gridPoyectos th {
        font-size: 10px;
    }

    table {
        table-layout: fixed;
    }

    table td {
        word-wrap: break-word;
        max-width: 200px;
    }

    #gridPoyectos td {
        white-space: inherit;
    }

    table.dataTable tbody td {
        word-break: break-all;
        vertical-align: top;
    }
</style>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4">
                                <h4 class="card-title">Auditoria</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-5">
            
                                    <label for="">Fiel</label>
                                    <input type="file" class="form-control-file" id="fiel">
           
                            </div>
                            <div class="col-5
                            ">
                      
                                    <label for="">Llave</label>
                                    <input type="file" class="form-control-file" id="llave">
                                
                            </div>
                            <div class="col-2">
                                <div class="input-group input-group-static mb-4">
                                    <label for="">Pass</label>
                                    <input type="password" class="form-control" id="pass">
                                </div>
                            </div>


                        </div>
                        <div class="row">
                                                    <div class="col-2">
                          <div class="input-group input-group-static my-3">
                            <label>Hasta</label>
                            <input type="input" id="rango" class="form-control daterange">
                          </div>                            
                        </div>
                        <div class="col-2">
                            <button class="btn btn-primary" onclick="auditar()">Auditar</button>                          
                        </div>
                        </div>
                        <div class="row ">
                            <table class="table table-bordered table-hover" id="gridPoyectos">
                                <thead>
                                    <!-- <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">
                                        </th> -->
                                    <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                    <th class="text-white text-xxs font-weight-bolder opacity-7">UUID</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">RFC</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Razon Social</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Monto</th>
                                    <!--<th class="text-white  text-xxs font-weight-bolder opacity-7">Contacto</th>-->
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Tipo</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Estatus</th>

                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Estado</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha</th>
                                </thead>
                                <tbody id="list">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modalEsc" id="modalCargando" tabindex="-1" role="dialog" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        
        <h4 class="modal-title">Cargando...</h4>
        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
            <div class="py-3 text-center">
              <div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
              <h4 class="text-gradient text-info mt-4">Cargando...</h4>
             
            </div>
      </div>
      <!--<div class="modal-footer">
        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>-->
    </div>
  </div>
</div>









<link rel="stylesheet" href="{{asset('vendor/jquery-ui/jquery-ui.min.css')}}">
<script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $('.dropify').dropify();
        
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
          $('.daterange').daterangepicker({
            startDate: moment().startOf('hour'),
            endDate: moment().startOf('hour'),
            locale: {
                format: 'YYYY-MM-DD',
                applyLabel: "Aplicar",
                cancelLabel: "Cancelar",
            }
        });
        //loadGrid();
    });


    function auditar(){
        $('#modalCargando').modal('show')
        var rango = $('#rango').val()
        var fiel = $('#fiel').get(0).files[0]
        var llave = $('#llave').get(0).files[0]
        var pass = $('#pass').val()
        console.log(fiel)
        var formData = new FormData();
        formData.append('rango', rango);
        formData.append('fiel', fiel);
        formData.append('llave', llave);
        formData.append('pass', pass);
        $.ajax({
            url: "{{url('operaciones/almacendigital')}}",
            type: 'POST',
            //dataType: 'json',
            data: formData,
            contentType: false,
            processData: false,
            cache: false,
        })
        .done(function(resp) {
            console.log(resp);

            loadGrid();
             $('#modalCargando').modal('hide')
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        
    }


    function blockSpecialChar(e) {
        var k;
        document.all ? k = e.keyCode : k = e.which;
        return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
    }


   function loadGrid() {
        //$('#').DataTable();
        var fechas = $('#rango').val()

        $('#gridPoyectos').dataTable().fnDestroy();
        $('#gridPoyectos td').css('white-space', 'initial');
        var table = $('#gridPoyectos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('operaciones/getfactauditorias')}}",
                type: "POST",
                data: {
                    rango: fechas
                }
            },
            columns: [
                // {
                //     "className": 'details-control',
                //     "orderable": false,
                //     "data": null,
                //     "defaultContent": ''
                // },
                {
                    data: "id"
                },
                {
                    data: "uuid"
                },
                {
                    data: "rfc"
                },
                {
                    data: "razon_social"
                },
                /*{
                    data: "cliente"
                },*/
                {
                    data: "monto"
                },
                {
                    data: "tipo"
                },
                {
                    data: "estatus"
                },
                {
                    data: "estado"
                },
                {
                    data: "fecha"
                },

            ],

            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });

        // $('#gridPoyectos tbody').on('click', 'td.details-control', function() {
        //     var tr = $(this).closest('tr');
        //     var row = table.row(tr);

        //     if (row.child.isShown()) {
        //         // This row is already open - close it
        //         row.child.hide();
        //         tr.removeClass('shown');
        //     } else {
        //         // Open this row
        //         row.child(format(row.data())).show();
        //         tr.addClass('shown');
        //     }
        // });
    }


   
</script>
@endsection