@extends('layouts/contentLayoutMaster')

@section('title', 'Cobranzas')

@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')
    @include('shared.errors')
    @include('shared.message')
    <!-- Dashboard Analytics Start -->
    <section id="dashboard-analytics">
        <div class="card">
            <div class="card-body p-1">
                <div class="text-center">
                    <h3>Cobranzas</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 form-control-sm filter-date form-control form-control-sm-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 form-control-sm filter-date form-control form-control-sm-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 form-control form-control-sm-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 class="d-none">
                                <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">1.2gb</h2>
                                                <p class="card-text">Memory Usage</p>
                                            </div>
                                            <div class="avatar bg-light-success p-50 m-0">
                                                <div class="avatar-content">
                                                    <i data-feather="server" class="font-medium-5"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6 col-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <div>
                                                <h2 class="font-weight-bolder mb-0">0.1%</h2>
                                                <p class="card-text">Downtime Ratio</p>
                                            </div>
                                            <div class="avatar bg-light-danger p-50 m-0">
                                                <div class="avatar-content">
                                                    <i data-feather="activity" class="font-medium-5"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6 col-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <div>
                                                <h2 class="font-weight-bolder mb-0">13</h2>
                                                <p class="card-text">Issues Found</p>
                                            </div>
                                            <div class="avatar bg-light-warning p-50 m-0">
                                                <div class="avatar-content">
                                                    <i data-feather="alert-octagon" class="font-medium-5"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </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 class="pl-1">
                        *Para editar: presione la fila a realizar el cambio
                    </div>
                    <div id="tabu"></div>


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


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

    <div class="modal fade" id="updateCobranzaModal" tabindex="-1" aria-labelledby="updateCobranzaModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{route('update-cobranza',['site'=>$site])}}" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="updateCobranzaModalLabel">Editar Cobranza</h5>
                        <a class="text-body" href="javascript:void(0);" data-dismiss="modal" aria-label="Close"
                        ><i data-feather="x"></i
                            ></a>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning" role="alert">
                            <div class="alert-body">
                                El valor recaudado puede ser actualizado una sola vez!
                            </div>
                        </div>
                        <input type="hidden" name="orden" id="orden" value="">
                        <div class="row pt-1">
                            <div class="col-12 col-md-6 pb-1">
                                <div class="row">
                                    <div class="col-5">
                                        <label for="llave">Llave: </label>
                                    </div>
                                    <div class="col-7">
                                        <input name="llave" id="llave" type="text" class="form-control form-control-sm"
                                               readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 pb-1">
                                <div class="row">
                                    <div class="col-5">
                                        <label for="nro_factura">Nro. Fac.: </label>
                                    </div>
                                    <div class="col-7">
                                        <input name="nro_factura" id="nro_factura" type="text" class="form-control form-control-sm"
                                               readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 pb-1">
                                <div class="row">
                                    <div class="col-5">
                                        <label for="cuenta_nro">Nro. Cuenta: </label>
                                    </div>
                                    <div class="col-7">
                                        <input name="cuenta_nro" id="cuenta_nro" type="text" class="form-control form-control-sm"
                                               >
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 pb-1">
                                <div class="row">
                                    <div class="col-5">
                                        <label for="fechadoc">Fecha de Documento: </label>
                                    </div>
                                    <div class="col-7">
                                        <input id="fechadoc" type="text" name="fechadoc"
                                               class="text-center ml-1 form-control form-control-sm filter-date-edit form-control form-control-sm-sm date-picker flatpickr-input col"
                                               value="">
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 pb-1">
                                <div class="row">
                                    <div class="col-5">
                                        <label for="monto_rec">Monto Recaudado: </label>
                                    </div>
                                    <div class="col-7">
                                        <input type="text" name="monto_rec" id="monto_rec"
                                               class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 pb-1">
                                <div class="row">
                                    <div class="col-5">
                                        <label for="abono">Abono: </label>
                                    </div>
                                    <div class="col-7">
                                        <input name="abono" id="abono" type="text" class="form-control form-control-sm"
                                        >
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 pb-1">
                                <div class="row">
                                    <div class="col-5">
                                        <label for="banco">Banco: </label>
                                    </div>
                                    <div class="col-7">
                                        <select name="banco" id="banco" class="custom-select form-control-sm">
                                            @foreach($banks as $bank)
                                                <option value="{{$bank->name}}">{{$bank->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 pb-1">
                                <div class="row">
                                    <div class="col-5">
                                        <label for="referencia">Nro. Cheque: </label>
                                    </div>
                                    <div class="col-7">
                                        <input name="referencia" id="referencia" type="text"
                                               class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 pb-1">
                                <div class="row">
                                    <div class="col-5">
                                        <label for="tipopago">Tipo Pago: </label>
                                    </div>
                                    <div class="col-7">
                                        <select name="tipopago" id="tipopago" class="custom-select">
                                            <option value="EFECTIVO">EFECTIVO</option>
                                            <option value="CHEQUE">CHEQUE</option>
                                            <option value="DEPOSITO">DEPÓSITO</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@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();
            }
        });
        $(".filter-date-edit").flatpickr({
            dateFormat: "Y-m-d",
        });


        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: "Fecha", field: "tini"},
                {title: "Cliente", field: "customer_name"},
                {title: "Nro. Factura", field: "nro_factura"},
                {title: "Forma de Pago", field: "tipopago", formatter: "html"},
                {title: "Nro. Cheque", field: "referencia"},
                {title: "Monto Recaudado", field: "monto_rec", formatter: "html", align: "center",},
                {title: "Total Factura", field: "totalfact"},
                {title: "Abono", field: "abono", formatter: "html", align: "center",},
                {title: "Saldo", field: "saldofact"},
                {title: "Nota", field: "nota"},
                {title: "Banco", field: "banco"},
                {title: "Nro. Cuenta", field: "cuenta_nro"},
                {title: "Nro. Recibo", field: "recibo_nro"},
                {title: "Fecha Documento", field: "fechadoc"},
                    @if(count($filters['salesmans'])==0 || count($filters['salesmans'])>1)
                {
                    title: "Vendedor", field: "salesman_name"
                },
                @endif
            ],
            layout: "fitColumns",
            data: {!! json_encode($data) !!}

        });
        table.on("rowClick", function (e, row) {
            updateCobranza(row)
        });

        function updateCobranza(row) {
            row = row.getData();
            let monto_rec = row.monto_rec + "";
            monto_rec = monto_rec.replaceAll('$', '');
            let monto_rec_tmp = monto_rec.split('</del>');
            if (monto_rec_tmp.length > 1){
                monto_rec = monto_rec_tmp[1].trim();
                $("#monto_rec").prop('disabled',true);
            }else{
                $("#monto_rec").prop('disabled',false);
            }


            let abono = row.abono + "";
            abono = abono.replaceAll('$', '');
            let abono_tmp = abono.split('</del>');
            if (abono_tmp.length > 1){
                abono = abono_tmp[1].trim();
                $("#abono").prop('disabled',true);
            }else{
                $("#abono").prop('disabled',false);
            }

            $("#llave").val(row.llave);
            $("#nro_factura").val(row.nro_factura);
            $("#cuenta_nro").val(row.cuenta_nro);
            $("#fechadoc").val(row.fechadoc);
            $("#monto_rec").val(monto_rec);
            $("#abono").val(abono);
            $("#banco").val(row.banco);
            $("#referencia").val(row.referencia);
            $("#tipopago").val(row.tipopago);
            $("#orden").val(row.orden);

            $("#updateCobranzaModal").modal('show');
        }


        function pdf() {
            window.open('{!! route('reportes-cobranza-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