{% extends "dashboard_base.html" %}
{% load staticfiles %}
{% block title %}Registro Institucional{% endblock %}
{% block extrahead %}

    <!-- 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 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){      
          $.post( 
             "/demo_user_search/",  
             {q:$('#id_username').val()},
             function(data) {
                $('#results').html(data);
             }

          );
      });

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

          );
      });

   });
   </script>

<script type="text/javascript">


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

    {% endblock %}


{% block breadcrumbs %}
{{ block.super }}
<li class="active"><a href="/"><i class="icol-text-align-justify"></i> Registro Institucional</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
                </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-default" class="dgtic-form" method="post" action="" >
                    <fieldset class="dgtic-form-inline">
                        <legend data-icon="icon-edit">Datos del Usuario</legend>

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

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

                        
                        {% csrf_token %}
                        <div class="dgtic-form-inline">
                            <!-- iniciamos linea -->
                            <div class="dgtic-form-row">
                                <!-- iniciamos columna -->
                                <div class="dgtic-form-cols">
                                    <div id="results" ></div>
                                    <!-- extraemos los campos del formulario -->
                                    {% for field in formulario2 %}
                                    <!-- iniciamos celda -->
                                    <div class="col-4-8">                 
                                        <!-- pintamos etiqueta -->
                                        {{ field.label_tag }}
                                        <!-- pintamos campo -->
                                        {{ field }}
                                        <!-- pintamos seccion de error -->
                                        {{ field.errors }}
                                        <!-- pintamos texto de ayuda -->
                                        <span class="form-help">{{ field.help_text }}</span>
                                        </span>
                                    <!-- cerramos celda -->
                                    </div>
                                    <!-- si el contador de items del formulario es par -->
                                    {% if forloop.counter|divisibleby:'1' %}
                                <!-- cerramos columna -->
                                </div>
                            <!-- cerramos linea -->
                            </div>
                            <!-- iniciamos linea -->
                            <div class="dgtic-form-row">
                                <!-- iniciamos columna -->
                                <div class="dgtic-form-cols">
                                    <!-- termina item pares -->
                                    {% endif %}
                                    <!-- ¿es el ultimo elemento? -->
                                    {% if forloop.last %}
                                <!-- cerramos columna -->
                                </div>
                            <!-- cerramos linea -->
                            </div>
                                    <!-- termina pares -->
                                    {% endif %}
                                    <!-- termina extraccion de campos -->
                                    {% endfor %}

                           
                        </div>
                    </fieldset>
                    <fieldset class="dgtic-form-inline">
                        <legend data-icon="icon-asterisk">Datos de la Institución</legend> <div id="instituto"></div>
                        <span id="spinner" style="position:relative;top:30px;left:450px;"><img src="{% static "assets/images/ajax-loader.gif" %}"></span>
                  

                        {% csrf_token %}
                        <div class="dgtic-form-inline">
                            <!-- iniciamos linea -->
                            <div class="dgtic-form-row">
                                <!-- iniciamos columna -->
                                <div class="dgtic-form-cols">
                                    <!-- extraemos los campos del formulario -->
                                    {% for field in form %}
                                    <!-- iniciamos celda -->
                                    <div class="col-4-8" class=" dgtic-form-row dgtic-form-label">
                                        
                                            <!-- pintamos etiqueta -->
                                            {{ field.label_tag }}
                                            <!-- pintamos campo -->
                                            {{ field }}
                                            <!-- pintamos seccion de error -->
                                            {{ field.errors }}
                                            <!-- pintamos texto de ayuda -->
                                            <span class="form-help">{{ field.help_text }}</span>
                                        
                                        <!-- cerramos celda -->
                                    </div>
                                    <!-- si el contador de items del formulario es par -->
                                    {% if forloop.counter|divisibleby:'2' %}
                                    <!-- cerramos columna -->
                                </div>
                                <!-- cerramos linea -->
                            </div>
                            <!-- iniciamos linea -->
                            <div class="dgtic-form-row">
                                <!-- iniciamos columna -->
                                <div class="dgtic-form-cols">
                                    <!-- termina item pares -->
                                    {% endif %}
                                    <!-- ¿es el ultimo elemento? -->
                                    {% if forloop.last %}
                                    <!-- cerramos columna -->
                                </div>
                                <!-- cerramos linea -->
                            </div>
                            <!-- termina pares -->
                            {% endif %}
                            <!-- termina extraccion de campos -->
                            {% endfor %}

                        </div>
                    </fieldset>
                    <fieldset class="dgtic-form-inline">
                        <legend data-icon="icon-ok">Datos de Participación en la SNCT</legend>
                       
                        {% csrf_token %}
                        <div class="dgtic-form-inline">
                            <!-- iniciamos linea -->
                            <div class="dgtic-form-row">
                                <!-- iniciamos columna -->
                                <div class="dgtic-form-cols">
                                    <!-- extraemos los campos del formulario -->
                                    {% for field in formulario1 %}
                                    <!-- iniciamos celda -->
                                    <div class="col-4-8" class=" dgtic-form-row dgtic-form-label">
                                        
                                            <!-- pintamos etiqueta -->
                                            {{ field.label_tag }}
                                            <!-- pintamos campo -->
                                            {{ field }}
                                            <!-- pintamos seccion de error -->
                                            {{ field.errors }}
                                            <!-- pintamos texto de ayuda -->
                                            <span class="form-help">{{ field.help_text }}</span>
                                        
                                        <!-- cerramos celda -->
                                    </div>
                                    <!-- si el contador de items del formulario es par -->
                                    {% if forloop.counter|divisibleby:'2' %}
                                    <!-- cerramos columna -->
                                </div>
                                <!-- cerramos linea -->
                            </div>
                            <!-- iniciamos linea -->
                            <div class="dgtic-form-row">
                                <!-- iniciamos columna -->
                                <div class="dgtic-form-cols">
                                    <!-- termina item pares -->
                                    {% endif %}
                                    <!-- ¿es el ultimo elemento? -->
                                    {% if forloop.last %}
                                    <!-- cerramos columna -->
                                </div>
                                <!-- cerramos linea -->
                            </div>
                            <!-- termina pares -->
                            {% endif %}
                            <!-- termina extraccion de campos -->
                            {% endfor %}
                        </div>
                    </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.min.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 %}