@extends('layouts/contentLayoutMaster')

@section('title', __('locale.Graph of Registered Lives'))

@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>
<div class="row">
    <div class="col-md-12">
        
      <div id="active_lives_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>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@endsection

@section('page-script')

<script>
    function updateChart(period) {
        axios.get(`{{ route('api.life-active-reports.show') }}?period=` + period, {
            headers: {
                "Authorization": `Bearer {{ session('Authorization') }}`
            }
        })
        .then(function(response) {
            console.log(response.data);
            // Atualiza o gráfico com os dados recebidos
            var categories = [];
            var data = [];
            
            response.data.forEach(item => {
                // Ajuste para adicionar categorias e dados
                if (item.month && item.year) {
                    categories.push(item.month + '/' + item.year);
                } else if (item.quarter && item.year) {
                    categories.push('Q' + item.quarter + '/' + item.year);
                } else if (item.semester && item.year) {
                    categories.push('S' + item.semester + '/' + item.year);
                } else {
                    categories.push(item.year);
                }
                data.push(item.total);
            });
    
            var chart = Highcharts.chart('active_lives_graph', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Gráfico de Quantidade de Vidas Ativas no Período'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: 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: [{
                    name: 'Total de Quantidades de Vidas Ativas no Período',
                    data: data
                }],
                credits: {
                    enabled: false
                }
            });
        })
        .catch(function(error) {
            console.error('Erro na requisição:', error);
            throw error; 
        });
    }
    
    // Carrega o gráfico com o período "monthly" por padrão
    updateChart('monthly');
    
    // Exemplo de como atualizar o gráfico ao mudar o período
    document.getElementById('period-select').addEventListener('change', function() {
        var period = this.value;
        updateChart(period);
    });
    </script>
    


@endsection