{% extends "base.inicio.html" %}
{% block titulo %}Registrar Organización Social - SAPIC {% endblock titulo %}
{% block extracss %}
{% load staticfiles %}
    <link href="{% static 'bootstrap-3/css/bootstrap-toggle.min.css'%}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'plugins/datepicker/datepicker3.css' %}">
{% endblock extracss %}
{% block extrajs %}
    <script src="{% static 'bootstrap-3/js/bootstrap-toggle.min.js'%}"></script>
    <script src="{% static 'js/formset.js'%}"></script>
    <script src="{% static 'plugins/datepicker/moment-with-locales.js' %}"></script>
    <!-- bootstrap datepicker -->
    <script src="{% static 'plugins/datepicker/bootstrap-datepicker.js' %}"></script>
    <script type="text/javascript">
    $(function() {
      $('#id_orders_table tbody tr').formset({
        // For inline formsets, be sure to set the prefix, as the default prefix
        // ('form') isn't correct.
        // Django appears to generate the prefix from the lowercase plural
        // name of the related model, with camel-case converted to underscores.
        prefix: 'vocero_set'
      })
    })
    $(function(){
        $('#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);
        })
        var eliminar = "<i class='fa fa-remove' title='Eliminar Tabla'>"
        $('.delete-row').text('');
        $('.delete-row').append(eliminar);
        $('.add-row').click(function(event) {
            $('.delete-row').text("");
            $('.delete-row').append(eliminar);
        });
        var agregar  = "<i class='fa fa-plus-circle' title='Agregar'>";
        $('.add-row').html("<b>Agregar</b>");
        $('.add-row').append(agregar);
    });
    </script>
    <script type="text/javascript" src="{% static 'utils/list_ubicacion.js' %}"></script>
    <script type="text/javascript" src="{% static 'organizaciones/registro_organizaciones.js' %}"></script>
{% endblock extrajs %}
{% block contenido %}
<section class="contenido-sapic">
    <div class="container-fluid">
        <div class="row">


            <!-- Menú lateral de navegación - INICIO -->
            <aside class="col-xs-12">
                <div class="panel-sapic-nav">
                    <ul class="nav nav-tabs">
                        <li role="presentation" class="active"><a href="{% url 'organizaciones:registrar_organizacion' %}">Registrar organización social</a></li>
                        <li role="presentation"><a href="{% url 'organizaciones:listar_organizacion' %}">Consultar organización social</a></li>
                    </ul>
                </div>
            </aside>
            <!-- Menú lateral de navegación - FINAL -->


            <!-- Fomulario de registro - INICIO -->
            <div class="col-xs-12">
                <div class="panel-sapic">
                    <div class="content-header">
                        <h2> Registro de Organizaciones Sociales </h2>
                    </div>
                    <div class="content">
                        <div class="box box-primary p-5">
                            <form id="form_project" method="post">
                                {% csrf_token %}

                                <div class="row pb-3">
                                    <div class="col-xs-12 col-sm-6">
                                        {{forms.organizacion_social.fk_tipo_organizacion.label}}
                                        {{forms.organizacion_social.fk_tipo_organizacion}}
                                    </div>
                                    <div class="col-xs-12 col-sm-6">
                                        {{forms.organizacion_social.codigo.label}}
                                        {{forms.organizacion_social.codigo}}
                                    </div>
                                </div>

                                <div class="row pb-3">
                                    <div class="col-xs-12 col-sm-6">
                                        {{forms.organizacion_social.rif.label}}
                                        {{forms.organizacion_social.rif}}
                                    </div>
                                    <div class="col-xs-12 col-sm-6">
                                        {{forms.organizacion_social.situr.label}}
                                        {{forms.organizacion_social.situr}}
                                    </div>
                                </div>

                                <div class="row pb-3">
                                    <div class="col-xs-12 col-sm-6">
                                        {{forms.organizacion_social.nombre.label}}
                                        {{forms.organizacion_social.nombre}}
                                    </div>
                                    <div class="col-xs-12 col-sm-6">
                                        {{forms.organizacion_social.email.label}}
                                        {{forms.organizacion_social.email}}
                                    </div>
                                </div>

                                <div class="row pb-3">
                                    <div class="col-xs-12 col-sm-6">
                                        {{forms.organizacion_social.fecha_conformacion.label}}
                                        {{forms.organizacion_social.fecha_conformacion}}
                                    </div>
                                    <div class="col-xs-12 col-sm-6">
                                        {{forms.organizacion_social.sector.label}}
                                        {{forms.organizacion_social.sector}}
                                    </div>
                                </div>

                                <div class="row pb-5">
                                    <div class="col-xs-12 col-sm-4">
                                        {{forms.organizacion_social.estado.label}}
                                        {{forms.organizacion_social.estado}}
                                    </div>
                                    <div class="col-xs-12 col-sm-4" id="municipio">
                                        {{forms.organizacion_social.municipio.label}}
                                        {{forms.organizacion_social.municipio}}
                                    </div>
                                    <div class="col-xs-12 col-sm-4" id="parroquia">
                                        {{forms.organizacion_social.localidad.label}}
                                        {{forms.organizacion_social.localidad}}
                                    </div>
                                </div>

                                <div class="row pb-3">
                                  <div class="col-xs-12">
                                    <span class="pr-3">{{forms.organizacion_social.activa.label}}</span>
                                    {{forms.organizacion_social.activa}}
                                  </div>
                                </div>

                                <div class="row">
                                  <div class="col-xs-12 has-feedback">
                                    <div class="box p-3">
                                      <div class="box-header">
                                        <h3 class="box-title">
                                          Voceros
                                        </h3>
                                      </div>
                                      <div class="box-body table-responsive no-padding">
                                        <table class="table table-hover " id="id_orders_table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Documento de Identidad</th>
                                                    <th scope="col">Nombres y Apellidos</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {{ forms.voceros.management_form }}
                                                {% for form in forms.voceros  %}
                                                <tr id="{{ form.prefix }}-row">
                                                    <td>
                                                        {{ form.fk_tipo_documento }}
                                                        {{ form.documento_identidad }}
                                                    </td>
                                                    <td>
                                                        {{ form.nombres }} {{ form.apellidos }}
                                                    </td>
                                                    <td class="text-center"></td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                      </div>
                                    </div>
                                  </div>
                                </div>

                                <div class="row">
                                    <div class="col-xs-12 col-sm-6 col-sm-offset-3">
                                        <button type="submit" class="btn btn-primary btn-block btn-fla">Registrar Organización</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Fomulario de registro - FINAL -->


        </div>
    </div>
</section>
{% endblock contenido %}