@extends('adminlte::page')


@section('content_header')
    <h1>Inicio</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-md">
            <x-infoBox title="Activadores" icon="fas fa-users" :number="$totalActivators"/>
        </div>
        <div class="col-md">
            <x-infoBox title="Lineas" icon="fas fa-sd-card" :number="$totalLines"/>
        </div>
        <div class="col-md">
            <x-infoBox title="Evaluaciones" icon="fas fa-chart-pie" :number="$totalEvaluations"/>
        </div>
        <div class="col-md">
            <x-infoBox title="Líneas con activación" icon="fas fa-phone-volume" :number="$linesWithActivation"/>
        </div>
        <div class="col-md">
            <x-infoBox title="Líneas sin saldo" icon="fas fa-phone-slash" :number="$linesWithoutBalance"/>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <x-card class="card-danger" title="Promedio de retenciones de linea">
                <x-slot name="tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                </x-slot>
                <canvas id="myChart"></canvas>
            </x-card>
        </div>
    </div>
@stop

@section('js')
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'pie',

            // The data for our dataset
            data: {
                labels: ['30 días', '60 días', '90 días'],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: [
                        '#F56954',
                        '#F39C11',
                        '#02A65A',
                    ],
                    data: @json($retentions)
                }]
            },

            // Configuration options go here
            options: {}
        });
    </script>
@stop