@extends('layouts.app')

@section('reportes')

    <x-dashboard.heading
        contenido-heading="Registros"
        modal-target=""
        icon-class=""
        contenido-button=""
        :restriccion-componente="null"
        :index-permiso="null"
    />

    <div class="form-row">
        <x-dashboard.icons
            column-icon="col-md-6 col-lg-6 col-xl-3"
            icon-class="fas fa-file-download"
            contenido-icon="Descargar archivo personalizado"
        />
        <x-dashboard.icons
            column-icon="col-md-6 col-lg-6 col-xl-3"
            icon-class="fas fa-file-excel"
            contenido-icon="Descargar entre rango de fechas"
        />
    </div>

    <div class="card shadow">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <x-dashboard.cards.card-header.navtabs
                    :navbar-activo="!null"
                    url-navtab="/reportes/registros"
                    :parametro-url="null"
                    contenido-navtab="Registros"
                />
                <x-dashboard.cards.card-header.navtabs
                    :navbar-activo="null"
                    url-navtab="/reportes/clientes/personas"
                    :parametro-url="null"
                    contenido-navtab="Clientes"
                />
                <x-dashboard.cards.card-header.navtabs
                    :navbar-activo="null"
                    url-navtab="/reportes/conductores"
                    :parametro-url="null"
                    contenido-navtab="Conductores"
                />
                <x-dashboard.cards.card-header.navtabs
                    :navbar-activo="null"
                    url-navtab="/reportes/drivin"
                    :parametro-url="null"
                    contenido-navtab="Drivin"
                />
            </ul>
        </div>
        <div class="card-body"></div>
    </div>
    <div class="card shadow">
        <h5 class="card-header bg-primary text-white" style="font-size: larger; font-weight: bold;">{{ __('Seleccione los criterios que necesite para exportar el reporte de envíos') }}</h5>
        <form action="{{ url('reportes/registros/envios/excel') }}" method="POST">
            {{ csrf_field() }}
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group col-md-12 col-lg-12 col-xl-4">
                        <div class="col">
                            <label class="col-form-label">{{ __('Rol:') }}</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-user"></i></span></div>
                                <select class="custom-select" id="filtrarRolReporteRegistro" name="filtrarRolReporteRegistro" data-placeholder="Seleccione el rol..." placeholder="Ingrese el rol">
                                    <option></option>
                                    <optgroup label="">
                                        <option value="Persona|Empresa">{{ __('Seleccione todos los roles...') }}</option>
                                    </optgroup>
                                    <optgroup label="Perfiles">
                                        <option value="Persona">{{ __('Persona Natural') }}</option>
                                        <option value="Empresa">{{ __('Empresa') }}</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-6 col-lg-5 col-xl-3">
                        <div class="col">
                            <label class="col-form-label">{{ __('Desde:') }}</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-calendar-alt"></i></span></div>
                                <input type="date" class="form-control" id="filtrarReporteRegistroDesde" name="filtrarReporteRegistroDesde" value="{{ Carbon\Carbon::now()->subDays(30)->format('Y-m-d') }}">
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-6 col-lg-5 col-xl-3">
                        <div class="col">
                            <label class="col-form-label">{{ __('Hasta:') }}</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-calendar-alt"></i></span></div>
                                <input type="date" class="form-control" id="filtrarReporteRegistroHasta" name="filtrarReporteRegistroHasta" value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" max="">
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-12 col-lg-2 col-xl-2">
                        <div class="col">
                            <label class="col-form-label">{{ __('Descargar:') }}</label>
                            <button type="submit" class="btn btn-primary btn-block"><i class="fas fa-file-download"></i>&nbsp;&nbsp;&nbsp;{{ __('Excel') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="card shadow">
        <div class="card-header"></div>
        <div class="card-body">
            <div class="form-row">

                <!-- Earnings (Monthly) Card Example -->
                <div class="form-group col-md-6 col-xl-3 mb-4">
                    <div class="col">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('Envíos') }}</div>
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('(3 Últimos Meses)') }}</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $reporte->envio_tres_meses }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <a href="{{ 'registros/envios/tres-meses/excel' }}" class="btn btn-success btn-sm"><i class="fas fa-file-excel fa-2x text-gray-300"></i></a> {{--  --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Earnings (Monthly) Card Example -->
                <div class="form-group col-md-6 col-xl-3 mb-4">
                    <div class="col">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('Envíos') }}</div>
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('(Mes Actual)') }}</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $reporte->envio_mensual }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <a href="{{ 'registros/envios/mensuales/excel' }}" class="btn btn-success btn-sm"><i class="fas fa-file-excel fa-2x text-gray-300"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Earnings (Monthly) Card Example -->
                <div class="form-group col-md-6 col-xl-3 mb-4">
                    <div class="col">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('Envíos') }}</div>
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('(Semana Actual)') }}</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $reporte->envio_semanal }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <a href="{{ 'registros/envios/semanales/excel' }}" class="btn btn-success btn-sm"><i class="fas fa-file-excel fa-2x text-gray-300"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Earnings (Monthly) Card Example -->
                <div class="form-group col-md-6 col-xl-3 mb-4">
                    <div class="col">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('Envíos') }}</div>
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('(Día Actual)') }}</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $reporte->envio_diario }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <a href="{{ 'registros/envios/diarios/excel' }}" class="btn btn-success btn-sm"><i class="fas fa-file-excel fa-2x text-gray-300"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="form-row">

                <div class="form-group col-md-6 col-xl-6 mb-4">
                    <div class="col">
                        <div class="card border-left-success shadow h-100 mb-4 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('Entregas de Hoy') }}</div>
                                        <hr style="margin-block: 1em;">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('Total') }}</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="entregasTotal"></div>
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('Sin Observaciones') }}</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="sinObservaciones"></div>
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('Primera Observación') }}</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="primeraObservacion"></div>
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('Segunda Observación') }}</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="segundaObservacion"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('Efectividad') }}</div>
                                        <div class="h5 font-weight-bold text-uppercase mb-1" id="entregasConfirmadas"></div>
                                        <div class="progress mb-2" id="progressEntregasConfirmadas" style="background-color: lightgray; border-radius: 0.5em; min-height: 1em;"></div>
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">{{ __('Entregas Acumuladas Este Mes') }}</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="entregasAcumuladas"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group col-md-6 col-xl-6 mb-4">
                    <div class="col">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <canvas id="entregasMejoresClientes" width="100" height="50"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>

            <div class="form-group mb-4">
                <div class="col">
                    <div class="card border-left-success shadow h-100 py-2">
                        <div class="card-body">
                            <canvas id="exitoOperacional" width="100" height="25"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group mb-4">
                <div class="col">
                    <div class="card border-left-success shadow h-100">
                        <h5 class="card-header bg-primary text-white" style="font-size: larger; font-weight: bold;">{{ __('Clientes nuevos de ejecutivos comerciales') }}</h5>
                        <div class="card-body">
                            <canvas id="clientesEjecutivo" width="100" height="25"></canvas>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script>
        var dataLabels = [];
        var datasets = [];
        var total = 0

        var fechaMensual = [];
        var entregasSinObservaciones = [];
        var entregasPrimeraObservacion = [];
        var entregasSegundaObservacion = [];
        var entregasTotal = [];

        var administradores = [];
        var envios = [];
        var colores = [];
        var bordes = [];

        function ninetyDays()
        {
            var reporteRegistroDesde = $('#filtrarReporteRegistroDesde').val();

            fechaActual = new Date(reporteRegistroDesde);
            fechaPosterior = new Date(fechaActual.setDate(fechaActual.getDate() + 90));

            var ninetyDays = fechaPosterior.toISOString().split('T')[0];

            $('#filtrarReporteRegistroHasta').prop('max', ninetyDays);
        }

        function resultadosHoy(value)
        {
            return value.toString().length === 1 ? ('0000' + value)
                : (value.toString().length === 2 ? ('000' + value)
                    : (value.toString().length === 3 ? ('00' + value)
                        : (value.toString().length === 4 ? ('0' + value) : value)));
        }

        function chartFunction()
        {
            const entregasMejoresClientes = $('#entregasMejoresClientes');

            const entregasMejoresClientesChart = new Chart(entregasMejoresClientes,
            {
                type: 'pie',
                data:
                {
                    labels: dataLabels,
                    datasets:
                    [
                        {
                            label: 'Entregas de Hoy',
                            data: dataset,
                            backgroundColor:
                            [
                                'rgb(255, 99, 132)',
                                'rgb(255, 159, 64)',
                                'rgb(255, 205, 86)',
                                'rgb(75, 192, 192)',
                                'rgb(54, 162, 235)',
                                'rgb(153, 102, 255)',
                                'rgb(201, 203, 207)'
                            ],
                        }
                    ]
                },
                options:
                {
                    responsive: true,
                    plugins:
                    {
                        legend:
                        {
                            position: 'top',
                        },
                        title:
                        {
                            display: true,
                            text: 'Mejores clientes a partir de: ' + "{{ Carbon\Carbon::now()->startOfMonth()->format('d/m/Y') }}"
                        }
                    }
                }
            });

            const exitoOperacional = $('#exitoOperacional');

            const exitoOperacionalChart = new Chart(exitoOperacional,
            {
                type: 'line',
                data:
                {
                    labels: fechaMensual,
                    datasets:
                    [
                        {
                            label: "Entregas con éxito",
                            data: entregasSinObservaciones,
                            borderColor: 'rgba(54, 162, 235)',
                            tension: 0.25,
                            fill:
                            {
                                target: 'origin',
                                above: 'rgb(54, 162, 235, 0.5)',
                                below: 'rgb(54, 162, 235, 0.5)'
                            }
                        },
                        {
                            label: "Entregas primera observación",
                            data: entregasPrimeraObservacion,
                            borderColor: 'rgb(255, 205, 86)',
                            tension: 0.25,
                            fill:
                            {
                                target: 'origin',
                                above: 'rgb(255, 205, 86, 0.5)',
                                below: 'rgb(255, 205, 86, 0.5)'
                            }
                        },
                        {
                            label: "Entregas segunda observación",
                            data: entregasSegundaObservacion,
                            borderColor: 'rgb(255, 99, 132)',
                            tension: 0.25,
                            fill:
                            {
                                target: 'origin',
                                above: 'rgb(255, 99, 132, 0.5)',
                                below: 'rgb(255, 99, 132, 0.5)'
                            }
                        },
                        {
                            label: "Entregas total",
                            data: entregasTotal,
                            borderColor: 'rgb(201, 203, 207)',
                            tension: 0.25,
                            fill:
                            {
                                target: 'origin',
                                above: 'rgb(201, 203, 207, 0.5)',
                                below: 'rgb(201, 203, 207, 0.5)'
                            }
                        },
                    ],
                },
                options:
                {
                    responsive: true,
                    scales:
                    {
                        y: { beginAtZero: true }
                    }
                }
            });
        };

        function chartEjecutivos()
        {
            const clientesEjecutivo = $('#clientesEjecutivo');

            const clientesEjecutivoChart = new Chart(clientesEjecutivo,
            {
                type: 'bar',
                data:
                {
                    labels: administradores,
                    datasets:
                    [
                        {
                            label: 'Clientes',
                            data: envios,
                            backgroundColor: colores,
                            borderColor: bordes,
                            borderWidth: 1
                        }
                    ]
                },
                options:
                {
                    responsive: true,
                    plugins:
                    {
                        legend:
                        {
                            position: 'top',
                            display: false
                        },
                        title:
                        {
                            display: true,
                            text: 'Clientes nuevos con pagos realizados a partir de: ' + "{{ Carbon\Carbon::now()->subDays(30)->format('d/m/Y') }}"
                        }
                    },
                    scales:
                    {
                        y:
                        {
                            min: 0,
                            max: 25
                        }
                    }
                },
            });
        };

        $(document).ready(function()
        {
            $('#filtrarRolReporteRegistro').prop('selectedIndex', 1);

            ninetyDays();

            $(function()
            {
                $('#filtrarRolReporteRegistro').each(function()
                {
                    $(this).select2({ theme: 'bootstrap4', placeholder: $(this).val() });
                });
            });

            $('#filtrarReporteRegistroDesde').on('change', function()
            {
                ninetyDays();
            });

            $.ajax(
            {
                url: 'registros/entregas/datatable',
                // method: 'GET',
                // headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(data)
                {
                    dataLabels = data['data'].map((data) => data.usuario);
                    dataset = data['data'].map((data) => data.total);
                    data['data'].map((data) => total += data.total);

                    var total = data['total'];
                    var sinObservaciones = data['sin_observaciones'];
                    var primeraObservacion = data['primera_observacion'];
                    var segundaObservacion = data['segunda_observacion'];
                    var entregas = data['entregas'];
                    var confirmadas = data['confirmadas'];
                    var acumuladas = data['acumuladas'];

                    fechaMensual = data['fecha_mensual'];
                    entregasSinObservaciones = data['entregas_sin_observaciones'];
                    entregasPrimeraObservacion = data['entregas_primera_observacion'];
                    entregasSegundaObservacion = data['entregas_segunda_observacion'];
                    entregasTotal = data['entregas_total'];

                    var resultadoTotal = resultadosHoy(total);

                    var resultadoSinObservaciones = resultadosHoy(sinObservaciones);

                    var resultadoPrimeraObservacion = resultadosHoy(primeraObservacion);

                    var resultadoSegundaObservacion = resultadosHoy(segundaObservacion);

                    var resultadoAcumuladas = resultadosHoy(acumuladas);

                    $('#entregasTotal').text(resultadoTotal);

                    $('#sinObservaciones').text(resultadoSinObservaciones);

                    $('#primeraObservacion').text(resultadoPrimeraObservacion);

                    $('#segundaObservacion').text(resultadoSegundaObservacion);

                    $('#entregasConfirmadas').text('Entregas Confirmadas Para Hoy: ' + Math.round((confirmadas * 100) / entregas) + '%');

                    $('#progressEntregasConfirmadas').html(
                        '<div class="progress-bar bg-primary" role="progressbar" style="width: ' + (confirmadas * 100) / entregas + '%" aria-valuemin="0" aria-valuemax="' + total + '"></div>'
                    );

                    $('#entregasAcumuladas').text(resultadoAcumuladas);

                    chartFunction();
                }
            });

            $.ajax(
            {
                url: 'registros/ejecutivos/datatable',
                // method: 'GET',
                // headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(data)
                {
                    administradores = data['data'].map((data) => data.administrador);
                    envios = data['data'].map((data) => data.envios);
                    colores = data['data'].map((data) => data.color);
                    bordes = data['data'].map((data) => data.borde);

                    chartEjecutivos();
                }
            });
        });
    </script>

	@include('layouts.javascript')

@endsection