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

<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
    <title>Đăng Bán Robux | <?=$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>
        .form-card {
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
            border-radius: 20px !important;
            background: #ffffff;
            overflow: hidden;
        }

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

        .form-card-header {
            background: linear-gradient(135deg, #00b06b, #00e676);
            padding: 30px;
            color: #fff;
            border-radius: 20px 20px 0 0;
        }

        .form-label-required::after {
            content: " *";
            color: #ef4444;
            font-weight: bold;
        }

        .btn-submit {
            background: linear-gradient(135deg, #00b06b, #00e676) !important;
            color: #ffffff !important;
            border: none !important;
            font-weight: 800 !important;
            border-radius: 12px !important;
            padding: 14px 40px !important;
            transition: 0.3s !important;
            box-shadow: 0 6px 20px rgba(0, 176, 107, 0.3) !important;
            font-size: 1rem;
            letter-spacing: 0.5px;
        }

        .btn-submit:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 10px 30px rgba(0, 176, 107, 0.5) !important;
        }

        .btn-reset {
            background: #f1f5f9 !important;
            color: #64748b !important;
            border: none !important;
            font-weight: 700 !important;
            border-radius: 12px !important;
            padding: 14px 30px !important;
            transition: 0.3s !important;
        }

        [data-bs-theme="dark"] .btn-reset {
            background: #2d2d44 !important;
            color: #94a3b8 !important;
        }

        .btn-reset:hover {
            background: #e2e8f0 !important;
        }

        [data-bs-theme="dark"] .btn-reset:hover {
            background: #3d3d5c !important;
        }

        .preview-card {
            border: 2px dashed #cbd5e1;
            border-radius: 16px;
            padding: 20px;
            background: #f8fafc;
            transition: 0.3s;
        }

        [data-bs-theme="dark"] .preview-card {
            border-color: #475569;
            background: #252536;
        }

        .robux-preview-icon {
            font-size: 4rem;
            color: #00b06b;
            filter: drop-shadow(0 4px 12px rgba(0, 176, 107, 0.3));
        }

        [data-bs-theme="dark"] .robux-preview-icon {
            color: #00e676;
        }

        .price-calc {
            background: #fefce8;
            border: 1px solid #fde047;
            border-radius: 10px;
            padding: 15px;
            color: #854d0e;
        }

        [data-bs-theme="dark"] .price-calc {
            background: #422006;
            border-color: #854d0e;
            color: #fde047;
        }

        .input-group-text-custom {
            background: #00b06b;
            color: #fff;
            border: none;
            font-weight: 700;
        }

        [data-bs-theme="dark"] .input-group-text-custom {
            background: #00e676;
            color: #000;
        }
    </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-upload text-success fs-3 mb-1"></i> Đăng Bán Gói 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">Đăng Bá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">
                            
                            <div class="row g-6 g-xl-9">
                                <!-- Form đăng bán -->
                                <div class="col-xl-8">
                                    <div class="card form-card">
                                        <div class="form-card-header">
                                            <h3 class="text-white fw-bold mb-2">
                                                <i class="fa-solid fa-coins me-2"></i> Thông Tin Gói Robux
                                            </h3>
                                            <p class="text-white text-opacity-75 mb-0 fs-7">
                                                Điền đầy đủ thông tin để đăng bán Robux. Admin sẽ duyệt trong 5-15 phút.
                                            </p>
                                        </div>
                                        
                                        <div class="card-body p-8">
                                            <form action="/xu-ly-dang-robux" method="POST" id="formDangRobux">
                                                
                                                <!-- Số lượng Robux -->
                                                <div class="mb-7">
                                                    <label class="form-label-required fw-bold fs-6 mb-3">
                                                        <i class="fa-solid fa-coins text-success me-2"></i> Số Lượng Robux
                                                    </label>
                                                    <div class="input-group">
                                                        <span class="input-group-text input-group-text-custom px-4">
                                                            <i class="fa-solid fa-coins me-1"></i> R$
                                                        </span>
                                                        <input type="number" 
                                                               class="form-control form-control-lg" 
                                                               name="robux_amount" 
                                                               id="robux_amount"
                                                               placeholder="Nhập số lượng Robux (VD: 1000)" 
                                                               min="10" 
                                                               max="100000"
                                                               step="1"
                                                               required>
                                                    </div>
                                                    <small class="text-muted fs-8 mt-1 d-block">
                                                        <i class="fa-solid fa-circle-info me-1"></i> Tối thiểu 10 Robux, tối đa 100.000 Robux
                                                    </small>
                                                </div>

                                                <!-- Giá bán -->
                                                <div class="mb-7">
                                                    <label class="form-label-required fw-bold fs-6 mb-3">
                                                        <i class="fa-solid fa-tag text-success me-2"></i> Giá Bán (VNĐ)
                                                    </label>
                                                    <div class="input-group">
                                                        <input type="number" 
                                                               class="form-control form-control-lg" 
                                                               name="price" 
                                                               id="price"
                                                               placeholder="Nhập giá bán (VD: 210000)" 
                                                               min="1000"
                                                               step="1000"
                                                               required>
                                                        <span class="input-group-text input-group-text-custom px-4">VNĐ</span>
                                                    </div>
                                                    <div class="price-calc mt-2 d-none" id="pricePerRobux">
                                                        <i class="fa-solid fa-calculator me-2"></i> 
                                                        Tỷ giá: <strong id="rateDisplay">0</strong> VNĐ / 1 Robux
                                                    </div>
                                                </div>

                                                <!-- Giá gốc (nếu có) -->
                                                <div class="mb-7">
                                                    <label class="fw-bold fs-6 mb-3">
                                                        <i class="fa-solid fa-receipt text-muted me-2"></i> Giá Gốc (Không bắt buộc)
                                                    </label>
                                                    <div class="input-group">
                                                        <input type="number" 
                                                               class="form-control" 
                                                               name="original_price" 
                                                               id="original_price"
                                                               placeholder="Để trống nếu không có khuyến mãi" 
                                                               min="0"
                                                               step="1000">
                                                        <span class="input-group-text px-4">VNĐ</span>
                                                    </div>
                                                    <small class="text-muted fs-8 mt-1 d-block">
                                                        Nếu có giá gốc, hệ thống sẽ hiển thị % giảm giá
                                                    </small>
                                                </div>

                                                <!-- Tổng số lượng cần bán -->
                                                <div class="mb-7">
                                                    <label class="form-label-required fw-bold fs-6 mb-3">
                                                        <i class="fa-solid fa-boxes-stacked text-success me-2"></i> Tổng Số Gói Cần Bán
                                                    </label>
                                                    <input type="number" 
                                                           class="form-control form-control-lg" 
                                                           name="total_stock" 
                                                           id="total_stock"
                                                           placeholder="Số lượng gói bạn muốn bán" 
                                                           min="1"
                                                           max="500"
                                                           step="1"
                                                           required>
                                                    <small class="text-muted fs-8 mt-1 d-block">
                                                        Mỗi gói tương ứng với số Robux ở trên. Tối đa 500 gói.
                                                    </small>
                                                </div>

                                                <!-- Mô tả -->
                                                <div class="mb-7">
                                                    <label class="fw-bold fs-6 mb-3">
                                                        <i class="fa-solid fa-align-left text-muted me-2"></i> Mô Tả Gói
                                                    </label>
                                                    <textarea class="form-control" 
                                                              name="description" 
                                                              id="description"
                                                              rows="3" 
                                                              placeholder="Mô tả ngắn về gói Robux của bạn..."
                                                              maxlength="200"></textarea>
                                                    <small class="text-muted fs-8 mt-1 d-block">
                                                        <span id="charCount">0</span>/200 ký tự
                                                    </small>
                                                </div>

                                                <!-- Đánh dấu HOT -->
                                                <div class="mb-7">
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" 
                                                               type="checkbox" 
                                                               name="is_hot" 
                                                               id="is_hot" 
                                                               value="1"
                                                               style="width: 45px; height: 24px; cursor: pointer;">
                                                        <label class="form-check-label fw-bold fs-6 ms-2" for="is_hot" style="cursor: pointer;">
                                                            <i class="fa-solid fa-fire text-danger me-1"></i> Đánh dấu gói HOT (Nổi bật)
                                                        </label>
                                                    </div>
                                                    <small class="text-muted fs-8 d-block ms-5">
                                                        Gói HOT sẽ được ưu tiên hiển thị đầu trang
                                                    </small>
                                                </div>

                                                <!-- Nút hành động -->
                                                <div class="d-flex gap-3 pt-4 border-top">
                                                    <button type="submit" class="btn btn-submit flex-grow-1">
                                                        <i class="fa-solid fa-paper-plane me-2"></i> Đăng Bán Ngay
                                                    </button>
                                                    <button type="reset" class="btn btn-reset">
                                                        <i class="fa-solid fa-rotate-left me-2"></i> Nhập Lại
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- Sidebar preview -->
                                <div class="col-xl-4">
                                    <!-- Preview thẻ -->
                                    <div class="card form-card mb-6">
                                        <div class="card-header bg-light-success border-0">
                                            <h5 class="fw-bold mb-0">
                                                <i class="fa-solid fa-eye me-2"></i> Xem Trước Thẻ Hiển Thị
                                            </h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="preview-card text-center">
                                                <div class="robux-preview-icon mb-3">
                                                    <i class="fa-solid fa-coins"></i>
                                                </div>
                                                <h3 class="fw-bold text-dark mb-2">
                                                    <span id="previewAmount">---</span> <small class="text-muted fs-6">Robux</small>
                                                </h3>
                                                <p class="text-muted fs-7" id="previewDesc">Chưa có mô tả</p>
                                                <hr class="text-muted">
                                                <div class="d-flex align-items-center justify-content-center gap-2">
                                                    <span class="fw-bold text-success fs-4" id="previewPrice">---đ</span>
                                                    <span class="original-price d-none" id="previewOriginal">---đ</span>
                                                    <span class="badge badge-light-danger d-none" id="previewDiscount">-0%</span>
                                                </div>
                                                <small class="text-muted d-block mt-2 fs-9">
                                                    <i class="fa-solid fa-clock me-1"></i> Duyệt tay trong 5-15 phút
                                                </small>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Lưu ý -->
                                    <div class="card form-card bg-light-warning border-warning border-2">
                                        <div class="card-body">
                                            <h6 class="fw-bold text-warning mb-3">
                                                <i class="fa-solid fa-triangle-exclamation me-2"></i> Lưu Ý Quan Trọng
                                            </h6>
                                            <ul class="fs-7 mb-0 ps-3">
                                                <li class="mb-2">Robux sẽ được admin kiểm tra nguồn gốc trước khi duyệt</li>
                                                <li class="mb-2">Giá bán nên cạnh tranh với thị trường (khoảng 200-250đ/Robux)</li>
                                                <li class="mb-2">Không được bán Robux từ nguồn bất hợp pháp</li>
                                                <li>Tiền sẽ được cộng vào tài khoản sau khi admin xác nhận</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

    <!-- Script xử lý preview real-time -->
    <script>
        // Đếm ký tự mô tả
        document.getElementById('description').addEventListener('input', function() {
            document.getElementById('charCount').textContent = this.value.length;
        });

        // Preview real-time
        function updatePreview() {
            const amount = document.getElementById('robux_amount').value || '---';
            const price = document.getElementById('price').value;
            const originalPrice = document.getElementById('original_price').value;
            const desc = document.getElementById('description').value || 'Chưa có mô tả';

            // Cập nhật preview
            document.getElementById('previewAmount').textContent = amount !== '---' ? Number(amount).toLocaleString('vi-VN') : '---';
            document.getElementById('previewDesc').textContent = desc.length > 60 ? desc.substring(0, 60) + '...' : desc;
            document.getElementById('previewPrice').textContent = price ? Number(price).toLocaleString('vi-VN') + 'đ' : '---đ';

            // Xử lý giá gốc & giảm giá
            const originalEl = document.getElementById('previewOriginal');
            const discountEl = document.getElementById('previewDiscount');
            
            if (originalPrice && price && Number(originalPrice) > Number(price)) {
                originalEl.classList.remove('d-none');
                originalEl.textContent = Number(originalPrice).toLocaleString('vi-VN') + 'đ';
                
                const discount = Math.round((1 - Number(price) / Number(originalPrice)) * 100);
                discountEl.classList.remove('d-none');
                discountEl.textContent = '-' + discount + '%';
            } else {
                originalEl.classList.add('d-none');
                discountEl.classList.add('d-none');
            }

            // Tính tỷ giá
            const rateEl = document.getElementById('pricePerRobux');
            if (price && amount && Number(amount) > 0) {
                rateEl.classList.remove('d-none');
                document.getElementById('rateDisplay').textContent = Math.round(Number(price) / Number(amount)).toLocaleString('vi-VN');
            } else {
                rateEl.classList.add('d-none');
            }
        }

        // Gắn sự kiện input cho các trường
        ['robux_amount', 'price', 'original_price', 'description'].forEach(id => {
            document.getElementById(id).addEventListener('input', updatePreview);
        });

        // Reset form
        document.getElementById('formDangRobux').addEventListener('reset', function() {
            setTimeout(updatePreview, 100);
        });
    </script>
</body>
</html>