@extends('layouts.app', ['activePage' => 'aud_documentos', 'titlePage' => __('Reportes / Auditoria de documentos')])

@section('content')


<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 de documentos</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="input-group input-group-static mb-4 ">
                                    <label for="">Cliente <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="cliente">
                                    <input type="hidden" class="form-control" id="cuenta_cliente">
                                    <input type="hidden" class="form-control" id="id_cliente">
                                    <input type="hidden" class="form-control" id="nombre_cliente">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-primary form-control" onclick="getClienteInfo()">Buscar</button>
                            </div>

                        </div>
                        <div class="row mt-3">
                            <table class="table table-bordered table-hover" id="gridDocumentos">
                                <thead>
                                    <tr>
                                        <th class="text-white text-xxs font-weight-bolder opacity-7">Cuenta</th>
                                        <th class="text-white text-xxs font-weight-bolder opacity-7">Nombre</th>
                                        <th class="text-white text-xxs font-weight-bolder opacity-7">Serie y folio</th>
                                        <th class="text-white text-xxs font-weight-bolder opacity-7">Saldo documento</th>
                                        <th class="text-white text-xxs font-weight-bolder opacity-7">Saldo calculado</th>
                                        <th class="text-white text-xxs font-weight-bolder opacity-7">Pagos documento</th>
                                        <th class="text-white text-xxs font-weight-bolder opacity-7">Pagos calculados</th>
                                        <th width="20%" class="text-white text-xxs font-weight-bolder opacity-7">Observaciones</th>
                                        <!-- <th class="text-white text-xxs font-weight-bolder opacity-7">Acciones</th> -->
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                                <!-- <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </tfoot> -->
                            </table>
                        </div>
                    </div>
                </div>
            </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')
            }
        });

        $(".datepicker").flatpickr({
            minDate: "today"
        });

        $('.daterange').daterangepicker({
            startDate: moment().startOf('hour'),
            endDate: moment().startOf('hour').add(32, 'hour'),
            locale: {
                format: 'YYYY-MM-DD',
                applyLabel: "Aplicar",
                cancelLabel: "Cancelar",
            }
        });
        $('#gridDocumentos').dataTable().fnDestroy();
        $('#gridDocumentos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            scrollY: '50vh',
            scrollCollapse: true,
            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'
                }
            ],

        });

        // loadGrid();
    });

    $('#cliente').autocomplete({
        source: function(request, response) {
            if ($('#cliente').val().length >= 3) {
                $.ajax({
                    url: "{{url('operaciones/cxc/get_cliente')}}",
                    dataType: 'json',
                    data: {
                        term: request.term
                    },
                    success: function(data) {
                        response(data)
                    }
                });
            }
        }
    });

    function getClienteInfo() {
        if ($('#cliente').val() != '') {

            $.ajax({
                    url: "{{url('operaciones/cxc/get_clienteinfo')}}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        cliente: $('#cliente').val(),
                    },
                })
                .done(function(resp) {
                    $('#id_cliente').val(resp.data['Id'])
                    $('#cuenta_cliente').val(resp.data['Cuenta'])
                    $('#nombre_cliente').val(resp.data['Nombre'])
                    loadGrid(resp.data['Id'])
                })
                .fail(function() {
                    console.log("error");
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'No se han encontrado coincidencias con la lista de clientes',
                        showConfirmButton: false,
                        timer: 3000
                    });
                    $('#cliente').val('')
                })
                .always(function() {
                        console.log("complete");
                    });
                }else{
                    loadGrid()
                }
    }

    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(cliente = '') {
        //$('#').DataTable();

        $('#gridDocumentos').dataTable().fnDestroy();
        var table = $('#gridDocumentos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            // responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('reportes/auditoria_documentos/get_documnetos')}}",
                type: "POST",
                data: {
                    cliente: cliente,
                },
            },
            columns: [{
                    data: "cliente_cuenta"
                },
                {
                    data: "cliente_nombre"
                },
                {
                    data: "seriefolio"
                },
                {
                    data: "saldo"
                },
                {
                    data: "SaldoValidar"
                },
                {
                    data: "pagos"
                },
                {
                    data: "pagos_doc"
                },
                {
                    data: "observaciones"
                },
                // {
                //     data: "acciones"
                // },
            ],
            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'
                }
            ],
            // footerCallback: function(row, data, start, end, display) {
            //     var api = this.api();

            //     // Remove the formatting to get integer data for summation
            //     var intVal = function(i) {
            //         return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            //     };

            //     // Total over all pages
            //     total = api
            //         .column(4)
            //         .data()
            //         .reduce(function(a, b) {
            //             return intVal(a) + intVal(b);
            //         }, 0);

            //     // Total over this page
            //     pageTotal = api
            //         .column(4, {
            //             page: 'current'
            //         })
            //         .data()
            //         .reduce(function(a, b) {
            //             return intVal(a) + intVal(b);
            //         }, 0);

            //     // Update footer
            //     $(api.column(4).footer()).html('TOTAL PAGINA: $' + pageTotal + ' <br>TOTAL TABLA: $' + total);
            // },
        });

    }


    // $('#gridAutos 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');
    //     }
    // });

    // function format(d) {
    //     // `d` is the original data object for the row
    //     return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
    //         '<tr>' +
    //         '<td>Tasa IVA:</td>' +
    //         '<td><small>' + d.Color + '</small></td>' +
    //         '</tr>' +
    //         '<tr>' +
    //         '<td>Almacen Venta:</td>' +
    //         '<td><small>' + d.Descripcion + '</small></td>' +
    //         '</tr>' +
    //         '</table>';
    // }

    function imprimir() {
        var fechas = $('#desde_hasta').val().split(' - ');
        var sucursal = $('#sucursal option:selected').val();
        window.open("{{url('reportes/comisiones/imprimir')}}/" + fechas + "/" + sucursal, '_blank');
    }
</script>
@endsection