@section('title', 'Panel - Stats')
@php
    while ($stats == null) {
        echo "Waiting for stats...";
    }
    $options = [];
    $payments = $stats["global"]["payment_gateway"];
    $hasStripe = false;
    foreach ($payments as $key => $payment) {
        if (str_contains($key, "stripe") && $hasStripe == false) {
            $hasStripe = true;
            array_push($options, "All Stripe");
        }
        array_push($options, $key);
    }
@endphp
@section('content')
    <main class="p-4">
        <div class="mb-8">
            <h1 class="font-bold text-4xl">Stats</h1>
            <p class="text-neutral-400">
                Countries stats
            </p>
        </div>
        <div class="flex flex-col sm:flex-row items-center justify-between gap-4 sm:gap-8">
            <div class="flex w-full sm:w-auto flex-col sm:flex-row items-center gap-4 *:w-full sm:*:w-auto">
                <x-input name="range" />
                <x-button class="select-range" data-range="today" label="Today" variant="secondary" />
                <x-button class="select-range" data-range="yesterday" label="Yesterday" variant="secondary" />
                <x-button class="select-range" data-range="last7Days" label="Last 7 Days" variant="secondary" />
                <x-select class="select-range" data-range="gateway" variant="secondary" placeholder="Gateway" :options="$options"/>
                <x-button id="refresh" label="Refresh" />
            </div>
            <div class="flex w-full sm:w-auto flex-col sm:flex-row items-center gap-4 *:w-full sm:*:w-auto">
                <x-a label="Panel bot" href="{{ route('panelbot.index') }}" />
                <x-a label="Doc. Manuales" href="{{ route('docmanual.index') }}" />
                <x-a label="Tailoredpay" href="" />
                <x-a label="Go to Documents" href="" />
                <x-a class="ml-2" label="Config" href="" />
            </div>
        </div>
        <div class="mt-12">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-8">
                {{-- Global stats - Money --}}
                <div class="relative bg-neutral-800 rounded-2xl p-4 shadow">
                    <h3 class="text-sm font-bold text-neutral-400 uppercase mb-1">
                        Global - Money
                    </h3>
                    <div class="grid grid-cols-2 gap-4">
                            <p class="text-2xl font-bold mt-2">
                                {{ $stats['global']['moneyInvoiced'] }} USD
                                @if ($stats['global']['moneyRefunded'] > 0)
                                    <span class="text-red-500">- {{ $stats['global']['moneyRefunded'] }} USD</span>
                                @endif
                            </p>
                            @if ($stats['global']['moneyRefunded'] > 0)
                            <p class="text-2xl font-bold">
                                Total
                                @if($stats['global']['profit'] <= 0)
                                    <span class="text-red-500">{{$stats['global']['profit']}} USD</span>
                                @else
                                    <span class="text-green-500">{{$stats['global']['profit']}} USD</span>
                                @endif
                            </p>
                            @endif
                    </div>
                    @if ($from->isToday() && $to->isToday())
                        <p>
                            <span @class([
                                'text-sm',
                                'text-green-500' => $stats['global']['today']['difference'] > 0,
                                'text-red-500' => $stats['global']['today']['difference'] < 0,
                                'text-neutral-400' => $stats['global']['today']['difference'] === 0,
                            ])>{{ $stats['global']['today']['difference'] }}%</span>
                            <small class="text-xs">compared to yesterday at this time</small>
                        </p>
                    @endif
                    <p class="text-2xl mt-2">
                        {{ $stats['global']['paid'] }} payments
                        @if ($stats['global']['refunded'] > 0)
                            <span class="text-red-500"> {{ $stats['global']['refunded'] }} refunds</span>
                        @endif
                    </p>
                    @if ($from->isToday() && $to->isToday())
                        <p>
                            <span class="text-sm">{{ $stats['global']['yesterday']['paid'] }}</span>
                            <small class="text-xs">payments yesterday at this time.
                                {{ $stats['global']['yesterday']['moneyInvoiced'] }}
                                USD</small>
                        </p>
                    @endif
                    <div class="absolute -top-4 -right-4">
                        <img class="size-full" src="{{ asset('images/earth.png') }}" alt="Global">
                    </div>
                </div>
                {{-- Global stats - Payment Gateway --}}
                <div class="relative bg-neutral-800 rounded-2xl p-4 shadow">
                    <h3 class="text-sm font-bold text-neutral-400 uppercase mb-1">
                        Global - Payment Gateway
                    </h3>
                    @foreach ($stats['global']['payment_gateway'] as $payment_gateway => $value)
                        @if ($gateway == 'all stripe' && str_contains($payment_gateway, 'stripe'))
                            <p class="text-2xl">
                                {{ $value }} {{ $payment_gateway }}
                            </p>
                        @elseif ($gateway == null || $gateway == 'all' || $gateway == $payment_gateway)
                            <p class="text-2xl">
                                {{ $value }} {{ $payment_gateway }}
                            </p>
                        @endif
                    @endforeach
                    <div class="absolute -top-4 -right-4">
                        <img class="size-full" src="{{ asset('images/earth.png') }}" alt="Global">
                    </div>
                </div>
                <div></div>
                <div class="hidden lg:block"></div>
                {{-- Stats - Country --}}
                @foreach ($stats['countries'] as $iso => $value)
                    <x-country-card :iso="$iso" :value="$value" :stats="$stats" :from="$from" :to="$to" />
                @endforeach
            </div>
            <div class="mt-12">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-8">
                    <div id="statusChart" class="rounded-2xl bg-neutral-800 shadow p-4"></div>
                    <div id="conversionRateChart" class="rounded-2xl bg-neutral-800 shadow p-4"></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;
            let url = new URL(window.location.href);
            function hasQueryParam(param) {
                console.log("Entra en has query param");
                return url.searchParams.has(param);
            }
            function setParam(param, value) {
                url.searchParams.set(param, value);
                window.history.pushState({}, '', url);
            }
            function removeParam(param) {
                url.searchParams.delete(param);
                window.history.pushState({}, '', url);
            }
            if(hasQueryParam("gateway")){
                const gateway = url.searchParams.get("gateway");
                const select = document.querySelector("select.select-range");
                for (let i = 0; i < select.options.length; i++) {
                    if (select.options[i].text.toLowerCase() === gateway) {
                        select.selectedIndex = i;
                    }
                }
            }
            // 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,
                },
                plugins: [
                    window.easepick_AmpPlugin,
                    window.easepick_RangePlugin,
                    window.easepick_KbdPlugin,
                ],
                setup(picker) {
                    picker.ui.container.dataset.theme = 'dark';
                }
            });
            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;
            });
            // 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.querySelectorAll("button.select-range").forEach((button) => {
                button.addEventListener("click", (event) => {
                    const range = event.target.dataset.range;
                    switch (range) {
                        case "today":
                            const fromToday = DateTime.now().setZone("UTC").toISODate();
                            const toToday = DateTime.now().setZone("UTC").toISODate();
                            window.location.href = "{{ route('stats.index') }}?from=" + fromToday +
                                "&to=" + toToday;
                            break;
                        case "yesterday":
                            const fromYesterday = DateTime.now().setZone("UTC").minus({
                                days: 1
                            }).toISODate();
                            const toYesterday = DateTime.now().setZone("UTC").minus({
                                days: 1
                            }).toISODate();
                            window.location.href = "{{ route('stats.index') }}?from=" +
                                fromYesterday + "&to=" + toYesterday;
                            break;
                        case "last7Days":
                            const fromLast7Days = DateTime.now().setZone("UTC").minus({
                                days: 7
                            }).toISODate();
                            const toLast7Days = DateTime.now().setZone("UTC").toISODate();
                            window.location.href = "{{ route('stats.index') }}?from=" +
                                fromLast7Days + "&to=" + toLast7Days;
                            break;
                    }
                });
            });
            document.querySelector("select.select-range").addEventListener("change", (event) => {
                let range = parseInt(event.target.value);
                if(isNaN(range)){
                    range = -1
                }
                switch (range) {
                    case -1:
                        if(hasQueryParam("gateway")){
                            removeParam("gateway")
                        }
                        break;
                    default:
                        setParam("gateway", event.target.options[range+1].text.toLowerCase());
                        break;
                }
                window.location.href = window.location.href;
            });
            // Charts
            const stats = @json($stats);
            const countries = @json(config('countries'));
            const defaultApexChartsOptions = {
                stroke: {
                    colors: ['#262626']
                },
                fill: {
                    type: 'gradient',
                },
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    theme: 'dark'
                },
                theme: {
                    mode: 'dark'
                }
            }
            const noDataChart = (chart, series) => {
                if (series.length === 0 || series.every(item => item === 0)) {
                    chart.updateOptions({
                        series: [1],
                        labels: ['No data'],
                        colors: ['#404040'],
                        fill: {
                            opacity: 0.5
                        }
                    });
                }
            }
            const generateStatusChart = () => {
                const series = [ /*0, */ 0, 0, 0];
                const labels = [ /*'Draft', */ 'Draft With Data', 'Pending Payment', 'Paid'];
                let keys = Object.keys(stats.global);
                for (let i = 0; i < keys.length; i++) {
                    const key = keys[i];
                    /* if (key === 'draft') {
                        series[0] = stats.global[key];
                    } else */
                    if (key === 'draftWithData') {
                        series[0] = stats.global[key];
                    } else if (key === 'pendingPayment') {
                        series[1] = stats.global[key];
                    } else if (key === 'paid') {
                        series[2] = stats.global[key];
                    }
                }
                const chart = new ApexCharts(document.querySelector("#statusChart"), {
                    ...defaultApexChartsOptions,
                    series,
                    chart: {
                        type: 'pie',
                        width: '100%',
                    },
                    labels,
                    title: {
                        text: 'Status',
                        align: 'center',
                        style: {
                            fontSize: '16px',
                            fontWeight: 'bold'
                        }
                    },
                });
                chart.render();
                noDataChart(chart, series);
            };
            const generateConversionRateChart = () => {
                const series = [{
                    name: 'Tasa de Conversión',
                    data: []
                }];
                const labels = [];
                const keys = Object.keys(stats.countries);
                for (let i = 0; i < keys.length; i++) {
                    const key = keys[i];
                    const value = stats.countries[key];
                    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[key].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: 'bold'
                        }
                    }
                });
                chart.render();
                noDataChart(chart, series);
            };
            generateStatusChart();
            generateConversionRateChart();
        });
    </script>
@endpush