{% extends "base.inicio.html" %}
{% block titulo %}_-=SAPIC-Registrar Vocero=-_{% endblock titulo %}
{% block extracss %}
{% load staticfiles %}
<link type="text/css" rel="stylesheet" href="{% static 'jquery-entropizer-master/dist/css/jquery-entropizer.min.css' %}" />
<link href="{% static 'bootstrap-3/css/bootstrap-toggle.min.css'%}" rel="stylesheet">
{% endblock extracss %}
{% block extrajs %}
<script src="{% static 'bootstrap-3/js/bootstrap-toggle.min.js'%}"></script>
<script type="text/javascript" src="{% static 'jquery-entropizer-master/lib/entropizer.js' %}"></script>
<script type="text/javascript" src="{% static 'jquery-entropizer-master/dist/js/jquery-entropizer.min.js' %}"></script>
<script type="text/javascript" src="{% static 'users/user_register.js' %}"></script>
<script type="text/javascript">
$(document).ready(function ()
  {
      $('#organizacion_social, #comites, #municipio, #parroquia').hide()
      $('#id_estado').change(function(event){
          var url_mun = "{% url 'utils:obtener_municipios' %}"
          cargar_municipios($(this).val(), url_mun);
      })

      $('#id_municipio').change(function(event){
          var url_parr = "{% url 'utils:obtener_parroquias' %}"
          cargar_parroquias($(this).val(), url_parr);
          })

      $('#id_tipo_organizacion').change(function(event){
          var url_org = "{% url 'organizaciones:obtener_orgs' %}"
          cargar_organizciones($(this).val(), url_org);
          })

      $('#id_fk_rol_unidad').change(function(event){
          var url_rol= "{% url 'utils:obtener_comites' %}"
          cargar_comites($(this).val(), url_rol);
          })
  });
    </script>
<script type="text/javascript" src="{% static 'utils/list_ubicacion.js' %}"></script>
<script type="text/javascript" src="{% static 'organizaciones/list_organizaciones.js' %}"></script>
{% endblock extrajs %}
{% block extramessagesFormsErrors %}
{% if forms.user.errors %}
<div class="box-body">
  <div class="alert alert-danger alert-dismissible">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <h4><i class="icon fa fa-ban"></i> Error!</h4>
  No se pudo continuar con la aplicacion debido a los siguientes errores:<br/>
  <ul>
      {% for field in forms.user %}
          {% if field.errors %}<li>{{ field.errors|striptags }}</li>{% endif %}
      {% endfor %}
  </ul>
  </div>
  {% elif forms.user_vocero.errors %}
  <div class="alert alert-danger alert-dismissible">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <h4><i class="icon fa fa-ban"></i> Error!</h4>
  No se pudo continuar con la aplicacion debido a los siguientes errores:<br/>
  <ul>
      {{forms.user_vocero.errors}}
      {% for field in forms.user_vocero %}
          {% if field.errors %}<li>{{ field.errors|striptags }}</li>{% endif %}
      {% endfor %}
  </ul>
  </div>
{% endif %}
</div>
{% endblock extramessagesFormsErrors %}
{% block contenido %}
<div class="contenido-sapic">
  <div class="row">
    <div class="col-xs-12">
      <div class="panel-sapic">
        <!-- Inicio Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active" id="cuentas">
            <a href="#cuenta" aria-controls="cuenta" role="tab" data-toggle="tab">Cuenta de Usuario</a>
          </li>
          <li role="presentation" id="perfiles">
            <a href="#perfil" aria-controls="perfil" role="tab" data-toggle="tab">Perfil de Usuario</a>
          </li>
        </ul>
        <!-- Fin Nav tabs -->
        <form id="form_register" method="post">
          {% csrf_token %}
        <!-- Inicio Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="cuenta">
            <h3>Registrar la cuenta de usuario vocero</h3>
                <div class="form-group has-feedback">
                  {{ form.email.label }}
                </div>
                <div class="form-group has-feedback">
                  {{ forms.user.email }}
                  <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                  {{ forms.user.username.label }}
                </div>
                <div class="form-group has-feedback">
                  {{ forms.user.username }}
                  <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="panel panel-default">
                  <div class="panel-body">
                <div class="form-group has-feedback">
                  {{ forms.user.password1.label }}
                </div>
                <div class="form-group has-feedback">
                  {{ forms.user.password1 }}
                  <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                  {{ forms.user.password2.label }}
                </div>
                <div class="form-group has-feedback">
                  {{ forms.user.password2 }}
                  <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
                </div>
                <div class="row">
                  <div class="col-xs-4">
                    <label> Fortaleza de la contraseña</label>
                  </div>
                  <div id="meter" class="col-md-8 col-md-offset-2">
                    
                  </div>
                </div>    
                  </div>
                </div>
                
                {% if 'Administradores' in request.session.grupos %}
                  <div class="row">
                    <div class="col-xs-4">
                          {{ forms.user.is_active.label}}
                          {{ forms.user.is_active}}
                    </div>
                  </div>
              {% endif %}
          </div>
          <div role="tabpanel" class="tab-pane" id="perfil">
            <h3>Registrar el Perfil del Usuario Vocero</h3>
            <div clas="row">
              <div class="form-group has-feedback">
                {{ forms.user.first_name.label }}
              </div>
              <div class="form-group has-feedback">
                {{ forms.user.first_name }}
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
              </div>
            </div>
            <div clas="row">
              <div class="form-group has-feedback">
                {{ forms.user.last_name.label }}
              </div>
              <div class="form-group has-feedback">
                {{ forms.user.last_name }}
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
              </div>
            </div>
            <div class="row">
              <div class="col-md-1 form-group">
                {{ forms.user_vocero.fk_tipo_documento.label }}
              </div>
              <div class="col-md-5 form-group has-feedback">
                {{ forms.user_vocero.fk_tipo_documento }}
              </div>
              <div class="col-md-1 form-group form-group has-feedback">
                {{ forms.user_vocero.documento.label }}
              </div>
              <div class="col-md-5 form-group has-feedback">
                {{ forms.user_vocero.documento }}
              </div>
            </div>
            <div class="row">
              <div class="col-md-1">
                {{ forms.user_vocero.tipo_organizacion.label }}
              </div>
              <div class="col-md-5">
                {{ forms.user_vocero.tipo_organizacion }}
              </div>
              <div id="organizacion_social">
                <div class="col-md-1">
                  {{ forms.user_vocero.organizacion.label }}
                </div>
                <div class="col-md-5">
                  {{ forms.user_vocero.organizacion }}
                </div>
              </div>
            </div>
            <br>
            <div class="row">
              <div class="col-md-1">
                {{ forms.user_vocero.fk_rol_unidad.label }}
              </div>
              <div class="col-md-5">
                {{ forms.user_vocero.fk_rol_unidad }}
              </div>
              <div id="comites">
                <div class="col-md-1">
                  {{ forms.user_vocero.comite_unidad_ejecutiva.label }}
                </div>
                <div class="col-md-5">
                  {{ forms.user_vocero.comite_unidad_ejecutiva }}
                </div>
              </div>
            </div>
              <br>
            <div class="row">
              <div class="col-xs-4">
                  {{forms.user_vocero.estado.label}}
                  {{forms.user_vocero.estado}}
              </div>
              <div class="col-xs-4" id="municipio">
                  {{forms.user_vocero.municipio.label}}
                  {{forms.user_vocero.municipio}}
              </div>
              <div class="col-xs-4" id="parroquia">
                  {{forms.user_vocero.localidad.label}}
                  {{forms.user_vocero.localidad}}
              </div>
            </div><br>
            <div class="row">
              <div class="col-md-4">
                  {{forms.user_vocero.sector.label}}
                  {{forms.user_vocero.sector}}
              </div>
              <div class="col-md-4">
                  {{forms.user_vocero.casa_edificio_calle.label}}
                  {{forms.user_vocero.casa_edificio_calle}}
              </div>
              <div class="col-md-4">
                  {{forms.user_vocero.telefono.label}}
                  {{forms.user_vocero.telefono}}
              </div>
            </div>
            <br>
            <button id="submit" type="submit" class="btn btn-danger btn-block btn-flat">Registrar</button>
          </div>
          <br>
        <!-- Fin Tab panel -->
        </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock contenido %}