<?php

use yii\helpers\Html;
use yii\helpers\Url;

$this->title = Yii::t('app', 'Yearly Report');

$this->registerCssFile('@web/css/apexcharts.css');
$this->registerJsFile('@web/js/apexcharts.js');

$data   = json_encode(array_values($data));
$months_names = json_encode([
    Yii::t('app', 'January'), Yii::t('app', 'February'), Yii::t('app', 'March'), Yii::t('app', 'April'),
    Yii::t('app', 'May'), Yii::t('app', 'June'), Yii::t('app', 'July'), Yii::t('app', 'August'),
    Yii::t('app', 'September'), Yii::t('app', 'October'), Yii::t('app', 'November'), Yii::t('app', 'December'),
]);

$url = json_encode(Url::to(['/reports/export-yearly-report']));
$download_url = json_encode(Url::to(['/reports/download-file']));

$script = <<< JS

var data = $data;
var months = $months_names;
var selected_year = $selected_year;

var colors = [
    '#F44336', '#9C27B0', '#E91E63',
    '#777CCC', '#999FFF', '#BAB0F0',
    '#DF0222', '#D2D2B1', '#AC1FF0',
    '#DFD2AA', '#AFFFDB', '#05FAFB',
];

var options = {
        series: data,
        chart: {
            type: 'bar',
            height: 350,
            stacked: true,
            toolbar: {
                show: false
            },
            zoom: {
                enabled: true
            }
        },
        responsive: [
            {
                breakpoint: 480,
                options: {
                    legend: {
                        position: 'bottom',
                        offsetX: -10,
                        offsetY: 0
                    }
                }
            }
        ],
        plotOptions: {
            bar: {
                horizontal: false,
            },
        },
        xaxis: {
            type: 'string',
            categories: months,
        },
        legend: {
            position: 'right',
            offsetY: 40
        },
        fill: {
            opacity: 1,
            colors: colors
        },
        colors: colors
    };

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

var ajax_url = $url;
var download_url = $download_url;

$('#export-btn').click(function(e){
    e.preventDefault();
    $.ajax({
        method: 'POST',
        url: ajax_url,
        data: {
            year: selected_year,
            data: data,
            months: months
        },
        success: function(response){
            console.log(response);
            window.location = download_url + '?link=' + response;
        }
    });
});

JS;

$this->registerJs($script);

?>

<div class="yearly-report">
    <h1><?= $this->title ?></h1>
    <form action='<?= Url::base(true) ?>/reports/yearly-report' method='GET'>
        <div class="container">
            <h4><?= Yii::t('app', 'Select year') ?></h4>
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-3 col-lg-offset-9">
                    <?= Html::dropDownList('selected_year', $selected_year, $exist_years, ['class' => 'form-control']) ?>
                </div>
            </div>

            <br>

            <p>
                <?= Html::submitButton(Yii::t('app', 'View'), ['class' => 'btn btn-success btn-expanded']) ?>
                <?= Html::a(Yii::t('app', 'Export'), ['#'], ['class' => 'btn btn-primary btn-expanded', 'id' => 'export-btn']) ?>
            </p>
        </div>
    </form>
    
    <br>

    <div class="container">
        <div id="chart"></div>
    </div>

</div>