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


{% block content %}

{% if form %}
    <h4>Filters</h4>
    <form>
        {% crispy form form.get_crispy_helper %}
        <input type="submit" value="Filter" class="btn btn-primary btn-lg btn-block refreshReport">
    </form>
{% endif %}
    <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 }}" data-charts-engine="{{ chart.engine_name }}">
                                    {% 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 %}
                    {#                    #}
                    {% if report_data.charts_engine == 'chartsjs' %}
                        <canvas width="400" height="100"></canvas>
                    {% elif report_data.charts_engine == 'highcharts' %}
                        {#                        <div id="highchartContainer" style="width:100%; height:400px;"></div>#}
                    {% endif %}


                {% endif %}
            </div>
            <div class="report-table">
                {% include 'slick_reporting/table.html' with table=report_data %}
            </div>
        </div>
    </div>


{% endblock %}
{% block js_script %}
    <script src="{% static 'slick_reporting/main.js' %}"></script>
    <script src="{% static 'slick_reporting/ra.chartsjs.js' %}"></script>
    <script src="{% static 'slick_reporting/ra.highchart.js' %}"></script>


    <script>
        $(document).ready(function () {
            let data = {{ report_data|jsonify }};

            let chartContainer = $('.reportChart')

            function setDatePicker() {
                function setDatePickerObj() {
                    var range_start = new Date();
                    var range_end = new Date();
                    let container = $(document);
                    let $startDate = container.find('input[name=start_date]');
                    let $endDate = container.find('input[name=end_date]');
                    if ($startDate.val() && $endDate.val()) {
                        range_start = new Date($startDate.val());
                        range_end = new Date($endDate.val());
                    } else {
                        range_start.setHours(0);
                        range_start.setMinutes(0);
                        range_end.setDate(range_start.getDate() + 1);
                        range_end.setHours(0);
                        range_end.setMinutes(0);
                    }

                    return {

                        autoUpdateInput: false,
                        timePicker: true,
                        timePicker24Hour: true,
                        timePickerIncrement: 10,
                        autoApply: true,
                        startDate: range_start,
                        endDate: range_end,
                        alwaysShowCalendars: 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
                        }
                    };
                }

                $('.raReportDateRange').daterangepicker(setDatePickerObj()).on('apply.daterangepicker', function (ev, picker) {
                    var container = picker.element;
                    var $startDate = container.find('[name=start_date]');
                    var $endDate = container.find('[name=end_date]');
                    $startDate.val(picker.startDate.format('YYYY') + '-' + picker.startDate.format('MM') + "-" + picker.startDate.format('DD') + ' ' + picker.startDate.format('HH') + ":" + picker.startDate.format('mm'))
                    $endDate.val(picker.endDate.format('YYYY') + '-' + picker.endDate.format('MM') + "-" + picker.endDate.format('DD') + ' ' + picker.endDate.format('HH') + ":" + picker.endDate.format('mm'))
                    container.parents('form').find('.refreshReport').trigger('click');
                })

            }

            $('.chartContainer').on('click', '.nav-charts a', function (e) {
                e.preventDefault();
                let $this = $(this);
                let charts_engine = $this.attr('data-charts-engine');

                if (charts_engine === 'chartsjs') {
                    displayChartChartsJs($this)
                } else if (charts_engine === 'highcharts') {
                    displayCHartHighcharts($this);
                }

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


            });

            function displayCHartHighcharts($this) {
                chartContainer.empty();
                chartContainer.append('<div id="highchartContainer" style="width:100%; height:400px;"></div>')

                let chart = chartContainer.find('#highchartContainer');
                let chartObject = $.slick_reporting.highcharts.createChartObject(data, $this.attr('data-chart-id'));
                chart.highcharts(chartObject)

            }

            function displayChartChartsJs($this) {
                chartContainer.empty();
                chartContainer.append('<canvas  width="400" height="100"></canvas>')
                var $chart = chartContainer.find('canvas');
                let chartObject = $.slick_reporting.chartsjs.createChartObject(data, $this.attr('data-chart-id'), {});
                myChart = new Chart($chart, chartObject);

            }

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


        })
    </script>

{% endblock %}
