{% extends 'slick_reporting/base.html' %}
{% load crispy_forms_tags i18n %}


{% block content %}
    <h4>Filters</h4>
    <form>
        {% crispy form form.get_crispy_helper %}
        <input type="submit" value="Filter" class="btn btn-primary btn-lg btn-block">
    </form>

    <h4 class="py-5">Results</h4>
    <div class="card" id="{{ report_data.report_slug }}">
        <div class="card-body">
            <div class="chartContainer screenOnly">
                <div class="controls text-center">
                    <ul class="nav-charts list-inline">
                        {% for chart in report_data.chart_settings %}
                            <li class="list-inline-item"><a href="#" data-chart-id="{{ chart.id }}">
                                {% if chart.type == 'pie' %}
                                    <i class="fa fa-pie-chart"></i>
                                {% elif chart.type == 'line' %}
                                    <i class="fa fa-line-chart"></i>
                                {% else %}
                                    <i class="fa fa-bar-chart"></i>

                                {% endif %} {{ chart.title }}
                            </a></li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="reportChart screenOnly" dir="ltr"></div>
                {% if report_data.chart_settings %}
                    <canvas id="{{ report_data.report_slug }}" class="chartsJsCanvas" width="400"
                            height="100"></canvas>
                {% endif %}
            </div>
            <div class="report-table"></div>
            {% include 'slick_reporting/table.html' with table=report_data %}

        </div>
    </div>

    {{ report_data|json_script:'report-data' }}

{% endblock %}
{% block js_script %}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

    <script>
        function setDatePickerObj() {
            var range_start = new Date();
            var range_end = new Date();
            range_start.setHours(0);
            range_start.setMinutes(0);
            range_end.setDate(range_start.getDate() + 1);
            range_end.setHours(0);
            range_end.setMinutes(0);

            DEFAULT_DATE_PICKER_OBJ = {

                autoUpdateInput: false,
                timePicker: true,
                timePicker24Hour: true,
                timePickerIncrement: 10,
                autoApply: true,

                ranges: {
                    '{% trans "Today" %}': [range_start, range_end],
                    '{% trans "Yesterday" %}': [moment(range_start).subtract('days', 1), moment(range_end).subtract('days', 1)],
                    '{% trans "Last 7 Days" %}': [moment(range_start).subtract('days', 6), moment(range_end)],
                    '{% trans "This Month" %}': [moment(range_start).startOf('month'), moment(range_end).endOf('month')],
                    '{% trans "Last Month" %}': [moment(range_start).subtract('month', 1).startOf('month'), moment(range_end).subtract('month', 1).endOf('month')]
                },

                opens: 'right',
                showDropdowns: true,
                linkedCalendars: false,
                buttonClasses: ['btn'],
                applyClass: 'btn-small btn-info btn-block',
                cancelClass: 'btn-small btn-default btn-block',
                locale: {
                    direction: {% if LANGUAGE_BIDI %} 'rtl' {% else %}'ltr'{% endif %},
                    format: 'YYYY-MM-DD',
                    applyLabel: '{% trans "Apply" %}',
                    fromLabel: '{% trans "From" %}',
                    toLabel: '{% trans "To" %}',
                    startLabel: '{% trans "start date"|capfirst %}:',
                    endLabel: '{% trans "end date"|capfirst %}:',
                    cancelLabel: '{% trans "Cancel" %}',
                    customRangeLabel: '{% trans "choose"|capfirst %}',
                    firstDay: 1
                }
            };
        }

        let value = JSON.parse(document.getElementById('report-data').textContent);

        $('select').select2();
        $('table').DataTable();
        $('.raReportDateRange').daterangepicker(setDatePickerObj()).on('apply.daterangepicker', function (ev, picker) {

            var container = picker.element;
            var $startDate = container.find('[name=start_date_0]');
            var $startTime = container.find('[name=start_date_1]');
            var $endDate = container.find('[name=end_date_0]');
            var $endTime = container.find('[name=end_date_1]');
            $startDate.val(picker.startDate.format('YYYY') + '-' + picker.startDate.format('MM') + "-" + picker.startDate.format('DD'))
            $startTime.val(picker.startDate.format('HH') + ":" + picker.startDate.format('mm'));
            $endDate.val(picker.endDate.format('YYYY') + '-' + picker.endDate.format('MM') + "-" + picker.endDate.format('DD'))
            $endTime.val(picker.endDate.format('HH') + ":" + picker.endDate.format('mm'));
            container.parents('.panel').find('.refreshReport').trigger('click');

        })


        $('.chartContainer').on('click', '.nav-charts a', function (e) {
            e.preventDefault();
            DisplayChart($(this));
        });

        $('.nav-charts').find('a:first').trigger('click');


        function DisplayChart($this) {
            var data = value;
            var $chart = $('canvas');
            let chartObject = $.slick_reporting.chartsjs.createChartObject(data, $this.attr('data-chart-id'), {});
            try {
                myChart.destroy();
            } catch (err) {
                console.error(err);
            }
            myChart = new Chart($chart, chartObject);

            var ul = $this.parents('ul');
            //remove old active classes
            ul.find('li').removeClass('active');
            // set the new active class
            ul.find('li[data-chart-id=' + $this.attr("data-chart-id") + ']').addClass('active');

        }
    </script>

{% endblock %}