{% extends "master.html" %}


{% block stylesheets %}
    {{ parent() }}  
    
    
   

    <!-- Sweet Alert css-->
    <link href="{{assets}}/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />

    <!-- Boostrap tour css-->
    <link href="{{assets}}/libs/intro/css/introjs.min.css" rel="stylesheet" type="text/css" />
    <link href="{{assets}}/libs/countdown/css/jquery.countdown.css" rel="stylesheet" type="text/css" />

    <style>
        .introjs-tooltip {
            max-width: 400px !important;
        }

    

#percent {
  display: block;
  width: 160px;
  border: 1px solid #FFF;
  border-radius: 5px;
  margin: 50px auto 20px;
  padding: 10px;
  color: #1ABC9C;
  font-family: "Lato", Tahoma, Geneva, sans-serif;
  font-size: 35px;
  text-align: center;
}

#donut {
  display: block;
  margin: 0px auto;
  color: #1ABC9C;
  font-size: 20px;
  text-align: center;
}

/*p {
  max-width: 600px;
  margin: 12px auto;
  font-weight: normal;
  font-family: sans-serif;
}*/

code {
  background: #FAFAFA;
  border: 1px solid #DDD;
  border-radius: 3px;
  padding: 0px 4px;
}

.donut-size {
  font-size: 7em;
}

.pie-wrapper {
  position: relative;
  width: 1em;
  height: 1em;
  margin: 0px auto;
}
.pie-wrapper .pie {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  clip: rect(0, 1em, 1em, 0.5em);
}
.pie-wrapper .half-circle {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0em, 0.5em, 1em, 0em);
}
.pie-wrapper .right-side {
  transform: rotate(0deg);
}
.pie-wrapper .label {
  position: absolute;
  top: 0.52em;
  right: 0.4em;
  bottom: 0.4em;
  left: 0.4em;
  display: block;
  background: none;
  border-radius: 50%;
  color: #FFF;
  font-size: 0.25em;
  line-height: 2.6em;
  text-align: center;
  cursor: default;
  z-index: 2;
}
.pie-wrapper .smaller {
  padding-bottom: 20px;
  color: #FFF;
  font-size: 0.45em;
  vertical-align: super;
}
.pie-wrapper .shadow {
  width: 100%;
  height: 100%;
  border: 0.1em solid #FFF;
  border-radius: 50%;
}

    
    </style>
{% endblock %}


{% block javascripts %}
    {{ parent() }}

    <!-- Sweet Alerts js -->
    <script src="{{assets}}/libs/sweetalert2/sweetalert2.min.js"></script>

    <!-- Boostrap tour js -->
    <script src="{{assets}}/libs/intro/js/intro.min.js"></script>

    <!-- CountDown js -->
    <script src="{{assets}}/libs/countdown/js/jquery.plugin.min.js"></script>
    <script src="{{assets}}/libs/countdown/js/jquery.countdown.js"></script>
    <script src="{{assets}}/libs/countdown/js/jquery.countdown-es.js"></script>

    <script src="{{assets}}/js/pages/home.js"></script>
    


    <script>
    {% if tour1 == 0 %}
        startIntro();
    {% endif %}
    </script>


   <script>

    var newYear = '{{ expediente_actual.fecha_refrendo | date("Y m j") }}';  
    
    newYear = new Date(newYear); 
   

    $('#defaultCountdown').countdown({ until: newYear,  format: 'YOD',  timeSeparator:':'});

    
   </script>



<script>
    function updateDonutChart (el, percent, donut) {
percent = Math.round(percent);
if (percent > 100) {
    percent = 100;
} else if (percent < 0) {
    percent = 0;
}
var deg = Math.round(360 * (percent / 100));

if (percent > 50) {
    $(el + ' .pie').css('clip', 'rect(auto, auto, auto, auto)');
    $(el + ' .right-side').css('transform', 'rotate(180deg)');
} else {
    $(el + ' .pie').css('clip', 'rect(0, 1em, 1em, 0.5em)');
    $(el + ' .right-side').css('transform', 'rotate(0deg)');
}
if (donut) {
    $(el + ' .right-side').css('border-width', '0.15em');
    $(el + ' .left-side').css('border-width', '0.15em');
    $(el + ' .shadow').css('border-width', '0.1em');
} else {
    $(el + ' .right-side').css('border-width', '0.5em');
    $(el + ' .left-side').css('border-width', '0.5em');
    $(el + ' .shadow').css('border-width', '0.5em');
}
$(el + ' .num').text(percent);
$(el + ' .left-side').css('transform', 'rotate(' + deg + 'deg)');
}

       {% for elemento in elementos_saii %}
     
       updateDonutChart('#chart-{{elemento.id}}', {{elemento.porcentaje}}, true);

       {% endfor %}


       updateDonutChart('#chart-institucion', {{institucion.porcentaje}}, true);

       
</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">{{institucion.institucion}} {% if institucion.validado ==1 %} <i style="color: blue;" class="ri-shield-check-fill"></i> {% endif %}</h4>
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="javascript: void(0);">Estatus</a></li>
                                        {% if fimpes.id_institucion != 0 and fimpes.id_institucion != NULL %}
                                        <li class="breadcrumb-item active">{{institucion.estado}}</li>
                                        {% else %}
                                        <li class="breadcrumb-item active">Sin asignación</li>
                                        {% endif %}
                                    </ol>
                                </div>

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

                    <span id="intro"></span>

                    <div class="row">
                        <div class="col">
                            <div class="d-flex flex-column h-100">
                                <div class="row h-100">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-body p-0">

                                                
                                                {% if fimpes.id_institucion != 0 and fimpes.id_institucion != NULL %}
                                                {% if porcentaje < 100 %}
                                                <div class="alert alert-warning border-0 rounded-0 m-0 d-flex align-items-center" role="alert" id="step4">
                                                    <i data-feather="alert-triangle" class="text-warning me-2 icon-sm"></i>
                                                    <div class="flex-grow-1 text-truncate" data-step="1" data-intro="This is a tooltip!" data-title="A short title">
                                                        Es importante que actualice la <b>información de su directorio institucional</b>.
                                                    </div>
                                                    <div class="flex-shrink-0">
                                                         <!--PERMISO VER INSTITUCION-->
                                                            {% for permiso in permisos_institucion %} 
                                                            {% if permiso.id_permiso == 59 %}
                                                              <a href="{{assets}}Home/MiInformacion/{{institucion.id}}" class="text-reset text-decoration-underline"><b>Actualizar</b></a>
                                                            {% endif%}  
                                                            {% endfor %}
                                                            <!--END PERMISO-->
                                                    </div>
                                                </div>
                                                {% endif %}
                                                {% else %}

                                                <div class="alert alert-danger border-0 rounded-0 m-0 d-flex align-items-center" role="alert">
                                                    <i data-feather="alert-triangle" class="text-warning me-2 icon-sm"></i>
                                                    <div class="flex-grow-1 text-truncate">
                                                        En este momento no cuenta con <b>una institución asignada</b>.
                                                    </div>
                                                   
                                                </div>

                                                {% endif %}

                                                <div class="row align-items-end">
                                                    <div class="col-sm-8">
                                                        <div class="p-3">
                                                            <p class="fs-16 parrafo">Le damos la bienvenida a la plataforma <span class="fw-semibold">FIMPES</span></p>
                                                            <p class="fs-14 parrafo">Con el objetivo de mantener datos actualizados para fines de comunicación, le solicitamos completar cuidadosamente la información correspondiente a cada sección de su Directorio. Este repositorio de datos será utilizado para consolidar el directorio institucional ante FIMPES.</p>
                                                            
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <div class="px-3">
                                                            <img src="{{assets}}/images/universidades/{{institucion.logo}}"  class="img-thumbnail rounded-circle" style="margin: 10px; max-height: 150px; float: right;"   alt="">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> <!-- end card-body-->
                                        </div>
                                    </div> <!-- end col-->
                                </div> <!-- end row-->

                                <div class="row">

                                    <div class="col-md-6">
                                    <div class="card overflow-hidden card-animate">
                                        <div class="card-header d-flex align-items-center p-3 bg-primary">
                                            <h4 class="card-title flex-grow-1 mb-0 text-white">Directorio Institucional</h4>
                                            <div class="flex-shrink-0">
                                                
                                            </div>
                                        </div>
                                        <div class="card-body">


                                            
                                            <div class="d-flex justify-content-between">
                                                <div class="mt-1">
                                                    <h4 class="fs-22 fw-semibold ff-secondary mb-2" style="color: #003C72;">{{institucion.institucion}} </h4>
                                                   <div class="mb-4">
                                                    <span class="badge bg-info-subtle text-info fs-12">{{institucion.estado}}</span>  
                                                    </div>
                                                    {% if fimpes.id_institucion != 0 and fimpes.id_institucion != NULL %}
                                                    <a href="{{assets}}Home/directorio" class="btn btn-primary btn-sm">Revisar </a>
                                                    {% endif %}

                                                    {% if fimpes.id_institucion != 0 and fimpes.id_institucion != NULL %}
                                                            
                                                                        <!--PERMISO VER INSTITUCION-->
                                                                        {% for permiso in permisos_institucion %} 
                                                                        {% if permiso.id_permiso == 59 %}
                                                                            <a href="{{assets}}Home/MiInformacion/{{institucion.id}}" class="btn btn-success btn-sm" id="step5">Editar</a>
                                                                        {% endif%}  
                                                                        {% endfor %}
                                                                        <!--END PERMISO-->
                                                            
                                                            {% endif %}


                                                            {% if fimpes.id_institucion != 0 and fimpes.id_institucion != NULL %}
                                                            <a href="javascript:Exportar({{institucion.id}});" class="btn btn-soft-info btn-sm">Exportar</a>
                                                            {% endif %}

                                                </div>
                                                <div class="flex-shrink-0">
                                                    <div class="card" style="background-color: #F5F6FA;">
                                                        <div class="card-body">
                                                        <div id="chart-institucion" class="donut-size">
                                                            <div class="pie-wrapper">
                                                              <span class="label">
                                                                  <span class="num" style="font-weight: bold; color: {% if institucion.porcentaje <= 20 %} #C51C33; {% endif %}  {% if institucion.porcentaje > 20 and institucion.porcentaje <= 90 %} #D3A557; {% endif %} {% if institucion.porcentaje > 91 %} #013C74; {% endif %}">0</span><span class="smaller" style="position: relative; top: 5px; font-size: 16px; margin:3px; color: {% if institucion.porcentaje <= 20 %} #C51C33; {% endif %}  {% if institucion.porcentaje > 20 and institucion.porcentaje <= 90 %} #D3A557; {% endif %} {% if institucion.porcentaje > 91 %} #013C74; {% endif %}">%</span>
                                                              </span>
                                                              <div class="pie">
                                                                <div class="left-side half-circle" style="border: 0.1em solid {% if institucion.porcentaje <= 20 %} #C51C33; {% endif %}  {% if institucion.porcentaje > 20 and institucion.porcentaje <= 90 %} #D3A557; {% endif %} {% if institucion.porcentaje > 91 %} #013C74; {% endif %}  "></div>
                                                                <div class="right-side half-circle" style="border: 0.1em solid {% if institucion.porcentaje <= 20 %} #C51C33; {% endif %}  {% if institucion.porcentaje > 20 and institucion.porcentaje <= 90 %} #D3A557; {% endif %} {% if institucion.porcentaje > 91 %} #013C74; {% endif %}"></div>
                                                              </div>
                                                              <div class="shadow"></div>
                                                            </div>
                                                          </div>
                                                        </div>

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

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



                                      <!--Expediente-->
                                    <div class="col-md-6">
                                        <div class="card overflow-hidden card-animate">
                                            <div class="card-header d-flex align-items-center p-3 bg-primary">
                                                <h4 class="card-title flex-grow-1 mb-0 text-white">Expediente</h4>
                                                <span class="badge bg-info-subtle text-info fs-12">{{expediente_actual.estado}}</span>    
                                              
                                            </div>
                                            <div class="card-body">

                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="card crm-widget">

                                                            <div class="card-header align-items-center d-flex">
                                                                <h4 class="card-title mb-0 flex-grow-1" style="color: #003C72;"><i class="mdi mdi-calendar me-1"></i> Refrendo: <span style="color: #003C72; font-weight: bold;"> {% if expediente_actual.fecha_refrendo != null %}   {{ expediente_actual.fecha_refrendo | format_datetime(locale: 'es', pattern: "MMMM dd, YYYY", timezone: 'America/Mexico_City') | capitalize   }} {% endif %}</span></h4>
                                                                <div class="flex-shrink-0">
                                                                    
                                                                    {% if fimpes.id_institucion != 0 and fimpes.id_institucion != NULL %}
                                                                    <a href="{{assets}}Home/Expediente" class="btn btn-primary btn-sm">Revisar </a>
                                                                    {% endif %}
                                                                        
                                                                    
                                                                </div>
                                                            </div>

                                                            <div class="card-body">
                                                                <div class="row">
                                                                    <div class="col-4" style="background-color: #8DC2EA;">
                                                                        <div class="py-2">
                                                                            
                                                                            <div class="d-flex align-items-center">
                                                                                
                                                                                <div class="flex-grow-1 ms-3">
                                                                                    <span style="font-size: 18px; color: #003C72; ">
                                                                                        Tiempo restante  <b>para refrendo de</b> <b>acreditación</b> 
                                                                                    </span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div><!-- end col -->
                                                                    <div class="col" style="background-color: #C4DFF4;">
                                                                        <div class="mt-3">
                                                                            <div id="defaultCountdown" style="height: 50px;"></div>
                                                                          
                                                                        </div>
                                                                    </div><!-- end col -->
                                                                   
                                                                   
                                                                    
                                                                </div><!-- end row -->
                                                            </div><!-- end card body -->
                                                        </div><!-- end card -->
                                                    </div><!-- end col -->
                                                </div>
    
                                                
                                                
                                            </div>
                                        </div>
                                    </div>

                               

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

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

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



                    <div class="row">
                        <div class="col">
                            <div class="d-flex flex-column h-100">
                                
                                <div class="row">

                                   


                                    <div class="col-md-6">
                                        <div class="card card-animate">
                                            <div class="card-header d-flex align-items-center p-3 bg-primary">
                                                <h4 class="card-title flex-grow-1 mb-0 text-white">Manual de Usuario</h4>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    
                                                    {{modulos.modulo_1 | raw}}
    
                                                    
                                                </div>
                                            </div><!-- end card body -->
                                        </div> <!-- end card-->
                                    </div> <!-- end col-->
                                    

                                    <!--SAII-->

                                    <div class="col-md-6">
                                
                                        <div class="card overflow-hidden card-animate">
                                            <div class="card-header d-flex align-items-center p-3 bg-primary">
                                                <h4 class="card-title flex-grow-1 mb-0 text-white">Módulo SAII</h4>
                                                
                                            </div>
                                            <div class="card-body p-0">
            
                                                <div class="mt-3 mb-4">
                                                    <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                                                        <li class="nav-item">
                                                            <a class="nav-link active" data-bs-toggle="tab" href="#saii-1" role="tab">
                                                                Procesos de captura
                                                            </a>
                                                        </li>
                                                       
                                                    </ul>
                                                    <!--end nav-->
                                                </div>
            
            
                                                <div class="tab-content">
            
            
                                                    <div class="tab-pane active" id="saii-1" role="tabpanel">
                                                            <div class="alert alert-warning border-0 rounded-top rounded-0 m-0 d-flex align-items-center" role="alert">
                                                                <div class="flex-grow-1 text-truncate">
                                                                    Porcentaje de respuesta anual en el <b>SAII</b> .
                                                                </div>
                                                                
                                                            </div>
            
                                                            <div class="d-flex flex-column h-100 m-4">
                                                                <div class="row">
                                                                    {% for elemento in elementos_saii %}
                                                                    
                                                                    <div class="col-xl-4 col-md-6">

                                                                        <!-- card -->


                                                                        <!-- card -->
                                        <div class="card card-animate" style="background-color: #F5F6FA;">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1">
                                                        <p style="color: #013C74;">Porcentaje capturado</p>
                                                    </div>
                                                    <div class="flex-shrink-0">
                                                        <a href="{{assets}}saii/infografias/{{elemento.id}}" style="color: #013C74;">Ver <i class="ri-arrow-right-s-line" style="font-weight: bold; font-size: 14px;"></i></a>
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-end justify-content-between mt-4">
                                                    <div>
                                                        

                                                        <div id="chart-{{elemento.id}}" class="donut-size">
                                                            <div class="pie-wrapper">
                                                              <span class="label">
                                                                  <span class="num" style="font-weight: bold; color: {% if elemento.porcentaje <= 20 %} #C51C33; {% endif %}  {% if elemento.porcentaje > 20 and elemento.porcentaje <= 90 %} #D3A557; {% endif %} {% if elemento.porcentaje > 91 %} #013C74; {% endif %}">0</span><span class="smaller" style="position: relative; top: 5px; font-size: 16px; margin:3px; color: {% if elemento.porcentaje <= 20 %} #C51C33; {% endif %}  {% if elemento.porcentaje > 20 and elemento.porcentaje <= 90 %} #D3A557; {% endif %} {% if elemento.porcentaje > 91 %} #013C74; {% endif %}">%</span>
                                                              </span>
                                                              <div class="pie">
                                                                <div class="left-side half-circle" style="border: 0.1em solid {% if elemento.porcentaje <= 20 %} #C51C33; {% endif %}  {% if elemento.porcentaje > 20 and elemento.porcentaje <= 90 %} #D3A557; {% endif %} {% if elemento.porcentaje > 91 %} #013C74; {% endif %}  "></div>
                                                                <div class="right-side half-circle" style="border: 0.1em solid {% if elemento.porcentaje <= 20 %} #C51C33; {% endif %}  {% if elemento.porcentaje > 20 and elemento.porcentaje <= 90 %} #D3A557; {% endif %} {% if elemento.porcentaje > 91 %} #013C74; {% endif %}"></div>
                                                              </div>
                                                              <div class="shadow"></div>
                                                            </div>
                                                          </div>
                                                        
                                                    </div>
                                                    <div class="flex-shrink-0">
                                                        

                                                        <h4 style="color: #013C74; font-weight: bold; font-size: 20px;">{{elemento.anio}}</h4>
                                                        
                                                            
                                                            

                                                        
                                                    </div>
                                                </div>
                                            </div><!-- end card body -->
                                        </div>
                                        <!-- end card -->
                                                                        

                                                                        
                                                                    </div>

                                                                    {% endfor %}
                                                                </div><!--end row-->
                                                            </div>
                                                    </div>
            
                                                  
                                            
                                                </div>
                                                
                                                
                                            </div>
                                        </div>
                                         </div>

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

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

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



                    

                       

                    <div id="center"></div>


<!--Modal Agregar Archivo-->
<div class="modal fade" id="ModalFormArchivo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title" id="exampleModalLabel">Agregar archivo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
            </div>
            <form class="tablelist-form needs-validation" autocomplete="off" id="FormArchivo" action="#" method="post" enctype="multipart/form-data" novalidate>
                <div class="modal-body">
                    
                    <input type="hidden"  name="id_institucion" value="{{institucion.id}}" />
                    <input type="hidden"  name="id_expediente"  value="" />
                    
                    <div class="row g-3">

                    
                        <div class="col-lg-6">
            
                            <div>
                                <label for="nombre" class="form-label">Nombre:</label>
                                <input type="text"  name="nombre" class="form-control" placeholder="" required />
                                <div class="invalid-feedback">
                                    Información necesaria.
                                </div>
                            </div>
                        </div>
                    


                        <div class="col-lg-6">
                            <div>
                                
                            </div>
                        </div>


                       


                        <div class="col-lg-12">
                            <div>
                                <label for="archivo" class="form-label">Archivo:</label>
                                <input class="form-control" type="file"  name="archivo" required>
                            </div>
                        </div>


                        
                        
                    </div>
                    <!--end row-->
                </div>
                <div class="modal-footer">
                    <div class="hstack gap-2 justify-content-end">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-success" data-loading-text="Loading..." id="add-btn-file">Agregar</button>
                        <!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--end modal-->

<!--Modal Editar Archivo-->
<div class="modal fade" id="ModalFormEditArchivo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title" id="exampleModalLabel">Editar archivo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
            </div>
            <form class="tablelist-form needs-validation" autocomplete="off" id="FormEditArchivo" action="#" method="post" enctype="multipart/form-data" novalidate>
                <div class="modal-body">
                    
                    <input type="hidden"  name="id_archivo" id="id_archivo_file" value="" />
                    <input type="hidden"  name="id_institucion" value="{{institucion.id}}" />
                    <input type="hidden"  name="id_expediente" id="id_expediente_file" value="" />
                    
                    <div class="row g-3">

                    
                        <div class="col-lg-6">
            
                            <div>
                                <label for="nombre" class="form-label">Nombre:</label>
                                <input type="text" id="nombre_file" name="nombre" class="form-control" placeholder="" required />
                                <div class="invalid-feedback">
                                    Información necesaria.
                                </div>
                            </div>
                        </div>
                    


                        <div class="col-lg-12">
                            <div>
                                <label for="archivo" class="form-label">Archivo:</label>
                                <input class="form-control" type="file" id="archivo_file" name="archivo">
                            </div>
                        </div>

 
                        
                    </div>
                    <!--end row-->
                </div>
                <div class="modal-footer">
                    <div class="hstack gap-2 justify-content-end">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-success" data-loading-text="Loading..." id="edit-btn-file">Guardar</button>
                        <!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--end modal-->


                   


{% endblock %}