{% extends "base.html" %}
{% block camino %}
<li class="{{insti1}}"><i class="icon-user"></i><a href="">Registro de Institucion</a></li>
{% endblock camino %}
{% block contenido %}
   <div class="span10">
        <div class="dgtic-panel">
            <div class="dgtic-panel-header">
                <span class="dgtic-panel-title">
                    <i class="icon-notes-2"></i> Datos Generales.
                </span>
            </div>
            <div class="dgtic-panel-content dgtic-form-container">
                <form name="form_mapa" id="dgtic-ex-validate1" method='post' class="dgtic-form" action="/institucion_new/" enctype="multipart/form-data">
                {% csrf_token %}
                    <div id="dgtic-ex-val1-error" class="dgtic-message error" style="display:none;"></div>
                    <div class="dgtic-form-inline">
                        {% if messages %} <div class="messages">
                            {% for message in messages %}
                                <div{% if message.tags %} class="dgtic-message {{ message.tags }}"{% endif %}>{{ message }}
                                </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                        {% include "form_snippet.html" with form=institucion %}
                        {% include "form_snippet.html" with form=domicilio %}
                         &nbsp; &nbsp; &nbsp; &nbsp;<input type="file" name="myfiles" multiple>
                        <br>
                        <br>
                        <br>
                    </div>
                    <center><div id="map_canvas" style="width:850px!important; height:250px!important;"></div></center>
                    <input type="text" name="latitud" style="display: none" >
                    <input type="text" name="longitud" style="display: none">
                    <div class="btn-row">
                        <input type="submit" value="Guardar" class="btn btn-success">
                    </div>
                </form>
            </div>
        </div>
   </div>

{% endblock %}

{% block jquery %}
<script>
(function($) {
    $(document).ready(function() {        
        $('#id_nombre_instituto').attr('class','span6  mayuscula');
        $('#id_titular').attr('class','span6  mayuscula');
        $('#id_represent_legal').attr('class','span6  mayuscula');
        $('#id_telefono').attr('class','span6  mayuscula');
        $('#id_correo').attr('class','span6  mayuscula');
        $('#id_objecto_social').attr('class','span6  mayuscula');
        $('#id_capacidad_anual').attr('class','span6  mayuscula');
        $('#id_duracion_servicio').attr('class','span6  mayuscula');
        $('#id_calle').attr('class','span6  mayuscula');
        id1=document.getElementById('id_horario1');
        id1.type='time';
        id2=document.getElementById('id_horario2');
        id2.type='time';

        $('.mayuscula').change(function(){
            var upper = this.value.toUpperCase();
            if (this.value != upper) 
            this.value = upper;

        })
    });
}) 
(jQuery);

$(document).ready(function(){
$('#id_localidad').parent().parent().hide("slow").css("display","none");
$('#id_cp').parent().parent().hide("slow").css("display","none");
    $("#id_municipio").change(function(){
        $('#id_localidad').parent().parent().hide("slow").css("display","none");
        $('#id_cp').parent().parent().hide("slow").css("display","none");
        $('#id_colonia').parent().parent().hide("slow").css("display","none");
        $('#id_localidad').parent().parent().show("slow").css("display","block");
        $.post("/consultar_localidad/", {id_muni:$(this).val()}, function(data){
            var options = '<option value="">Seleccione</option>';
            for (var i = 0; i < data.length; i++){
                options += '<option value="'+data[i]["pk"]+'">'+data[i]["fields"]["nombre"] +'</option>'
            }
            $('#id_localidad').html(options);
            $("#id_localidad option:first").attr('selected', 'selected');
        }, "json");

    });


    $('#id_localidad').parent().parent().hide("slow").css("display","none");
        $("#id_localidad").change(function(){
        $('#id_cp').parent().parent().hide("slow").css("display","none");
        $('#id_cp').parent().parent().show("slow").css("display","block");


    });

        $('#id_colonia').parent().parent().hide("slow").css("display","none");
        $("#id_cp").change(function(){
        $('#id_colonia').parent().parent().hide("slow").css("display","none");
        $('#id_colonia').parent().parent().show("slow").css("display","block");
        $.post("/consultar_colonia/", {id_muni:$('#id_cp option:selected').html()}, function(data){
            var options = '<option value="">Seleccione</option>';
            for (var i = 0; i < data.length; i++){
                options += '<option value="'+data[i]["pk"]+'">'+data[i]["fields"]["nombre"] +'</option>'
            }
            $('#id_colonia').html(options);
            $("#id_colonia option:first").attr('selected', 'selected');
        }, "json");

    });
 
    });
    $('#id_codigo').numeric().attr("maxlength","5");
    var input = document.getElementById ("id_calle");
    input.placeholder = "Captura el Nombre de la Calle";

</script>
 {% endblock %}