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

{% block jquery %}
    
    function ejecutaForm(enlace){
        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">Registro de Alimentos en General</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 class="dgtic-content-area" >
    <div class="row-fluid" >
        <div class="span12">
            <div class="dgtic-panel">
            <form class="dgtic-form" id="frmPanel" method="post">{% csrf_token %}
                <div class="span5">
                    <div class="dgtic-panel">
                        <div class="dgtic-panel-header">
                            <span class="dgtic-panel-title"><i class="icol-page-white-cup"></i> Registro de alimentos en general por día</span>
                        </div>  
                        <div class="dgtic-panel-content dgtic-form-container">
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Fecha :</label>
                                <div class="dgtic-form-item">
                                    <input type="text" class="span4" id="fecha" name="fecha" onkeyup="this.value='';" autocomplete="off" value="{{fecha}}">
                                </div>
                            </div>
                           <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Desayunos :</label>
                                <div class="dgtic-form-item">
                                    <input type="text" class="span2" name="desayunos" id="desayunos" value="0" style="text-align: center;">
                                </div>
                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Colaciones :</label>
                                <div class="dgtic-form-item">
                                    <input type="text" class="span2" name="colaciones" id="colaciones" value="0" style="text-align: center;">
                                </div>
                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Cenas :</label>
                                <div class="dgtic-form-item">
                                    <input type="text" class="span2" name="cenas" id="cenas" value="0" style="text-align: center;">
                                </div>
                            </div>
                            <div class="dgtic-form-row">
                                <label class="dgtic-form-label">Observaciones :</label>
                                <div class="dgtic-form-item">
                                    <textarea name="observaciones" rows="auto" cols="auto" class="span12"></textarea>
                                </div>
                            </div>
                            <div class="btn-row">
                                <div class="dgtic-form-item">
                                    <a href="javascript:ejecutaForm('/procesos/guardaRegAliGral/0');" class="btn btn-primary"><i class="icol-disk"></i> Guardar</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
                <div class="span6">
                    <div class="dgtic-panel">
                        <div class="dgtic-panel-header">
                            <span class="dgtic-panel-title">
                                <i class="icol-grid"></i> Resumen del mes actual
                            </span>
                        </div>
                        <table id="dTable" class="dgtic-table">
                            <!-- contenido dinamico -->
                        </table>
                        
                     </div>
                </div>
            </div>
         </div>
    </div>
</div>


<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']);
    $( "#fecha" ).datepicker();
    $( "#fecha" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
    $( "#fecha" ).val('{{fecha}}');


</script>

<script>
    $(document).ready(function() {
        if( $.fn.dataTable ) {
            $('#dTable').dataTable( {
                "aaData": [
                    {% for registro in registros %}
                        [
                            '{{registro.fecha|date:"d-b-y"}}', 
                            '{{registro.desayunos}}',
                            '{{registro.colaciones}}',
                            '{{registro.cenas}}'
                        ],
                    {% endfor %}

                ],
                "aoColumns": [
                    { "sTitle": "Fecha" },
                    { "sTitle": "Desayunos" },
                    { "sTitle": "Colaciones" },
                    { "sTitle": "Cenas" }
                ],
                "aaSorting": [[0,"desc"]]
            } );
        }
    } );

    

</script>
<script src="{% static "plugins/validate/jquery.validate.js" %}"></script>
<script src="{% static "assets/js/libs/jquery.format.1.03.js" %}"></script>
<script src="{% static "assets/js/libs/letras.js" %}"></script>
<script src="{% static "assets/js/libs/jquery.capitalize.js" %}"></script>
<script type="text/javascript">

       $(function(){
            $('#desayunos, #cenas, #colaciones').validCampoFranz('0123456789'); 
        });

</script>
    
{% endblock %}