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

@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">Consulta clientes-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="id_cliente">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="input-group input-group-static">
                                    <label>Tipo de consulta <span class="text-danger">*</span></label>
                                    <select class="form-control" id="tipo_consulta">
                                        <option value="1" selected>Sin saldo</option>
                                        <option value="2">Con saldo</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-primary" onclick="loadGrid()">Buscar</button>
                            </div>
                            <div class=" col-md-3 text-end">
                                <button type="button" class="btn btn-primary " id="btn-print" disabled onclick="imprimir()">
                                    <span class="material-icons">
                                        print
                                    </span>
                                </button>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <table class="table table-bordered table-hover" id="gridAuditoria">
                                <thead>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Concepto</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Documento</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Referencia</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Plazo</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Cargos</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Abonos</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Saldo</th>
                                </thead>
                                <tbody>

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <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",
            }
        });

        $('#gridAuditoria').dataTable().fnDestroy();
        $('#gridAuditoria').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Blfrtip',
            processing: true,
            scrollY: '50vh',
            scrollCollapse: true,
            bSort: false,
            paging: false,

            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'
                }
            ],

        });
    });

    $('#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)
                    }
                });
            }
        },
        select: function(event, ui) {
            $('#id_cliente').val(ui.item.id)
            $('#btn-print').prop('disabled', false);
        },
    });

    function loadGrid() {
        var cliente = $('#id_cliente').val();
        var tipo_consulta = $('#tipo_consulta option:selected').val();
        $.ajax({
                url: "{{url('reportes/auditoria_clientes/get_documentos')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id_cliente: cliente,
                    tipo_consulta: tipo_consulta,
                },
            })
            .done(function(resp) {
                var t = $('#gridAuditoria').DataTable();
                t.clear();

                $.each(resp.documentos, function(index, value) {
                    t.row.add([
                        value['FechaDocumento'],
                        'VENTAS A CREDITO',
                        value['Serie'] + '-' + value['Folio'],
                        '',
                        value['plazo'],
                        formatter.format(value['ImporteConImpuestos']),
                        '',
                        formatter.format(value['Saldo']),
                    ]).node().style = 'background:#d3d3d3; color:white';
                    t.draw()

                    $.each(resp.pagos, function(index2, value2) {
                        var pago_cancelado = '';
                        var pago_text = '';
                        if (value2['Estatus'] == 'Cancelado') {
                            pago_cancelado = 'color:red'
                            pago_text = ' / CANCELADO';
                        }
                        if (value2['id_doc'] == value['Id']) {
                            t.row.add([
                                value2['Fecha'],
                                'PAGO FACTURA' + pago_text,
                                '',
                                value2['serie_folio'],
                                '',
                                '',
                                formatter.format(value2['documento_pago']),
                                formatter.format(0),
                            ]).node().style = pago_cancelado;
                            t.draw()
                        }
                    });
                    t.row.add([
                        '',
                        '',
                        '',
                        '',
                        '',
                        '',
                        '',
                        '',
                    ]).draw();
                });


                // t.row.add([
                //     '<p class="font-weight-bold">PAGOS</p>',
                //     '',
                //     '',
                //     '',
                //     '',
                //     '',
                // ]).draw();


            })
            .fail(function() {

            })
            .always(function() {
                console.log("complete");
            });
    }

    function imprimir() {
        var cliente = $('#id_cliente').val();
        var tipo_consulta = $('#tipo_consulta option:selected').val();
        window.open("{{url('reportes/auditoria_clientes/imprimir')}}/" + cliente + "/" + tipo_consulta, '_blank');
    }
</script>
@endsection