<!DOCTYPE html>
<html lang="en">
<!--begin::Head-->

<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
    <title>Mua Robux #<?=isset($_GET['id']) ? $_GET['id'] : '';?> | <?=$lxtdev['ten_web'];?></title>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/nav.php';?>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        .checkout-card {
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
            border-radius: 20px !important;
            background: #ffffff;
            overflow: hidden;
        }

        [data-bs-theme="dark"] .checkout-card {
            background: #1e1e2d;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

        .checkout-header {
            background: linear-gradient(135deg, #00b06b, #00e676);
            padding: 35px;
            color: #fff;
            border-radius: 20px 20px 0 0;
            text-align: center;
        }

        .checkout-robux-icon {
            font-size: 5rem;
            filter: drop-shadow(0 8px 25px rgba(255, 255, 255, 0.3));
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .info-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 0;
            border-bottom: 1px dashed #e2e8f0;
        }

        [data-bs-theme="dark"] .info-item {
            border-bottom-color: #334155;
        }

        .info-item:last-child {
            border-bottom: none;
        }

        .total-box {
            background: linear-gradient(135deg, #f0fdf4, #dcfce7);
            border: 2px solid #00b06b;
            border-radius: 16px;
            padding: 20px;
            margin-top: 15px;
        }

        [data-bs-theme="dark"] .total-box {
            background: linear-gradient(135deg, #052e16, #064e3b);
            border-color: #00e676;
        }

        .btn-confirm-buy {
            background: linear-gradient(135deg, #00b06b, #00e676) !important;
            color: #ffffff !important;
            border: none !important;
            font-weight: 800 !important;
            border-radius: 14px !important;
            padding: 16px 40px !important;
            font-size: 1.1rem;
            letter-spacing: 0.5px;
            transition: 0.3s !important;
            box-shadow: 0 8px 25px rgba(0, 176, 107, 0.35) !important;
            width: 100%;
        }

        .btn-confirm-buy:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 12px 35px rgba(0, 176, 107, 0.5) !important;
        }

        .btn-confirm-buy:disabled {
            background: #94a3b8 !important;
            box-shadow: none !important;
            cursor: not-allowed;
            transform: none !important;
        }

        .payment-method-card {
            border: 2px solid #e2e8f0;
            border-radius: 14px;
            padding: 15px;
            cursor: pointer;
            transition: 0.3s;
            text-align: center;
        }

        .payment-method-card:hover {
            border-color: #00b06b;
            background: #f0fdf4;
        }

        [data-bs-theme="dark"] .payment-method-card:hover {
            background: #064e3b;
        }

        .payment-method-card.selected {
            border-color: #00b06b !important;
            background: #f0fdf4 !important;
            box-shadow: 0 0 0 3px rgba(0, 176, 107, 0.2);
        }

        [data-bs-theme="dark"] .payment-method-card.selected {
            background: #064e3b !important;
            box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.3);
        }

        .countdown-box {
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 12px;
            padding: 15px;
            color: #dc2626;
        }

        [data-bs-theme="dark"] .countdown-box {
            background: #450a0a;
            border-color: #7f1d1d;
            color: #fca5a5;
        }

        .steps-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin-bottom: 30px;
        }

        .step-dot {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            transition: 0.3s;
        }

        .step-dot.active {
            background: #00b06b;
            color: #fff;
        }

        .step-dot.inactive {
            background: #e2e8f0;
            color: #94a3b8;
        }

        .step-line {
            width: 60px;
            height: 3px;
            background: #e2e8f0;
            transition: 0.3s;
        }

        .step-line.done {
            background: #00b06b;
        }
    </style>
</head>

<body id="kt_app_body" data-kt-app-layout="light-sidebar" data-kt-app-header-fixed="true"
    data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true" data-kt-app-sidebar-hoverable="true"
    data-kt-app-sidebar-push-header="true" data-kt-app-sidebar-push-toolbar="true"
    data-kt-app-sidebar-push-footer="true" data-kt-app-toolbar-enabled="true" class="app-default">
    
    <script>var defaultThemeMode = "light"; var themeMode; if (document.documentElement) { if (document.documentElement.hasAttribute("data-bs-theme-mode")) { themeMode = document.documentElement.getAttribute("data-bs-theme-mode"); } else { if (localStorage.getItem("data-bs-theme") !== null) { themeMode = localStorage.getItem("data-bs-theme"); } else { themeMode = defaultThemeMode; } } if (themeMode === "system") { themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } document.documentElement.setAttribute("data-bs-theme", themeMode); }</script>
    
    <div class="d-flex flex-column flex-root app-root" id="kt_app_root">
        <div class="app-page flex-column flex-column-fluid" id="kt_app_page">
            
            <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
                <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/sider.php';?>
            </div>
            
            <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                <div class="d-flex flex-column flex-column-fluid">
                    
                    <!-- TOOLBAR -->
                    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                        <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack">
                            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                                <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                                    <i class="fa-solid fa-cart-shopping text-success fs-3 mb-1"></i> Thanh Toán Robux
                                </h1>
                                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                                    <li class="breadcrumb-item text-muted">
                                        <a href="/" class="text-muted text-hover-primary">Home</a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <span class="bullet bg-gray-400 w-5px h-2px"></span>
                                    </li>
                                    <li class="breadcrumb-item text-muted">
                                        <a href="/robux-shop" class="text-muted text-hover-primary">Robux Shop</a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <span class="bullet bg-gray-400 w-5px h-2px"></span>
                                    </li>
                                    <li class="breadcrumb-item text-muted">Thanh Toán</li>
                                </ul>
                            </div>
                            <div class="d-flex align-items-center gap-2 gap-lg-3">
                                <a href="#" class="btn btn-sm fw-bold btn-light-success px-4 py-3" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">
                                    <i class="fa-solid fa-wallet me-1"></i> <?=tien($user['money']);?>đ
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- NỘI DUNG CHÍNH -->
                    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
                        <div class="container-xxl" id="kt_content_container">
                            
                            <?php
                                // Lấy thông tin gói từ database
                                $package_id = isset($_GET['id']) ? intval($_GET['id']) : 0;
                                
                                // Dữ liệu mẫu nếu chưa có database
                                $package = [
                                    'id' => $package_id,
                                    'robux_amount' => 1000,
                                    'price' => 210000,
                                    'original_price' => 250000,
                                    'discount_percent' => 16,
                                    'seller_name' => 'Admin System',
                                    'stock' => 30,
                                    'description' => 'Tiết kiệm hơn - Mua nhiều vật phẩm'
                                ];
                                
                                // Nếu có database, truy vấn thực tế:
                                // $result = mysqli_query($ketnoi, "SELECT * FROM `robux_packages` WHERE `id` = $package_id AND `status` = 'active'");
                                // if(mysqli_num_rows($result) > 0) {
                                //     $package = mysqli_fetch_assoc($result);
                                // } else {
                                //     echo '<div class="alert alert-danger">Gói Robux không tồn tại hoặc đã hết hạn!</div>';
                                //     exit;
                                // }
                            ?>

                            <!-- Steps indicator -->
                            <div class="steps-indicator">
                                <div class="step-dot active">1</div>
                                <div class="step-line done"></div>
                                <div class="step-dot active">2</div>
                                <div class="step-line"></div>
                                <div class="step-dot inactive">3</div>
                            </div>
                            <p class="text-center text-muted fs-7 mb-8">
                                <span class="fw-bold text-success">Bước 2/3:</span> Xác nhận thông tin & chọn phương thức thanh toán
                            </p>

                            <div class="row g-6 g-xl-9">
                                <!-- Thông tin gói & form mua -->
                                <div class="col-xl-8">
                                    <div class="card checkout-card">
                                        <div class="checkout-header">
                                            <i class="fa-solid fa-coins checkout-robux-icon mb-3"></i>
                                            <h2 class="fw-bold text-white mb-1">
                                                <?=number_format($package['robux_amount']);?> Robux
                                            </h2>
                                            <p class="text-white text-opacity-75 mb-0">
                                                <?=$package['description'];?>
                                            </p>
                                        </div>

                                        <div class="card-body p-8">
                                            <form action="/xu-ly-mua-robux" method="POST" id="formMuaRobux">
                                                <input type="hidden" name="package_id" value="<?=$package['id'];?>">
                                                <input type="hidden" name="robux_amount" value="<?=$package['robux_amount'];?>">
                                                <input type="hidden" name="total_price" value="<?=$package['price'];?>">

                                                <!-- Thông tin tài khoản Roblox -->
                                                <h5 class="fw-bold mb-4">
                                                    <i class="fa-solid fa-user-gear text-success me-2"></i> Thông Tin Tài Khoản Roblox
                                                </h5>
                                                
                                                <div class="mb-5">
                                                    <label class="form-label-required fw-bold fs-6 mb-2">
                                                        <i class="fa-solid fa-user me-2"></i> Tên Tài Khoản Roblox (Username)
                                                    </label>
                                                    <input type="text" 
                                                           class="form-control form-control-lg" 
                                                           name="roblox_username" 
                                                           id="roblox_username"
                                                           placeholder="Nhập chính xác username Roblox của bạn"
                                                           required>
                                                    <small class="text-danger fs-8 mt-1 d-block">
                                                        <i class="fa-solid fa-exclamation-triangle me-1"></i> 
                                                        Vui lòng nhập chính xác! Sai username sẽ không thể nhận Robux.
                                                    </small>
                                                </div>

                                                <div class="mb-7">
                                                    <label class="fw-bold fs-6 mb-2">
                                                        <i class="fa-solid fa-message me-2"></i> Ghi Chú (Không bắt buộc)
                                                    </label>
                                                    <textarea class="form-control" 
                                                              name="note" 
                                                              rows="2" 
                                                              placeholder="Ghi chú thêm cho admin..."
                                                              maxlength="300"></textarea>
                                                </div>

                                                <hr class="text-muted my-6">

                                                <!-- Chọn phương thức thanh toán -->
                                                <h5 class="fw-bold mb-4">
                                                    <i class="fa-solid fa-credit-card text-success me-2"></i> Phương Thức Thanh Toán
                                                </h5>
                                                
                                                <div class="row g-3 mb-5">
                                                    <div class="col-6 col-md-4">
                                                        <div class="payment-method-card selected" data-method="momo" onclick="selectPayment('momo', this)">
                                                            <img src="https://upload.wikimedia.org/wikipedia/vi/f/fe/MoMo_Logo.png" 
                                                                 alt="MoMo" 
                                                                 style="height: 35px; margin-bottom: 8px;">
                                                            <div class="fw-bold fs-7">Ví MoMo</div>
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-md-4">
                                                        <div class="payment-method-card" data-method="vietcombank" onclick="selectPayment('vietcombank', this)">
                                                            <img src="https://cdn.haitrieu.com/wp-content/uploads/2022/02/Logo-Vietcombank.png" 
                                                                 alt="Vietcombank" 
                                                                 style="height: 35px; margin-bottom: 8px;">
                                                            <div class="fw-bold fs-7">Vietcombank</div>
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-md-4">
                                                        <div class="payment-method-card" data-method="mbbank" onclick="selectPayment('mbbank', this)">
                                                            <img src="https://cdn.haitrieu.com/wp-content/uploads/2022/02/Logo-MBbank.png" 
                                                                 alt="MB Bank" 
                                                                 style="height: 35px; margin-bottom: 8px;">
                                                            <div class="fw-bold fs-7">MB Bank</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="payment_method" id="payment_method" value="momo">

                                                <!-- Nút xác nhận -->
                                                <button type="submit" class="btn btn-confirm-buy" id="btnConfirmBuy">
                                                    <i class="fa-solid fa-lock me-2"></i> Xác Nhận Thanh Toán 
                                                    <span class="ms-2"><?=number_format($package['price']);?>đ</span>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- Sidebar: Tóm tắt đơn hàng -->
                                <div class="col-xl-4">
                                    <!-- Tóm tắt -->
                                    <div class="card checkout-card mb-6">
                                        <div class="card-header bg-light-success border-0">
                                            <h5 class="fw-bold mb-0">
                                                <i class="fa-solid fa-receipt me-2"></i> Tóm Tắt Đơn Hàng
                                            </h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="info-item">
                                                <span class="text-muted fw-semibold">
                                                    <i class="fa-solid fa-coins me-2 text-success"></i> Số lượng
                                                </span>
                                                <span class="fw-bold fs-5"><?=number_format($package['robux_amount']);?> R$</span>
                                            </div>
                                            <div class="info-item">
                                                <span class="text-muted fw-semibold">
                                                    <i class="fa-solid fa-user me-2"></i> Người bán
                                                </span>
                                                <span class="fw-bold"><?=$package['seller_name'];?> 
                                                    <i class="fa-solid fa-circle-check text-primary fs-7"></i>
                                                </span>
                                            </div>
                                            <div class="info-item">
                                                <span class="text-muted fw-semibold">
                                                    <i class="fa-solid fa-tag me-2"></i> Đơn giá
                                                </span>
                                                <span><?=number_format($package['price']);?>đ</span>
                                            </div>
                                            <?php if($package['original_price'] > $package['price']): ?>
                                            <div class="info-item">
                                                <span class="text-muted fw-semibold">
                                                    <i class="fa-solid fa-percent me-2 text-danger"></i> Tiết kiệm
                                                </span>
                                                <span class="text-danger fw-bold">
                                                    -<?=number_format($package['original_price'] - $package['price']);?>đ
                                                </span>
                                            </div>
                                            <?php endif; ?>
                                            <div class="info-item">
                                                <span class="text-muted fw-semibold">
                                                    <i class="fa-solid fa-box me-2"></i> Số lượng còn
                                                </span>
                                                <span class="fw-bold text-success"><?=$package['stock'];?> gói</span>
                                            </div>

                                            <div class="total-box text-center mt-4">
                                                <div class="text-muted fs-7 fw-semibold mb-1">TỔNG THANH TOÁN</div>
                                                <div class="fw-black fs-1 text-success">
                                                    <?=number_format($package['price']);?>đ
                                                </div>
                                                <?php if($package['original_price'] > $package['price']): ?>
                                                <div class="text-muted">
                                                    <del><?=number_format($package['original_price']);?>đ</del>
                                                    <span class="badge badge-danger ms-2">-<?=$package['discount_percent'];?>%</span>
                                                </div>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Hướng dẫn -->
                                    <div class="card checkout-card bg-light-info border-info border-2">
                                        <div class="card-body">
                                            <h6 class="fw-bold text-info mb-3">
                                                <i class="fa-solid fa-circle-info me-2"></i> Hướng Dẫn Nhận Robux
                                            </h6>
                                            <ol class="fs-7 mb-0 ps-3">
                                                <li class="mb-2">Thanh toán qua phương thức đã chọn</li>
                                                <li class="mb-2">Admin kiểm tra & duyệt trong <strong>5-30 phút</strong></li>
                                                <li class="mb-2">Robux sẽ được chuyển vào tài khoản Roblox của bạn</li>
                                                <li>Kiểm tra Robux trong tài khoản Roblox</li>
                                            </ol>
                                        </div>
                                    </div>

                                    <!-- Thời gian giữ đơn -->
                                    <div class="countdown-box mt-6 text-center">
                                        <i class="fa-solid fa-hourglass-half fs-3 mb-2"></i>
                                        <div class="fw-bold">Vui lòng thanh toán trong</div>
                                        <div class="fs-2 fw-black" id="countdown">15:00</div>
                                        <small>Đơn hàng sẽ tự hủy nếu quá thời gian</small>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    
                </div>
                <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/foot.php';?>
            </div>
        </div>
    </div>

    <script>
        // Chọn phương thức thanh toán
        function selectPayment(method, element) {
            document.querySelectorAll('.payment-method-card').forEach(card => {
                card.classList.remove('selected');
            });
            element.classList.add('selected');
            document.getElementById('payment_method').value = method;
        }

        // Countdown 15 phút
        let timeLeft = 15 * 60;
        const countdownEl = document.getElementById('countdown');
        
        function updateCountdown() {
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            countdownEl.textContent = String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0');
            
            if (timeLeft <= 0) {
                countdownEl.textContent = '00:00';
                document.getElementById('btnConfirmBuy').disabled = true;
                document.getElementById('btnConfirmBuy').innerHTML = '<i class="fa-solid fa-clock me-2"></i> Đã Hết Thời Gian';
                clearInterval(countdownInterval);
            }
            timeLeft--;
        }
        
        const countdownInterval = setInterval(updateCountdown, 1000);
        updateCountdown();

        // Xác nhận trước khi submit
        document.getElementById('formMuaRobux').addEventListener('submit', function(e) {
            const username = document.getElementById('roblox_username').value.trim();
            if (!username) {
                e.preventDefault();
                alert('Vui lòng nhập tên tài khoản Roblox!');
                return false;
            }
            
            if (!confirm('Xác nhận thanh toán ' + '<?=number_format($package['price']);?>' + 'đ cho ' + '<?=number_format($package['robux_amount']);?>' + ' Robux?\n\nTài khoản Roblox: ' + username + '\n\nVui lòng kiểm tra kỹ thông tin trước khi xác nhận!')) {
                e.preventDefault();
                return false;
            }
        });
    </script>
</body>
</html>