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

@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">Comisiones</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 ">
                                <div class="input-group input-group-static">
                                    <label>Rango de fechas:</label>
                                    <input type="text" class="form-control daterange" id="desde_hasta" placeholder="10/01/2022 - 10/01/2022 " />
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <div class="input-group input-group-static">
                                        <label>Sucursales </label>
                                        <select class="form-control" name="sucursal" id="sucursal">
                                            <option value="0" selected>Todas</option>
                                            @foreach($data['sucursales'] as $sucursal)
                                            <option value="{{$sucursal->Id  }}">{{$sucursal->Descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class=" col-md-4 mt-4">
                                <button type="button" class="btn btn-primary " onclick="loadGrid()">
                                    Buscar
                                </button>
                            </div>
                            <div class=" col-md-2 mt-4 text-end">
                                <button type="button" class="btn btn-primary " onclick="imprimir()">
                                    <span class="material-icons">
                                        print
                                    </span>
                                </button>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <table class="table table-bordered table-hover" id="gridComisiones">
                                <thead>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Código</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Servicio/Producto</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Cantidad</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Factor</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Comisión</th>
                                </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",
            }
        });
        $('#gridComisiones').dataTable().fnDestroy();
        $('#gridComisiones').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();
    });


    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 = $('#desde_hasta').val().split(' - ');

        $('#gridComisiones').dataTable().fnDestroy();
        var table = $('#gridComisiones').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            // responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('reportes/comisiones/get_comisiones')}}",
                type: "POST",
                data: {
                    desde_hasta: fechas,
                    sucursal: $('#sucursal option:selected').val(),
                },
                dataSrc: function(json) {
                    $('#totalLabel').html(json.total)
                    return json.data;
                }
            },
            columns: [{
                    data: "codigo"
                },
                {
                    data: "descripcion"
                },
                {
                    data: "cantidad"
                },
                {
                    data: "comision_p"
                },
                {
                    data: "comision"
                },

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