@extends('fragments.fullTemplate')
@section('titulo')
Cobranza | Resumen general
@endsection
@php
    $id_usuario = session('id_usuario');
    if (! session('id_usuario')) {
            header('location: /');
            die();
    }
@endphp
@section('contenido')
    <div class="ui big breadcrumb">
        <div class="section">Administración</div>
        <i class="right chevron icon divider"></i>
        <div class="section">Cobranza</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Resumen General</div>
    </div>

    <div class="ui divider"></div>
    <div data-module-notifications-anchor></div>

    @component('Cobranza.navs')
    @slot('active1')
        
    @endslot
    @slot('active2')
        
    @endslot
    @slot('active3')
        
    @endslot
    @slot('active4')
    active
    @endslot
    @endcomponent

    <div class="content">
        <div class="col-lg-12 col-md-12 col-sm-12">
            @if(session()->has('success'))
                <div class="alert alert-success text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('success') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if(session()->has('warning'))
                <div class="alert alert-warning text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('warning') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if(session()->has('error'))
                <div class="alert alert-danger text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('error') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if (count($errors) > 0)
            <div class="alert alert-danger alert-dismissible" role="alert">
                <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
            @endif
        </div>
    </div>

    <div class="ui divider"></div>

    <div class="sx-autorender">
        <div class="form-row">
            <div class="col-lg-6">
                <label for="grafica_pastel">Tipo de clientes</label>
                <canvas id="tipo_cliente_grafica_js"></canvas>
            </div>
            <div class="col-lg-6">
                <label for="grafica_pastel">Estatus de pagos</label>
                <canvas id="estatus_pagos_grafica_js"></canvas>
            </div>
        </div>

        <div class="form-row">
            <div class="col-lg-6">
                <label for="grafica_pastel">Pagos Representante</label>
                <canvas id="pagos_representante_grafica_js"></canvas>
            </div>
            <div class="col-lg-6">
                <label for="grafica_pastel">Mes de entrega de técnicos</label>
                <canvas id="mes_entrega_tecnicos_grafica_js"></canvas>
            </div>
        </div>

        <div class="form-row">
            <div class="col-lg-6">
                <label for="grafica_pastel">Pagos fecha</label>
                <canvas id="pagos_fecha_grafica_js"></canvas>
            </div>
            <div class="col-lg-6">
                {{--
                <label for="grafica_pastel">Estatus de pagos</label>
                <canvas id="estatus_pagos_grafica_js"></canvas>
                --}}
            </div>
        </div>
    </div>
    <div class="ui divider"></div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
            <a class="ui button gray" href="{{url('cobranza')}}">
                <i class="arrow circle left icon"></i>Atrás
            </a>
        </div>
    </div>
    <script>
        var ctx = document.getElementById('tipo_cliente_grafica_js').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'pie',

            // The data for our dataset
            data: {
                labels: ['NUEVOS', 'FRECUENTES'],
                datasets: [{
                    label: 'My First dataset',
                    //backgroundColor: 'rgb(255, 99, 132)',
                    //borderColor: 'rgb(255, 99, 132)',
                    backgroundColor: ['rgb(255, 205, 86)','rgb(75, 192, 192)','rgb(54, 162, 235)','rgb(153, 102, 255)','rgb(201, 203, 207)','rgb(255, 99, 132)','rgb(255, 159, 64)'],
                    borderColor: ['rgb(255, 205, 86)','rgb(75, 192, 192)','rgb(54, 162, 235)','rgb(153, 102, 255)','rgb(201, 203, 207)','rgb(255, 99, 132)','rgb(255, 159, 64)'],
                    data: [100, 800]
                }]
            },

            // Configuration options go here
            options: {}
        });
    </script>
    <script>
        var ctx = document.getElementById('estatus_pagos_grafica_js').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'pie',

            // The data for our dataset
            data: {
                labels: ['PAGADO', 'SIN PAGO'],
                datasets: [{
                    label: 'My First 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)'],
                    borderColor: ['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)'],
                    data: [450, 200]
                }]
            },

            // Configuration options go here
            options: {}
        });
    </script>
    <script>
        var ctx = document.getElementById('mes_entrega_tecnicos_grafica_js').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'bar',

            // The data for our dataset
            data: {
                labels: ['ENERO','FEBRERO', 'MARZO', 'ABRIL', 'MAYO', 'JUNIO','JULIO', 'AGOSTO', 'SEPTIEMBRE', 'OCTUBRE', 'NOVIEMBRE', 'DICIEMBRE'],
                datasets: [{
                    label: 'Suma de total',
                    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)'],
                    borderColor: ['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)'],
                    data: [10, 450, 200,10, 450, 200,10, 450, 200,10, 450, 200]
                }]
            },

            // Configuration options go here
            options: {}
        });
    </script>
    <script>
        var ctx = document.getElementById('pagos_representante_grafica_js').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'bar',

            // The data for our dataset
            data: {
                labels: ['REPRESENTANTE 1','REPRESENTANTE 2','REPRESENTANTE 3','REPRESENTANTE 4'],
                datasets: [
                    {
                        label: 'PAGADO',
                        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)'],
                        borderColor: ['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)'],
                        data: [3000,200,300,400]
                    },
                    {
                        label: 'SIN PAGO',
                        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)'],
                        borderColor: ['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)'],
                        data: [500,600,700,800]
                    }
                ]
            },

            // Configuration options go here
            options: {}
        });
    </script>
    <script>
        var ctx = document.getElementById('pagos_fecha_grafica_js').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'bar',

            // The data for our dataset
            data: {
                labels: ['PAGADO','SIN PAGO'],
                datasets: [
                    {
                        label: 'FECHA TECNICO 1',
                        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)'],
                        borderColor: ['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)'],
                        data: [110,200]
                    },
                    {
                        label: 'FECHA TECNICO 2',
                        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)'],
                        borderColor: ['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)'],
                        data: [520,90]
                    },
                    {
                        label: 'FECHA TECNICO 3',
                        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)'],
                        borderColor: ['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)'],
                        data: [300,120]
                    },
                    {
                        label: 'FECHA TECNICO 4',
                        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)'],
                        borderColor: ['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)'],
                        data: [666,200]
                    },
                    {
                        label: 'FECHA TECNICO 5',
                        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)'],
                        borderColor: ['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)'],
                        data: [100,600]
                    }
                ]
            },

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