  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Gestión de KPI</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item"><a href="#">Administración</a></li>
              <li class="breadcrumb-item"><a href="#">Gestión de KPI</a></li>
              <li class="breadcrumb-item active"></li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <?php 

      require_once "../../controlador/administracion.controlador.php";

      // Instancia de la clase UsuarioControlador
      $administracionControlador = new Controladoradministracion();

      // Ejecución de la función controladora encargada de consultar perfiles.
      $procesos = $administracionControlador->ctrConsultaProcesos();

      $macroProcesos = $administracionControlador->ctrConsultaMacroProcesos();
      // var_dump($macroProcesos);ctrConsultaUsuarios

      // Responsables
      $usuarios = $administracionControlador->ctrConsultaUsuarios();


      // Iconos
      $iconos = $administracionControlador->ctrConsultaIconos();
      // var_dump($iconos);

      // Indicadores
      $indicadores = $administracionControlador->ctrConsultaIndicadoresActivos();

      // Tipos de indicador
      $tipoIndicadores = $administracionControlador->ctrConsultaTiposIndicadorActivos();

      // Periodicidad de indicadores
      $periodicidadIndicadores = $administracionControlador->ctrConsultaPeriodicidadIndicadores(); 

    ?>

    <!-- Modal nuevo proceso -->
    <div class="modal fade" id="modal_nuevo_kpi" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Nuevo KPI</h5>   
          </div>
          <form class="form-horizontal" autocomplete="off" id="frm_nuevo_kpi">
            <div class="modal-body"> 
              <div class="row">
                <div class="col-sm-6">

                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <input class="form-control text-uppercase" type="text" name="m_indicador" id="m_indicador" placeholder="INDICADOR" style="height: 30px;"> 
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <input class="form-control text-uppercase" type="text" name="m_formula" id="m_formula" placeholder="FÓRMULA" style="height: 30px;"> 
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control text-uppercase" name="m_id_proceso" id="m_id_proceso" style="width: 100%;">
                              <option value="0">SELECCIONAR PROCESO</option>
                              <?php foreach ($procesos as $proceso) { ?>
                                <option value="<?php echo $proceso['id'] ?>"><?php echo utf8_encode($proceso['descripcion']) ?></option>
                              <?php } ?>  
                            </select>
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control" name="m_id_responsable" id="m_id_responsable" style="width: 100%;">
                              <option value="0">RESPONSABLE</option>
                              <?php foreach ($usuarios as $key => $value) { ?>
                                <option value="<?php echo $value['id'] ?>"><?php echo utf8_encode($value['nombres']).' '.utf8_encode($value['apellidos']) ?></option>
                              <?php } ?> 
                            </select> 
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control text-uppercase" name="m_tipo_indicador" id="m_tipo_indicador" style="width: 100%;">
                              <option value="0">TIPO INDICADOR</option>
                              <?php foreach ($tipoIndicadores as $key => $tipoindicador) { ?>
                                <option value="<?php echo $tipoindicador['id'] ?>"><?php echo $tipoindicador['descripcion'] ?></option>
                              <?php } ?>     
                            </select>
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control text-uppercase" name="m_periodicidad" id="m_periodicidad" style="width: 100%;">
                              <option value="0">PERIODICIDAD</option>
                              <?php foreach ($periodicidadIndicadores as $key => $periodicidad) { ?>
                                <option value="<?php echo $periodicidad['id'] ?>"><?php echo utf8_encode($periodicidad['periodicidad']) ?></option>
                              <?php } ?>   
                            </select>
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <input class="form-control" type="number" min="0" name="m_meta" id="m_meta" placeholder="META" style="height: 30px;"> 
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control" name="m_estado" id="m_estado" style="width: 100%;">
                              <option value="10">ESTADO</option>
                              <option value="1">ACTIVO</option>
                              <option value="0">INACTIVO</option>
                            </select> 
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-12 text-center">
                      <p>RANGO DE GESTIÓN</p>
                    </div>
                    <div class="col-sm-4">
                      <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <div class="bg-danger pl-5"></div>
                        </div>
                        <input type="number" min="0" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1" name="m_gestion_bajo" id="m_gestion_bajo" value="0">
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <div class="pl-5" style="background: #F39C12;"></div>
                        </div>
                        <input type="number" min="0" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1" name="m_gestion_medio" id="m_gestion_medio" value="0">
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <div class="pl-5" style="background: #00A65A;"></div>
                        </div>
                        <input type="number" min="0" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1" name="m_gestion_alto" id="m_gestion_alto" value="0">
                      </div>
                    </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-success" data-dismiss="modal">Cerrar <i class="fas fa-times ml-3"></i></button>
              <button type="button" class="btn btn-success" onclick="formulario('frm_nuevo_kpi', '<?php echo $_GET['id_usuario'] ?>', 'registrar_kpi', '../controlador/administracion.controlador.php', 'modulos/gestion_de_kpi.php?id_usuario=<?php echo $_GET['id_usuario'] ?>&usuario=<?php echo $_GET['usuario'] ?>&id_proceso=<?php echo $_GET['id_proceso'] ?>,&id_perfil=<?php echo $_GET['id_perfil'] ?>', 'modal_nuevo_kpi');">Guardar <i class="far fa-save ml-3"></i></button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Main content -->
    <section class="content">

      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <!-- Default box -->
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Edición de KPI</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                    <i class="fas fa-minus"></i></button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fas fa-times"></i></button>
                </div>
              </div>
              <form autocomplete="off" id="frm_edicion_indicador">  
                <div class="card-body">
                  <div class="row">
                    <button type="button" class="btn btn-success col-sm-12 mb-3" data-toggle="modal" data-target="#modal_nuevo_kpi">Crear nuevo idicador <i class="fas fa-plus ml-2"></i></button>
                               
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control text-uppercase" name="indicador" id="indicador" style="width: 100%;" onchange="consutaIndicador(this.value, 'consulta_indicador', '../controlador/administracion.controlador.php');">
                              <option value="0">INDICADOR</option> 
                              <?php foreach ($indicadores as $key => $indicador) { ?> 
                                <option value="<?php echo $indicador['id'] ?>"><?php echo utf8_encode($indicador['nombre']) ?></option>
                              <?php } ?>  
                            </select>  
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <input class="form-control" type="text" name="formula" id="formula" placeholder="FÓRMULA" style="height: 30px;"> 
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control text-uppercase" name="id_proceso" id="id_proceso" style="width: 100%;">
                              <option value="0">SELECCIONAR PROCESO</option>
                              <?php foreach ($procesos as $proceso) { ?>
                                <option value="<?php echo $proceso['id'] ?>"><?php echo utf8_encode($proceso['descripcion']) ?></option>
                              <?php } ?>  
                            </select>
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control" name="admin_id_responsable_indicador" id="admin_id_responsable_indicador" style="width: 100%;">
                              <option value="0">RESPONSABLE</option>
                              <?php foreach ($usuarios as $key => $value) { ?>
                                <option value="<?php echo $value['id'] ?>"><?php echo utf8_encode($value['nombres']).' '.utf8_encode($value['apellidos']) ?></option>
                              <?php } ?>
                            </select> 
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control text-uppercase" name="tipo_indicador" id="tipo_indicador" style="width: 100%;">
                              <option value="0">TIPO INDICADOR</option>
                              <?php foreach ($tipoIndicadores as $key => $tipoindicador) { ?>
                                <option value="<?php echo $tipoindicador['id'] ?>"><?php echo $tipoindicador['descripcion'] ?></option>
                              <?php } ?>  
                            </select>
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control text-uppercase" name="periodicidad" id="periodicidad" style="width: 100%;">
                              <option value="0">PERIODICIDAD</option>
                              <?php foreach ($periodicidadIndicadores as $key => $periodicidad) { ?>
                                <option value="<?php echo $periodicidad['id'] ?>"><?php echo utf8_encode($periodicidad['periodicidad']) ?></option>
                              <?php } ?>  
                            </select>
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <input class="form-control" type="number" name="meta" id="meta" min="0" placeholder="META" style="height: 30px;"> 
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control" name="estado" id="estado" style="width: 100%;">
                              <option value="10">ESTADO</option>
                              <option value="1">ACTIVO</option>
                              <option value="0">INACTIVO</option>
                            </select> 
                          </div>
                      </div>
                    </div>
                    <div class="col-sm-12 text-center">
                      <p>RANGO DE GESTIÓN</p>
                    </div>
                    <div class="col-sm-4">
                      <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <div class="bg-danger pl-5"></div>
                        </div>
                        <input type="number" min="0" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1" name="gestion_bajo" id="gestion_bajo" value="0">
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <div class="pl-5" style="background: #F39C12;"></div>
                        </div>
                        <input type="number" min="0" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1" name="gestion_medio" id="gestion_medio" value="0">
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <div class="pl-5" style="background: #00A65A;"></div>
                        </div>
                        <input type="number" min="0" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1" name="gestion_alto" id="gestion_alto" value="0">
                      </div>
                    </div>
                  </div>  
                </div>
                <!-- /.card-body -->
                <div class="card-footer text-right">
                  <!-- Edición indicador -->
                  <button class="btn btn-success" type="button" onclick="formulario('frm_edicion_indicador', '<?php echo $_GET['id_usuario'] ?>', 'edita_indicador', '../controlador/administracion.controlador.php', 'modulos/gestion_de_kpi.php?id_usuario=<?php echo $_GET['id_usuario'] ?>&usuario=<?php echo $_GET['usuario'] ?>&id_proceso=<?php echo $_GET['id_proceso'] ?>,&id_perfil=<?php echo $_GET['id_perfil'] ?>', '');">Guardar <i class="far fa-save ml-3"></i></button>
                </div>
              </form>
              <!-- /.card-footer-->
            </div>
            <!-- /.card -->
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>