{% extends "FactelBundle::Layout.html.twig" %}

{% block css %}
    <link href="{{asset('garyavendanio/uikit/css/uikit.min.css')}}" rel="stylesheet">
{% endblock %}

{% block content %}
    {% for flashMessage in app.session.flashbag.get('notice') %}
        <div class="col-sm-12 alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <h4><strong>Ha ocurrido un error!</strong></h4>
            <p>{{ flashMessage }}</p>
        </div>
    {% endfor %}

{% if is_granted('ROLE_EMISOR') %}
<div class="relative">
    <div class="row">
        <div class="col-lg-3 col-md-6 my-3 px-3">
            <a href="#">
                <div class="bg-white rounded-xl text-gray-600 border-2 hover:border-blue-500 transition duration-500 ease-in">
                    <div class="h-40 grid grid-cols-2 justify-items-center content-center items-center">
                        <div>
                            <img src="{{asset('recursos/img/cash-machine.png')}}" class="w-24" alt="..." />
                        </div>
                        <div>
                            <div class="flex flex-wrap content-center">
                                <span class="text-3xl">{{registrados}}</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 ml-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                                </svg>
                                <p class="text-xl">Registrados</p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-lg-3 col-md-6 my-3 px-3">
            <a href="#">
                <div class="bg-white rounded-xl text-gray-600 border-2 hover:border-blue-500 transition duration-500 ease-in">
                    <div class="h-40 grid grid-cols-2 justify-items-center content-center items-center">
                        <div>
                            <img src="{{asset('recursos/img/autorization.png')}}" class="w-24" alt="..." />
                        </div>
                        <div>
                            <div class="flex flex-wrap content-center">
                                <span class="text-3xl">{{autorizados}}</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 ml-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                                </svg>
                                <p class="text-xl">Autorizados</p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-lg-3 col-md-6 my-3 px-3">
            <a href="#">
                <div class="bg-white rounded-xl text-gray-600 border-2 hover:border-blue-500 transition duration-500 ease-in">
                    <div class="h-40 grid grid-cols-2 justify-items-center content-center items-center">
                        <div>
                            <img src="{{asset('recursos/img/processing.png')}}" class="w-24" alt="..." />
                        </div>
                        <div>
                            <div class="flex flex-wrap content-center">
                                <span class="text-3xl">{{procesandose}}</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 ml-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
                                </svg>
                                <p class="text-xl">Procesandose</p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <div class="col-lg-3 col-md-6 my-3 px-3">
            <a href="#">
                <div class="bg-white rounded-xl text-gray-600 border-2 hover:border-blue-500 transition duration-500 ease-in">
                    <div class="h-40 grid grid-cols-2 justify-items-center content-center items-center">
                        <div>
                            <img src="{{asset('recursos/img/loading.png')}}" class="w-24" alt="..." />
                        </div>
                        <div>
                            <div class="flex flex-wrap content-center">
                                <span class="text-3xl">{{noAutorizados}}</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 ml-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                <p class="text-xl">No Autorizados</p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
<!--
<div class="row">
    <div class="col-sm-12 relative">
        <canvas id="line-chart"  height="100"></canvas>
    </div>
    <div class="col-sm-12 relative">
        <canvas id="bar-chart" height="100"></canvas>
    </div>
</div>
-->
<!-- /.row -->
</div>
{% endif %}
{% endblock %}

{% block javascript %}
{% if is_granted('ROLE_EMISOR') %}
<script src="{{asset('recursos/js/Chart.min.js')}}"></script>
<script>
    


    new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
            labels: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
            datasets: [{
                    data: [{{ventaTotalActual}}],
                    label: "2022",
                    borderColor: "#3e95cd",
                    fill: false
                }, {
                    data: [{{ventaTotalAnnoAnterior}}],
                    label: "2021",
                    borderColor: "#3cba9f",
                    fill: false
                },
            ]
        },
        options: {
            title: {
                display: true,
                text: 'Ventas Año Actual VS Año Anterior'
            }
        }
    });

    new Chart(document.getElementById("bar-chart"), {
        type: 'bar',
        data: {
            labels: ["1", "2", "3", "4", "5","6", "7", "8", "9", "10","11", "12", "13", "14", "15","16", "17", "18", "19", "20","21", "22", "23", "24", "25","26", "27", "28", "29", "30","31"],
            datasets: [
                {
                    label: "Ventas del Dia",
                    backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850","#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850","#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850","#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850","#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850","#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850","#c45850"],
                    data: [{{ventaXDiaTotal}}]
                }
            ]
        },
        options: {
            legend: {display: false},
            title: {
                display: true,
                text: 'Ventas por dia mes actual'
            }
        }
    });
</script>
<script src="{{asset('garyavendanio/uikit/js/uikit.min.js')}}"></script>
<script src="{{asset('garyavendanio/uikit/js/uikit-icons.min.js')}}"></script>
{% endif %}
{% endblock %}