{% extends "layout.html" %}

{% block content %}
  <div class="container-fluid row">

  <div class="d-sm-flex align-items-center justify-content-between col-12 mb-4">
    <div class="h3 mb-0 text-gray-800"><div class="row no-gutters align-items-center"><div class="col mr-2"><i class="mr-2 fas fa-fw fa-boxes"></i>Módulos de Gestión</div><div class="col-auto"><a class="btn btn-lg btn-primary ml-4 text-white" data-toggle="modal" data-target="#modalNewSingle" data-gid="0" data-nombre="" data-etiquetae=""  data-uri="" data-icon="" data-miembros="[]">Nuevo Módulo</a></div></div></div>
  </div>
  
  {% for element in admindata.get_modulos() if element.id > 1 %}
  <div class="col-xl-6 col-lg-12 pb-3">
  <div class="list-group">
  <div class="list-group-item active"><i class="mr-2 fas fa-fw fa-user-friends"></i>({{element.id}}) Módulo: {{ element.nombre }}</div>

      {% if element.quorum %}
            <div class="list-group-item"><div class="row no-gutters align-items-center">Tiene {{ element.quorum }} miembros.</div></div>
      {% else %}
            <div class="list-group-item"><div class="row no-gutters align-items-center">No tiene miembros.</div></div>
      {% endif %}

      <div class="list-group-item"><div class="row no-gutters align-items-center"><div class="col mr-2">&nbsp;</div><div class="col-auto"><a class="btn btn-sm btn-primary ml-4 text-white" data-toggle="modal" data-target="#modalNewSingle" data-gid="{{ element.id }}" data-nombre="{{ element.nombre }}" data-etiqueta="{{ element.etiqueta }}" data-uri="{{ element.uri }}" data-icon="{{ element.icon }}" data-miembros="{{ element.mvector() }}">Modificar</a></div></div></div>

  </div>
  </div>  
  {% else %}
  <div class="d-sm-flex align-items-center justify-content-between col-12 mb-4">
    <h1 class="h5 mb-0 text-gray-800">No hay elementos que mostrar</h1>
  </div>    
  {% endfor %}
  
  
</div>    

{% endblock content %}
{% block css %}
<link href="/static/select2.min.css" rel="stylesheet">
{% endblock css %}

{% block js %}
<div class="modal fade" id="modalNewSingle" tabindex="-1" aria-labelledby="modalNewSingleLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('gestion.editmodulo') }}">
      <div class="modal-header">
        <h5 class="modal-title" id="modalNewSingleLabel">Nuevo Módulo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <input type="hidden" class="form-control" name="admin" value="{{admin}}">

          <div class="form-group">
            <label for="modalNewSingleNombre" class="col-form-label">Id del Módulo:</label>
            <input type="text" class="form-control"  id="modalNewSingleId" name="id">
          </div>

          <div class="form-group">
            <label for="modalNewSingleNombre" class="col-form-label">Nombre del Módulo:</label>
            <input type="text" class="form-control"  id="modalNewSingleNombre" name="nombre">
          </div>
          <div class="form-group">
            <label for="modalNewSingleUri" class="col-form-label">Uri del Módulo:</label>
            <input type="text" class="form-control"  id="modalNewSingleUri" name="uri">
          </div>
          <div class="form-group">
            <label for="modalNewSingleNombre" class="col-form-label">Nombre del elemento (singular):</label>
            <input type="text" class="form-control"  id="modalNewSingleEtiqueta" name="etiqueta" placeholder="Tarea">
          </div>
          <div class="form-group">
            <label for="modalNewSingleIcon" class="col-form-label">Ícono del Módulo:</label>
            <input type="text" class="form-control"  id="modalNewSingleIcon" name="icon">
          </div>
          <div class="form-group">
            <label for="modalNewSingleResponsable" class="col-form-label">Comisiones Habilitadas:</label>
            <select class="js-multiple form-control" multiple="multiple" id="modalNewSingleResponsable" name="comisiones"  style="width: 100%">

              {% for comision in admindata.comisiones(1) if comision.id > 999 %}
                <option value="{{ comision.id }}">{{ comision.nombre }}</option>
              {% endfor %}
            </select>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary">Guardar</button>
      </div>
      </form>
    </div>
  </div>
</div>


<script src="/static/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('.js-multiple').select2();
});  
  
$('#selectOpt').on('change', function () {
  
  var selected = $(this).children("option:selected").val();

  window.location.assign('{{url_for('gestion.manager')}}' + selected);
});
  
  
$('#modalNewSingle').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var gid = button.data('gid');
  var nombre = button.data('nombre');
  var etiqueta = button.data('etiqueta');
  var icon = button.data('icon');
  var uri = button.data('uri');
  var miembros = button.data('miembros'); 

  var modal = $(this);
  if (gid>0){
    modal.find('.modal-title').text('Habilitados en ' + nombre);
    
  }else{
    modal.find('.modal-title').text('Nuevo Módulo');
  }
  $("#modalNewSingleId").val(gid);
  $("#modalNewSingleNombre").val(nombre);
  $("#modalNewSingleEtiqueta").val(etiqueta);
  $("#modalNewSingleUri").val(uri);
  $("#modalNewSingleIcon").val(icon);
  $('#modalNewSingleResponsable').val(null).trigger('change');
  $('#modalNewSingleResponsable').val(miembros).trigger('change');

});
</script>
{% endblock %}
