{% extends 'MainBundle:Master:template.html.twig' %} {% block title %}HIRUKO - Raw Data{% endblock %} {% block scripts %}
<link rel="stylesheet" href="{{ asset('bundles/main/css/bootstrap.css') }}" />
<link rel="stylesheet" href="{{ asset('bundles/indicator/css/bootstrap-select.css') }}" />
<link rel="stylesheet" href="{{ asset('bundles/shedule/datatable/css/dataTables.bootstrap.css') }}" />
<link rel="stylesheet" href="{{ asset('bundles/shedule/datatable/css/dataTables.responsive.css') }}" />
<link rel="stylesheet" href="{{ asset('bundles/shedule/datatable/css/dataTables.tableTools.css') }}" />
<link rel="stylesheet" href="{{ asset('bundles/shedule/'~ hrk_skin ~'/dataTableCustom.css') }}" />
<link href="{{ asset('bundles/utilities/font-awesome-4.7.0/css/font-awesome.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('bundles/imexxenmassive/bootstrap-datepicker-1.6.4-dist/css/bootstrap-datepicker3.min.css')}}">
<style>
    .hir_body {
        color: black;
    }

    .panel-default {
        min-height: calc(100vh - 250px);
    }

    .spacer {
        display: block;
        width: 100%;
        margin-top: 20px;
    }
</style>
{% endblock %} {% block content %}
<div class="container-fluid">
    <form action="javascript:void(0);" id="raw-data-form">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="container">

                    <h3>{{ 'RawData.GenerateTitle'|trans([], 'LocalizationBundle') }}</h3>
                    <hr> {# sites #}
                    <div class="col-md-4">
                        <h4>{{ 'labels.Headquarter.plural'|trans([], 'LocalizationBundle') }}</h4>
                    </div>
                    <div class="col-md-8" id="hqs-checks">
                        {% for hq in hqs %}
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="{{hq.id_headquarter}}"> {{hq.headquarter_name}}
                            </label>
                        </div>
                        {% endfor %}
                    </div>

                    {# modalities #}
                    <div class="col-md-4">
                        <h4> {{ 'modalities.modalities'|trans([], 'LocalizationBundle') }}</h4>
                    </div>
                    <div class="col-md-8" id="mods-checks">

                        <div class="row">
                            {% for m in mods %}
                            <div class="col-md-2">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" value="{{m.id_modality}}"> {{m.id_modality}}
                                    </label>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <div>
                            <button id="all-mods-but" type="button" class="btn btn-deafult">{{ 'labels.allF'|trans([], 'LocalizationBundle') }}</button>
                        </div>
                    </div>

                    {#do not remove .clearfix#}
                    <div class="clearfix"></div>
                    <div class="row spacer"></div>
                    {# range of dates #}
                    <div class="col-md-4">
                        <h4 class="text-capitalize"> {{ 'labels.rangoFec'|trans([], 'LocalizationBundle') }}</h4>
                    </div>
                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="input-daterange input-group">
                                    <input type="text" class="input-sm form-control datepicker" name="start" required id="start-date-in" />
                                    <span class="input-group-addon">to</span>
                                    <input type="text" class="input-sm form-control datepicker" name="end" required id="end-date-in" />
                                </div>
                            </div>
                        </div>
                    </div>

                    {#do not remove .clearfix#}
                    <div class="clearfix"></div>

                    {#actions#}
                    <div class="row">
                        <div class="col-md-12 spacer">
                            <button class="btn btn-primary" type="submit"> {{ 'RawData.GenerateReport'|trans([], 'LocalizationBundle') }}</button>
                            <button class="btn btn-default" type="reset"> {{ 'button.delete'|trans([], 'LocalizationBundle') }}</button>
                        </div>
                    </div>
                    <hr>
                    <div class="row hidden" id="loading-message">
                        <div class="col-md-12">
                            <h4> {{ 'RawData.GeneratingReport'|trans([], 'LocalizationBundle') }}</h4>
                            <h5>{{ 'RawData.GeneratingTime' |trans([], 'LocalizationBundle') }}</h5>
                            <h5>{{ 'RawData.EncodingWarning' |trans([], 'LocalizationBundle') }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
{# scripts #}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<script type="text/javascript" src="{{ asset('bundles/shedule/bootstrap/js/bootstrap.js') }}"></script>
<script src="{{ asset('bundles/imexxenmassive/bootstrap-datepicker-1.6.4-dist/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{ asset('bundles/imexxenmassive/bootstrap-datepicker-1.6.4-dist/locales/bootstrap-datepicker.es.min.js')}}"></script>
<script>
    //$.fn.datepicker.defaults.format = "yyyy-mm-dd";
    $(function () {
        $('.datepicker').datepicker();

        var next_toggle = true;
        $('#all-mods-but').click(function () {
            $('#mods-checks').find('input').prop('checked', next_toggle);
            next_toggle = !next_toggle;
        });
        $('#raw-data-form').submit(function () {
            $('#loading-message').removeClass('hidden');
            $('#raw-data-form').find('input').attr('disabled', true);
            $('#raw-data-form').find('button').attr('disabled', true);
            setTimeout(() => {
                $('#raw-data-form').find('input').removeAttr('disabled');
                $('#raw-data-form').find('button').removeAttr('disabled');
            }, 10000);

            var headquarter = $('#hqs-checks').find('input').filter(function (i, x) { return x.checked; }).map(function (i, x) { return x.value; }).toArray();
            var modality = $('#mods-checks').find('input').filter(function (i, x) { return x.checked; }).map(function (i, x) { return x.value; }).toArray();
            var search = true;
            var date_start = $('#start-date-in').val();
            var date_end = $('#end-date-in').val();
            var args = $.param({ headquarter, modality, search, date_start, date_end });
            var url = document.location.pathname + '-get?' + args;
            downloadURI(url, 'raw-data.csv');
            return false;
        });

        function downloadURI(uri, name) {
            var link = document.createElement("a");
            link.download = name;
            link.href = uri;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            delete link;
        }

    });

</script> {% endblock content %}