{% extends "base.html" %}

{% load staticfiles %}
{% block title %}
    Registro del Participante
{% endblock %}
{% block pluginstylesheet %}
    <link rel="stylesheet" type="text/css" href="{% static "assets/jui/css/jquery.ui.all.css" %}">

{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}

    <li class="{{ inicio }}"><a href="/responsable/lista/"><i class="icon-group"></i>Responsable Atencion</a></li>

    <li class="active">

        {% if responsable %}
            <a href="#">
                Actualizacion
            </a>

        {% else %}
            <a href="#">
                Registro
            </a>
        {% endif %}
    </li>
{% endblock %}

{% block content %}
    <div class="row-fluid">
        <div class="span12">
            <div class="dgtic-panel">
                <div class="dgtic-panel-header">
                <span class="dgtic-panel-title">
                    
                    <i class="icol-add"></i> 
                        Registro del Responsable de Atención
                    
                </span>
                </div>
                <div class="dgtic-panel-content dgtic-form-container">
                    <div class="messages">
                        {% for error in form.non_field_errors %}
                            <li style="list-style: none;" class="dgtic-message error">
                                {{ error }}
                            </li>
                        {% endfor %}


                    </div>
                    <form id="formulario_responsable" name="form" method="post" action="/responsable/nuevo/" class="dgtic-form"
                          enctype="multipart/form-data">
                        <div class="dgtic-form-block">
                            {% include "form_snippet.html" with form=registro %}
                            {% csrf_token %}

                            <div class="btn-row">
                                <input type='submit' value='Regresar' onclick=
                                        "
                            parent.history.back();
                            return false;
                            "
                                       class="btn btn-danger">


                                <input class="btn btn-primary" type="submit" value="Guardar">


                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block jqueryui %}

     <link rel="stylesheet" href="{% static "plugins/select2/select2.css" %}" media="screen">
    <script src="{% static "plugins/select2/select2.min.js" %}"></script>
    <script type="text/javascript" src="{% static "assets/jui/js/jquery-ui-1.9.2.min.js" %}"></script>

    <link rel="stylesheet" type="text/css" href="{% static "assets/jui/css/jquery.ui.all.css" %}">

    <script type="text/javascript" src="{% static "assets/jui/js/globalize/globalize.js" %}"></script>
{% endblock %}

{% block extrajs %}
    <script type="text/javascript">
$('#id_id_municipio').on('change', consultarUnidadMedica);
    function consultarUnidadMedica() {
        var id = $(this).val();
        console.log(id)
        $.ajax({
            data: {'id': id},
            url: '/busqueda_ajax/unidad_medica/',
            type: 'get',
            success: function (data) {
                console.log(data)
                var html = ""
                var options = ""
                var encabezado = "<option>Seleccione...</option>"

                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        options += '<option value="' + data[i].pk + '">' + data[i].fields.nombre + '</option>'
                        html = encabezado + options
                    }
                    $('#id_id_unidad_medica').html(html);
                    $('#id_id_unidad_medica').prop('disabled', false);

                } else {
                    $('#id_id_unidad_medica').html("<option>No se encontraron Unidades Medicas</option>");
                    $('#id_id_unidad_medica').prop('disabled', 'disabled');
                }


            }
        });
    }



    </script>


{% endblock %}