@extends('layouts/contentLayoutMaster')

@section('title', __('locale.Premium Gain/Loss Chart'))

@section('vendor-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/rowGroup.bootstrap5.min.css')) }}">
@endsection

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
@endsection

@section('content')
<div class="row mb-2">
    <div class="col-md-6">
        <select class="form-select" id="period-select" onchange="updateChart(this.value)">
            <option value="monthly">Mensal</option>
            <option value="quarterly">Trimestral</option>
            <option value="semiannual">Semestral</option>
            <option value="annual">Anual</option>
        </select>
    </div>
    <div class="col-md-6">
        <select class="form-select" id="data-select" onchange="updateChart()">
            <option value="both">Ambos</option>
            <option value="prizes_won">Total de Prêmios Ganhos no período</option>
            <option value="prizes_lost">Total de Prêmios Perdidos no período</option>
        </select>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        
      <div id="premium_graph" class="rounded-3"></div>
    </div>
  </div>
@endsection

@section('vendor-script')
    {{-- Vendor js files --}}
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/jszip.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/cleave/cleave.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/cleave/addons/cleave-phone.us.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/moment.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
@endsection

@section('page-script')

    <script>

        (function (H) {
            H.seriesTypes.pie.prototype.animate = function (init) {
                const series = this,
                    chart = series.chart,
                    points = series.points,
                    { animation } = series.options,
                    { startAngleRad } = series;

                function fanAnimate(point, startAngleRad) {
                    const graphic = point.graphic,
                        args = point.shapeArgs;

                    if (graphic && args) {
                        graphic
                            .attr({
                                start: startAngleRad,
                                end: startAngleRad,
                                opacity: 1
                            })
                            .animate({
                                start: args.start,
                                end: args.end
                            }, {
                                duration: animation.duration / points.length
                            }, function () {
                                if (points[point.index + 1]) {
                                    fanAnimate(points[point.index + 1], args.end);
                                }
                                if (point.index === series.points.length - 1) {
                                    series.dataLabelsGroup.animate({
                                        opacity: 1
                                    }, void 0, function () {
                                        points.forEach(point => {
                                            point.opacity = 1;
                                        });
                                        series.update({
                                            enableMouseTracking: true
                                        }, false);
                                        chart.update({
                                            plotOptions: {
                                                pie: {
                                                    innerSize: '40%',
                                                    borderRadius: 8
                                                }
                                            }
                                        });
                                    });
                                }
                            });
                    }
                }

                if (init) {
                    points.forEach(point => {
                        point.opacity = 0;
                    });
                } else {
                    fanAnimate(points[0], startAngleRad);
                }
            };
        }(Highcharts));

        var chart = Highcharts.chart('premium_graph', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Gráfico de Ganho/Perda de Prêmio'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: [],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Quantidade'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [],
            credits: {
                enabled: false
            }
        });

        function updateChart() {
            var period = document.getElementById('period-select').value;
            var dataType = document.getElementById('data-select').value;

            var categories = [];
            var dataGanhos = [];
            var dataPerdidos = [];

            // Dados de exemplo, substitua com dados reais conforme o período
            switch(period) {
                case 'monthly':
                    categories = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
                    dataGanhos = [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
                    dataPerdidos = [49.9, 71.5, 60.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
                    break;
                case 'quarterly':
                    categories = ['Q1', 'Q2', 'Q3', 'Q4'];
                    dataGanhos = [300.0, 400.0, 350.0, 450.0];
                    dataPerdidos = [300.0, 400.0, 350.0, 450.0];
                    break;
                case 'semiannual':
                    categories = ['S1', 'S2'];
                    dataGanhos = [600.0, 800.0];
                    dataPerdidos = [600.0, 800.0];
                    break;
                case 'annual':
                    categories = ['2024'];
                    dataGanhos = [2500.0];
                    dataPerdidos = [2500.0];
                    break;
            }

            var seriesData = [];

            if (dataType === 'both' || dataType === 'prizes_won') {
                seriesData.push({
                    name: 'Total de Prêmios Ganhos no período',
                    data: dataGanhos,
                    color: '#7cb5ec'
                });
            }

            if (dataType === 'both' || dataType === 'prizes_lost') {
                seriesData.push({
                    name: 'Total de Prêmios Perdidos no período',
                    data: dataPerdidos,
                    color: '#434348'
                });
            }

            chart.xAxis[0].setCategories(categories);
            chart.series.forEach(function(series, index) {
                if (seriesData[index]) {
                    series.setData(seriesData[index].data);
                    series.setName(seriesData[index].name);
                } else {
                    series.remove();
                }
            });

            seriesData.slice(chart.series.length).forEach(function(serie) {
                chart.addSeries(serie);
            });
        }

        // Atualiza o gráfico com os dados mensais e ambos os tipos de dados por padrão
        updateChart();
    </script>

@endsection