{% 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-users-cog"></i>Comisiones Actuales de <select id="selectOpt">
  {% for item in admindata.administrador() %}
      {% if item.id == admin %}
      <option value="{{item.id}}" selected="selected">{{item.nombre}}</option>
      {% else %}
      <option value="{{item.id}}">{{item.nombre}}</option>
      {% endif %}
  {% endfor %}
  </select></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-gestionnombre="Nueva" data-miembros="[]">Nueva Comisión</a></div></div></div>
  </div>
  {% for element in admindata.comisiones(admin) %}
  <div class="col-xl-6 col-lg-12 pb-3">
  <div class="list-group">
    {% if loop.first %}
  <div class="list-group-item list-group-item-success active d-flex justify-content-between mb-4"><div><i class="mr-2 fas fa-fw fa-user-shield"></i>Comision Responsable: {{ element.nombre }}</div><div>
	<button class="btn btn-primary btn-circle" type="button" id="dropdownActa{{ element.id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog"></i></button>
		<div class="dropdown-menu" aria-labelledby="dropdownActa{{ element.id }}">
		<button class="dropdown-item btn" data-toggle="modal" data-target="#modalSubeEvidencia" data-tipo="anexo" data-cid="{{ element.id }}" data-tipox="1" data-hash="{{ element.logo }}" data-nombre="Logo-{{element.nombre}}" data-desc="Logo de {{element.nombre}}"><i class="mr-2 fas fa-image"></i>Logo de la comisión</button>
		<button class="dropdown-item btn" data-toggle="modal" data-target="#modalSubeEvidencia" data-tipo="anexo" data-cid="{{ element.id }}" data-tipox="2" data-hash="{{ element.titulo }}" data-nombre="Titulo-{{element.nombre}}" data-desc="Titulo de {{element.nombre}}"><i class="mr-2 fas fa-file-alt"></i>Encabezado de página</button>
		</div></div></div>
    {% elif element.id > 999 and element.creado == 1 %}
  <div class="list-group-item list-group-item-primary d-flex justify-content-between mb-4"><div><i class="mr-2 fas fa-fw fa-user-shield"></i>Comision Responsable: {{ element.nombre }}</div><div>
	<button class="btn btn-primary btn-circle" type="button" id="dropdownActa{{ element.id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog"></i></button>
		<div class="dropdown-menu" aria-labelledby="dropdownActa{{ element.id }}">
		<button class="dropdown-item btn" data-toggle="modal" data-target="#modalSubeEvidencia" data-tipo="anexo" data-cid="{{ element.id }}" data-tipox="1" data-hash="{{ element.logo }}" data-nombre="Logo-{{element.nombre}}" data-desc="Logo de {{element.nombre}}"><i class="mr-2 fas fa-image"></i>Logo de la comisión</button>
		<button class="dropdown-item btn" data-toggle="modal" data-target="#modalSubeEvidencia" data-tipo="anexo" data-cid="{{ element.id }}" data-tipox="2" data-hash="{{ element.titulo }}" data-nombre="Titulo-{{element.nombre}}" data-desc="Titulo de {{element.nombre}}"><i class="mr-2 fas fa-file-alt"></i>Encabezado de página</button>
		</div></div></div>
    {% else %}
  <div class="list-group-item list-group-item-success"><i class="mr-2 fas fa-fw fa-user-friends"></i>{{ element.nombre }}</div>
    {% endif %}

      {% 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 %}
      {% if element.creado == 1 %}
            <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-miembros="{{ element.mvector() }}">Modificar</a></div></div></div>
      {% else %}
            <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-miembros="{{ element.mvector() }}">Modificar</a> <a class="btn btn-sm btn-danger ml-4 text-white" data-toggle="modal" data-target="#confirmModal" data-href="{{url_for('gestion.delcomision', comisionid=element.id)}}">Eliminar</a></div></div></div>
      {% endif %}
  </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">
      {% if admin == 1 %}
      <form method="POST" action="{{ url_for('gestion.syscomision') }}">
      {% else %}
      <form method="POST" action="{{ url_for('gestion.newcomision') }}">
      {% endif %}
      <div class="modal-header">
        <h5 class="modal-title" id="modalNewSingleLabel">Nueva Comisión</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}}">
      {% if admin == 1 %}
          <div class="form-group">
            <label for="modalNewSingleNombre" class="col-form-label">Id de la comision:</label>
            <input type="text" class="form-control"  id="modalNewSingleId" name="id">
          </div>
      {% else %}
          <input type="hidden" class="form-control" id="modalNewSingleId" name="id">
      {% endif %}
          <div class="form-group">
            <label for="modalNewSingleNombre" class="col-form-label">Nombre de la comision:</label>
            <input type="text" class="form-control"  id="modalNewSingleNombre" name="nombre">
          </div>
          <div class="form-group">
            <label for="modalNewSingleResponsable" class="col-form-label">Miembros:</label>
            <select class="js-multiple form-control" multiple="multiple" id="modalNewSingleResponsable" name="miembros"  style="width: 100%">
              {% for persona in admindata.valid_users(admin) %}
                <option value="{{ persona.id }}">{{ persona.nombrecompleto }}</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>

<!-- Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmModalLabel">Confirmación de Eliminación de Comisión</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Esto eliminará a la comisión y todas sus ocurrencias se reemplazarán por la comisión responsable. ¿Desea continuar?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <a id='confirmModalUrl' href="#" class="btn btn-danger">Eliminar la comisión</a>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalSubeEvidencia" tabindex="-1" aria-labelledby="modalSubeEvidenciaLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('gestion.subelogo') }}" enctype="multipart/form-data">
      <div class="modal-header">
        <h5 class="modal-title" id="modalSubeEvidenciaLabel">Logo o Titulo de la unidad</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" id="modalSubeLogoComision" name="cid">
          <input type="hidden" class="form-control" id="modalSubeLogoTipo" name="tipologo">
		  
          <input type="hidden" class="form-control" id="modalSubeEvidenciaHash" name="currenthash">
		  <input type="hidden" class="form-control" id="modalSubeEvidenciaNombre" name="nombre">
		  <input type="hidden" class="form-control" id="modalSubeEvidenciaDescripcion" name="descripcion">
		  <input type="hidden" class="form-control"  id="modalSubeEvidenciaUrl" name="url">
			<div class="form-group">
			<label for="modalSubeEvidenciaArchivo">Seleccione el archivo</label>
			<input type="file" id="modalSubeEvidenciaArchivo" name="documento">
			</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>
$('#modalSubeEvidencia').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var cid = parseInt(button.data('cid')) || 0;
  var tipo = parseInt(button.data('tipox')) || 0;

  var hash = button.data('hash');
  var nombre = button.data('nombre');
  var desc = button.data('desc');

  var modal = $(this);

  if(tipo == 1){
	modal.find('.modal-title').text('Logo para portadas');
	}
  else{
	modal.find('.modal-title').text('Encabezado de documento');
	}
	
  $("#modalSubeLogoComision").val(cid);
  $("#modalSubeLogoTipo").val(tipo);

  $("#modalSubeEvidenciaHash").val(hash);
  $("#modalSubeEvidenciaNombre").val(nombre);
  $("#modalSubeEvidenciaDescripcion").val(desc);
  $('#modalSubeEvidenciaUrl').val('');
  $('#modalSubeEvidenciaArchivo').val('');

});


$(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 miembros = button.data('miembros'); 

  var modal = $(this);
  if (gid>0){
    modal.find('.modal-title').text('Miembros de ' + nombre);
    
  }else{
    modal.find('.modal-title').text('Miembros de la nueva Comisión');
  }
  $("#modalNewSingleId").val(gid);
  $("#modalNewSingleNombre").val(nombre);
  $('#modalNewSingleResponsable').val(null).trigger('change');
  $('#modalNewSingleResponsable').val(miembros).trigger('change');

});

$('#confirmModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var url = button.data('href');

  $("#confirmModalUrl").prop("href", url);

});

</script>
{% endblock %}
