<?php
session_start();
require_once 'includes/config.php';

if (!isset($_SESSION['nguoi_dung_id'])) {
    header('Location: dang-nhap.php');
    exit;
}

$id_user = (int)$_SESSION['nguoi_dung_id'];

// Lấy thông tin người dùng + số dư ví
$stmt_user = $pdo->prepare("SELECT ho_ten, vai_tro, ten_ngan_hang, chu_tai_khoan, so_tai_khoan, ma_pin_giao_dich, linh_vuc_chi_tiet, tinh_thanh, anh_dai_dien, ma_gioi_thieu FROM thanh_vien WHERE id = ?");
$stmt_user->execute([$id_user]);
$nguoi_dung = $stmt_user->fetch();

$stmt_wallet = $pdo->prepare("SELECT so_du FROM vi_thanh_vien WHERE thanh_vien_id = ?");
$stmt_wallet->execute([$id_user]);
$wallet = $stmt_wallet->fetch();
$so_du_vi = (float)($wallet['so_du'] ?? 0);

// Lịch sử toàn bộ giao dịch (nhận + rút)
$stmt_history = $pdo->prepare("
    SELECT loai_giao_dich, so_tien, trang_thai, ngay_tao
    FROM giao_dich_tai_chinh
    WHERE id_nguoi_nhan = ?
    ORDER BY ngay_tao DESC
    LIMIT 50
");
$stmt_history->execute([$id_user]);
$lich_su = $stmt_history->fetchAll();

// Tổng đang chờ duyệt
$tien_cho_duyet = $pdo->prepare("SELECT COALESCE(SUM(so_tien),0) FROM giao_dich_tai_chinh WHERE id_nguoi_nhan = ? AND loai_giao_dich = 'rut_tien' AND trang_thai = 'cho_duyet'");
$tien_cho_duyet->execute([$id_user]);
$tong_cho_duyet = (float)$tien_cho_duyet->fetchColumn();

$co_pin = !empty($nguoi_dung['ma_pin_giao_dich']);
$co_ngan_hang = !empty($nguoi_dung['so_tai_khoan']);

if (empty($nguoi_dung['ma_gioi_thieu'])) {
    $ma_moi = "SPNT" . rand(100000, 999999);
    $pdo->prepare("UPDATE thanh_vien SET ma_gioi_thieu = ? WHERE id = ?")->execute([$ma_moi, $id_user]);
    $nguoi_dung['ma_gioi_thieu'] = $ma_moi;
}
$duong_dan_tiep_thi = "http://" . $_SERVER['HTTP_HOST'] . "/congdongnghethuat/?ref=" . $nguoi_dung['ma_gioi_thieu'];
$anh_ma_quet = "https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=" . urlencode($duong_dan_tiep_thi);
?>
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví thành viên - PHẠM NGỌC TV</title>
    <link rel="icon" type="image/png" href="images/icon.png">
    <link rel="apple-touch-icon" href="images/icon.png">
    <style>
        :root {
            --mau-chu-dao: #004085;
            --mau-phu: #0056b3;
            --mau-nen: #f0f2f5;
            --mau-chu: #2c3e50;
            --trang: #ffffff;
            --vien: #dce1e6;
        }
        * { box-sizing: border-box; }
        body { font-family: 'Segoe UI', sans-serif; margin: 0; background: var(--mau-nen); color: #243447; display: flex; min-height: 100vh; }
        
        /* SIDEBAR */
        .cot-trinh-don { width: 320px; background: var(--trang); border-right: 1px solid var(--vien); display: flex; flex-direction: column; position: fixed; height: 100vh; overflow-y: auto; box-shadow: 2px 0 10px rgba(0,0,0,0.03); z-index: 100; left: 0; top: 0; }
        .khu-vuc-anh-dai-dien { padding: 30px 20px 20px; text-align: center; background: linear-gradient(135deg, var(--mau-chu-dao), var(--mau-phu)); color: var(--trang); }
        .vong-tron-anh { width: 100px; height: 100px; background: var(--trang); color: var(--mau-chu-dao); border-radius: 50%; line-height: 100px; font-size: 40px; font-weight: bold; margin: 0 auto 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
        .khu-vuc-tiep-thi-nhanh { padding: 16px; text-align: center; border-bottom: 1px solid var(--vien); background: #f8f9fa; }
        .khu-vuc-tiep-thi-nhanh img { border: 3px solid var(--vien); border-radius: 8px; margin-bottom: 8px; width: 140px; height: 140px; }
        .o-copy-duong-dan { display: flex; margin-top: 5px; }
        .o-copy-duong-dan input { flex: 1; padding: 7px; border: 1px solid #ccc; border-radius: 4px 0 0 4px; font-size: 11px; background: #fff; }
        .o-copy-duong-dan button { background: var(--mau-chu-dao); color: white; border: none; padding: 7px 10px; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 11px; font-weight: bold; }
        .danh-sach-chuc-nang { list-style: none; padding: 15px; margin: 0; flex: 1; }
        .nut-chuyen-muc { display: block; padding: 14px 15px; color: #495057; text-decoration: none; border-radius: 8px; margin-bottom: 5px; font-weight: 500; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; font-size: 14px; transition: all 0.3s; }
        .nut-chuyen-muc:hover { background: #eef2f7; color: var(--mau-phu); padding-left: 20px; }
        .nut-chuyen-muc.dang-chon { background: #eef2f7; color: var(--mau-chu-dao); font-weight: bold; border-left: 4px solid var(--mau-chu-dao); }
        
        .wrap { margin-left: 320px; flex: 1; max-width: 100%; padding: 40px; width: calc(100% - 320px); }
        
        /* NÚT TOGGLE FLOATING */
        .nut-toggle-sidebar-floating { 
            display: none; 
            position: fixed; 
            top: 20px; 
            left: 20px; 
            width: 56px; 
            height: 56px; 
            background: linear-gradient(135deg, #004085, #0056b3); 
            color: white; 
            border: none; 
            border-radius: 50%; 
            font-size: 28px; 
            font-weight: bold; 
            cursor: pointer; 
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
            box-shadow: 0 6px 20px rgba(0,64,133,0.35); 
            z-index: 1001; 
            align-items: center; 
            justify-content: center; 
        }
        .nut-toggle-sidebar-floating:hover { 
            transform: scale(1.15) rotate(90deg); 
            box-shadow: 0 8px 28px rgba(0,64,133,0.45); 
        }
        .nut-toggle-sidebar-floating:active { 
            transform: scale(0.92); 
        }
        
        @media (max-width: 768px) {
            .nut-toggle-sidebar-floating { display: flex !important; }
            
            body { flex-direction: column; }
            
            .cot-trinh-don { 
                position: fixed; 
                left: 0; 
                top: 0; 
                width: 280px; 
                height: 100vh; 
                z-index: 999; 
                transform: translateX(0);
                transition: transform 0.4s ease-in-out;
            }
            
            .cot-trinh-don.sidebar-hidden { 
                transform: translateX(-100%);
                box-shadow: none;
            }
            
            .wrap { 
                margin-left: 0;
                padding: 20px 15px;
                max-width: 100%;
                width: 100%;
            }
        }

        .tieu-de-trang { font-size: 22px; font-weight: bold; color: #004085; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
        .tieu-de-trang a { font-size: 13px; color: #6c757d; text-decoration: none; font-weight: normal; margin-left: auto; }
        .tieu-de-trang a:hover { color: #004085; }

        .luoi-tong-quan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
        .hop-so-du { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.06); border-top: 4px solid #0056b3; }
        .hop-so-du .nhan { font-size: 12px; color: #6c757d; font-weight: bold; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
        .hop-so-du .so { font-size: 26px; font-weight: bold; }
        .hop-so-du .mo-ta { font-size: 12px; color: #888; margin-top: 6px; }

        .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.06); margin-bottom: 20px; }
        .card h3 { margin: 0 0 18px; color: #004085; font-size: 16px; border-bottom: 1px solid #eef2f7; padding-bottom: 12px; }

        .canh-bao { padding: 14px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 10px; }
        .canh-bao.do { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .canh-bao.vang { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
        .canh-bao.xanh { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

        .luoi-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .nhom { margin-bottom: 14px; }
        .nhom label { display: block; font-size: 12px; font-weight: bold; color: #555; margin-bottom: 6px; }
        .nhom input { width: 100%; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 6px; font-size: 14px; }
        .nhom input:focus { border-color: #0056b3; outline: none; box-shadow: 0 0 0 3px rgba(0,86,179,.1); }

        .may-tinh { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 14px 16px; margin: 14px 0; }
        .may-tinh .dong { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: #555; }
        .may-tinh .dong.tong { font-weight: bold; font-size: 15px; color: #155724; border-top: 1px dashed #ccc; padding-top: 10px; margin-top: 6px; }

        .nut-rut { background: #004085; color: #fff; border: none; padding: 12px 28px; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; width: 100%; margin-top: 6px; transition: .2s; }
        .nut-rut:hover { background: #002752; }
        .nut-rut:disabled { background: #adb5bd; cursor: not-allowed; }

        table { width: 100%; border-collapse: collapse; }
        th { background: #f8f9fa; padding: 10px 12px; text-align: left; font-size: 12px; color: #495057; border-bottom: 2px solid #dee2e6; }
        td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; font-size: 13px; vertical-align: middle; }
        tr:hover td { background: #fafafa; }

        .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: bold; }
        .badge.cho { background: #fff3cd; color: #856404; }
        .badge.xong { background: #d4edda; color: #155724; }
        .badge.thu { background: #cce5ff; color: #004085; }
        .badge.rut { background: #f8d7da; color: #721c24; }

        @media (max-width: 640px) {
            .luoi-tong-quan { grid-template-columns: 1fr 1fr; }
            .luoi-form { grid-template-columns: 1fr; }
        }
        
        @media (max-width: 480px) {
            .wrap { padding: 15px 10px; }
        }
    </style>
</head>
<body>

    <!-- SIDEBAR -->
    <div class="cot-trinh-don">
        <div class="khu-vuc-anh-dai-dien">
            <?php if (!empty($nguoi_dung['anh_dai_dien'])): ?>
                <img src="<?php echo htmlspecialchars($nguoi_dung['anh_dai_dien']); ?>" class="vong-tron-anh" style="object-fit:cover; border:none; padding:0;">
            <?php else: ?>
                <div class="vong-tron-anh"><?php echo mb_substr($nguoi_dung['ho_ten'], 0, 1, 'UTF-8'); ?></div>
            <?php endif; ?>
            <h3 style="margin: 0 0 6px; font-size: 16px; font-weight: bold;"><?php echo htmlspecialchars($nguoi_dung['ho_ten']); ?></h3>
            <?php if (!empty($nguoi_dung['linh_vuc_chi_tiet'])): ?>
                <div style="font-size: 12px; margin-top: 4px; opacity: 0.95; background: rgba(255,255,255,0.15); padding: 5px 10px; border-radius: 20px; display: inline-block;"><?php echo htmlspecialchars($nguoi_dung['linh_vuc_chi_tiet']); ?></div>
            <?php endif; ?>
            <?php if (!empty($nguoi_dung['tinh_thanh'])): ?>
                <div style="font-size: 12px; margin-top: 6px; opacity: 0.85;">📍 <?php echo htmlspecialchars($nguoi_dung['tinh_thanh']); ?></div>
            <?php endif; ?>
        </div>
        <div class="khu-vuc-tiep-thi-nhanh">
            <div style="font-size: 12px; font-weight: bold; color: #666; margin-bottom: 8px;">MÃ MỜI: <span style="color: var(--mau-chu-dao);"><?php echo $nguoi_dung['ma_gioi_thieu']; ?></span></div>
            <img src="<?php echo $anh_ma_quet; ?>" alt="QR giới thiệu">
            <div style="margin-bottom: 8px;">
                <a href="<?php echo $anh_ma_quet; ?>" download="QR_<?php echo $nguoi_dung['ma_gioi_thieu']; ?>.png" style="display:inline-block; padding:5px 12px; background:#28a745; color:white; border-radius:4px; font-size:12px; font-weight:bold; text-decoration:none;">⬇ Tải ảnh QR</a>
            </div>
            <div class="o-copy-duong-dan">
                <input type="text" id="link_tk" value="<?php echo $duong_dan_tiep_thi; ?>" readonly>
                <button type="button" onclick="saoChepDuongDan()">SAO CHÉP</button>
            </div>
        </div>
        <ul class="danh-sach-chuc-nang">
            <li><a href="ho-so-ca-nhan.php" class="nut-chuyen-muc">📊 Thống kê Hiệu suất</a></li>
            <li><a href="ho-so-ca-nhan.php" class="nut-chuyen-muc">👤 Thông tin Định danh</a></li>
            <?php if(($nguoi_dung['vai_tro'] ?? '') == 'to_chuc'): ?>
            <li><a href="ho-so-ca-nhan.php" class="nut-chuyen-muc">🏢 Hồ sơ Doanh nghiệp</a></li>
            <?php endif; ?>
            <li><a href="ho-so-ca-nhan.php" class="nut-chuyen-muc">🎓 Khóa học của tôi</a></li>
            <li><a href="ho-so-ca-nhan.php" class="nut-chuyen-muc">💰 Quản lý Dòng tiền</a></li>
            <li><button class="nut-chuyen-muc dang-chon" onclick="event.preventDefault()">💳 Ví thành viên</button></li>
            <li><a href="ho-so-ca-nhan.php" class="nut-chuyen-muc">🔗 Chương trình Affiliate</a></li>
            <li><a href="ho-so-ca-nhan.php" class="nut-chuyen-muc">📬 Hộp thư Hệ thống</a></li>
            <li><a href="ho-so-ca-nhan.php" class="nut-chuyen-muc">💌 Lời Tri ân Cộng đồng</a></li>
            <li><a href="ho-so-ca-nhan.php" class="nut-chuyen-muc">🔐 Bảo mật Hệ thống</a></li>
            <li style="margin-top: 10px;"><a href="dang-xuat.php" class="nut-chuyen-muc" style="color: #dc3545; border-top: 1px solid #eee; border-radius: 0;">🚪 Đăng xuất an toàn</a></li>
        </ul>
    </div>

    <!-- NÚT TOGGLE FLOATING -->
    <button id="toggle-sidebar-btn-floating" class="nut-toggle-sidebar-floating" onclick="toggleSidebar()" title="Mở/Đóng Menu">
        <span id="toggle-icon">☰</span>
    </button>

<div class="wrap">

    <div class="tieu-de-trang" style="margin-top: 0;">
        💳 Ví thành viên
    </div>

    <!-- TỔNG QUAN SỐ DƯ -->
    <div class="luoi-tong-quan">
        <div class="hop-so-du" style="border-top-color:#28a745;">
            <div class="nhan">Số dư khả dụng</div>
            <div class="so" style="color:#155724;"><?php echo number_format($so_du_vi, 0, ',', '.'); ?> ₫</div>
            <div class="mo-ta">Có thể rút ngay</div>
        </div>
        <div class="hop-so-du" style="border-top-color:#ffc107;">
            <div class="nhan">Đang chờ duyệt</div>
            <div class="so" style="color:#856404;"><?php echo number_format($tong_cho_duyet, 0, ',', '.'); ?> ₫</div>
            <div class="mo-ta">Lệnh rút chưa xử lý</div>
        </div>
        <div class="hop-so-du" style="border-top-color:#0056b3;">
            <div class="nhan">Tài khoản nhận</div>
            <div class="so" style="font-size:15px; margin-top:4px;">
                <?php if ($co_ngan_hang): ?>
                    <span style="color:#004085;"><?php echo htmlspecialchars($nguoi_dung['ten_ngan_hang']); ?></span>
                <?php else: ?>
                    <span style="color:#dc3545; font-size:13px;">Chưa cài đặt</span>
                <?php endif; ?>
            </div>
            <div class="mo-ta">
                <?php echo $co_ngan_hang ? htmlspecialchars($nguoi_dung['chu_tai_khoan'] . ' — ' . $nguoi_dung['so_tai_khoan']) : 'Vào hồ sơ để thêm ngân hàng'; ?>
            </div>
        </div>
    </div>

    <!-- FORM RÚT TIỀN -->
    <?php if ($nguoi_dung['vai_tro'] === 'ca_nhan' || $nguoi_dung['vai_tro'] === 'admin'): ?>
    <div class="card">
        <h3>💸 Tạo lệnh rút tiền</h3>

        <!-- QUY ĐỊNH RÚT TIỀN - luôn hiển thị -->
        <div class="canh-bao" style="background:#fff8f0; border:1px solid #ffe5d0; color:#d97706; margin-bottom:16px;">
            <div>
                <strong>📋 Quy định rút tiền:</strong>
                <ul style="margin:8px 0 0; padding-left:18px; line-height:1.9; font-size:13px;">
                    <li>Số tiền rút tối thiểu <strong>500.000 ₫</strong>, tối đa bằng số dư khả dụng.</li>
                    <li>Hệ thống tự động khấu trừ <strong>10% Thuế TNCN</strong> và <strong>2% phí nền tảng</strong>.</li>
                    <li>Nhập đúng <strong>mã PIN 6 chữ số</strong> để xác nhận giao dịch.</li>
                    <li>Tiền sẽ về tài khoản ngân hàng đã đăng ký sau khi admin duyệt.</li>
                </ul>
            </div>
        </div>

        <?php if ($nguoi_dung['vai_tro'] === 'admin'): ?>
            <div class="canh-bao vang">⚠️ Tài khoản quản trị viên không thể thực hiện rút tiền.</div>
        <?php else: ?>
            <?php if (!$co_ngan_hang): ?>
                <div class="canh-bao do">⚠️ Bạn chưa cài đặt tài khoản ngân hàng thụ hưởng. Vui lòng vào <a href="ho-so-ca-nhan.php" style="color:#721c24;font-weight:bold;">Hồ sơ cá nhân → Quản lý Dòng tiền</a> để thêm trước khi rút.</div>
            <?php endif; ?>
            <?php if (!$co_pin): ?>
                <div class="canh-bao do">⚠️ Bạn chưa thiết lập mã PIN giao dịch. Vui lòng vào <a href="ho-so-ca-nhan.php" style="color:#721c24;font-weight:bold;">Bảo mật hệ thống</a> để tạo PIN trước.</div>
            <?php endif; ?>
            <?php if ($so_du_vi < 500000): ?>
                <div class="canh-bao vang">⏳ Số dư ví hiện tại <strong><?php echo number_format($so_du_vi, 0, ',', '.'); ?> ₫</strong> chưa đủ mức tối thiểu để rút (500.000 ₫).</div>
            <?php endif; ?>

            <div class="canh-bao xanh" style="display: <?php echo ($co_ngan_hang && $co_pin && $so_du_vi >= 500000) ? 'block' : 'none'; ?>;">✅ Tiền sẽ được chuyển về <strong><?php echo htmlspecialchars($nguoi_dung['ten_ngan_hang'] . ' — ' . $nguoi_dung['so_tai_khoan']); ?></strong> sau khi admin duyệt.</div>

            <form action="xu-ly-rut-tien.php" method="POST" onsubmit="return xacNhanRut()">
                <div class="luoi-form">
                    <div class="nhom">
                        <label>Số tiền muốn rút (₫)</label>
                        <input type="number" name="so_tien_rut" id="inp_so_tien"
                               min="500000" max="<?php echo $so_du_vi; ?>" step="1000"
                               placeholder="Tối thiểu 500.000 ₫"
                               oninput="tinhKhauTru(this.value)" <?php echo ($co_ngan_hang && $co_pin && $so_du_vi >= 500000) ? 'required' : 'disabled'; ?> >
                    </div>
                    <div class="nhom">
                        <label>Mã PIN giao dịch (6 chữ số)</label>
                        <input type="password" name="ma_pin_xac_nhan" maxlength="6" placeholder="••••••" <?php echo ($co_ngan_hang && $co_pin && $so_du_vi >= 500000) ? 'required' : 'disabled'; ?> >
                    </div>
                </div>

                <div class="may-tinh" id="may-tinh" style="display:none;">
                    <div class="dong"><span>Số tiền yêu cầu rút</span><span id="mc_goc">—</span></div>
                    <div class="dong" style="color:#dc3545;"><span>Thuế TNCN (10%)</span><span id="mc_thue">—</span></div>
                    <div class="dong" style="color:#dc3545;"><span>Phí nền tảng (2%)</span><span id="mc_phi">—</span></div>
                    <div class="dong tong"><span>💰 Thực nhận về tài khoản</span><span id="mc_thuc_nhan">—</span></div>
                </div>

                <button type="submit" class="nut-rut" <?php echo ($co_ngan_hang && $co_pin && $so_du_vi >= 500000) ? '' : 'disabled'; ?>>Gửi lệnh rút tiền</button>
            </form>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- LỊCH SỬ GIAO DỊCH -->
    <div class="card">
        <h3>📋 Lịch sử giao dịch</h3>
        <?php if (count($lich_su) > 0): ?>
            <div style="overflow-x:auto;">
            <table>
                <thead>
                    <tr>
                        <th>Ngày</th>
                        <th>Loại</th>
                        <th style="text-align:right;">Số tiền</th>
                        <th>Trạng thái</th>
                        <th>Ghi chú</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($lich_su as $gd):
                        $la_thu = in_array($gd['loai_giao_dich'], ['thu_lao', 'tri_an', 'hoa_hong']);
                        $ten_loai = [
                            'thu_lao'   => '🎤 Thù lao sự kiện',
                            'tri_an'    => '💌 Thu nhập tri ân',
                            'rut_tien'  => '💸 Rút tiền',
                        ][$gd['loai_giao_dich']] ?? $gd['loai_giao_dich'];
                    ?>
                    <tr>
                        <td style="white-space:nowrap; color:#666;"><?php echo date('d/m/Y H:i', strtotime($gd['ngay_tao'])); ?></td>
                        <td><?php echo $ten_loai; ?></td>
                        <td style="text-align:right; font-weight:bold; color:<?php echo $la_thu ? '#155724' : '#721c24'; ?>;">
                            <?php echo ($la_thu ? '+' : '-') . number_format($gd['so_tien'], 0, ',', '.'); ?> ₫
                        </td>
                        <td>
                            <?php if ($gd['trang_thai'] === 'cho_duyet'): ?>
                                <span class="badge cho">⏳ Chờ duyệt</span>
                            <?php elseif ($gd['trang_thai'] === 'da_chuyen'): ?>
                                <span class="badge xong">✅ Hoàn thành</span>
                            <?php else: ?>
                                <span class="badge"><?php echo htmlspecialchars($gd['trang_thai']); ?></span>
                            <?php endif; ?>
                        </td>
                        <td style="color:#555;">—</td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
            </div>
        <?php else: ?>
            <div style="text-align:center; color:#999; padding:30px; border:1px dashed #ddd; border-radius:8px;">Chưa có giao dịch nào.</div>
        <?php endif; ?>
    </div>

</div>

<script>
function toggleSidebar() {
    var sidebar = document.querySelector('.cot-trinh-don');
    sidebar.classList.toggle('sidebar-hidden');
}
function saoChepDuongDan() {
    var inp = document.getElementById('link_tk');
    inp.select(); inp.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(inp.value);
    alert('Đã sao chép đường dẫn giới thiệu!');
}

window.addEventListener('load', function() {
    if (window.innerWidth <= 768) {
        // Ẩn sidebar mặc định trên mobile
        var sidebar = document.querySelector('.cot-trinh-don');
        sidebar.classList.add('sidebar-hidden');

        // Click link/button trong sidebar -> ẩn sidebar
        document.querySelectorAll('.cot-trinh-don a, .cot-trinh-don button').forEach(function(el) {
            el.addEventListener('click', function() {
                sidebar.classList.add('sidebar-hidden');
            });
        });
    }
});
</script>

<script>
function tinhKhauTru(val) {
    var so = parseFloat(val) || 0;
    var may = document.getElementById('may-tinh');
    if (so < 500000) { may.style.display = 'none'; return; }
    may.style.display = 'block';
    var thue = so * 0.10;
    var phi  = so * 0.02;
    var thuc = so - thue - phi;
    var fmt  = function(n) { return n.toLocaleString('vi-VN') + ' ₫'; };
    document.getElementById('mc_goc').innerText       = fmt(so);
    document.getElementById('mc_thue').innerText      = '- ' + fmt(thue);
    document.getElementById('mc_phi').innerText       = '- ' + fmt(phi);
    document.getElementById('mc_thuc_nhan').innerText = fmt(thuc);
}

function xacNhanRut() {
    var so = parseFloat(document.getElementById('inp_so_tien').value) || 0;
    var max = <?php echo $so_du_vi; ?>;
    if (so > max) {
        alert('Số tiền rút vượt quá số dư khả dụng (' + max.toLocaleString('vi-VN') + ' ₫).');
        return false;
    }
    var thuc = so * 0.88;
    return confirm('Xác nhận rút ' + so.toLocaleString('vi-VN') + ' ₫?\nThực nhận sau khấu trừ: ' + thuc.toLocaleString('vi-VN') + ' ₫');
}
</script>

    <?php require_once 'includes/menu-dien-thoai.php'; ?>
</body>
</html>
