{% extends 'base.html' %} {# title page #} {% block title %}Sitio GID: {{objeto['codigoGid']}} | SICT {% endblock %} {# css files #} {% block cssfiles %}
<link rel="stylesheet" href="{{url_for('static', filename='css/layoutreports.css')}}" /> {% endblock %} {% block content %} {# botones afectación al formulario #} {# inicio de style para ocultar elementos que si se deben de imprimir #}
<style type="text/css" media="print">

</style>



{# fin del style para ocultar elementos que si se deben de imprimir #} {# encabezado del formulario #}


<div id="layoutContainer">

    <div id="btnsreportes">
        <button type="button" class="btn btn-warning" id="btnLimpiar">Limpiar formulario</button>
        <button type="button" class="btn btn-danger" id="btnCambiarGid"> <a class="link-light" href="{{url_for('home')}}">Cambiar GID</a></button>
        <button type="button" class="btn btn-success" id="btnPrint">Imprimir formulario</button>
    </div>

    {# encabezado del reporte #}
    <div>
        <h4>Reporte Trimestral <br>Aldeas Inteligentes, Bienestar Sostenible</h4>
    </div>

    <div id="contenedorEncabezado">
        <div id="first_row">

            <label>
                <b>Fecha Doc.:</b>
                <span id="currentDate"></span>
            </label>

            <label>
                <b>Código GID:</b>
                <span>{{objeto['codigoGid']}}</span>
            </label>

            <label class=""><b>No. Indicadores: </b>
                <span>{{objeto['nIndicadores']}}</span>
            </label>

        </div>
    </div>
    <div id="second_row">
        <label> <b> Aldea Inteligente: </b>{{objeto['ai']}} </label>
        <label> <b> Sitio: </b>{{objeto['sitio']}}</label>
    </div>
    <div id="third_row">
        <label> <b>Estado:</b> {{objeto['edo']}}</label>
        <label> <b> Municipio:</b> {{objeto['mun']}}</label>
        <label> <b> Localidad:</b> {{objeto['loc']}}</label>
    </div>
    <div id="fourth_row">
        <span class="lTrim"><b>Trimestre:</b></span>
        <span class="lInicio"><b>Inicio: </b></span>
        <input id="inicioTrim" type="date" />
        <span class="lTermino"><b>Término: </b></span>
        <input id="finTrim" type="date" />
    </div>
</div>
{#
<!-- todos los indicadores -->
#}
<div id="containerIndicadores">
    {#
    <!-- inicio plantilla -->
    #} {% for index in range(objeto['nIndicadores']) %}
    <div>
        {# inicio del loop indicadores #}
        <div class="contenedor">
            <div class="headerIndicador">
                <h6> INDICADOR {{index+1}}</h6>
            </div>
            <div class="datosGlobalesIndicador">

                <span class="lNombreIndicador"><b>Nombre indicador: </b></span>

                <span>{{objeto.indicadores[index].nombre_del_indicador}}</span>

                <span class="lDefinicion"><b>Definición: </b></span>

                <span>{{objeto.indicadores[index].definicion}}</span>

                <span class="lMeta"><b>Meta: </b></span>

                <span id="meta_{{index+1}}">{{objeto.indicadores[index].meta}}</span>

                <span class="lODS"><b> ODS impactados: </b></span>

                <span>{{objeto.indicadores[index].ods_impactados}}</span>

                <!-- linea base ${num} -->
                <!--
                        <div>
                            <p align="right">
                                <strong>
                                    Linea base: 
                                </strong>
                            </p>
                        </div>
                        <div align="left">
                            <span>
                                ${obj['linea_base']}
                            </span>
                        </div>
                        -->
            </div>
            <div class="dimensionAmedir">
                <div class="cajasDAM">
                    <span class="cajaItem1"><b>Dimensión a medir:</b></span>
                    <span class="cajaItem2">{{objeto.indicadores[index].dimension_a_medir}}</span>
                </div>
                <div class="cajasDAM">
                    <span class="cajaItem1"><b> Unidad de medida: </b></span>
                    <span class="cajaItem2" id="unidadMedida_{{index+1}}">{{objeto.indicadores[index].unidad_de_medida}} </span>
                </div>
                <div class="cajasDAM">
                    <span class="cajaItem1"><b>Tipo de reporte: </b></span>
                    <span class="cajaItem2">{{objeto.indicadores[index].tipo_reporte}}</span>
                </div>
                <div class="cajasDAM">
                    <span class="cajaItem1"><b> Tipo de meta: </b></span>
                    <span class="cajaItem2" id="index_meta_{{index+1}}">{{objeto.indicadores[index].tipo_meta}}</span>
                </div>
            </div>
            <div class="datosCalculo">
                <div>
                    <p class="titleDatosCalc">Datos para el cálculo:</p>
                </div>
                <div class="varCalculo">

                    <input class="inputVarA" type="text" id="varA_{{index+1}}" maxlength="10" size="8" />

                    <span class="varA">
                        <b id="varA{{index+1}}Strong">
                            {{objeto.indicadores[index].variable_a.strip()}}
                        </b>
                    </span>

                    <input class="inputVarB" type="text" id="varB_{{index+1}}" maxlength="10" size="8" />

                    <span class="varB">
                        <b id="varB{{index+1}}Strong">
                            {% autoescape false %}
                            {{objeto.indicadores[index].variable_b | striptags | trim }}
                            {% endautoescape %}
                        </b>
                    </span>

                </div>
            </div>
            <div class="semaforo">
                <div class="circle" id="circle_{{index+1}}">
                    <label>
                        <span id="semaforo_{{index+1}}"> </span>
                        <span id="signo_{{index+1}}"> </span>
                    </label>
                </div>

                <!--{# inicio del div table  #}-->
                <div>
                    <table id="table_{{index+1}}">
                        <thead>
                            <tr>
                                <th colspan="3" class="thMain">Parámetros semáforo (%)</th>
                            </tr>
                            <tr>
                                <th class="thMain">Concepto</th>
                                <th class="thMain">L.I.</th>
                                <th class="thMain">L.S.</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="aceptable_{{index+1}}">
                                <th style="text-align: right">Aceptable:</th>
                                <td id="verde_li_{{index+1}}">
                                    {{'%0.2f' |format(objeto.indicadores[index].verde_li * 100|float) }}
                                </td>
                                <td id="verde_ls_{{index+1}}">
                                    {{'%0.2f' |format(objeto.indicadores[index].verde_ls * 100|float) }}
                                </td>
                            </tr>
                            <tr id="riesgo_{{index+1}}">
                                <th style="text-align: right">Riesgo:</th>
                                <td id="amarillo_li_{{index+1}}">
                                    {{'%0.2f' |format(objeto.indicadores[index].amarillo_li * 100|float) }}
                                </td>
                                <td id="amarillo_ls_{{index+1}}">
                                    {{'%0.2f' |format(objeto.indicadores[index].amarillo_ls * 100|float) }}
                                </td>
                            </tr>
                            <tr id="critico_{{index+1}}">
                                <th style="text-align: right">Crítico:</th>
                                <td>
                                    0.00
                                </td>
                                <td id="rojo_ls_{{index+1}}">
                                    {{'%0.2f' |format(objeto.indicadores[index].rojo_ls * 100|float) }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!--{# fin del div table #}-->
            </div>

            {# fin del loop indicadores #}
        </div>
    </div>
    {% endfor %}
    <!-- {# fin de plantilla #} -->
    <!-- {# inicio del campo de observaciones #} -->
    <!-- {# sección obervaciones, información de soporte y firmas #} -->

    <div class="headerIndicador" style="margin-top: 10px;">
        <h6>OBSERVACIONES</h6>
    </div>
    <textarea rows="7" cols="75" id="observaciones" maxlength="1250" placeholder="En caso de tener comentarios relacionados a la conectividad o al sitio registrarlos aquí."></textarea>
    <div class="headerIndicador">
        <h6>INFORMACIÓN DE SOPORTE QUE SE ANEXARÁ</h6>
    </div>
    <div class="txt_area_container">
        <textarea rows="7" cols="75" id="infosoporte" maxlength="1250" placeholder="Indicar la evidencia que se anexará para confirmar los datos registrados en el presente reporte, por ejemplo: listas de asistencias, listas de ventas, listas de cursos, etc."></textarea>
    </div>


    <div id="firmas">
        <div>
            <!-- inicio nuevo bloque preliminar -->
            <div id="squareSignFielRepresentante">
                <input type="file" name="" id="fileUploadRepresentante" />
                <img src="" alt="firma representante" id="imgSignRepresentante" />
                <span class="leyenda">Doble click para cargar firma digitalizada del representante del sitio</span>
            </div>
            <!-- fin nuevo bloque preliminar -->
            <div>
                <span id="encargadoSitio">{{objeto.responsableSitio}}</span><br />
                <span id="cargoEncargado">{{objeto.PuestoResponsable}} </span><br />
                <span>Firma Representante del Sitio</span>
            </div>
        </div>
        <div>
            <!-- inicio nuevo bloque preliminar -->
            <div id="squareSignFielSubCentroSCT">
                <input type="file" name="" id="fileUploadSubCentroSCT" />
                <img src="" alt="firma representante" id="imgSignSubCentroSCT" />
                <span class="leyenda">Doble click para cargar la firma digitalizada del representante del Centro SICT</span>
            </div>
            <!-- fin nuevo bloque preliminar -->
            <div>
                <span id="nombreSubCSICT">{{objeto.centroSICT['Nombre_Subdir']}}</span
            ><br />
            <span id="cargo"
              >{{objeto.centroSICT['Cargo']}}
              {{objeto.centroSICT['Centro_SICT']}}</span
            ><br />
            <span>Firma Vo.Bo.</span>
            </div>
        </div>
    </div>

    <!-- {# fin del campo de observaciones #} -->

    <!-- div imagenes container -->
    <div id="leyendaProyecto">
        <p>
            <b>
                <i>
                    L.I.: Límite inferior | L.S.: Límite superior | ODS: Objetivos de Desarrollo Sostenible
                </i>
            </b>
        </p>
        <p id="leyenda" style="font-weight: bold; font-size: 14px;">
            El proyecto “Aldeas Inteligentes, Bienestar Sostenible” y el servicio de conectividad a internet provista mediante este, es público y gratuito, ajeno a cualquier partido político. Queda prohibido su uso para fines distintos a los establecidos en el programa.
        </p>
    </div>
    <div class="link_container">
        <a href="https://www.gob.mx/privacidadsimplificado" target="_blank">
            Aviso de Privacidad Simplificado
        </a>
        <a href="https://www.gob.mx/aviso_de_privacidad" target="_blank">
            Aviso de Privacidad Integral
        </a>

        <a href="{{url_for('mapa')}}" target="_blank">
            Mapa de Sitios Instalados
        </a>

        <a id="manual" href="http://192.168.1.66/MANUAL_INFORME_DE_ACTIVIDADES_DE_LAS_ALDEAS_INTELIGENTES.pdf" target="_blank">
            Manual de usuario 
        </a>

        <a href="" id="historico" target="_blank">
        </a>
    </div>
    <div id="myGallery">
        <a href="https://www.un.org/sustainabledevelopment/es/poverty/" target="_blank">
            <img src="{{url_for('static', filename='imgs/1.webp')}}" alt="ODS 1">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/hunger/" target="_blank">
            <img src="{{url_for('static', filename='imgs/2.webp')}}" alt="ODS 2">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/health/" target="_blank">
            <img src="{{url_for('static', filename='imgs/3.webp')}}" alt="ODS 3">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/education/" target="_blank">
            <img src="{{url_for('static', filename='imgs/4.webp')}}" alt="ODS 4">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/gender-equality/" target="_blank">
            <img src="{{url_for('static', filename='imgs/5.webp')}}" alt="ODS 5">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/water-and-sanitation/" target="_blank">
            <img src="{{url_for('static', filename='imgs/6.webp')}}" alt="ODS 6">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/energy/" target="_blank">
            <img src="{{url_for('static', filename='imgs/7.webp')}}" alt="ODS 7">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/economic-growth/" target="_blank">
            <img src="{{url_for('static', filename='imgs/8.webp')}}" alt="ODS 8">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/infrastructure/" target="_blank">
            <img src="{{url_for('static', filename='imgs/9.webp')}}" alt="ODS 9">
        </a>

        <a href="https://www.un.org/sustainabledevelopment/es/inequality/" target="_blank">
            <img src="{{url_for('static', filename='imgs/10.webp')}}" alt="ODS 10">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/cities/" target="_blank">
            <img src="{{url_for('static', filename='imgs/11.webp')}}" alt="ODS 11">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/sustainable-consumption-production/" target="_blank">
            <img src="{{url_for('static', filename='imgs/12.webp')}}" alt="ODS 12">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/climate-change-2/" target="_blank">
            <img src="{{url_for('static', filename='imgs/13.webp')}}" alt="ODS 13">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/oceans/" target="_blank">
            <img src="{{url_for('static', filename='imgs/14.webp')}}" alt="ODS 14">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/biodiversity/" target="_blank">
            <img src="{{url_for('static', filename='imgs/15.webp')}}" alt="ODS 15">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/peace-justice/" target="_blank">
            <img src="{{url_for('static', filename='imgs/16.webp')}}" alt="ODS 16">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/globalpartnerships/" target="_blank">
            <img src="{{url_for('static', filename='imgs/17.webp')}}" alt="ODS 17">
        </a>
        <a href="https://www.un.org/sustainabledevelopment/es/sustainable-development-goals/" target="_blank">
            <img src="{{url_for('static', filename='imgs/ODS.webp')}}" alt="ODS">
        </a>
    </div>
</div>
</div>

<script>
    let nIndicadores = '{{objeto.nIndicadores}}'
</script>

<script src="{{url_for('static', filename='js/layoutreporte.js')}}" type="module"></script>
</div>

{% endblock %}