@extends('layouts.app')
@section('title', 'Dashboard')
@section('content')
<div class="w-full space-y-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4 items-center">
        <div class="rounded-2xlx border border-neutral-200 bg-white p-6 shadow-soft">
            <div class="flex items-center gap-3">
                <div class="w-11 h-11 rounded-lg bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/30">
                    <i class="ri-group-line text-white text-lg drop-shadow-sm"></i>
                </div>
                <div class="flex-1 font-bold">
                    <div class="mt-1 text-2xl font-bold" id="total_users">0</div>
                    <div class="mt-1 text-xs text-blue-600 uppercase">Tổng Thành Viên</div>
                </div>
            </div>
        </div>
        <div class="rounded-2xlx border border-neutral-200 bg-white p-6 shadow-soft">
            <div class="flex items-center gap-3">
                <div class="w-11 h-11 rounded-lg bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg shadow-green-500/30">
                    <i class="ri-bank-line text-white text-lg drop-shadow-sm"></i>
                </div>
                <div class="flex-1 font-bold">
                    <div class="mt-1 text-2xl font-bold" id="total_banks">0</div>
                    <div class="mt-1 text-xs text-green-600 uppercase">Tổng Tài Khoản Bank Ảo</div>
                </div>
            </div>
        </div>
        <div class="rounded-2xlx border border-neutral-200 bg-white p-6 shadow-soft">
            <div class="flex items-center gap-3">
                <div class="w-11 h-11 rounded-lg bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center shadow-lg shadow-purple-500/30">
                    <i class="ri-calendar-check-line text-white text-lg drop-shadow-sm"></i>
                </div>
                <div class="flex-1 font-bold">
                    <div class="mt-1 text-2xl font-bold" id="today_deposits">0₫</div>
                    <div class="mt-1 text-xs text-purple-600 uppercase">Doanh Thu Hôm Nay</div>
                </div>
            </div>
        </div>
        <div class="rounded-2xlx border border-neutral-200 bg-white p-6 shadow-soft">
            <div class="flex items-center gap-3">
                <div class="w-11 h-11 rounded-lg bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center shadow-lg shadow-orange-500/30">
                    <i class="ri-wallet-3-line text-white text-lg drop-shadow-sm"></i>
                </div>
                <div class="flex-1 font-bold">
                    <div class="mt-1 text-2xl font-bold" id="transfer_fee">0₫</div>
                    <div class="mt-1 text-xs text-orange-600 uppercase">Phí Chuyển Khoản</div>
                </div>
            </div>
        </div>
    </div>
    <div class="grid grid-cols-1 gap-4">
        <div class="rounded-2xlx border border-neutral-200 bg-white p-4 shadow-soft min-w-0">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2">
                    <button id="tab_deposits" class="tab_button active px-4 py-2 rounded-lg font-semibold text-xs transition-all bg-heybank text-white shadow-lg" data-tab="deposits">
                        <i class="ri-line-chart-line"></i> Thống Kê Doanh Thu
                    </button>
                    <button id="tab_users" class="tab_button px-4 py-2 rounded-lg font-semibold text-xs transition-all bg-neutral-100 text-neutral-600 hover:bg-neutral-200" data-tab="users">
                        <i class="ri-user-line"></i> Thống Kê Thành Viên
                    </button>
                </div>
            </div>
            <div id="stats_deposits" class="stats_panel">
                <div class="flex flex-wrap gap-2 sm:gap-3 mb-3">
                    <div class="flex-1 min-w-[90px] sm:min-w-[120px] max-w-full rounded-xl border-2 border-slate-300/50 bg-gradient-to-br from-slate-500 via-slate-400 to-slate-300 px-2.5 sm:px-4 py-2 sm:py-3 overflow-hidden shadow-lg shadow-slate-500/30 transform hover:scale-105 transition-transform">
                        <div class="text-[10px] sm:text-xs text-white/90 mb-0.5 sm:mb-1 whitespace-nowrap font-semibold">Hôm Nay</div>
                        <div class="text-sm sm:text-base font-bold text-white leading-tight break-all overflow-hidden text-ellipsis drop-shadow-md" id="chart_today_deposits" style="word-break: break-all; overflow-wrap: anywhere;">0₫</div>
                    </div>
                    <div class="flex-1 min-w-[90px] sm:min-w-[120px] max-w-full rounded-xl border-2 border-blue-300/50 bg-gradient-to-br from-blue-500 via-blue-400 to-blue-300 px-2.5 sm:px-4 py-2 sm:py-3 overflow-hidden shadow-lg shadow-blue-500/30 transform hover:scale-105 transition-transform">
                        <div class="text-[10px] sm:text-xs text-white/90 mb-0.5 sm:mb-1 whitespace-nowrap font-semibold">Tuần Này</div>
                        <div class="text-sm sm:text-base font-bold text-white leading-tight break-all overflow-hidden text-ellipsis drop-shadow-md" id="chart_week_deposits" style="word-break: break-all; overflow-wrap: anywhere;">0₫</div>
                    </div>
                    <div class="flex-1 min-w-[90px] sm:min-w-[120px] max-w-full rounded-xl border-2 border-orange-300/50 bg-gradient-to-br from-orange-500 via-orange-400 to-orange-300 px-2.5 sm:px-4 py-2 sm:py-3 overflow-hidden shadow-lg shadow-orange-500/30 transform hover:scale-105 transition-transform">
                        <div class="text-[10px] sm:text-xs text-white/90 mb-0.5 sm:mb-1 whitespace-nowrap font-semibold">Tháng Này</div>
                        <div class="text-sm sm:text-base font-bold text-white leading-tight break-all overflow-hidden text-ellipsis drop-shadow-md" id="chart_month_deposits" style="word-break: break-all; overflow-wrap: anywhere;">0₫</div>
                    </div>
                    <div class="hidden sm:flex flex-1 min-w-[90px] sm:min-w-[120px] max-w-full rounded-xl border-2 border-green-300/50 bg-gradient-to-br from-green-500 via-green-400 to-green-300 px-2.5 sm:px-4 py-2 sm:py-3 overflow-hidden shadow-lg shadow-green-500/30 transform hover:scale-105 transition-transform flex-col">
                        <div class="text-[10px] sm:text-xs text-white/90 mb-0.5 sm:mb-1 whitespace-nowrap font-semibold">Tổng Doanh Thu</div>
                        <div class="text-sm sm:text-base font-bold text-white leading-tight break-all overflow-hidden text-ellipsis drop-shadow-md" id="chart_total_deposits" style="word-break: break-all; overflow-wrap: anywhere;">0₫</div>
                    </div>
                </div>
            </div>
            <div id="stats_users" class="stats_panel hidden">
                <div class="flex flex-wrap gap-2 sm:gap-3 mb-3">
                    <div class="flex-1 min-w-[90px] sm:min-w-[120px] max-w-full rounded-xl border-2 border-slate-300/50 bg-gradient-to-br from-slate-500 via-slate-400 to-slate-300 px-2.5 sm:px-4 py-2 sm:py-3 overflow-hidden shadow-lg shadow-slate-500/30 transform hover:scale-105 transition-transform">
                        <div class="text-[10px] sm:text-xs text-white/90 mb-0.5 sm:mb-1 whitespace-nowrap font-semibold">Hôm Nay</div>
                        <div class="text-sm sm:text-base font-bold text-white leading-tight break-all overflow-hidden text-ellipsis drop-shadow-md" id="chart_today_users" style="word-break: break-all; overflow-wrap: anywhere;">0</div>
                    </div>
                    <div class="flex-1 min-w-[90px] sm:min-w-[120px] max-w-full rounded-xl border-2 border-blue-300/50 bg-gradient-to-br from-blue-500 via-blue-400 to-blue-300 px-2.5 sm:px-4 py-2 sm:py-3 overflow-hidden shadow-lg shadow-blue-500/30 transform hover:scale-105 transition-transform">
                        <div class="text-[10px] sm:text-xs text-white/90 mb-0.5 sm:mb-1 whitespace-nowrap font-semibold">Tuần Này</div>
                        <div class="text-sm sm:text-base font-bold text-white leading-tight break-all overflow-hidden text-ellipsis drop-shadow-md" id="chart_week_users" style="word-break: break-all; overflow-wrap: anywhere;">0</div>
                    </div>
                    <div class="flex-1 min-w-[90px] sm:min-w-[120px] max-w-full rounded-xl border-2 border-orange-300/50 bg-gradient-to-br from-orange-500 via-orange-400 to-orange-300 px-2.5 sm:px-4 py-2 sm:py-3 overflow-hidden shadow-lg shadow-orange-500/30 transform hover:scale-105 transition-transform">
                        <div class="text-[10px] sm:text-xs text-white/90 mb-0.5 sm:mb-1 whitespace-nowrap font-semibold">Tháng Này</div>
                        <div class="text-sm sm:text-base font-bold text-white leading-tight break-all overflow-hidden text-ellipsis drop-shadow-md" id="chart_month_users" style="word-break: break-all; overflow-wrap: anywhere;">0</div>
                    </div>
                    <div class="hidden sm:flex flex-1 min-w-[90px] sm:min-w-[120px] max-w-full rounded-xl border-2 border-green-300/50 bg-gradient-to-br from-green-500 via-green-400 to-green-300 px-2.5 sm:px-4 py-2 sm:py-3 overflow-hidden shadow-lg shadow-green-500/30 transform hover:scale-105 transition-transform flex-col">
                        <div class="text-[10px] sm:text-xs text-white/90 mb-0.5 sm:mb-1 whitespace-nowrap font-semibold">Tổng Thành Viên</div>
                        <div class="text-sm sm:text-base font-bold text-white leading-tight break-all overflow-hidden text-ellipsis drop-shadow-md" id="chart_total_users" style="word-break: break-all; overflow-wrap: anywhere;">0</div>
                    </div>
                </div>
            </div>
            <div id="chart_container" class="mt-2 h-[400px] relative">
                <div id="dashboard_loading" class="absolute inset-0 flex flex-col items-center justify-center bg-white/80 backdrop-blur-sm z-10">
                    <div class="flex flex-col items-center justify-center py-6">
                        <i class="ri-loader-4-line animate-spin text-3xl text-neutral-400 mb-2"></i>
                        <span class="text-neutral-500 text-sm">Đang tải...</span>
                    </div>
                </div>
                <div id="chart_deposits" class="chart_panel h-full"></div>
                <div id="chart_users" class="chart_panel hidden h-full"></div>
            </div>
        </div>
    </div>
</div>
@endsection