<x-admin-app-layout>
    <div class="grid grid-cols-2 gap-4 xxl:gap-6">

        <div class="col-span-2 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 xxl:grid-cols-4 gap-4 xxl:gap-6">
            @foreach ($state as $item)
                <div class="white-box">
                    <div class="flex justify-between items-center gap-3 mb-1 xxl:mb-5">
                        <div>
                            <p class="s-text mb-1">{{ $item['title'] }}</p>
                            <p class="l-text font-semibold">{{ $item['data'] }}</p>
                        </div>
                        <div class="size-11 rounded-full bg-primary f-center">
                            <i class="{{ $item['icon'] }} text-xl text-white"></i>
                        </div>
                    </div>
                    <a href="{{ $item['url'] }}" class="text-blue font-medium text-xs underline">{{ __('View all') }}</a>
                </div>
            @endforeach
        </div>
        <div class="col-span-2 white-box">
            <div class="flex justify-between items-center gap-4 flex-wrap mb-4 xl:mb-6">
                <p class="m-text font-medium">{{ __('Daily Login Overview (Last 15 days)') }}</p>
            </div>
            <div id="dailyLoginChart"></div>
        </div>
        <div class="col-span-2 lg:col-span-1 white-box">
            <div class="flex justify-between items-center gap-4 flex-wrap mb-4 xl:mb-6">
                <p class="m-text font-medium">{{ __('Contest Participants') }}</p>
            </div>
            <div id="contestParticipantChart"></div>
        </div>
        <div class="col-span-2 lg:col-span-1 white-box">
            <div class="flex justify-between items-center gap-4 flex-wrap mb-4 xl:mb-6">
                <p class="m-text font-medium">{{ __('Quiz Participants') }}</p>
            </div>
            <div id="quizParticipantChart"></div>
        </div>
        <div class="col-span-2 lg:col-span-1 white-box">
            <div class="flex justify-between items-center gap-4 flex-wrap mb-4 xl:mb-6">
                <p class="m-text font-medium">{{ __('Withdrawals') }}</p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 3xl:grid-cols-3 gap-3">
                <div class="flex justify-between items-center n10-box !p-2">
                    <div class="flex items-center gap-4">
                        <div class="size-9 rounded-lg bg-blue text-neutral-0 f-center">
                            <i class="ph ph-hand-coins text-xl"></i>
                        </div>
                        <div>
                            <p class="mb-1 m-text font-medium">{{ amountWithSymbol($withdraw['total_amount']) }}</p>
                            <p class="s-text">{{ __('Total') }}</p>
                        </div>
                    </div>
                    <a href="{{ route('admin.withdrawals.index') }}"
                        class="size-6 rounded-md border border-blue text-blue hover:bg-blue duration-300 hover:text-neutral-0 f-center">
                        <i class="ph ph-arrow-right"></i>
                    </a>
                </div>
                <div class="flex justify-between items-center n10-box !p-2">
                    <div class="flex items-center gap-4">
                        <div class="size-9 rounded-lg bg-success text-neutral-0 f-center">
                            <i class="ph ph-spinner-gap text-xl"></i>
                        </div>
                        <div>
                            <p class="mb-1 m-text font-medium">{{ $withdraw['total_pending'] }}</p>
                            <p class="s-text">{{ __('Pending') }}</p>
                        </div>
                    </div>
                    <a href="{{ route('admin.withdrawals.index', ['status' => \App\Enums\WithdrawStatusEnum::PENDING]) }}"
                        class="size-6 rounded-md border border-blue text-blue hover:bg-blue duration-300 hover:text-neutral-0 f-center">
                        <i class="ph ph-arrow-right"></i>
                    </a>
                </div>
                <div class="flex justify-between items-center n10-box !p-2">
                    <div class="flex items-center gap-4">
                        <div class="size-9 rounded-lg bg-error text-neutral-0 f-center">
                            <i class="ph ph-prohibit text-xl"></i>
                        </div>
                        <div>
                            <p class="mb-1 m-text font-medium">{{ $withdraw['total_rejected'] }}</p>
                            <p class="s-text">{{ __('Rejected') }}</p>
                        </div>
                    </div>
                    <a href="{{ route('admin.withdrawals.index', ['status' => \App\Enums\WithdrawStatusEnum::REJECTED]) }}"
                        class="size-6 rounded-md border border-blue text-blue hover:bg-blue duration-300 hover:text-neutral-0 f-center">
                        <i class="ph ph-arrow-right"></i>
                    </a>
                </div>
            </div>
            <div id="withdrawRef"></div>
        </div>
        <div class="col-span-2 lg:col-span-1 white-box">
            <div class="flex justify-between items-center gap-4 flex-wrap mb-4 xl:mb-6">
                <p class="m-text font-medium">{{ __('Deposits') }}</p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 3xl:grid-cols-3 gap-3">
                <div class="flex justify-between items-center n10-box !p-2">
                    <div class="flex items-center gap-4">
                        <div class="size-9 rounded-lg bg-green-600 text-neutral-0 f-center">
                            <i class="ph ph-bank text-xl"></i>
                        </div>
                        <div>
                            <p class="mb-1 m-text font-medium">{{ amountWithSymbol($deposit['total_amount']) }}</p>
                            <p class="s-text">{{ __('Total') }}</p>
                        </div>
                    </div>
                    <a href="{{ route('admin.deposits.index') }}"
                        class="size-6 rounded-md border border-blue text-blue hover:bg-blue duration-300 hover:text-neutral-0 f-center">
                        <i class="ph ph-arrow-right"></i>
                    </a>
                </div>
                <div class="flex justify-between items-center n10-box !p-2">
                    <div class="flex items-center gap-4">
                        <div class="size-9 rounded-lg bg-warning text-neutral-0 f-center">
                            <i class="ph ph-clock-clockwise text-xl"></i>
                        </div>
                        <div>
                            <p class="mb-1 m-text font-medium">{{ $deposit['total_pending'] }}</p>
                            <p class="s-text">{{ __('Pending') }}</p>
                        </div>
                    </div>
                    <a href="{{ route('admin.deposits.index', ['status' => \App\Enums\DepositStatusEnum::PENDING]) }}"
                        class="size-6 rounded-md border border-blue text-blue hover:bg-blue duration-300 hover:text-neutral-0 f-center">
                        <i class="ph ph-arrow-right"></i>
                    </a>
                </div>
                <div class="flex justify-between items-center n10-box !p-2">
                    <div class="flex items-center gap-4">
                        <div class="size-9 rounded-lg bg-error text-neutral-0 f-center">
                            <i class="ph ph-prohibit text-xl"></i>
                        </div>
                        <div>
                            <p class="mb-1 m-text font-medium">{{ $deposit['total_failed'] }}</p>
                            <p class="s-text">{{ __('Failed') }}</p>
                        </div>
                    </div>
                    <a href="{{ route('admin.deposits.index', ['status' => \App\Enums\DepositStatusEnum::FAILED]) }}"
                        class="size-6 rounded-md border border-blue text-blue hover:bg-blue duration-300 hover:text-neutral-0 f-center">
                        <i class="ph ph-arrow-right"></i>
                    </a>
                </div>
            </div>
            <div id="depositRef"></div>
        </div>
        <div class="col-span-2 lg:col-span-1 white-box">
            <div class="white-box">
                <div class="flex justify-between items-center mb-5 flex-wrap gap-2">
                    <p class="m-text font-medium">{{ __('Login By OS') }}</p>
                    <a href="{{ route('admin.reports.login_log') }}"
                        class="text-xs text-primary underline font-medium">{{ __('View all') }}</a>
                </div>
                <div class="flex justify-center">
                    <div id="osChartRef"></div>
                </div>
            </div>
        </div>
        <div class="col-span-2 lg:col-span-1 white-box">
            <div class="white-box">
                <div class="flex justify-between items-center mb-5 flex-wrap gap-2">
                    <p class="m-text font-medium">{{ __('Login By Browser') }}</p>
                    <a href="{{ route('admin.reports.login_log') }}"
                        class="text-xs text-primary underline font-medium">{{ __('View all') }}</a>
                </div>
                <div class="flex justify-center">
                    <div id="browserChartRef"></div>
                </div>
            </div>
        </div>
    </div>
    @push('scripts')
        @vite('resources/admin/js/dashboard/index.js')
    @endpush
</x-admin-app-layout>
