{% extends "principal.html" %}
{% load staticfiles %}
{% load url from future %}

{% block jquery %}

    function ejecutaForm(enlace){
        document.getElementById("frmPanel").action = enlace;
        document.getElementById("frmPanel").submit();
    }

    function validaDatos(){
        if (document.getElementById("nombre").value.length == 0){
            alert('Falta capturar el nombre.');
        }
        else {
            ejecutaForm('/cat/municipios/1');
        }
    }

    function findEstidades(Pais){
        ejecutaForm('/cat/municipios/2');
    }

    function findMunicipios(Estado){
        ejecutaForm('/cat/municipios/3');
    }

{% endblock %}

 {% block breadcrumbs %}
    <li class="{{ principal }}"><a href="/inicio/index"><i class="icon-home"></i> Inicio</a></li>
   <li class="active">Municipios</li>
                 
{% endblock %}

{% block contenido %}

{% if Grabo == '0' %}
    <script type="text/javascript">alert("Falta capturar algún dato requerido, verifique y vuelva a intentarlo.");</script>
{% endif %}
{% if Grabo == '1' %}
    <script type="text/javascript">alert("Se guardo satisfactoriamente.");</script>
{% endif %}
<div class="dgtic-content-area" >
	<div class="row-fluid" >
		<div class="span12">
			<div class="dgtic-panel">
			<form class="dgtic-form" id="frmPanel" method="post">
                <div class="span4">{% csrf_token %}
                    <div class="dgtic-panel">
                        <div class="dgtic-panel-header">
                            <span class="dgtic-panel-title"><i class="icon-edit"></i> Catálogo de Estados</span>			
                        </div>	
                        <div class="dgtic-panel-content dgtic-form-container">
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">País <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <select class="span12" name="pais" Onchange="javascript: findEstidades(this.options[this.selectedIndex].value);">
                                        <option value="0">Seleccione un país</option>
                                        {% for Pais in Paises %}
                                        <option value="{{Pais.idPais}}" {% if Pais.idPais|slugify == pais %} selected="selected" {% endif %} >
                                            {{Pais.nombre}}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div><br>
                                <label class="dgtic-form-label">Estado <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <select class="span12" name="estado" Onchange="javascript: findMunicipios(this.options[this.selectedIndex].value);">
                                        <option value="0">Seleccione un estado</option>
                                        {% for Estado in Estados %}
                                            <option value="{{Estado.idEstado}}" {% if Estado.idEstado|slugify == estado %} selected="selected" {% endif %} >{{Estado.nombre}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Municipio <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <input type="text" class="span12" name="nombre" id="nombre" onblur="this.value=this.value.toUpperCase();">
                                </div>
                            </div>
                            <div class="btn-row">
                                <div class="dgtic-form-item" align="center">
                                    <a href="javascript:validaDatos();" class="btn btn-primary"><i class="icol-disk"></i> Guardar</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="span5">
                    <div class="dgtic-panel">
                        <div class="dgtic-panel-header">
                            <span class="dgtic-panel-title"><i class="icol-grid"></i> Municipios Existentes</span>
                        </div>
                        <div class="dgtic-panel-inner-wrap">
                            <div class="dgtic-panel-content dgtic-table-container">
                                <table class="dgtic-table">
                                    <tbody>
                                        {% for Municipio in Municipios %}
                                        <tr>
                                            <td>{{Municipio.nombre}}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

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

{% endblock %}