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


{% block content %}

    <div class="col-12">
        {% if form %}

            <h4>Filters</h4>
            <form id="reportForm">
                {% crispy form crispy_helper %}
                <input type="submit" value="Filter" class="btn btn-primary btn-lg btn-block refreshReport">
                <input type="button" value="Export Csv" class="btn btn-secondary btn-lg btn-block exportCsvBtn">
            </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>

    </div>

{% endblock %}
{% block extrajs %}
    {{ block.super }}

    <script>
        $(document).ready(function () {


            let data = {{ report_data|jsonify }};

            let chartContainer = $('.reportChart')

            $('.exportCsvBtn').on('click', function (e) {
                e.preventDefault()
                let form = $('#reportForm');
                window.location = '?' + form.serialize() + '&_export=csv'
            });


            $('.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 %}
