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

{% block jquery %}

    function ejecutaForm(enlace){
        document.getElementById("frmPanel").action = enlace;
        document.getElementById("frmPanel").submit();
    }
    
    function guardaExpediente(id){
        document.getElementById("frmPanel").action ="/procesos/guardaExpediente/" + id;
        document.getElementById("frmPanel").submit();
    }

    function findEstidades(Pais){
        document.getElementById('municipio').options.length = 0;
        ejecutaForm('/procesos/findEstidades/' + Pais);
    }

    function findMunicipios(Estado){
        ejecutaForm('/procesos/findMunicipios/' + Estado);
    }
    

{% endblock %}
{% block breadcrumbs %}
    <li class="{{ principal }}"><a href="/inicio/index/"><i class="icon-home"></i> Inicio</a></li>
    <li><a href="/procesos/ctrolExpediente/0"><i class="icol-page-2"></i> Nuevo</a></li>
    <li><a href="javascript:guardaExpediente(0);"><i class="icol-disk"></i> Guardar</a></li>
{% endblock %}
{% block contenido %}
{% if Grabo == '0' %}
    <script type="text/javascript">alert("Falta capturar algún campo requerido, verifique y vuelva a intentarlo.");</script>
{% endif %}
{% if Grabo == '1' %}
    <script type="text/javascript">alert("Se guardo satisfactoriamente.");</script>
{% endif %}
{% if Grabo == '2' %}
    <script type="text/javascript">alert("Esta persona que desea agregar a los expedientes ya existe.");</script>
{% endif %}
<div id="dgtic-content-area">
    <div class="row-fluid">
        <form class="dgtic-form" id="frmPanel" method="post">
        <div class="span6">{% csrf_token %}
            <div class="dgtic-panel">
                <div class="dgtic-panel-header">
                    <span class="dgtic-panel-title">
                        <i class="icol-user-business-boss"></i>&nbsp;Captura de Expediente
                    </span>
                </div>
                <div class="dgtic-panel-content dgtic-form-container">
                        <div class="dgtic-form-block">
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Nombre <span class="required">*</span> :</label>
                                 <div class="dgtic-form-item">
                                    <input type="text" name="nombre" value="{{nombre}}" onblur="this.value=this.value.toUpperCase();">
                                 </div><br>
                                 <label class="dgtic-form-label">Apellido Paterno <span class="required">*</span> :</label>
                                 <div class="dgtic-form-item">
                                    <input type="text" name="apPaterno" value="{{apPaterno}}" onblur="this.value=this.value.toUpperCase();">
                                 </div><br>
                                 <label class="dgtic-form-label">Apellido Materno <span class="required">*</span> :</label>
                                 <div class="dgtic-form-item">
                                    <input type="text" name="apMaterno" value="{{apMaterno}}" onblur="this.value=this.value.toUpperCase();">
                                 </div>
                            </div>
                            <div class="dgtic-form-row">
                                 <label class="dgtic-form-label">Fecha de Nacimiento (AAAA-MM-DD):</label>
                                 <div class="dgtic-form-item">
                                    <input type="text" name="fechaNac" id="fechaNac" autocomplete="off" value="{{fechaNac}}">
                                 </div>
                            </div>
                            <div class="dgtic-form-row">
                                 <label class="dgtic-form-label">Edad <span class="required">*</span> :</label>
                                 <div class="dgtic-form-item">
                                    <input type="text" name="edad" id="edad" value="{{edad}}">
                                 </div>
                            </div>
                            
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Estado Civil <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <select class="span12" name="edoCivil">
                                        <option>Seleccione un estado civil</option>
                                        {% for EdoCivil in EdosCivil %}
                                            <option value="{{EdoCivil.idEdoCivil}}" {% if EdoCivil.idEdoCivil|slugify == edoCivil %} selected="selected" {% endif %} >{{EdoCivil.descripcion}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Población <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <select class="span12" name="poblacion">
                                        <option>Seleccione una población</option>
                                        {% for Poblacion in Poblaciones %}
                                            <option value="{{Poblacion.idPoblacion}}" {% if Poblacion.idPoblacion|slugify == poblacion %} selected="selected"  {% endif %} >
                                                {{Poblacion.descripcion}}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Vivienda <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <select class="span12" name="vivienda">
                                        <option>Seleccione un vivienda</option>
                                        {% for Vivienda in Viviendas %}
                                            <option value="{{Vivienda.idVivienda}}" {% if Vivienda.idVivienda|slugify == vivienda %} selected="selected" {% endif %} >{{Vivienda.descripcion}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="dgtic-form-row">
                                 <label class="dgtic-form-label">Teléfono :</label>
                                 <div class="dgtic-form-item">
                                    <input type="text" name="telefono" value="{{telefono}}">
                                 </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        <div class="span6">
            <div class="dgtic-panel">
                <div class="dgtic-panel-header">
                    <span class="dgtic-panel-title">
                        Existen :&nbsp;<input type="text" disabled value="{{cant}}">
                    </span>          
                </div>  
                <div class="dgtic-panel-content dgtic-form-container">
                        <div class="dgtic-form-block">
                            <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><br>
                                <label class="dgtic-form-label">Municipio <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <select class="span12" name="municipio" id="municipio">
                                        <option>Seleccione un municipio</option>
                                        {% for Municipio in Municipios %}
                                            <option value="{{Municipio.idMunicipio}}">{{Municipio.nombre}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Ocupación <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <select class="span12" name="ocupacion">
                                        <option>Seleccione un ocupación</option>
                                        {% for Ocupacion in Ocupaciones %}
                                            <option value="{{Ocupacion.idOcupacion}}" {% if Ocupacion.idOcupacion|slugify == ocupacion %} selected="selected" {% endif %} >{{Ocupacion.descripcion}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Tipo de Familia <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <select class="span12" name="tipoFamilia">
                                        <option>Seleccione un tipo de familia</option>
                                        {% for TipoFamilia in TiposFamilia %}
                                            <option value="{{TipoFamilia.idTipoFamilia}}" {% if TipoFamilia.idTipoFamilia|slugify == tipoFamilia %} selected="selected" {% endif %} >{{TipoFamilia.descripcion}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Escolaridad <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <select class="span12" name="escolaridad">
                                        <option>Seleccione un tipo de escolaridad</option>
                                        {% for Escolaridad in Escolaridades %}
                                            <option value="{{Escolaridad.idEscolaridad}}" {% if Escolaridad.idEscolaridad|slugify == escolaridad %} selected="selected" {% endif %} >{{Escolaridad.descripcion}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Sexo <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <input type="radio" name="sexo" value="M" checked> <label>Masculino</label>&nbsp;&nbsp;
                                    <input type="radio" name="sexo" value="F"> <label>Femenino</label>
                                </div>
                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Observaciones</label>
                                <div class="dgtic-form-item">
                                    <textarea rows="auto" cols="auto" class="span12" name="observaciones">{{observaciones}}</textarea>
                                </div>
                            </div>
                            <div class="btn-row">
                                <div class="dgtic-form-item">
                                    <a class="btn btn-primary" href="javascript:guardaExpediente(0);"><i class="icol-disk"></i> Guardar</a>
                                    <input type="button" class="btn btn-danger" value="Regresar" onclick="history.back()"/>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        </form>
        
        
    </div>
</div>


<!-- 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">
    <link rel="stylesheet" href="{% static "plugins/elrte/css/elrte.css" %}" media="screen">
    <link rel="stylesheet" href="{% static "plugins/elfinder/css/elfinder.css" %}" media="screen">

    <!-- JS Plugins -->

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

    <!-- jGrowl Plugin -->
    <script src="{% static "plugins/jgrowl/jquery.jgrowl.min.js" %}"></script>
    <link rel="stylesheet" href="{% static "plugins/jgrowl/jquery.jgrowl.css" %}" media="screen">

    <!-- JS Demo -->
    <script src="{% static "assets/js/demo/demo.ui.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>


<script type="text/javascript">
    $.datepicker.regional['es'] = {
        closeText: 'Cerrar',
        prevText: '<Ant',
        nextText: 'Sig>',
        currentText: 'Hoy',
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
        'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
        'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié;', 'Juv', 'Vie', 'Sáb'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['es']);
    $( "#fechaNac" ).datepicker();
    $( "#fechaNac" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
    $( "#fechaNac" ).datepicker("option", "changeMonth", "true");  
    $( "#fechaNac" ).datepicker("option", "changeYear", "true" );     
    

    
</script>

<script type="text/javascript">
    $(document).ready(function(){
        
        $("#fechaNac").change(function(event){

            var calendar = $(this).val();
             var fecha = calendar.split('-');

             var anio = fecha[0];
             var mes = fecha[1];
             var dia = fecha[2];
             var fechaactual = new Date();
             var diaActual = fechaactual.getDate();
             var mesActual = fechaactual.getMonth() + 1;
             var anioActual = fechaactual.getFullYear();
            var edad = anioActual- anio;
            if( mes > mesActual ){
                edad = edad-1;
            }
            if(mes == mesActual && dia > diaActual){
                edad= edad - 1;

            }

            $("#edad").val(edad);
            



        });

        



    });



</script>


{% endblock %}