{% extends "master-administracion.html" %}


{% block javascripts %}
    {{ parent() }}
    
    <script src="{{ assets }}js/pages/dashboard.js"></script>

    <script>
        function getChartColorsArray(e) {
    if (null !== document.getElementById(e)) {
        var r = document.getElementById(e).getAttribute("data-colors");
        if (r) return (r = JSON.parse(r)).map(function(e) {
            var r = e.replace(" ", "");
            return -1 === r.indexOf(",") ? getComputedStyle(document.documentElement).getPropertyValue(r) || r : 2 == (e = e.split(",")).length ? "rgba(" + getComputedStyle(document.documentElement).getPropertyValue(e[0]) + "," + e[1] + ")" : r
        });
        console.warn("data-colors atributes not found on", e)
    }
}

var options1, chart1, options, chart,
    
    barchartColors = getChartColorsArray("market-overview"),
    linechartBasicColors = (barchartColors && ( (chart = new ApexCharts(document.querySelector("#market-overview"), options)).render()), getChartColorsArray("line_chart_basic")),
    worldemapmarkers = (linechartBasicColors && (options = {
        series: [{
            name: "Accesos",
            data: [
            {% for item in num_accesos %} 
                  {{item.ACCESOS}},
            {% endfor %}
              ]
        }, {
            name: "Sesiones",
            data: [
            
            {% for item in num_sesiones %} 
                  {{item.SESIONES}},
            {% endfor %}

            ]
        }, {
            name: "Logouts",
            data: [
            
            {% for item in num_logouts %} 
                  {{item.LOGOUTS}},
            {% endfor %}

            ]
        }],
        chart: {
            height: 350,
            type: "line",
            zoom: {
                enabled: !1
            },
            toolbar: {
                show: !1
            }
        },
        dataLabels: {
            enabled: !1
        },
        stroke: {
            curve: "smooth",
            width: 3
        },
        colors: linechartBasicColors,
        xaxis: {
            categories: [
            {% for item in num_accesos %} 
                  "{{item.MES}}",
            {% endfor %}
            ]
        }
    }, (chart = new ApexCharts(document.querySelector("#line_chart_basic"), options)).render()), "");



    </script>
{% endblock %}


{% block body %}


<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Administración</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Administración</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<!-- end page title -->

                    <!-- start page title -->
                    <div class="row dash-nft">
                        <div class="col">
                            <div class="row">


                                <!--PERMISO VER INSTITUCION-->
                                {% for permiso in permisos_fimpes %} 
                                {% if permiso.id_permiso == 17 %}

                                <div class="col-xl-3 col-md-6">
                                    <div class="card card-height-100">
                                        <div class="card-body">
                                            <div class="float-end">
                                                <div class="dropdown card-header-dropdown">
                                                    <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <span class="text-muted fs-18"><i class="mdi mdi-dots-vertical align-middle"></i></span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item" href="../Secciones/">Estructura</a>
                                                        <a class="dropdown-item" href="../Instituciones/Eliminadas/">Ex Instituciones</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm flex-shrink-0">
                                                    <span class="avatar-title bg-info-subtle rounded fs-3" style="background-color: #d9f2ff !important;">
                                                        <i class="bx bx-building text-info" style="color: #4fa5cf !important;"></i>
                                                    </span>
                                                </div>
                                               
                                            </div>
                                            <div class="mt-4 pt-1">
                                               <a href="../Instituciones/"><h4 class="fs-22 fw-semibold ff-secondary mb-0">Directorios Instituciones </h4></a>
                                                <p class="mt-4 mb-0 text-muted"><span class="badge bg-danger-subtle text-danger mb-0 me-1"> {{num_instituciones}} </span>, total de instituciones.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div><!--end col-->

                                {% endif%}  
                                {% endfor %}
                                <!--END PERMISO-->



                                <!--PERMISO VER DIRECTORIOS-->
                                {% for permiso in permisos_fimpes %} 
                                {% if permiso.id_permiso == 31 %}

                                <div class="col-xl-3 col-md-6">
                                    <div class="card card-height-100">
                                        <div class="card-body">
                                            <div class="float-end">
                                                <div class="dropdown card-header-dropdown">
                                                    <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <span class="text-muted fs-18"><i class="mdi mdi-dots-vertical align-middle"></i></span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item" href="../SeccionesFIMPES/">Estrucutra</a>
                                                        <a class="dropdown-item" href="../Directorios/eliminados">Ex Directorios</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm flex-shrink-0">
                                                    <span class="avatar-title bg-info-subtle rounded fs-3" style="background-color: #fdecc2 !important;">
                                                        <i class="bx bx-library text-info" style="color: #9b8a60 !important;"></i>
                                                    </span>
                                                </div>
                                                
                                            </div>
                                            <div class="mt-4 pt-1">
                                            <a href="../Directorios/"><h4 class="fs-22 fw-semibold ff-secondary mb-0">Directorios FIMPES</h4></a>
                                                <p class="mt-4 mb-0 text-muted"><span class="badge bg-danger-subtle text-danger mb-0 me-1"> {{num_directorios}} </span> , total de diretorios.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div><!--end col-->

                                {% endif%}  
                                {% endfor %}
                                <!--END PERMISO-->



                                <!--PERMISO VER USUARIOS-->
                                {% for permiso in permisos_fimpes %} 
                                {% if permiso.id_permiso == 43 %}
                               
                                <div class="col-xl-3 col-md-6">
                                    <div class="card card-height-100">
                                        <div class="card-body">
                                            <div class="float-end">
                                                <div class="dropdown card-header-dropdown">
                                                    <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <span class="text-muted fs-18"><i class="mdi mdi-dots-vertical align-middle"></i></span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item" href="#">Ver</a>
                                                        <a class="dropdown-item" href="#">Agregar</a>
                                                        <a class="dropdown-item" href="#">Exportar</a>
                                                        <a class="dropdown-item" href="{{assets}}Roles/">Roles</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm flex-shrink-0">
                                                    <span class="avatar-title bg-info-subtle rounded fs-3" style="background-color: #f2e7ff !important;">
                                                        <i class="bx bx-user text-info" style="color: #987bb6 !important;"></i>
                                                    </span>
                                                </div>
                                                
                                            </div>
                                            <div class="mt-4 pt-1">
                                                <a href="../Usuarios/"><h4 class="fs-22 fw-semibold ff-secondary mb-0">Usuarios </h4></a>
                                                <p class="mt-4 mb-0 text-muted"><span class="badge bg-danger-subtle text-danger mb-0 me-1"> {{num_usuarios}} </span>, total de usuarios.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div><!--end col-->

                                {% endif%}  
                                {% endfor %}
                                <!--END PERMISO-->


                               
                                <!--PERMISO VER SAII-->
                                {% for permiso in permisos_fimpes %} 
                                {% if permiso.id_permiso == 77 %}

                                <div class="col-xl-3 col-md-6">
                                    <div class="card card-height-100">
                                        <div class="card-body">
                                            
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm flex-shrink-0">
                                                    <span class="avatar-title bg-info-subtle rounded fs-3" style="background-color: #ddf7db !important;">
                                                        <i class="bx bx-file text-info" style="color: #7b9579 !important;"></i>
                                                    </span>
                                                </div>
                                                
                                            </div>
                                            <div class="mt-4 pt-1">
                                                
                                                <a href="../Saii/"><h4 class="fs-22 fw-semibold ff-secondary mb-0">SAii </h4></a>
                                                <p class="mt-4 mb-0 text-muted">Administrar SAii.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--End col-->
                                {% endif%}  
                                {% endfor %}
                                <!--END PERMISO-->

                               



                                <!--PERMISO VER EXPEDIENTES-->
                                {% for permiso in permisos_fimpes %} 
                                {% if permiso.id_permiso == 76 %}

                                <div class="col-xl-3 col-md-6">
                                    <div class="card card-height-100">
                                        <div class="card-body">
                                           
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm flex-shrink-0">
                                                    <span class="avatar-title bg-info-subtle rounded fs-3" style="background-color: #ffe3ee !important;">
                                                        <i class="bx bx-folder text-info" style="color: #e8635f !important;"></i>
                                                    </span>
                                                </div>
                                                
                                            </div>
                                            <div class="mt-4 pt-1">
                                                
                                                <a href="{{assets}}Expedientes/"><h4 class="fs-22 fw-semibold ff-secondary mb-0">Expedientes </h4></a>
                                                <p class="mt-4 mb-0 text-muted">Administrar expedientes instituciones.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--End col-->

                                {% endif%}  
                                {% endfor %}
                                <!--END PERMISO-->


                                <!--PERMISO VER CONFIGURACION-->
                                {% for permiso in permisos_fimpes %} 
                                {% if permiso.id_permiso == 67 %}
                                <div class="col-xl-3 col-md-6">
                                    <a href="../Reportes/">
                                    <div class="card card-height-100">
                                        <div class="card-body">
                                            <div class="float-end">
                                                
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm flex-shrink-0">
                                                    <span class="avatar-title bg-info-subtle rounded fs-3" style="background-color: #cdfaf7 !important;">
                                                        <i class="bx bx-traffic-cone text-info" style="color: #6b9895 !important;"></i>
                                                        
                                                    </span>
                                                </div>
                                                
                                            </div>
                                            <div class="mt-4 pt-1">
                                                
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-0">Reportes </h4>
                                                <p class="mt-4 mb-0 text-muted">Zonas, Comisión, Histórico etc.,</p>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                </div>
                                <!--End col-->

                                {% endif%}  
                                {% endfor %}
                                <!--END PERMISO-->
                                

                                 <!--PERMISO VER SOPORTE-->
                                 {% for permiso in permisos_fimpes %} 
                                 {% if permiso.id_permiso == 66 %}

                                <div class="col-xl-3 col-md-6">
                                    <div class="card card-height-100">
                                        <div class="card-body">
                                            <div class="float-end">
                                                <div class="dropdown card-header-dropdown">
                                                    <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <span class="text-muted fs-18"><i class="mdi mdi-dots-vertical align-middle"></i></span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item" href="#">Ver</a>
                                                        <a class="dropdown-item" href="#">Agregar</a>
                                                        <a class="dropdown-item" href="#">Exportar</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm flex-shrink-0">
                                                    <span class="avatar-title bg-info-subtle rounded fs-3" style="background-color: #ffe5e4 !important;">
                                                        <i class="bx bx-support text-info" style="color: #e8635f !important;"></i>
                                                    </span>
                                                </div>
                                                
                                            </div>
                                            <div class="mt-4 pt-1">
                                                
                                                <a href="../Soporte/"><h4 class="fs-22 fw-semibold ff-secondary mb-0">Soporte </h4></a>
                                                <p class="mt-4 mb-0 text-muted">Administrar tickets de ayuda.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--End col-->
                                {% endif%}  
                                {% endfor %}
                                <!--END PERMISO-->
                               


                                <!--PERMISO VER CONFIGURACION-->
                                {% for permiso in permisos_fimpes %} 
                                {% if permiso.id_permiso == 55 %}

                                <div class="col-xl-3 col-md-6">
                                    <div class="card card-height-100">
                                        <div class="card-body">
                                            <div class="float-end">
                                                <div class="dropdown card-header-dropdown">
                                                    <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <span class="text-muted fs-18"><i class="mdi mdi-dots-vertical align-middle"></i></span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item" href="#">Ver</a>
                                                        <a class="dropdown-item" href="#">Agregar</a>
                                                        <a class="dropdown-item" href="#">Exportar</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm flex-shrink-0">
                                                    <span class="avatar-title bg-info-subtle rounded fs-3" style="background-color: #ececec !important;">
                                                        <i class="bx bx-equalizer text-info" style="color: #8a8a8a !important;"></i>
                                                    </span>
                                                </div>
                                                
                                            </div>
                                            <div class="mt-4 pt-1">
                                                
                                                <a href="../Configuracion/"><h4 class="fs-22 fw-semibold ff-secondary mb-0">Configuración </h4></a>
                                                <p class="mt-4 mb-0 text-muted">Logo, login, etc.,</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--End col-->
                                {% endif%}  
                                {% endfor %}
                                <!--END PERMISO-->

                            </div><!--end row-->

                            <div class="row">
                                <div class="col">
                                   
                                    <!--PERMISO VER CONFIGURACION-->
                                {% for permiso in permisos_fimpes %} 
                                {% if permiso.id_permiso == 78 %}

                                    <div class="card">
                                        <div class="card-body p-0">
                                            <div class="row g-0">
                                                <div class="col">
                                                    <div class="">
                                                        <div class="card-header border-0 align-items-center d-flex">
                                                            <h4 class="card-title mb-0 flex-grow-1">Estadística</h4>
                                                            <div>
                                                                <button type="button" class="btn btn-soft-secondary btn-sm">
                                                                    ALL
                                                                </button>
                                                                <button type="button" class="btn btn-soft-secondary btn-sm">
                                                                    1M
                                                                </button>
                                                                <button type="button" class="btn btn-soft-secondary btn-sm">
                                                                    6M
                                                                </button>
                                                                <button type="button" class="btn btn-soft-primary btn-sm">
                                                                    1Y
                                                                </button>
                                                            </div>
                                                        </div><!-- end card header -->
                                                        <div class="row g-0 text-center">
                                                            <div class="col-6 col-sm-4">
                                                                <div class="p-3 border border-dashed border-start-0">
                                                                    <h5 class="mb-1"><span class="counter-value" data-target="{{total_accesos}}">0</span></h5>
                                                                    <p class="text-muted mb-0">Visitas</p>
                                                                </div>
                                                            </div>
                                                            <!--end col-->
                                                            <div class="col-6 col-sm-4">
                                                                <div class="p-3 border border-dashed border-start-0">
                                                                    <h5 class="mb-1"><span class="counter-value" data-target="{{total_sesiones}}">0</span></h5>
                                                                    <p class="text-muted mb-0">Sesiones</p>
                                                                </div>
                                                            </div>
                                                            <!--end col-->
                                                            <div class="col-6 col-sm-4">
                                                                <div class="p-3 border border-dashed border-end-0">
                                                                    <h5 class="mb-1"><span class="counter-value" data-target="{{total_logout}}">0</span></h5>
                                                                    <p class="text-muted mb-0">Logout</p>
                                                                </div>
                                                            </div>
                                                            <!--end col-->
                                                        </div>
                                                        <div id="line_chart_basic" data-colors='["--vz-primary","--vz-success", "--vz-light"]' class="apex-charts" dir="ltr"></div>
                                                    </div>
                                                </div>

                                                
                                            </div>
                                        </div>
                                    </div>

                                {% endif%}  
                                {% endfor %}
                                <!--END PERMISO-->

                                </div>
                                <!--end col-->
                            </div><!--end row-->
                        </div><!--end col-->

                        
                    </div>
                    <!--end row-->
                    

{% endblock %}