{% extends "principal.html" %}
{% load staticfiles %}
{% load url from future %}
{% block jquery %}
    
    function ejecutaForm(enlace){
        document.getElementById("frmPanel").action = enlace;
        document.getElementById("frmPanel").submit();
    }

    function guardaPariente(id){
        if (document.getElementById("albergado").value != '') {
            document.getElementById("frmPanel").action ="/procesos/guardaPariente/" + id;
            document.getElementById("frmPanel").submit();
        }
        else {
            alert("Falta seleccionar un albergado.");
        }
        
    }

    function cargaBusqueda(texto,directo){
        if (texto != ''){
            var maxCar = 3;
            if (document.getElementById("opSens").checked != true){
                maxCar = 1000;
            }
            if (texto.length >= maxCar || directo == '1') {
                document.getElementById("selFind").style.display="block";
                ejecutaForm('/procesos/traePersonas/'  + 'frm_ctrolParienteEnfermo');
            }
        }
    }

    function elementBusquedaSel(){
        document.getElementById("selFind").style.display="none";
        var select = document.getElementById("selFind");
        document.getElementById("albergado").value = select.options[select.selectedIndex].value;
        document.getElementById("responsable").value = select.options[select.selectedIndex].text;
        document.getElementById("selFind").options.length = 0;
    }

    function noUsar(){
        document.getElementById("responsable").disabled = true;
        document.getElementById("selFind").style.display = "none";
        document.getElementById("panelFind").style.display = "none";
    }

    function nuevoPariente(){
        document.getElementById("Proceso").value = "NUEVO";
        document.getElementById("frmPanel").action ="/procesos/ctrolPariente/0";
        document.getElementById("frmPanel").submit();
    }


{% endblock %}
{% block breadcrumbs %}
    <li class="{{ principal }}"><a href="/inicio/index/"><i class="icon-home"></i> Inicio</a></li>
    <li><a href="javascript:nuevoPariente();"><i class="icol-page-2"></i> Nuevo</a></li>
    <li><a href="javascript:guardaPariente(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 %}

<div id="dgtic-content-area">
    <div class="row-fluid">
        <form class="dgtic-form" id="frmPanel" method="post">
        <input type="hidden" name="Proceso" id="Proceso" value="{{Proceso}}">
        <input type="hidden" name="template" id="template" value="{{template}}">
        <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 Datos de Pacientes
                    </span>
                </div>
                <div class="dgtic-panel-content dgtic-form-container">
                        <div class="dgtic-form-block">
                            <div class="dgtic-form-row">
                                Pacientes asignados :&nbsp;{{cant}}
                                <label class="dgtic-form-label">Persona Albergada <span class="required">*</span> :</label>
                                <div id="panelFind">
                                    <input type="checkbox" id="opSens">&nbsp;Sensitivo&nbsp;&nbsp;&nbsp;
                                    <a href="javascript:cargaBusqueda(document.getElementById('responsable').value,1);" id="iconFind"><i class="icol-find" title="Buscar personas"></i></a><br>
                                </div>
                                <input type="hidden" id="albergado" name="albergado" value="{{albergado.idPersona}}">
                                <input type="hidden" id="fechaPadre" name="fechaPadre" value="{{fechaPadre}}">
                                <input type="text" autocomplete="off" id="responsable" name="responsable" value="{{albergado.Nombre}} {{albergado.ApPaterno}} {{albergado.ApMaterno}}" style="width:360px;" onclick="document.getElementById('responsable').value='';" onkeyup="cargaBusqueda(this.value,0);">
                                <select id="selFind" size="10" style="width:360px; display:block;" Onclick=" elementBusquedaSel();">
                                    {% for Persona in Personas %}
                                    <option value="{{Persona.idPersona}}">{{Persona.Nombre}} {{Persona.ApPaterno}} {{Persona.ApMaterno}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <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="" 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="" 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="" onblur="this.value=this.value.toUpperCase();">
                                 </div>
                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Parentesco <span class="required">*</span> :</label>
                                <div class="dgtic-form-item">
                                    <select class="span12" name="parentesco">
                                        <option>Seleccione un parentesco</option>
                                        {% for Parentesco in Parentescos %}
                                            <option value="{{Parentesco.idParentesco}}">{{Parentesco.descripcion}}</option>
                                        {% endfor %}
                                    </select>
                                </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="">
                                 </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">Fecha de Nacimiento (AAAA-MM-DD):</label>
                                 <div class="dgtic-form-item">
                                    <input type="text" name="fechaNac" id="fechaNac" autocomplete="off" value="">
                                 </div>
                            </div>
                            <div class="btn-row">
                                 <div class="dgtic-form-item" align="center">
                                    <a class="btn btn-primary" href="javascript:guardaPariente(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">
    
    if (document.getElementById('albergado').value!=''){
        document.getElementById("selFind").style.display="none";
    }

    $( "#fechaNac" ).datepicker();
    $( "#fechaNac" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
    $( "#fechaNac" ).val('{{fechaNac}}');
    
</script>


{% if Proceso == 'TRANS' %}
    <script type="text/javascript">
        noUsar();
    </script>
{% else %}
    <script type="text/javascript">
        document.getElementById("Proceso").value = "NUEVO";
        document.getElementById("template").value = "frm_ctrolParienteEnfermo";
    </script>
{% endif %}


{% endblock %}