{% extends "dashboard_base.html" %}
{% load staticfiles %}
{% block title %}Registro Institucional{% endblock %}
{% block extrahead %}
    <meta charset="utf-8">

    <!-- Bootstrap Stylesheet -->
    <link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}" media="screen">
    <!-- Theme Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/dandelion.theme.css" %}" media="screen">
    <!-- Icon Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/fonts/glyphicons/style.css" %}" media="screen">
    <!--  Main Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/dandelion.css" %}" media="screen">
    <!-- Demo Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/demo.css" %}" media="screen">

    <!-- Login Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/form.css" %}" media="screen">
    <link rel="stylesheet" href="{% static "assets/css/login.css" %}" media="screen">

    <link rel="stylesheet" href="{% static "plugins/zocial/zocial.css" %}" media="screen">

    <!-- Bootstrap Stylesheet -->
    <link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}"  media="screen">

    <!-- Theme Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/dandelion.theme.css" %}"  media="screen">
    <!-- Icon Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/fonts/glyphicons/style.css" %}"  media="screen">
    <!--  Main Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/dandelion.css" %}"  media="screen">
    <!-- Demo Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/demo.css" %}" media="screen">




    <script src="{% static "assets/js/libs/jquery-1.8.3.min.js" %}"></script>
    <script src="{% static "assets/jui/js/jquery-ui-1.9.2.min.js" %}"></script>
    <script src="{% static "plugins/validate/jquery.validate.js" %}"></script>

    <script type="text/javascript" language="javascript">

        $(document).ajaxSend(function(event, xhr, settings) {

            function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie != '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) == (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            function sameOrigin(url) {
                // url could be relative or scheme relative or absolute
                var host = document.location.host; // host + port
                var protocol = document.location.protocol;
                var sr_origin = '//' + host;
                var origin = protocol + sr_origin;
                // Allow absolute or scheme relative URLs to same origin
                return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
                    (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
                    // or any other URL that isn't scheme relative or absolute i.e relative.
                    !(/^(\/\/|http:|https:).*/.test(url));
            }
            function safeMethod(method) {
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }

            if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
            }
        });


        $(document).ready(function() {

            $("#id_username").blur(function(event){
                r=$('#id_username').val();
                if(r !=0){
                    $.post(
                        "/demo_user_search/",
                        {q:$('#id_username').val()},
                        function(data) {
                            $('#results').html(data);
                        }

                    );
                }else{
                    $('#disp').css('display','none');
                }
            });


            $( document ).ajaxStart( function() {
                $( '#spinner' ).show();
            }).ajaxStop( function() {
                $( '#spinner' ).hide();
            });


            $("#id_nombre").blur(function(event){
                r=$('#id_nombre').val();
                if(r !=0){
                    $.post(
                        "/ajax_institucion/",
                        {i:$('#id_nombre').val()},
                        function(data) {
                            $('#instituto').html(data);
                        }

                    );
                }else{
                    $('#disp1').css('display','none');

                }
            });

            $( document ).ajaxStart( function() {
                $( '#spinner1' ).show();
            }).ajaxStop( function() {
                $( '#spinner1' ).hide();
            });

        });
    </script>


    <script type="text/javascript">
        $(function () {

            $('#wizard-validate').validate({

                rules: {

                    password1: {
                        required: true,
                        minlength: 5
                    },
                    password2: {
                        required: true,
                        minlength: 5,
                        equalTo: "#id_password1"
                    },


                },
                messages: {

                    password1: {
                        required: "Por favor, ingrese la contraseña",
                        minlength: "La contraseña debe tener al menos 5 caracteres"
                    },
                    password2: {
                        required: "Por favor, ingrese la contraseña",
                        minlength: "La contraseña debe tener al menos 5 caracteres",
                        equalTo: "Por favor, introduzca la misma contraseña que el anterior"
                    },



                }
            });
        });
    </script>

    <script type="text/javascript">

        $(function(){
            $('#id_participacion').change(function(event){
                $.post("/ajax_participacion/", {id_participacion:$('#id_participacion').val()}, function(data){
                    $('#participa').html(data);
                }, "json");
            });
        });

    </script>



{% endblock %}


{% block breadcrumbs %}
    {{ block.super }}
    <li class="active"><i class="icol-text-align-justify"></i> Registro Institucional</li>
    <li><a href="http://template.tabasco.gob.mx/pdf/AvisoPrivacidad.pdf" target="_blank"><i class="icol-doc-pdf"></i>Aviso de Privacidad</a></li>
{% endblock %}
{% block maincontent %}


    <div class="row-fluid">
        <div class="span12">
            <div class="dgtic-panel">
                <div class="dgtic-panel-header">
                <span class="dgtic-panel-title">
                    <i class="icon-magic"></i>
                    Registro Institucional <p style="float:right; padding:5px 5px 5px 5px;"><!--Si requiere asistencia consulte los manuales de este sistema en la pestaña <b>Manual de usuario</b> del menú--></p>
                </span>
                </div>
                <div class="dgtic-panel-content dgtic-form-container">
                    {% if messages %}
                        <ul class="messages">
                            {% for message in messages %}
                                <li{% if message.tags %} class="dgtic-message {{ message.tags }}"{% endif %}><h2>{{ message }}</h2></li>
                            {% endfor %}
                        </ul>
                    {% endif %}

                    <form id="wizard-validate" name="wizard-validate" class="dgtic-form" method="post" action="" >
                        <fieldset class="dgtic-form-inline">
                            <legend data-icon="icon-edit">Sección: Datos del Usuario</legend>

                            <p style="padding:5px 5px 5px 5px;">los campos marcados con un <b style="color:red;">*</b> son requeridos </p>

                            <div id="results"></div>

                            <span id="spinner" style="position:relative;top:45px;left:550px;"><img src="{{STATIC_URL}}assets/images/ajax-loader.gif"/></span>

                            {% csrf_token %}


                            {{ formulario2.non_field_errors }}

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario2.username.label_tag }} <span class="required">*</span></label>
                                <div class="dgtic-form-item large">
                                    {{formulario2.username}}
                                </div>
                                <div class="help_text"> <br/><span class="muted">
            {{ formulario2.username.help_text }}
        </span><br/>
                                    <span class="errorMessage">{{ formulario2.username.errors }}</span></div>


                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario2.password1.label_tag }} <span class="required">*</span></label>
                                {{ formulario2.password1.error}}
                                <div class="dgtic-form-item large">
                                    {{formulario2.password1}}
                                </div>
                                <div class="help_text"> <span class="muted">
            El sistema distingue mayúsculas y minúsculas
        </span>
                                    <span class="errorMessage">{{ formulario2.password1.errors }}</span></div>

                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Repetir {{ formulario2.password1.label_tag }}<span class="required">*</span></label>
                                {{ formulario2.password2.error}}
                                <div class="dgtic-form-item large">
                                    {{formulario2.password2}}
                                </div>
                                <div class="help_text"> <span class="muted">
                        {{ formulario2.password2.help_text }}
        </span>
                                    <span class="errorMessage">{{ formulario2.password2.errors }}</span></div>
                            </div>
                        </fieldset>


                        <fieldset class="dgtic-form-inline">
                            <legend data-icon="icon-asterisk">Datos de la Institución</legend> <p style="padding:5px 5px 5px 5px;">los campos marcados con un <b style="color:red;">*</b> son requeridos </p><div id="instituto"></div>
                            <span id="spinner1" style="position:relative;top:45px;left:550px;"><img src="{% static "assets/images/ajax-loader.gif" %}"></span>

                            {% csrf_token %}



                            {% if form.non_field_errors %}
                                <div class="text-error dgtic-form-row">{{ form.non_field_errors }}</div>
                            {% endif %}

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.nombre.label_tag }} de la Institución <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{form.nombre}}
                                </div>
                                <div class="help_text">
                                <span class="muted"> Escriba el nombre correcto en mayúsculas y minúsculas
                                </span>
                                    <span class="errorMessage">{{ form.nombre.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.siglas.label_tag }} de la Institución <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{form.siglas}}
                                </div>
                                <div class="help_text">
                                <span class="muted"> Escriba el nombre correcto en mayúsculas y minúsculas
                                </span>
                                    <span class="errorMessage">{{ form.siglas.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.direccion.label_tag }}<span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{form.direccion}}
                                </div>
                                <div class="help_text"><span class="muted"> Escriba la dirección completa
                                </span><span class="errorMessage">{{ form.direccion.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.poblacion.label_tag }} <span class="required"></span></label>

                                <div class="dgtic-form-item large">
                                    {{form.poblacion}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ form.poblacion.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.municipio.label_tag }}<span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{form.municipio}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ form.municipio.errors }}</span></div>

                            </div>



                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.codigo_postal.label_tag }} <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{form.codigo_postal}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ form.codigo_postal.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.telefono.label_tag }} <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{form.telefono}}
                                </div>
                                <div class="help_text"><span class="muted">Teléfono con lada incluida, ejemplo 5551234567, 3 dígitos de lada y 7 dígitos de número</span><span class="errorMessage">{{ form.telefono.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.extencion.label_tag }} <span class="required"></span></label>

                                <div class="dgtic-form-item large">
                                    {{form.extencion}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ form.extencion.errors }}</span></div>

                            </div>

                            {#                        <div class="dgtic-form-row">#}
                            {#                            <label class="dgtic-form-label">{{ form.correo.label_tag }} <span class="required">*</span></label>                          #}
                            {#                            #}
                            {#                            <div class="dgtic-form-item large">#}
                            {#                                {{form.correo}}                                #}
                            {#                            </div>#}
                            {#                            <div class="help_text"><span class="muted">Correo electrónico distinto al del responsable (usuario)</span><span class="errorMessage">{{ form.correo.errors }}</span></div>#}
                            {##}
                            {#                        </div>#}

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.pagina_web.label_tag }} <span class="required"></span></label>

                                <div class="dgtic-form-item large">
                                    {{form.pagina_web}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ form.pagina_web.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.fecha_registro.label_tag }} <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{form.fecha_registro}}
                                </div>
                                <div class="help_text"><span class="muted">Este campo será llenado automáticamente por el sistema</span><span class="errorMessage">{{ form.fecha_registro.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.fax.label_tag }} <span class="required"></span></label>

                                <div class="dgtic-form-item large">
                                    {{form.fax}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ form.fax.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ form.tipo_institucion.label_tag }}  <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{form.tipo_institucion}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ form.tipo_institucion.errors }}</span></div>

                            </div>


                        </fieldset>
                        <fieldset class="dgtic-form-inline">
                            <legend data-icon="icon-ok">Datos de Participación en la SNCT</legend>
                            <div class="dgtic-form-row">
                                <p> Los campos marcados con un <b style="color:red;">*</b> son requeridos </p>
                            </div>

                            {% csrf_token %}

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario1.participacion.label_tag }} <span class="required">*</span></label>
                                <div class="dgtic-form-item large">
                                    {{formulario1.participacion}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ formulario1.participacion.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario1.nombre_responsable.label_tag }}  <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{formulario1.nombre_responsable}}
                                </div>
                                <div class="help_text"><span class="muted">Sólo un nombre</span><span class="errorMessage">{{ formulario1.nombre_responsable.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario1.telefono_responsable.label_tag }}  <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{formulario1.telefono_responsable}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ formulario1.telefono_responsable.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario1.extencion_responsable.label_tag }} <span class="required"></span></label>

                                <div class="dgtic-form-item large">
                                    {{formulario1.extencion_responsable}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ formulario1.extencion_responsable.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario1.celular.label_tag }} <span class="required"></span></label>

                                <div class="dgtic-form-item large">
                                    {{formulario1.celular}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ formulario1.celular.errors }}</span></div>

                            </div>



                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario1.correo_responsable.label_tag }} <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{formulario1.correo_responsable}}
                                </div>
                                <div class="help_text"><span class="muted">Correo activo.</span><span class="errorMessage">{{ formulario1.correo_responsable.errors }}</span></div>

                            </div>


                            <!-- Suplente -->



                            {#                        <div class="dgtic-form-row">#}
                            {#                            <label class="dgtic-form-label">{{ formulario1.participacion_suplente.label_tag }} <span class="required">*</span></label> #}
                            {#                            <div class="dgtic-form-item large">#}
                            {#                                {{formulario1.participacion_suplente}}                                #}
                            {#                            </div>#}
                            {#                            <div class="help_text"><span class="errorMessage">{{ formulario1.participacion_suplente.errors }}</span></div>#}
                            {##}
                            {#                        </div>#}

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario1.nombre_suplente.label_tag }}  <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{formulario1.nombre_suplente}}
                                </div>
                                <div class="help_text"><span class="muted">Sólo un nombre</span><span class="errorMessage">{{ formulario1.nombre_suplente.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario1.telefono_suplente.label_tag }}  <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{formulario1.telefono_suplente}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ formulario1.telefono_suplente.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario1.extension_suplente.label_tag }} <span class="required"></span></label>

                                <div class="dgtic-form-item large">
                                    {{formulario1.extension_suplente}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ formulario1.extension_suplente.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario1.celular_suplente.label_tag }} <span class="required"></span></label>

                                <div class="dgtic-form-item large">
                                    {{formulario1.celular_suplente}}
                                </div>
                                <div class="help_text"><span class="errorMessage">{{ formulario1.celular_suplente.errors }}</span></div>

                            </div>

                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">{{ formulario1.correo_suplente.label_tag }} <span class="required">*</span></label>

                                <div class="dgtic-form-item large">
                                    {{formulario1.correo_suplente}}
                                </div>
                                <div class="help_text"><span class="muted">Correo activo.</span><span class="errorMessage">{{ formulario1.correo_suplente.errors }}</span></div>

                            </div>

                            <!-- Fin Suplente -->

                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>

{% endblock%}

{% block extralibs %}
    <!-- JS Libs -->
    <script src="{% static "assets/js/libs/jquery-1.8.3.min.js" %}"></script>
    <script src="{% static "assets/js/libs/jquery.placeholder.min.js" %}"></script>
    <script src="{% static "assets/js/libs/jquery.mousewheel.min.js" %}"></script>

    <!-- JS Bootstrap -->
    <script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script>

    <!-- jQuery-UI JavaScript Files -->
    <script src="{% static "assets/jui/js/jquery-ui-1.9.2.min.js" %}"></script>
    <script src="{% static "assets/jui/jquery.ui.timepicker.min.js" %}"></script>
    <script src="{% static "assets/jui/jquery.ui.touch-punch.min.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "assets/jui/css/jquery.ui.all.css" %} " media="screen">

    <!-- JS Plugins -->

    <!-- Validation Plugin -->
    <script src="{% static "plugins/validate/jquery.validate.js" %}"></script>

    <!-- Wizard Plugin -->
    <script src="{% static "assets/js/plugins/wizard/dandelion.wizard.js" %}"></script>
    <script src="{% static "assets/js/libs/jquery.form.min.js" %}"></script>
    <link rel="stylesheet" href="{% static "assets/js/plugins/wizard/dandelion.wizard.css" %}" media="screen">

    <!-- JS Demo -->
    <script src="{% static "assets/js/demo/demo.wizard.js" %}"></script>

    <!-- JS Template -->
    <script src="{% static "assets/js/core/dandelion.core.js"%}"></script>

    <!-- JS Customizer -->
    <script src="{% static "assets/js/core/dandelion.customizer.js"%}"></script>

{% endblock %}