@extends('layouts.app')

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

    <div class="form-group col-md-1 mb-3 mt-3">
        <div class="form-floating">
            <input type="text" class="form-control" name="year_search" id="year-search" data-action="report-query" maxlength="4" placeholder="Year">
            <label for="year-search">Year</label>
        </div>
    </div>

    <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>

    <h5 class="text-primary">For weekly update slide. (Capture area)</h5>

    <div class="row previous-month-box mb-3 bg-dark d-flex justify-content-center" style="border: solid 1px #000; padding: 12px;">
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    Message usage on <span class="usage-previous-month-txt">...</span>
                </div>
                <div class="card-body">
                    <div class="chart-previous-month"></div>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    Message usage on previous 6 months
                </div>
                <div class="card-body">
                    <div class="chart-previous-six-month"></div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('custom-script')
    <script type="module">
        await initializeReport()

        async function initializeReport(year = null){
            systemLoader()

            //get data from report api
            try{
                const form_data = {
                    _token: '{{ csrf_token() }}',
                    year: year,
                }

                var yearly_response = await new Promise((resolve, rejected) => {
                    $.ajax({
                        type: 'POST',
                        url: "{{ route('admin.api.report.yearly') }}",
                        data: form_data,
                        success: resolve,
                        error: rejected,
                    })
                })
            }catch(e){
                console.error(e)
                triggerAlert('swal', 'error', e.responseJSON.message || e.message || 'An error occurred. Please try again.')
            }

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

                var previous_response = await new Promise((resolve, rejected) => {
                    $.ajax({
                        type: 'POST',
                        url: "{{ route('admin.api.report.previous-month') }}",
                        data: form_data,
                        success: resolve,
                        error: rejected,
                    })
                })
            }catch(e){
                console.error(e)
                triggerAlert('swal', 'error', e.responseJSON.message || e.message || 'An error occurred. Please try again.')
            }

            let yearly_options = {
                chart: {
                    type: 'line',
                    height: 350,
                },
                series: [{
                    name: 'Usage',
                    data: []
                }],
                xaxis: {
                    categories: []
                },
                stroke: {
                    curve: 'smooth',
                },
                fill: {
                    colors: ['#FF5722'],
                },
                tooltip: {
                    y: {
                        formatter: (val, { seriesIndex, dataPointIndex, w }) => {
                            return val.toLocaleString('th-TH', {useGrouping: true})
                        }
                    }
                }
            }

            let monthly_options = {
                chart: {
                    type: 'line',
                    height: 350,
                },
                series: [{
                    name: 'Usage',
                    data: []
                }],
                xaxis: {
                    categories: []
                },
                stroke: {
                    curve: 'smooth',
                },
                fill: {
                    colors: ['#FF5722'],
                },
                tooltip: {
                    y: {
                        formatter: (val, { seriesIndex, dataPointIndex, w }) => {
                            return val.toLocaleString('th-TH', {useGrouping: true})
                        }
                    }
                }
            }

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

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

            for(let [key,item] of Object.entries(yearly_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

            chart_yearly.updateOptions({
                xaxis: {
                    categories: yearly_axis
                }
            })

            chart_yearly.updateSeries([{
                name: 'Usage',
                data: yearly_data,
            }])

            //monthly
            if(!year){
                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 = yearly_response.data[`${current_year_query}-${current_month_query}`]
                                            ? yearly_response.data[`${current_year_query}-${current_month_query}`]
                                            : yearly_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')

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

                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()
            }

            //previous month data
            if(!year){
                const data = previous_response.data

                const previous_month_options = {
                    series: [data.previous_month_usage, data.previous_month_available],
                    labels: ['Usage', 'Available'],
                    chart: {
                        type: 'pie',
                        height: 500
                    },
                    fill: {
                        colors: ['#FF5722', '#198754']
                    },
                    dataLabels: {
                        textAnchor: 'middle',
                        formatter: (val, { seriesIndex, dataPointIndex, w }) => {
                            return [`${Number.parseFloat(val).toFixed(2)}%`, `(${Number.parseInt(w.config.series[seriesIndex]).toLocaleString('th-TH', {useGrouping: true})})`]
                        },
                        style: {
                            fontSize: '20px',
                        },
                    },
                    tooltip: {
                        y: {
                            formatter: (val, { seriesIndex, dataPointIndex, w }) => {
                                return val.toLocaleString('th-TH', {useGrouping: true})
                            }
                        }
                    }
                }

                //previus 6 month data

                //remap data
                let previous_axis = []
                let previous_data = []

                for(let [month, item] of Object.entries(data.previous_6_month_data)){
                    previous_axis.push(month)

                    let sum = 0

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

                    previous_data.push({
                        x: 'Usage',
                        y: sum,
                        goals: [
                            {
                            name: 'Target',
                            value: 35000,
                            strokeColor: '#775DD0'
                            }
                        ]
                    })
                }

                const six_month_options = {
                    series: [{
                        name: 'Usage',
                        data: previous_data,
                    }],
                    chart: {
                        type: 'bar',
                        height: 500
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '55%',
                            borderRadius: 5,
                            borderRadiusApplication: 'end'
                        },
                    },
                    xaxis: {
                        categories: previous_axis,
                    },
                    fill: {
                        opacity: 1,
                        colors: ['#FF5722']
                    },
                    tooltip: {
                        y: {
                            formatter: (val, { seriesIndex, dataPointIndex, w }) => {
                                return val.toLocaleString('th-TH', {useGrouping: true})
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        formatter: (val, { seriesIndex, dataPointIndex, w }) => {
                            let message = val.toLocaleString('th-TH', {useGrouping: true})
                            let over_commit = ''

                            if(val > 35000){
                                let diff = val - 35000
                                over_commit = `(+${diff.toLocaleString('th-TH', {useGrouping: true})})`
                            }

                            return [message, over_commit]
                        },
                        style: {
                            fontSize: '20px',
                        },
                        dropShadow: {
                            enabled: true,
                            top: 1,
                            left: 1,
                            blur: 1,
                            color: '#000',
                            opacity: 0.45
                        },
                    },
                    legends: {
                        show: true,
                    },
                }

                $('.previous-month-box').find('.usage-previous-month-txt').html(data.previous_month_label)

                const chart_previous_month = new ApexCharts(document.querySelector(".chart-previous-month"), previous_month_options)
                chart_previous_month.render()

                const chart_previous_six_month = new ApexCharts(document.querySelector(".chart-previous-six-month"), six_month_options)
                chart_previous_six_month.render()
            }

            systemLoader(false)
        }

        $(document).on('change', '[data-action="report-query"]', async () => {
            const year = $('input[name="year_search"]').val()
            const pattern = /\D/

            if(pattern.test(year)){
                triggerAlert('swal', 'error', 'Please enter the year as 4-digit in AD only (eg. 2025)')

                $('input[name="year_search"]').val('')
                $('input[name="year_search"]').addClass('is-invalid')
            }else{
                $('input[name="year_search"]').removeClass('is-invalid')
                await initializeReport(year)
            }
        })
    </script>
@endpush