@extends('layouts.base')

@section('title', 'Panel - Stats')

@section('content')
    <main class="flex-grow w-full min-h-dvh flex items-center justify-center m-auto mt-8">
        <div class="bg-white container h-full sm:flex-1 p-4 rounded-lg shadow-sm">
            <div class="mb-8">
                <h1 class="text-4xl font-semibold">Stats</h1>
                <p class="text-xl">Countries stats</p>
            </div>

            <div class="mb-4 sm:mb-8">
                <div class="mb-2 font-semibold text-gray-800">Range</div>

                <div class="flex gap-4 items-center">
                    <div class="flex-1 *:m-0 [&_label]:hidden">
                        <x-input name="range" />
                    </div>

                    <x-button id="refresh" label="Refresh" />
                </div>

                <div class="flex flex-col sm:flex-row gap-4 mt-4 *:px-4 *:py-2 *:text-sm">
                    <x-button id="rangeToday" label="Today" variant="secondary" />

                    <x-button id="rangeYesterday" label="Yesterday" variant="secondary" />

                    <x-button id="rangeLas7Days" label="Last 7 Days" variant="secondary" />
                </div>
            </div>

            <div class="bg-gray-50 rounded-lg p-4 sm:p-8">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-8">
                    <div class="relative bg-white rounded-lg p-4 shadow-sm">
                        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-1">
                            Global
                        </h3>

                        <p class="text-2xl font-semibold mt-2">
                            {{ $stats['global']['moneyInvoiced'] }} USD
                        </p>

                        @if ($from->isToday() && $to->isToday())
                            <p>
                                <span @class([
                                    'text-sm',
                                    'text-green-500' => $stats['percentageDifference'] > 0,
                                    'text-red-500' => $stats['percentageDifference'] < 0,
                                    'text-gray-500' => $stats['percentageDifference'] === 0,
                                ])>{{ $stats['percentageDifference'] }}%</span>
                                <small class="text-xs">compared to yesterday at this time</small>
                            </p>
                        @endif

                        <p class="text-lg mt-1">
                            {{ $stats['global']['paid'] }} payments
                        </p>

                        @if ($from->isToday() && $to->isToday())
                            <p>
                                <span class="text-sm">{{ $stats['yesterdayPayments'] }}</span>
                                <small class="text-xs">payments yesterday at this time. {{ $stats['yesterdayEarnings'] }}
                                    USD</small>
                            </p>
                        @endif

                        <div class="absolute top-1/2 right-4 -translate-y-1/2">
                            <img class="w-14 h-14" src="{{ asset('images/earth.png') }}" alt="Global">
                        </div>
                    </div>

                    <div></div>
                    <div></div>

                    @foreach ($stats as $iso2 => $value)
                        @continue(in_array($iso2, ['global', 'last7Days', 'yesterdayByHour', 'todayByHour', 'percentageDifference', 'yesterdayPayments', 'yesterdayEarnings']))

                        <div class="relative bg-white rounded-lg p-4 shadow-sm">
                            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-1">
                                {{ config('countries')[$iso2]['name'] }}
                            </h3>

                            <p class="text-2xl font-semibold mt-2">
                                {{ $value['moneyInvoiced'] }} USD
                            </p>

                            <p class="text-lg mt-1">
                                {{ $value['paid'] }} payments
                            </p>

                            <div class="absolute top-1/2 right-4 -translate-y-1/2">
                                <x-icon name="flag-country-{{ strtolower($iso2) }}" class="w-16 h-16" />
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-12">
                    <h2 class="text-2xl font-semibold mb-4">Global</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-8">
                        <div id="planChart" class="rounded-lg bg-white shadow-sm p-4"></div>

                        <div id="pvrChart" class="rounded-lg bg-white shadow-sm p-4"></div>

                        <div id="mIvsMrChart" class="rounded-lg bg-white shadow-sm p-4"></div>
                    </div>
                </div>

                <div class="mt-12">
                    <h2 class="text-2xl font-semibold mb-4">By Country</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-8">
                        <div id="paymentChart" class="rounded-lg bg-white shadow-sm p-4"></div>

                        <div id="moneyInvoicedChart" class="rounded-lg bg-white shadow-sm p-4"></div>

                        <div id="refundedChart" class="rounded-lg bg-white shadow-sm p-4"></div>

                        <div id="moneyRefundedChart" class="rounded-lg bg-white shadow-sm p-4"></div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-8 md:col-span-2 lg:col-span-3">
                            <div id="statusChart" class="rounded-lg bg-white shadow-sm p-4"></div>

                            <div id="conversionRateChart" class="rounded-lg bg-white shadow-sm p-4"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-12 bg-gray-50 rounded-lg p-4 sm:p-8">
                <div>
                    <h2 class="text-2xl font-semibold mb-4">Last 7 Days</h2>

                    <div id="moneyInvoicedLast7DaysChart" class="rounded-lg bg-white shadow-sm p-4 max-w-4xl"></div>
                </div>

                <div class="mt-12" id="moneyInvoicedComparisonYesterdayTodayContainer">
                    <h2 class="text-2xl font-semibold mb-4">Comparison yesterday and today (hour by hour)</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-8">
                        @foreach ($stats as $iso2 => $value)
                            @continue(in_array($iso2, ['global', 'last7Days', 'yesterdayByHour', 'todayByHour', 'percentageDifference', 'yesterdayPayments', 'yesterdayEarnings']))

                            <div id="moneyInvoicedComparisonYesterdayTodayChart-{{ $iso2 }}"
                                class="rounded-lg bg-white shadow-sm p-4 max-w-4xl"></div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const DateTime = luxon.DateTime;

            // Utils
            const roundedNumber = (number) => {
                return Math.round((number + Number.EPSILON) * 100) / 100;
            }

            // Range
            const picker = new easepick.create({
                element: "#range",
                css: [
                    "https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css"
                ],
                zIndex: 10,
                format: "YYYY-MM-DD",
                readonly: false,
                AmpPlugin: {
                    dropdown: {
                        months: true,
                        years: true,
                        minYear: 2024,
                        maxYear: 2025
                    },
                    resetButton: true,
                    darkMode: false
                },
                plugins: [
                    window.easepick_AmpPlugin,
                    window.easepick_RangePlugin,
                    window.easepick_KbdPlugin,
                ]
            });

            picker.setStartDate(DateTime.fromISO("{{ $from->copy()->toISOString() }}").setZone("UTC").toISO());
            picker.setEndDate(DateTime.fromISO("{{ $to->copy()->toISOString() }}").setZone("UTC").toISO());

            picker.on("select", (event) => {
                const from = event.detail.start.toISOString().split("T")[0];
                const to = event.detail.end.toISOString().split("T")[0];

                window.location.href = "{{ route('stats.index') }}?from=" + from + "&to=" + to;
            });

            const easepickCalendarIcons = document.querySelectorAll("span[style]");

            for (const easepickCalendarIcon of easepickCalendarIcons) {
                const nextSibling = easepickCalendarIcon.nextSibling;

                if (nextSibling && nextSibling instanceof HTMLSpanElement && nextSibling.classList.contains(
                        "easepick-wrapper")) {
                    easepickCalendarIcon.style.display = "none";
                }
            }

            // Refresh
            document.getElementById("refresh").addEventListener("click", () => {
                const from = picker.getStartDate().toISOString().split("T")[0];
                const to = picker.getEndDate().toISOString().split("T")[0];

                window.location.href = "{{ route('stats.index') }}?from=" + from + "&to=" + to;
            });

            document.getElementById("rangeToday").addEventListener("click", () => {
                const from = DateTime.now().setZone("UTC").toISODate();
                const to = DateTime.now().setZone("UTC").toISODate();

                window.location.href = "{{ route('stats.index') }}?from=" + from + "&to=" + to;
            });

            document.getElementById("rangeYesterday").addEventListener("click", () => {
                const from = DateTime.now().setZone("UTC").minus({
                    days: 1
                }).toISODate();
                const to = DateTime.now().setZone("UTC").minus({
                    days: 1
                }).toISODate();

                window.location.href = "{{ route('stats.index') }}?from=" + from + "&to=" + to;
            });

            document.getElementById("rangeLas7Days").addEventListener("click", () => {
                const from = DateTime.now().setZone("UTC").minus({
                    days: 7
                }).toISODate();
                const to = DateTime.now().setZone("UTC").toISODate();

                window.location.href = "{{ route('stats.index') }}?from=" + from + "&to=" + to;
            });

            // Charts
            const stats = @json($stats);
            const countries = @json(config('countries'));

            const defaultApexChartsOptions = {
                stroke: {
                    colors: ['#fff']
                },
                fill: {
                    type: 'gradient',
                },
                legend: {
                    position: 'bottom'
                }
            }

            const ignoreKeys = ["global", "last7Days", "yesterdayByHour", "todayByHour", "percentageDifference",
                "yesterdayPayments", "yesterdayEarnings"
            ];

            const noDataChart = (chart, series) => {
                if (series.length === 0 || series.every(item => item === 0)) {
                    chart.updateOptions({
                        series: [1],
                        labels: ['No data'],
                        colors: ['#6b7280'],
                        fill: {
                            opacity: 0.5
                        }
                    });
                }
            }

            const generateMoneyInvoicedLast7DaysChart = () => {
                const statsLast7Days = stats["last7Days"];

                const dates = Object.keys(statsLast7Days);
                const iso2 = Object.keys(statsLast7Days[dates[0]]);

                const series = iso2.map((iso2) => {
                    return {
                        name: countries[iso2].name,
                        data: dates.map((date) => statsLast7Days[date][iso2]?.moneyInvoiced || 0)
                    };
                });

                const chart = new ApexCharts(document.querySelector("#moneyInvoicedLast7DaysChart"), {
                    ...defaultApexChartsOptions,
                    series,
                    stroke: {
                        width: 2
                    },
                    chart: {
                        type: 'area',
                        width: '100%',
                    },
                    xaxis: {
                        categories: dates
                    },
                    title: {
                        text: 'Money Invoiced Last 7 Days',
                        align: 'center',
                        style: {
                            fontSize: '16px',
                            fontWeight: 'semibold'
                        }
                    },
                    tooltip: {
                        y: {
                            formatter: function(val, opts) {
                                const serie = series[opts.seriesIndex];
                                const iso2 = Object.keys(countries).find(key => countries[key]
                                    .name === serie.name);
                                const date = dates[opts.dataPointIndex];

                                const paid = statsLast7Days[date][iso2]?.paid || 0;
                                const draftWithData = statsLast7Days[date][iso2]?.draftWithData ||
                                    0;
                                const pendingPayment = statsLast7Days[date][iso2]?.pendingPayment ||
                                    0;

                                let conversionRate = roundedNumber(paid / (paid + draftWithData +
                                    pendingPayment) * 100);

                                if (Number.isNaN(conversionRate)) {
                                    conversionRate = 0;
                                }

                                return "$" + val.toFixed(2) + " - CR " + conversionRate + "%";
                            }
                        }
                    }
                });

                chart.render();
            }

            generateMoneyInvoicedLast7DaysChart();

            const generateMoneyInvoicedComparisonYesterdayToday = () => {
                const statsYesterdayByHour = stats["yesterdayByHour"];
                const statsTodayByHour = stats["todayByHour"];

                const hours = Object.keys(statsYesterdayByHour).sort((a, b) => Number(a) - Number(b));
                const iso2 = Object.keys(statsYesterdayByHour[hours[0]]);

                iso2.forEach(country => {
                    const dataYesterday = hours.map((hour) => statsYesterdayByHour[hour][country]
                        ?.moneyInvoiced || 0);
                    const dataToday = hours.map((hour) => statsTodayByHour[hour][country]
                        ?.moneyInvoiced || 0);

                    const hasRevenue = dataYesterday.some(value => value > 0) || dataToday.some(value =>
                        value > 0);

                    if (!hasRevenue) {
                        document.querySelector(`#moneyInvoicedComparisonYesterdayTodayChart-${country}`)
                            ?.remove();

                        return;
                    }

                    const series = [{
                        name: 'Yesterday',
                        data: dataYesterday
                    }, {
                        name: 'Today',
                        data: dataToday
                    }];

                    const chart = new ApexCharts(document.querySelector(
                        `#moneyInvoicedComparisonYesterdayTodayChart-${country}`), {
                        ...defaultApexChartsOptions,
                        series,
                        stroke: {
                            width: 2
                        },
                        chart: {
                            type: 'area',
                            width: '100%',
                        },
                        xaxis: {
                            categories: hours
                        },
                        title: {
                            text: countries[country].name,
                            align: 'center',
                            style: {
                                fontSize: '16px',
                                fontWeight: 'semibold'
                            }
                        },
                        tooltip: {
                            y: {
                                formatter: function(val) {
                                    return "$" + val.toFixed(2);
                                }
                            }
                        }
                    });

                    chart.render();

                    noDataChart(chart, series);
                });
            }

            generateMoneyInvoicedComparisonYesterdayToday();

            const generatePlanChart = () => {
                const series = [0, 0];
                const labels = ['Normal', 'Ultra Fast'];

                for (const [iso2, value] of Object.entries(stats)) {
                    const normal = Number(value.normal);
                    const ultraFast = Number(value.ultraFast);

                    if (ignoreKeys.includes(iso2) || Number.isNaN(normal) || Number.isNaN(ultraFast)) {
                        continue;
                    }

                    series[0] += normal;
                    series[1] += ultraFast;
                }

                const chart = new ApexCharts(document.querySelector("#planChart"), {
                    ...defaultApexChartsOptions,
                    series,
                    chart: {
                        type: 'pie',
                        width: '100%',
                    },
                    labels,
                    title: {
                        text: 'Normal vs Ultra Fast',
                        align: 'center',
                        style: {
                            fontSize: '16px',
                            fontWeight: 'semibold'
                        }
                    }
                });

                chart.render();

                noDataChart(chart, series);
            }

            generatePlanChart();

            const generatePvrChart = () => {
                const series = [0, 0];
                const labels = ['Payments', 'Refunds'];

                for (const [iso2, value] of Object.entries(stats)) {
                    if (ignoreKeys.includes(iso2)) {
                        continue;
                    }

                    series[0] += value.paid - value.refunded;
                    series[1] += value.refunded;
                }

                const chart = new ApexCharts(document.querySelector("#pvrChart"), {
                    ...defaultApexChartsOptions,
                    series,
                    chart: {
                        type: 'pie',
                        width: '100%',
                    },
                    labels,
                    title: {
                        text: 'Payments vs Refunds',
                        align: 'center',
                        style: {
                            fontSize: '16px',
                            fontWeight: 'semibold'
                        }
                    }
                });

                chart.render();

                noDataChart(chart, series);
            }

            generatePvrChart();

            const generateMIvsMRChart = () => {
                const series = [0, 0];
                const labels = ['Money Invoiced', 'Money Refunded'];

                for (const [iso2, value] of Object.entries(stats)) {
                    if (ignoreKeys.includes(iso2)) {
                        continue;
                    }

                    series[0] += value.moneyInvoiced;
                    series[1] += value.moneyRefunded;
                }

                series[0] = roundedNumber(series[0]);
                series[1] = roundedNumber(series[1]);

                const chart = new ApexCharts(document.querySelector("#mIvsMrChart"), {
                    ...defaultApexChartsOptions,
                    series,
                    chart: {
                        type: 'pie',
                        width: '100%',
                    },
                    labels,
                    title: {
                        text: 'Money Invoiced vs Money Refunded',
                        align: 'center',
                        style: {
                            fontSize: '16px',
                            fontWeight: 'semibold'
                        }
                    }
                });

                chart.render();

                noDataChart(chart, series);
            };

            generateMIvsMRChart();

            const generateMoneyInvoicedChart = () => {
                const series = [];
                const labels = [];

                for (const [iso2, value] of Object.entries(stats)) {
                    if (ignoreKeys.includes(iso2)) {
                        continue;
                    }

                    series.push(roundedNumber(value.moneyInvoiced));
                    labels.push(countries[iso2].name);
                }

                const chart = new ApexCharts(document.querySelector("#moneyInvoicedChart"), {
                    ...defaultApexChartsOptions,
                    series,
                    chart: {
                        type: 'donut',
                        width: '100%',
                    },
                    labels,
                    title: {
                        text: 'Money Invoiced',
                        align: 'center',
                        style: {
                            fontSize: '16px',
                            fontWeight: 'semibold'
                        }
                    }
                });

                chart.render();

                noDataChart(chart, series);
            };

            generateMoneyInvoicedChart();

            const generatePaymentChart = () => {
                const series = [];
                const labels = [];

                for (const [iso2, value] of Object.entries(stats)) {
                    if (ignoreKeys.includes(iso2)) {
                        continue;
                    }

                    series.push(value.paid);
                    labels.push(countries[iso2].name);
                }

                const chart = new ApexCharts(document.querySelector("#paymentChart"), {
                    ...defaultApexChartsOptions,
                    series,
                    chart: {
                        type: 'donut',
                        width: '100%',
                    },
                    labels,
                    title: {
                        text: 'Payments',
                        align: 'center',
                        style: {
                            fontSize: '16px',
                            fontWeight: 'semibold'
                        }
                    }
                });

                chart.render();

                noDataChart(chart, series);
            }

            generatePaymentChart();

            const generateMoneyRefundedChart = () => {
                const series = [];
                const labels = [];

                for (const [iso2, value] of Object.entries(stats)) {
                    if (ignoreKeys.includes(iso2)) {
                        continue;
                    }

                    series.push(roundedNumber(value.moneyRefunded));
                    labels.push(countries[iso2].name);
                }

                const chart = new ApexCharts(document.querySelector("#moneyRefundedChart"), {
                    ...defaultApexChartsOptions,
                    series,
                    chart: {
                        type: 'donut',
                        width: '100%',
                    },
                    labels,
                    title: {
                        text: 'Money Refunded',
                        align: 'center',
                        style: {
                            fontSize: '16px',
                            fontWeight: 'semibold'
                        }
                    }
                });

                chart.render();

                noDataChart(chart, series);
            };

            generateMoneyRefundedChart();

            const generateRefundedChart = () => {
                const series = [];
                const labels = [];

                for (const [iso2, value] of Object.entries(stats)) {
                    if (ignoreKeys.includes(iso2)) {
                        continue;
                    }

                    series.push(value.refunded);
                    labels.push(countries[iso2].name);
                }

                const chart = new ApexCharts(document.querySelector("#refundedChart"), {
                    ...defaultApexChartsOptions,
                    series,
                    chart: {
                        type: 'donut',
                        width: '100%',
                    },
                    labels,
                    title: {
                        text: 'Refunded',
                        align: 'center',
                        style: {
                            fontSize: '16px',
                            fontWeight: 'semibold'
                        }
                    }
                });

                chart.render();

                noDataChart(chart, series);
            }

            generateRefundedChart();

            const generateStatusChart = () => {
                const series = [0, 0, 0, 0, 0];
                const labels = ['Draft', 'Draft With Data', 'Pending Payment', 'Paid', 'Refunded'];

                for (const [iso2, value] of Object.entries(stats)) {
                    if (ignoreKeys.includes(iso2)) {
                        continue;
                    }

                    series[0] += value.draft;
                    series[1] += value.draftWithData;
                    series[2] += value.pendingPayment;
                    series[3] += value.paid;
                    series[4] += value.refunded;
                }

                const chart = new ApexCharts(document.querySelector("#statusChart"), {
                    ...defaultApexChartsOptions,
                    series,
                    chart: {
                        type: 'pie',
                        width: '100%',
                    },
                    labels,
                    title: {
                        text: 'Status',
                        align: 'center',
                        style: {
                            fontSize: '16px',
                            fontWeight: 'semibold'
                        }
                    }
                });

                chart.render();

                noDataChart(chart, series);
            };

            generateStatusChart();

            const generateConversionRateChart = () => {
                const series = [{
                    name: 'Tasa de Conversi¨Žn',
                    data: []
                }];
                const labels = [];

                for (const [iso2, value] of Object.entries(stats)) {
                    if (ignoreKeys.includes(iso2)) {
                        continue;
                    }

                    let conversionRate = roundedNumber(value.paid / (value.paid + value.draftWithData + value
                        .pendingPayment) * 100);

                    if (Number.isNaN(conversionRate)) {
                        conversionRate = 0;
                    }

                    series[0].data.push(conversionRate);
                    labels.push(countries[iso2].name);
                }

                const chart = new ApexCharts(document.querySelector("#conversionRateChart"), {
                    ...defaultApexChartsOptions,
                    series,
                    chart: {
                        type: 'bar',
                        width: '100%',
                    },
                    plotOptions: {
                        bar: {
                            horizontal: true,
                        }
                    },
                    labels,
                    title: {
                        text: 'Conversion Rate',
                        align: 'center',
                        style: {
                            fontSize: '16px',
                            fontWeight: 'semibold'
                        }
                    }
                });

                chart.render();

                noDataChart(chart, series);
            };

            generateConversionRateChart();
        });
    </script>
@endpush