@extends('layouts.app2')

@section('content')
    <div class="bgc-white p-20 bd">
        <h2>Panel de Indicadores del Proceso de Pago</h2>
        <div class="col-md-6">
            <form id="form-indicadores">
                <div class="form-row align-items-end">
                    <div class="form-group col-md-4">
                      <label for="inputEmail4">Fecha Inicial:</label>
                      <input type="date" class="form-control" id="fecha_inicial" name="fecha_inicial" required>
                    </div>
                    <div class="form-group col-md-4">
                      <label for="inputPassword4">Fecha Final:</label>
                      <input type="date" class="form-control" id="fecha_final"  name="fecha_final" required>
                    </div>
                    <div class="form-group col-md-4">
                        <button type="submit" class="btn btn-primary mb-2">Consultar</button>
                    </div>
                </div>

            </form>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div id="chart_div"></div>
            </div>
            <div class="col-md-6">
                <table class="table mt-5 table-bordered table-hover">
                    <thead>
                        <tr class="table-warning">
                            <th>Estado del RP</th>
                            <th>Cantidad</th>
                            <th>%</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>En Proceso</td>
                            <td id="proceso">0</td>
                            <td id="proceso_porc">0%</td>
                        </tr>
                        <tr>
                            <td>Pago en < 30 días</td>
                            <td id="menor">0</td>
                            <td id="menor_porc">0%</td>
                        </tr>
                        <tr>
                            <td>Pago > 30 días</td>
                            <td id="mayor">0</td>
                            <td id="mayor_porc">0%</td>
                        </tr>
                    </tbody>
                </table>

                <table class="table table-bordered table-hover">
                    <thead>
                        <tr class="table-warning">
                            <th>Unidad en el Proceso de Pago</th>
                            <th>Tiempo Promedio (días)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Unidades Requirente</td>
                            <td id="unidad">0</td>
                        </tr>
                        <tr>
                            <td>Finanzas</td>
                            <td id="finanzas">0</td>
                        </tr>
                        <tr>
                            <td>Control</td>
                            <td id="control">0</td>
                        </tr>
                        <tr>
                            <td>Tesorería</td>
                            <td id="tesoreria">0</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('post-scripts')
    <script src="{{ asset('js/autoNumeric-min.js') }}"></script>
    <script src="{{ asset('js/jquery.mask.min.js') }}"></script>
    <script src="{{ asset('js/sweetalert2.js') }}"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <style>
        .main-content {
            padding: 10px 20px 20px;
            min-height: calc(100vh - 61px);
        }
    </style>
    <script>

        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);

        function drawChart(proceso, mayor, menor) {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
            ['En proceso', proceso],
            ['Pago > 30 días', mayor],
            ['Pago < 30 días', menor],
            ]);

            // Set chart options
            var options = {'title':'Reporte',
                        'width':800,
                        'height':800};

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }

        $(function(){
            var $table = $("#table-indicadores");
            //$("#table-utm").bootstrapTable('refresh', {url: "http://localhost:8000/pproveedores/loadOC"});

            $(document).on("submit", "form#form-indicadores", function(event) {
                event.preventDefault();

                let form = $(this).serializeArray()

                $.ajax({
                url: "{{ route('pproveedores-reportes.get_fechas_indicados') }}", data: form, type: "POST", beforeSend: function () {
                    //msgLoading();
                }, headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
                }).done(function (response, textStatus, jqXHR) {
                    console.log(response)
                    if(response.data.length > 0)
                    {
                        $("#unidad").html(response.data[0]);
                        $("#finanzas").html(response.data[1]);
                        $("#control").html(response.data[2]);
                        $("#tesoreria").html(response.data[3]);
                    }

                    drawChart(response.proceso.en_proceso,response.mayor.mayor,response.menor.menor);

                    $("#proceso").html(response.proceso.en_proceso);
                    $("#mayor").html(response.mayor.mayor);
                    $("#menor").html(response.menor.menor);

                    $("#proceso_porc").html(response.porc[0]+"%");
                    $("#mayor_porc").html(response.porc[1]+"%");
                    $("#menor_porc").html(response.porc[2]+"%");


                }).fail(function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR.responseText)
                });
            });

        });

        var tabla = $('#table-indicadores').bootstrapTable({
            pagination: true, search: true
        });

    </script>
@endpush