@extends('layouts.app')

@section('home')

    @include('modal')

    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">¡Bienvenido!</h1>
    </div>

    @if (Auth::user()->tipo == 'SuperAdmin' || (Auth::user()->tipo == 'Administrador' && Auth::user()->activo == 1))
        <div class="form-row">
            <div class="col">
                <div class="card shadow">
                    <h5 class="card-header bg-primary text-white" style="font-size: larger; font-weight: bold;">{{ __('Envíos Entregados (Año Actual)') }}</h5>
                    <div class="card-body">
                        <canvas id="enviosPeriodoActual" width="100" height="25"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <script>
            var fechaAnual = [];
            var envioAnual = [];
            var envioAnualSinAutonomia = [];
            var envioAnualAnterior = [];

            $(document).ready(function()
            {
                $.ajax(
                {
                    url: 'datatable',
                    // method: 'GET',
                    // headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success: function(data)
                    {
                        fechaAnual.push(data['data']['0']['fecha_anual']);
                        envioAnual.push(data['data']['0']['envio_anual']);
                        envioAnualSinAutonomia.push(data['data']['0']['envio_anual_sin_autonomia']);
                        envioAnualAnterior.push(data['data']['0']['envio_anual_anterior']);

                        chartFunction();
                    }
                });
            });

            function chartFunction()
            {
                const periodoActual = $('#enviosPeriodoActual');

                const periodoActualChart = new Chart(periodoActual,
                {
                    data:
                    {
                        datasets:
                        [
                            {
                                type: 'line',
                                label: "{{ Carbon\Carbon::now()->format('Y') }}",
                                data: envioAnual['0'],
                                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)'
                                }
                            },
                            {
                                type: 'line',
                                label: "{{ Carbon\Carbon::now()->format('Y') }} sin Autonomía",
                                data: envioAnualSinAutonomia['0'],
                                borderColor: 'rgb(255, 159, 64)',
                                tension: 0.25,
                                fill:
                                {
                                    target: 'origin',
                                    above: 'rgba(255, 159, 64, 0.5)',
                                    below: 'rgba(255, 159, 64, 0.5)'
                                }
                            },
                            {
                                type: 'line',
                                label: "{{ Carbon\Carbon::now()->subYear()->format('Y') }}",
                                data: envioAnualAnterior['0'],
                                borderColor: 'rgb(54, 162, 235)',
                                tension: 0.25,
                                fill:
                                {
                                    target: 'origin',
                                    above: 'rgb(54, 162, 235, 0.5)',
                                    below: 'rgb(54, 162, 235, 0.5)'
                                }
                            }
                        ],
                        labels: fechaAnual['0']
                    },
                    options:
                    {
                        scales:
                        {
                            y: { beginAtZero: true }
                        }
                    }
                });
            }
        </script>
    @endif

    <main class="py-4">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <h5 class="card-header bg-primary text-white" style="font-size: larger; font-weight: bold;">{{ __('Ingreso') }}</h5>
                        <div class="card-body">
                            @if (session('status'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('status') }}
                                </div>
                            @endif
                            {{ __('¡Bienvenido al sistema Courier de Tranvial!') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    {{-- <script>
        $(document).ready(function()
        {
            $('#courierModal').modal('show');
        });
    </script> --}}

@endsection