<!DOCTYPE html>
<html lang="vi">
<head>
    <?php require_once('head.php');?>
    <title>Dashboard | Light Pro UI</title>
    <?php require_once('nav.php');?>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f8fafc; }
        .bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
        .white-card { 
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 24px;
            padding: 24px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            transition: 0.3s;
        }
        .white-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
        .stat-val { font-size: 2.25rem; font-weight: 800; color: #1e293b; }
    </style>
</head>
<body class="text-slate-800">
    <div class="wrapper">
        <div class="content-wrapper bg-transparent p-6 md:p-10">
            
            <!-- Header Section -->
            <div class="mb-10">
                <h1 class="text-3xl font-extrabold text-slate-900">Tổng quan hệ thống</h1>
                <p class="text-slate-500">Chào mừng trở lại, quản trị viên!</p>
            </div>

            <!-- Bento Stats Grid -->
            <div class="bento-grid mb-8">
                <div class="white-card">
                    <p class="text-indigo-600 text-xs font-bold uppercase tracking-wider">Tổng đơn code</p>
                    <div class="stat-val"><?=number_format($total_code);?></div>
                </div>
                <div class="white-card">
                    <p class="text-pink-600 text-xs font-bold uppercase tracking-wider">Web chờ xử lý</p>
                    <div class="stat-val"><?=number_format($total_web);?></div>
                </div>
                <div class="white-card md:col-span-2 bg-indigo-50">
                    <p class="text-emerald-600 text-xs font-bold uppercase tracking-wider">Tổng doanh thu</p>
                    <div class="stat-val"><?=number_format($total_money);?><span class="text-lg ml-2 text-slate-500 font-medium">VNĐ</span></div>
                </div>
            </div>

            <!-- ==========================================================================
               KHỐI HIỂN THỊ VERSION & NHẬP KEY (THAY THẾ CHO BANNER ĐEN CŨ)
               ========================================================================== -->
            <div class="bg-white border border-slate-200/80 rounded-[24px] p-6 md:p-8 shadow-sm mb-8">
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
                    
                    <!-- Cột hiển thị Version -->
                    <div class="md:col-span-5 space-y-2 border-b md:border-b-0 md:border-r border-slate-100 pb-4 md:pb-0 md:pr-6">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center">
                                <i class="fas fa-shield-alt text-lg"></i>
                            </div>
                            <div>
                                <h5 class="font-extrabold text-slate-900 text-base">Bản quyền phần mềm</h5>
                                <p class="text-xs text-slate-400">Trạng thái kích hoạt lõi hệ thống</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 pt-2">
                            <span class="text-2xl font-black text-slate-800 tracking-tight">v2.0.2</span>
                            <span class="bg-emerald-50 text-emerald-700 text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-md border border-emerald-200">
                                Đang hoạt động
                            </span>
                        </div>
                    </div>

                    <!-- Cột nhập Key bản quyền -->
                    <div class="md:col-span-7">
                        <form method="POST" action="" class="space-y-2">
                            <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider">Kích hoạt License Key mới</label>
                            <div class="flex flex-col sm:flex-row gap-2">
                                <div class="relative flex-1">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
                                        <i class="fas fa-key text-xs"></i>
                                    </div>
                                    <input type="text" name="license_key" placeholder="Nhập mã kích hoạt của bạn (VD: LPRO-XXXX-XXXX)" 
                                           class="w-full pl-9 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-indigo-500 focus:bg-white transition">
                                </div>
                                <button type="submit" name="btn_active" 
                                        class="bg-slate-900 text-white font-bold text-xs uppercase px-6 py-3 sm:py-0 rounded-xl transition hover:bg-indigo-600 whitespace-nowrap">
                                    Xác thực Key
                                </button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>

            <!-- ==========================================================================
               BẢNG TIN HỆ THỐNG (ĐƯỢC GIỮ NGUYÊN LAYOUT TIMELINE CŨ)
               ========================================================================== -->
            <div class="bg-white border border-slate-200/80 rounded-[24px] p-6 md:p-8 shadow-sm">
                <div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-100">
                    <div class="flex items-center gap-2 text-slate-900 font-bold text-lg">
                        <i class="fa-solid fa-newspaper text-indigo-600 mr-1"></i> Bản Tin Hệ Thống
                    </div>
                    <span class="bg-indigo-50 text-indigo-600 text-xs font-bold px-3 py-1.5 rounded-full">Ver 2.0.2</span>
                </div>
                
                <div class="relative pl-6 border-l-2 border-slate-100 space-y-6 ml-3">
                    <!-- Tin 1 -->
                    <div class="relative group">
                        <div class="absolute -left-[31px] top-1.5 w-4 h-4 rounded-full bg-white border-4 border-indigo-600 shadow-[0_0_10px_rgba(79,70,229,0.4)] transition group-hover:scale-125"></div>
                        <div class="transition bg-slate-50 border border-slate-100 rounded-2xl p-4 hover:border-indigo-200 hover:bg-white hover:shadow-sm">
                            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
                                <span class="bg-emerald-50 text-emerald-700 text-xs font-bold px-2.5 py-1 rounded-lg">Cập Nhật Mới</span>
                                <small class="text-slate-400"><i class="fa-regular fa-clock mr-1"></i>2026-06-13 2:52:22</small>
                            </div>
                            <p class="text-sm text-slate-600 leading-relaxed">
                                <strong class="text-slate-800">Nâng cấp hệ thống Ver 2.0.2:</strong> ĐÃ TRIỂN KHAI HỆ THỐNG CODE FREE VÀ RANK 
                            </p>
                        </div>
                    </div>
                  
                    <!-- Tin 2 -->
                    <div class="relative group">
                        <div class="absolute -left-[31px] top-1.5 w-4 h-4 rounded-full bg-white border-4 border-indigo-600 shadow-[0_0_10px_rgba(79,70,229,0.4)] transition group-hover:scale-125"></div>
                        <div class="transition bg-slate-50 border border-slate-100 rounded-2xl p-4 hover:border-indigo-200 hover:bg-white hover:shadow-sm">
                            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
                                <span class="bg-emerald-50 text-emerald-700 text-xs font-bold px-2.5 py-1 rounded-lg">Cập Nhật Mới</span>
                                <small class="text-slate-400"><i class="fa-regular fa-clock mr-1"></i>2026-02-18 13:52:22</small>
                            </div>
                            <p class="text-sm text-slate-600 leading-relaxed">
                                <strong class="text-slate-800">Nâng cấp hệ thống Ver 2.0.1:</strong> Đã triển khai tích hợp thành công tính năng <b class="text-indigo-600 font-semibold">Cronjob tự động</b> và tối ưu hóa hệ thống kiểm tra trạng thái tên miền thông minh.
                            </p>
                        </div>
                    </div>

                    <!-- Tin 3 -->
                    <div class="relative group">
                        <div class="absolute -left-[31px] top-1.5 w-4 h-4 rounded-full bg-white border-4 border-rose-500 shadow-[0_0_10px_rgba(244,63,94,0.4)] transition group-hover:scale-125"></div>
                        <div class="transition bg-slate-50 border border-slate-100 rounded-2xl p-4 hover:border-indigo-200 hover:bg-white hover:shadow-sm">
                            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
                                <span class="bg-rose-50 text-rose-700 text-xs font-bold px-2.5 py-1 rounded-lg">Sửa Lỗi</span>
                                <small class="text-slate-400"><i class="fa-regular fa-clock mr-1"></i>2026-01-05 01:44:18</small>
                            </div>
                            <p class="text-sm text-slate-600 leading-relaxed">
                                Chức năng khởi tạo cửa hàng (Shop) đại lý tự động đã được vá lỗi cơ sở dữ liệu (Database core), hoạt động trơn tru 100%.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
<?php require_once('foot.php');?>
</body>
</html>