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

{% block jquery %}

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


    

{% endblock %}

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

{% block contenido %}
<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="span6">
                <div class="dgtic-panel">
                    <div class="dgtic-panel-header">
                        <span class="dgtic-panel-title"><i class="icol-book-addresses"></i>Expediente del Beneficiario</span>   
                    </div>  
                    <div class="dgtic-panel-content dgtic-form-container">
                        <div class="dgtic-form-inline">
                            {% include "formsnippet.html" with form=form %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="span4">{% csrf_token %}
                <div class="dgtic-panel">
                    <div class="dgtic-panel-header">
                        <span class="dgtic-panel-title"><i class="icol-projection-screen"></i> Reportes</span>          
                    </div>  
                    <div class="dgtic-panel-content dgtic-form-container">    
                                                
                            <div class="dgtic-form-row">
                                <div id="ocultar">
                                    <a href="javascript:ejecutaForm('/reporte10/')" class="btn btn-info span12"><i class="icol-projection-screen-present"></i> Mostrar Expediente</a>
                                </div>
                                <div id="visual">
                                    <h4>Debes Seleccionar un Albergado para Generar el Reporte
                                </div>
                            </div>  
                                                                     
                    </div>
                </div>
            </div>
            </form>
            </div>
        </div>
    </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>


    <link rel="stylesheet" type="text/css" href="{%static "assets/jui/css/jquery.ui.all.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "plugins/select2/select2.css" %}">
    <script type="text/javascript" src="{%static "assets/jui/js/jquery-ui-1.9.2.min.js"%}"></script>
    <script src="{%static "plugins/select2/select2.min.js" %}"></script>
    <script src="{% static "plugins/datatables/jquery.dataTables.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']);

    $( "#id_fechaIni" ).datepicker();
    $( "#id_fechaIni" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
    $( "#id_fechaIni" ).val('{{fechaIni}}');
    
    $( "#id_fechaFin" ).datepicker();
    $( "#id_fechaFin" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
    $( "#id_fechaFin" ).val('{{fechaFin}}');

    $(function() {
        $( "#datepicker" ).datepicker();
      });
</script>

<script type="text/javascript">
    $('#frmPanel').ready(function(){
        $("#ocultar").css("display", "none");                 
        
     });
    $('#frmPanel').change(function(){
        var e = $('#id_albergado').val();
        if(e == ''){
            $("#ocultar").css("display", "none");  
            $("#visual").css("display", "block");               
        }
        else{
            $("#ocultar").css("display", "block");   
            $("#visual").css("display", "none");
        }
     });
</script>


<script>
$(document).ready(function() {
$.extend($.fn.select2.defaults, {                

    formatNoMatches: function () { return "No se encontraron resultados"; },
    formatInputTooShort: function (input, min) { var n = min - input.length; return "Por favor adicione " + n + " caracter" + (n == 1? "" : "es"); },
    formatInputTooLong: function (input, max) { var n = input.length - max; return "Por favor elimine " + n + " caracter" + (n == 1? "" : "es"); },
    formatSelectionTooBig: function (limit) { return "Solo puede seleccionar " + limit + " elemento" + (limit == 1 ? "" : "s"); },
    formatLoadMore: function (pageNumber) { return "Cargando más resultados..."; },
    formatSearching: function () { return "Buscando..."; },
});
if( $.fn.select2 ) {
$('#id_albergado').select2();



}
});
document.getElementById("id_albergado").setAttribute("class", "required span6 select2-select");


</script>

{% endblock %}