{% extends 'base.template.html' %}
{% load i18n %}
{% load static from staticfiles %}
{% block content_header_title %}{% trans 'CARGAR DATOS' %}{% endblock %}
{% block content_header_roadmap %}
    <li><a href="{% url 'economico-cargar-datos' %}">{% trans 'Economía - Cargar Datos' %}</a></li>
    <li class="active">{% block active_link %}{% trans 'Real - Precios' %}{% endblock %}</li>
{% endblock %}
{% block content %}
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h2 class="panel-title">{% trans 'Economía' %} - {% trans 'Real' %} - {% trans 'Precios' %}</h2>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                    <p>
                        {% blocktrans %}
                            Para cargar los datos asociados al <b>Indice Nacional de Precios al Consumidor - INPC</b>
                            seleccione el dominio y el año base.
                        {% endblocktrans %}
                    </p>
                </div>
                <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                    <div class="row">
                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                            <label for="form.dominio.auto_id" class="control-label">{{ form.dominio.label }}</label>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">{{ form.dominio }}</div>
                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                            <label for="form.anho_base.auto_id" class="control-label">{{ form.anho_base.label }}</label>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">{{ form.anho_base }}</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-6 col-sm-offset-6 col-md-offset-6 col-lg-offset-6">
                    <label class="control-label">{% trans 'Mes' %}</label>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                    <label class="control-label">{% trans 'Año' %}</label>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
                    <label class="control-label">{% trans 'Período' %}</label>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                    <label class="control-label">{{ form.periodo_mes_ini.label }}</label>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">{{ form.periodo_mes_ini }}</div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">{{ form.periodo_anho_ini }}</div>
            </div>
            <div class="row separador-row">
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4">
                    <label class="control-label">{{ form.periodo_mes_fin.label }}</label>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">{{ form.periodo_mes_fin }}</div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">{{ form.periodo_anho_fin }}</div>
            </div>
            {% include 'base.down.up.files.html' with app='economico' mod='Precios' %}
        </div>
    </div>
{% endblock %}
{% block extra_footer %}
    <script>
        var dominio = $('#{{ form.dominio.auto_id }}');
        var anho_base = $("#{{ form.anho_base.auto_id }}");
        var periodo_mes_ini = $("#{{ form.periodo_mes_ini.auto_id }}");
        var periodo_mes_fin = $("#{{ form.periodo_mes_fin.auto_id }}");
        var periodo_anho_ini = $("#{{ form.periodo_anho_ini.auto_id }}");
        var periodo_anho_fin = $("#{{ form.periodo_anho_fin.auto_id }}");

        /**
         * Función que configura los filtros de acuerdo a la selección del usuario
         */
        function set_filters() {
            var filters = $("#filters"), json_filter = '';

            if (dominio.val()) {
                json_filter += "\"dominio\": \"" + dominio.val() + "\",";
            }
            if (anho_base.val()) {
                json_filter += "\"anho_base\": \"" + anho_base.val() + "\",";
            }
            if (periodo_mes_ini.val()) {
                json_filter += "\"fecha__month__gte\": \"" + periodo_mes_ini.val() + "\",";
            }
            if (periodo_mes_fin.val()) {
                json_filter += "\"fecha__month__lte\": \"" + periodo_mes_fin.val() + "\",";
            }
            if (periodo_anho_ini.val()) {
                json_filter += "\"fecha__year__gte\": \"" + periodo_anho_ini.val() + "\",";
            }
            if (periodo_anho_fin.val()) {
                json_filter += "\"fecha__year__lte\": \"" + periodo_anho_fin.val() + "\",";
            }

            if (json_filter) {
                json_filter = json_filter.slice(0, -1);
                filters.val(json_filter);
            }
        }

        $(document).ready(function() {
            dominio.on('change', function() { set_filters() });
            anho_base.on('change', function() { set_filters() });
            periodo_mes_ini.on('change', function() { set_filters() });
            periodo_mes_fin.on('change', function() { set_filters() });
            periodo_anho_ini.on('change', function() { set_filters() });
            periodo_anho_fin.on('change', function() { set_filters() });

            $('.fileinput-upload-button').click(function(event){
                event.preventDefault();
                var fdata = new FormData();
                fdata.append('file',file.files[0]);
                $.ajax({
                    url: URL_CARGAR_ARCHIVO_CM+models,
                    data: fdata,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    dataType: 'json',
                    success: function(data){
                        var msg = data.message ? data.result : data.error;
                        bootbox.alert(msg);
                    },
                    error: function(error){
                        console.log(error);
                    }
                });
            });
        });
    </script>
{% endblock %}