@extends('layouts/contentLayoutMaster')

@section('title', 'Reporte de Cheques y Dinero')

@section('vendor-style')
    <!-- vendor css files -->
    <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
    <link rel="stylesheet" href="{{asset('vendors/css/pickers/flatpickr/flatpickr.min.css')}}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
@endsection
@section('page-style')

    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/charts/chart-apex.css')) }}">
@endsection

@section('content')
    <!-- Dashboard Analytics Start -->
    <section id="dashboard-analytics">
        <div class="card">
            <div class="card-body p-1">
                <div class="text-center">
                    <h3>Reporte de Cheques y Dinero</h3>
                </div>
                <form class="row" id="filters">
                    <div class="col-6 col-md-3 col-xl-1 pt-1">

                        <input id="desde" type="text" name="date_start"
                               class="text-center ml-1 form-control filter-date form-control-sm date-picker flatpickr-input col"
                               value="{{$date_start}}">

                    </div>
                    <div class="col-6 col-md-3 col-xl-1 pt-1">

                        <input id="hasta" type="text" name="date_end"
                               class="text-center ml-1 form-control filter-date form-control-sm date-picker flatpickr-input col"
                               value="{{$date_end}}">
                    </div>

                    @if($seccionUser->essupervisor)
                        <div class="col-md-4 mb-1">
                            <select class="select2 select2-size-sm form-control form-control-sm" name="salesmans[]"
                                    multiple>
                                @foreach($salesmans as $salesman)
                                    <option
                                        value="{{$salesman->id}}" {{in_array($salesman->id,$filters['salesmans'])?'selected':''}}>{{$salesman->name}}</option>
                                @endforeach

                            </select>


                        </div>
                    @endif


                    <div class="col-md-1 text-center pt-1">
                        <button class="btn btn-sm btn-success" type="submit">Cargar</button>
                    </div>
                </form>


                <section id="basic-datatable" class="mt-1">

                    <div id="charts">
                        <div class="row">
                            @if(isset($cards))
                                @foreach($cards as $card)
                                    <div class="col-lg-3 col-sm-6 col-12">
                                        <div class="card border-secondary">
                                            <div class="card-header">
                                                <div>
                                                    <h2 class="font-weight-bolder mb-0">{{$card['value']??''}}</h2>
                                                    <p class="card-text">{{$card['title']??''}}</p>
                                                </div>
                                                <div class="avatar bg-light-{{$card['color']??'primary'}} p-50 m-0">
                                                    <div class="avatar-content">
                                                        <i data-feather="{{$card['icon']??'alert-octagon'}}"
                                                           class="font-medium-5"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div id="spline"></div>
                            </div>

                        </div>
                    </div>

                    <div class="row pb-1">
                        <div class="col-4 col-sm-3 col-xl-2">
                            <button class="btn btn-sm btn-warning w-100" onclick="pdf()"><i class="fas fa-file-pdf"></i>

                                EXPORTAR A PDF
                            </button>
                        </div>
                    </div>
                    <div id="tabu"></div>


                </section>
            </div>
        </div>


    </section>
    <!-- Dashboard Analytics end -->
@endsection

@section('vendor-script')
    <!-- vendor files -->
    <script src="{{asset('vendors/js/pickers/flatpickr/flatpickr.min.js')}}"></script>
    <script src="{{asset('vendors/js/pickers/flatpickr/es.js')}}"></script>




    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.5/jspdf.plugin.autotable.js"></script>

    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/charts/apexcharts.min.js')) }}"></script>

@endsection
@section('page-script')
    <script>
        flatpickr.localize(flatpickr.l10ns.es);
        let formFilter = document.getElementById("filters");

        let date = new Date();
        let filterDate = $(".filter-date").flatpickr({
            dateFormat: "Y-m-d",

            onChange: () => {
                query();
            }
        });


        function query() {
            $("#filters").submit();
        }


        function suma(values, data, calcParams) {
            if (values && values.length) {
                var total = values.reduce(
                    (sum, x) => +sum + x);
                return parseFloat(total).toFixed(2)
            }
        }


        var table = new Tabulator("#tabu", {
            columns: [ //Define Table Columns
                {title: "Cliente", field: "customer_name"},
                {title: "Nro. Cheque", field: "referencia"},
                {title: "Banco", field: "banco"},
                {title: "Fecha Documento", field: "fechadoc"},
                {title: "Nro. Factura", field: "nro_factura"},

                {title: "Monto Recaudado", field: "monto_rec", formatter: "html", align: "center",},
                {title: "Nota", field: ""},


                    @if(count($filters['salesmans'])==0 || count($filters['salesmans'])>1)
                {
                    title: "Vendedor", field: "salesman_name"
                },
                @endif
            ],
            layout: "fitColumns",
            data:{!! json_encode(array_values($data)) !!}

        });


        function pdf() {
            window.open('{!! route('reportes-cheques-pdf',array_merge(
    ['site'=>$site],
    $filters
    )) !!}')
            /* table.download("pdf", "Reporte Cobranzas.pdf", {
                orientation: "landscape", //set page orientation to portrait
                title: "Reporte Cobranzas", //add title to report
                jsPDF: {
                    unit: "in", //set units to inches
                },
                autoTable: { //advanced table styling
                    styles: {
                        fontSize: 6
                    },

                },
            });*/
        }


    </script>

    <script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>


@endsection