{% extends "ra/admin/base_site.html" %}
{% load ra_tags ra_report_tags crispy_forms_tags crispy_forms_field %}


{% load i18n admin_urls static admin_modify ra_admin_tags %}


{% block breadcrumbs %}
    {#    <ul class="breadcrumb breadcrumb-caret position-right">#}
    <li class="breadcrumb-item">
        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    </li>

    <li class="breadcrumb-item">
        {% trans "Reports" %}
    </li>

    <li class="breadcrumb-item">
        {{ title }}
    </li>
{% endblock %}

{% block bodyclass %}{% endblock %}


{% block pre_content_wrapper %}
{% endblock %}

{% block content %}
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        {% for report in reports.reports %}
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab"
                   role="tab"
                   href="#{{ report.get_report_slug }}"
                   ra-report-param="{% get_typed_report_url_param report original report_link_suffix %}&"
                >{{ report.get_report_title }}</a>
            </li>
        {% endfor %}

        {#        <li class="nav-item">#}
        {#            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"#}
        {#               aria-selected="true">Home</a>#}
        {#        </li>#}
        {#        <li class="nav-item">#}
        {#            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"#}
        {#               aria-selected="false">Profile</a>#}
        {#        </li>#}
        {#        <li class="nav-item">#}
        {#            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"#}
        {#               aria-selected="false">Contact</a>#}
        {#        </li>#}
    </ul>

    <style>
        [dir=ltr] label[for]:first-letter {
            text-transform: capitalize;
        }

    </style>
    <div class="{{ has_detached_sidebar|yesno:'container-detached,' }}">
        <div class="{{ has_detached_sidebar|yesno:'content-detached,' }}">
            <div class="card">
                {% include RA_THEME|add:'/report_list_forms.html' %}
            </div>
        </div>
    </div>

{% endblock %}
{% block bottom_script %}
    <script>
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        });

        var hash = document.location.hash;
        var prefix = "tab_";
        var myChart;

        if (hash) {
            let report_slug = hash.replace(prefix, "");
            $('.nav-tabs a[href="' + report_slug + '"]').tab('show');
            loadReport(report_slug.slice(1));
        } else {
            let first_report = $('.nav-tabs a:first');
            first_report.tab('show');
            loadReport(first_report.attr('href').slice(1))
        }

        // Change hash for page-reload
        $('.nav-tabs a').on('shown.bs.tab', function (e) {
            var report_slug = $(this).attr('href').slice(1);
            window.location.hash = e.target.hash.replace("#", "#" + prefix);
            var params = $(this).attr('ra-report-param');
            params += $('#' + report_slug).find('form').serialize();
            loadReport(report_slug, params);
        });

        function loadReport(report_slug, params, callback) {
            if (typeof(params) == "undefined"){
                params = report_slug + '/?' + $(report_slug).find('form').serialize();
            }
            var $tabcontent = $('#' + report_slug);
            blockDiv($tabcontent);
            var url = params;
            $.get(url, function (data) {
                var form_settings = data['form_settings'] || {};
                var frontend_settings = form_settings['frontend_settings'] || {};
                var func_path = frontend_settings['displayReportFunc'] || '$.ra.report_loader.displayReport';
                executeFunctionByName(func_path, window, data, url);

            }).fail(function () {
                $.ra.report_loader.failFunction($tabcontent);
                unblockDiv($tabcontent);
            });
        }

        $('.chartContainer').on('click', '.groupChartController', function (e) {
            e.preventDefault();
            DisplayChart($(this));
        });

        function DisplayChart($this) {
            {#var $this = $(this);#}

            var report_slug = $this.attr('data-report-slug');
            var $tabcontent = $('#' + report_slug);
            if ($tabcontent.length === 0) {
                $tabcontent = $('.chartWidget[data-report-slug=' + report_slug + ']');
            }
            var data = $.ra.cache[report_slug];


            var $chart = $tabcontent.find('canvas');
            let chartObject = $.ra.chartsjs.createChartObject(data, $this.attr('data-chart-id'), {});

            try {
                myChart.destroy();

            } catch (err) {
                {#console.log(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');


        }

        $('.refreshReport').on('click', function (event) {
            event.preventDefault();
            var href = $(this).attr('href');
            var params = $('a[data-toggle="tab"][href="' + href + '"]').attr('ra-report-param');
            params += $(href).find('form').serialize();
            loadReport(href.slice(1), params);
        });

        $('.printReport').on('click', function (event) {
            event.preventDefault();
            let $this = $(this);
            var report_slug = $this.attr('data-report-slug');
            var report_url = $this.attr('data-report-url');
            var print_theme = $this.attr('print_theme');
            var formSerialize = $('div[data-report-slug=' + report_slug + '] form').serialize();
            print_theme = typeof (print_theme) === 'undefined' ? 'default' : print_theme;
            window.open(report_url + '?&print=true&print_theme=' + print_theme + formSerialize, report_slug);

            {#request_from_server($(this), , true, '#' + report_slug);#}
        });

        $('.download-csv').on('click', function (event) {
            event.preventDefault();
            let $this = $(this);

            var report_slug = $this.attr('data-report-slug');
            var report_url = $this.attr('data-report-url');
            var print_theme = $this.attr('print_theme');
            var formSerialize = $('div[data-report-slug=' + report_slug + '] form').serialize();

            window.open(report_url + '?&csv=true&download=true&' + formSerialize, report_slug);


        });
        $('.printSubTable').on('click', function (event) {
            event.preventDefault();
            var reportModal = $('#reportSub');
            var url = reportModal.attr('data-report-url') + '&print=true';
            var win = window.open(url, '_blank');
            if (win) {
                //Browser has allowed it to be opened
                win.focus();
            }
            {##}
            {#            var report_slug = $(this).attr('href').slice(1);#}
            {#            var print_theme = $(this).attr('print_theme');#}
            {#            print_theme = typeof(print_theme) === 'undefined' ? 'default' : print_theme;#}
            {#            request_from_server($(this), '&print=true&print_theme=' + print_theme, true, report_slug);#}
        });

        function request_from_server($this, added_param, new_window, window_name) {

            var href = window_name;
            var params = $('a[data-toggle="tab"][href="' + href + '"]').attr('ra-report-param');
            params += $(href).find('form').serialize();
            params += added_param;
            if (new_window === true) {
                window.open(params, window_name);
            } else {
                window.location = params
            }

        }

    </script>


{% endblock %}