@extends('layouts.app')

@section('content')
    <h5 class="text-primary">Report</h5>

    <div class="row mb-3">
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    Yearly usage
                </div>
                <div class="card-body">
                    <div class="chart-yearly"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    Monthly usage
                </div>
                <div class="card-body">
                    <div class="chart-monthly"></div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('custom-script')
    <script type="module">
        $(async function(){
            try{
                let yearly_options = {
                    chart: {
                        type: 'line'
                    },
                    series: [{
                        name: 'Usage',
                        data: []
                    }],
                    xaxis: {
                        categories: []
                    },
                    stroke: {
                        curve: 'smooth',
                    },
                    fill: {
                        type: 'gradient',
                    },
                }

                let monthly_options = {
                    chart: {
                        type: 'line'
                    },
                    series: [{
                        name: 'Usage',
                        data: []
                    }],
                    xaxis: {
                        categories: []
                    },
                    stroke: {
                        curve: 'smooth',
                    },
                    fill: {
                        type: 'gradient',
                    }
                }

                const form_data = {
                    _token: '{{ csrf_token() }}'
                }

                const response = await new Promise((resolve, rejected) => {
                    $.ajax({
                        type: 'POST',
                        url: "{{ route('admin.api.report.yearly') }}",
                        data: form_data,
                        success: resolve,
                        error: rejected,
                    })
                })

                //yearly
                let yearly_axis = []
                let yearly_data = []

                for(let [key,item] of Object.entries(response.data)){
                    yearly_axis.push(key)

                    let sum = 0

                    for(let month of item){
                        sum += month.count
                    }

                    yearly_data.push(sum)
                }

                yearly_options.xaxis.categories = yearly_axis
                yearly_options.series[0].data = yearly_data

                const chart_yearly = new ApexCharts(document.querySelector(".chart-yearly"), yearly_options)
                chart_yearly.render()

                //monthly
                const first_date = 1
                const last_date = moment().daysInMonth()

                const current_month_query = moment().format('MM')
                const current_year_query = moment().format('YYYY')

                let monthly_axis = []
                let monthly_data = []

                const monthly_response = response.data[`${current_year_query}-${current_month_query}`]
                                            ? response.data[`${current_year_query}-${current_month_query}`]
                                            : response.data[`${current_year_query}-${current_month_query - 1}`]

                for(let i = first_date; i <= last_date; i++){
                    const date_txt = `${current_year_query}-${current_month_query}-${i}`
                    const date_obj = moment(date_txt).format('YYYY-MM-DD')

                    monthly_axis.push(date_obj)

                    for(const item of monthly_response){
                        if(date_obj == item.date){
                            monthly_data.push(item.count)
                        }else{
                            monthly_data.push(0)
                        }
                    }

                }

                monthly_options.xaxis.categories = monthly_axis
                monthly_options.series[0].data = monthly_data

                const chart_monthly = new ApexCharts(document.querySelector(".chart-monthly"), monthly_options)
                chart_monthly.render()

            }catch(e){
                console.error(e)
                triggerAlert('swal', 'error', e.responseJSON.message || e.message || 'An error occurred. Please try again.')
            }
        })
    </script>
@endpush