{% extends "base.html" %}
{% block camino %}
<li class="{{insti1}}"><i class="icon-user"></i><a href="">Modificacion 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="." enctype="multipart/form-data">
                    <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 %}
                        {% csrf_token %}
                        {% include "form_snippet.html" with form=instituciones %}
                        {% include "form_snippet.html" with form=domicilio %}
                        &nbsp; &nbsp; &nbsp; &nbsp;<input type="file" name="myfiles" multiple>
                        <br>
                        <br>
                        <br>

                    {% for x in archivos %}
                        {% if x.documentos %}
                            <a rel="tooltip" data-placement="top" data-original-title="{{x.documentos|slice:':4'}}" href="/media/{{x.documentos}}" target="adjuntos">
                                    <img src='{{MEDIA_URL}}{{x.documentos}}'>
                            </a>
                            <a href="#" onClick="borrar_archivo({{x.id}},{{i}})" title="Borrar Archivo Adjunto"><i class="icol-cross"></i></a>
                                {% else %}
                                    <font color="red">No tiene Archivos</font>
                        {% endif %}
                    {% endfor %}

                        <center><div id="map_canvas" style="width:850px!important; height:250px!important;"></div></center>
                        <input type="text" value="{{ com.latitud }}" name="latitud" style="display: none" >
                        <input type="text" value="{{ com.longitud }}" name="longitud" style="display: none">
                    </div>
                    <div class="btn-row">
                        <input type="submit" value="Guardar" class="btn btn-success">
                    </div>
                </form>
            </div>
        </div>
   </div>
    <div id="dialog-confirm" style="display:none;" title="Alerta!">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>¿Desea Borrar el Archivo Adjunto?</p>
    </div>
{% endblock %}

{% block jquery %}

<style>
img { width:100px; }
</style>
<script>
function borrar_archivo( id_archivo, id_institucion ) {
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:200,
        width:500,
        modal: true,
        buttons: {
            "Borrar": function() {
                    window.location.href = '/eliminar_archivo/'+id_archivo+'/'+id_institucion+'/';
                    $( this ).dialog( "close" );
            },
            Cancelar: function() {
                $( this ).dialog( "close" );
            }
        }
    });
}
</script>
    <script>

(function($) {
    $(document).ready(function() {        
        $('#id_nombre_instituto').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');
        $('.mayuscula').change(function(){
            var upper = this.value.toUpperCase();
            if (this.value != upper) 
            this.value = upper;

        })
    });
}) 
(jQuery);

$(document).ready(function(){

    $("#id_municipio").change(function(){
        $.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_cp").change(function(){
        $.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");

    });

    });

    </script>
 {% endblock %}