<!DOCTYPE html>
<html lang="vi">
<!--begin::Head-->
<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
    <title>Hồ Sơ Cá Nhân | <?=$chinhapi['ten_web'];?></title>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/nav.php';?>
</head>
<!--end::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">
    
    <!--begin::Theme mode setup-->
    <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>
    <!--end::Theme mode setup-->

    <!--begin::App-->
    <div class="d-flex flex-column flex-root app-root" id="kt_app_root">
        <!--begin::Page-->
        <div class="app-page flex-column flex-column-fluid" id="kt_app_page">
            
            <!--begin::Wrapper-->
            <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
                <!--begin::Sidebar-->
                <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/sider.php';?>
                <!--end::Sidebar-->

                <!--begin::Main-->
                <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                    <!--begin::Content wrapper-->
                    <div class="d-flex flex-column flex-column-fluid">
                        
                        <!--begin::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">
                                <!--begin::Page title-->
                                <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">Hồ Sơ Khách Hàng</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">Trang chủ</a>
                                        </li>
                                        <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                                        <li class="breadcrumb-item text-muted">Cá nhân hóa</li>
                                    </ul>
                                </div>
                                <!--end::Page title-->
                                
                                <!--begin::Actions-->
                                <div class="d-flex align-items-center gap-2 gap-lg-3">
                                    <a href="/nap-tien" class="btn btn-sm fw-bold btn-success transition-all hover-elevate-up" data-bs-toggle="tooltip" title="Nạp tiền ngay để nhận ưu đãi">
                                        <i class="ki-duotone ki-wallet fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i> Nạp Tiền
                                    </a>
                                </div>
                                <!--end::Actions-->
                            </div>
                        </div>
                        <!--end::Toolbar-->

                        <!--begin::Content-->
                        <div id="kt_app_content" class="app-content flex-column-fluid">
                            <div class="app-container container-fluid" id="kt_content_container">
                                
                                <div class="row g-5 g-xl-10">
                                    
                                    <!-- ========================================== -->
                                    <!-- CỘT TRÁI: SIDEBAR PROFILE CHUYÊN NGHIỆP    -->
                                    <!-- ========================================== -->
                                    <div class="col-12 col-lg-4 col-xl-3">
                                        <div class="card card-flush shadow-sm rounded-4 border-0 h-100 overflow-hidden">
                                            
                                            <!-- Banner Cover Bìa -->
                                            <div class="h-125px w-100" style="background: linear-gradient(112.14deg, #00D2FF 0%, #3A7BD5 100%);"></div>
                                            
                                            <div class="card-body d-flex flex-column pt-0 px-6 pb-6 mt-n12">
                                                
                                                <!-- Avatar đè lên bìa -->
                                                <div class="d-flex flex-column align-items-center mb-7">
                                                    <div class="symbol symbol-120px symbol-circle mb-4 position-relative bg-white p-1 shadow-sm">
                                                        <img src="https://i.imgur.com/IXvIW8G.png" alt="Avatar" class="border border-2 border-white" />
                                                        <div class="position-absolute translate-middle bottom-0 start-100 mb-2 bg-success rounded-circle border border-3 border-white h-20px w-20px shadow animate-blink" data-bs-toggle="tooltip" title="Đang Online"></div>
                                                    </div>
                                                    
                                                    <div class="text-center">
                                                        <h3 class="text-gray-900 fs-3 fw-boldest d-flex align-items-center justify-content-center gap-1 mb-1">
                                                            <?=$username;?>
                                                            <i class="ki-duotone ki-verify fs-2 text-primary" data-bs-toggle="tooltip" title="Tài khoản đã xác thực"><span class="path1"></span><span class="path2"></span></i>
                                                        </h3>
                                                        <div class="d-flex align-items-center justify-content-center gap-2 mt-2">
                                                            <span class="badge badge-light-primary fw-bold px-3 py-1 text-uppercase fs-9 tracking-wider rounded-pill"><?=capbac($user['level']);?></span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Menu điều hướng -->
                                                <div class="d-flex flex-column gap-2 flex-grow-1">
                                                    <span class="text-gray-400 fs-9 fw-boldest text-uppercase tracking-widest px-3 mb-1 mt-2">Bảng Điều Khiển</span>
                                                    
                                                    <a href="/profile" class="btn btn-sm btn-light-primary text-start w-100 py-3 px-4 d-flex align-items-center active rounded-3 transition-all">
                                                        <i class="ki-duotone ki-user me-3 fs-3"><span class="path1"></span><span class="path2"></span></i>
                                                        <span class="fw-bold fs-7">Tổng quan hồ sơ</span>
                                                    </a>
                                                    
                                                    <a href="/password" class="btn btn-sm btn-color-gray-600 btn-active-light-primary text-start w-100 py-3 px-4 d-flex align-items-center rounded-3 transition-all">
                                                        <i class="ki-duotone ki-key me-3 fs-3"><span class="path1"></span><span class="path2"></span></i>
                                                        <span class="fw-bold fs-7">Bảo mật mật khẩu</span>
                                                    </a>
                                                    
                                                    <a href="/cap-bac" class="btn btn-sm btn-color-gray-600 btn-active-light-primary text-start w-100 py-3 px-4 d-flex align-items-center rounded-3 transition-all">
                                                        <i class="ki-duotone ki-medal-star me-3 fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                                                        <span class="fw-bold fs-7">Cấp bậc & Ưu đãi</span>
                                                    </a>

                                                    <div class="separator separator-dashed border-gray-200 my-4"></div>
                                                    
                                                    <span class="text-gray-400 fs-9 fw-boldest text-uppercase tracking-widest px-3 mb-1">Giao dịch & Hỗ trợ</span>
                                                    
                                                    <a href="/nap-tien" class="btn btn-sm btn-color-gray-600 btn-active-light-success text-start w-100 py-3 px-4 d-flex align-items-center rounded-3 transition-all">
                                                        <i class="ki-duotone ki-wallet me-3 fs-3 text-success"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                                                        <span class="fw-bold fs-7">Nạp tiền vào ví</span>
                                                    </a>

                                                    <a href="#" class="btn btn-sm btn-color-gray-600 btn-active-light-dark text-start w-100 py-3 px-4 d-flex align-items-center rounded-3 transition-all" data-kt-drawer-show="true" data-kt-drawer-target="#kt_drawer_chat">
                                                        <i class="ki-duotone ki-message-text-2 me-3 fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                                        <span class="fw-bold fs-7">Trò chuyện Admin</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- KẾT THÚC CỘT TRÁI -->

                                    <!-- ========================================== -->
                                    <!-- CỘT PHẢI: THỐNG KÊ & CHI TIẾT TÀI KHOẢN    -->
                                    <!-- ========================================== -->
                                    <div class="col-12 col-lg-8 col-xl-9">
                                        
                                        <!-- Khối 3 Card Thống Kê (Hover Elevate Up) -->
                                        <div class="row g-5 mb-7">
                                            <!-- Thẻ Số dư -->
                                            <div class="col-12 col-md-4">
                                                <div class="card bg-light-success shadow-sm rounded-4 border-0 transition-all hover-elevate-up h-100 p-6">
                                                    <div class="d-flex align-items-center mb-3">
                                                        <div class="symbol symbol-45px me-3">
                                                            <div class="symbol-label bg-success bg-opacity-10">
                                                                <i class="ki-duotone ki-finance-calculator fs-1 text-success"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                                                            </div>
                                                        </div>
                                                        <span class="text-gray-600 fw-bold fs-6 text-uppercase tracking-wider">Số dư ví</span>
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <span class="fs-1 fw-boldest text-success font-monospace" data-kt-countup="true" data-kt-countup-value="<?=$user['money'];?>">0</span>
                                                        <span class="fs-4 fw-bold text-success ms-1">đ</span>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Thẻ Tổng nạp -->
                                            <div class="col-12 col-md-4">
                                                <div class="card bg-light-primary shadow-sm rounded-4 border-0 transition-all hover-elevate-up h-100 p-6">
                                                    <div class="d-flex align-items-center mb-3">
                                                        <div class="symbol symbol-45px me-3">
                                                            <div class="symbol-label bg-primary bg-opacity-10">
                                                                <i class="ki-duotone ki-chart-line-up fs-1 text-primary"><span class="path1"></span><span class="path2"></span></i>
                                                            </div>
                                                        </div>
                                                        <span class="text-gray-600 fw-bold fs-6 text-uppercase tracking-wider">Tổng tích lũy</span>
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <span class="fs-1 fw-boldest text-primary font-monospace" data-kt-countup="true" data-kt-countup-value="<?=$user['tong_nap'];?>">0</span>
                                                        <span class="fs-4 fw-bold text-primary ms-1">đ</span>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Thẻ Đã tiêu -->
                                            <div class="col-12 col-md-4">
                                                <div class="card bg-light-warning shadow-sm rounded-4 border-0 transition-all hover-elevate-up h-100 p-6">
                                                    <div class="d-flex align-items-center mb-3">
                                                        <div class="symbol symbol-45px me-3">
                                                            <div class="symbol-label bg-warning bg-opacity-10">
                                                                <i class="ki-duotone ki-basket fs-1 text-warning"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                                                            </div>
                                                        </div>
                                                        <span class="text-gray-600 fw-bold fs-6 text-uppercase tracking-wider">Chi tiêu</span>
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <span class="fs-1 fw-boldest text-warning font-monospace" data-kt-countup="true" data-kt-countup-value="<?=$user['tong_nap']-$user['money'];?>">0</span>
                                                        <span class="fs-4 fw-bold text-warning ms-1">đ</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Khối Chi tiết thông tin cấu trúc lưới bảng mới -->
                                        <div class="card shadow-sm rounded-4 border-0">
                                            <div class="card-header border-bottom border-gray-200 min-h-60px px-7">
                                                <h3 class="card-title align-items-start flex-column m-0 justify-content-center">
                                                    <span class="fw-boldest text-gray-900 fs-5 text-uppercase tracking-wider">Thông tin bảo mật</span>
                                                    <span class="text-muted mt-1 fw-semibold fs-8">Các thông tin cá nhân và định danh kết nối</span>
                                                </h3>
                                                <div class="card-toolbar">
                                                    <a href="/password" class="btn btn-sm btn-light-primary fw-bold">
                                                        <i class="ki-duotone ki-pencil fs-6"><span class="path1"></span><span class="path2"></span></i> Cập nhật
                                                    </a>
                                                </div>
                                            </div>
                                            
                                            <div class="card-body p-7">
                                                <div class="table-responsive">
                                                    <table class="table table-row-dashed table-row-gray-200 align-middle gs-0 gy-4 m-0">
                                                        <tbody>
                                                            <!-- Dòng 1 -->
                                                            <tr>
                                                                <td class="w-md-250px fw-bold text-muted text-uppercase tracking-widest fs-8 pb-3">Tên đăng nhập</td>
                                                                <td class="fw-boldest text-gray-900 fs-6 font-monospace pb-3 d-flex align-items-center">
                                                                    <?=$username;?>
                                                                    <i class="ki-duotone ki-copy ms-2 text-muted fs-5 cursor-pointer hover-primary" data-bs-toggle="tooltip" title="Sao chép tên"></i>
                                                                </td>
                                                            </tr>
                                                            <!-- Dòng 2 -->
                                                            <tr>
                                                                <td class="w-md-250px fw-bold text-muted text-uppercase tracking-widest fs-8 py-3">Địa chỉ Email</td>
                                                                <td class="fw-semibold text-gray-800 fs-6 font-monospace py-3 d-flex align-items-center">
                                                                    <?= !empty($user['email']) ? $user['email'] : 'Chưa cập nhật email'; ?>
                                                                    <?php if(!empty($user['email'])): ?>
                                                                        <i class="ki-duotone ki-copy ms-2 text-muted fs-5 cursor-pointer hover-primary" data-bs-toggle="tooltip" title="Sao chép Email"></i>
                                                                    <?php endif; ?>
                                                                </td>
                                                            </tr>
                                                            <!-- Dòng 3 -->
                                                            <tr>
                                                                <td class="w-md-250px fw-bold text-muted text-uppercase tracking-widest fs-8 py-3">Cấp độ tài khoản</td>
                                                                <td class="py-3">
                                                                    <span class="badge badge-light-danger fw-bold px-3 py-1 rounded-1 text-uppercase tracking-widest"><?=capbac($user['level']);?></span>
                                                                </td>
                                                            </tr>
                                                            <!-- Dòng 4 -->
                                                            <tr>
                                                                <td class="w-md-250px fw-bold text-muted text-uppercase tracking-widest fs-8 py-3">Địa chỉ IP an toàn</td>
                                                                <td class="py-3">
                                                                    <div class="d-inline-flex align-items-center bg-light-info rounded px-3 py-1 border border-info border-opacity-25">
                                                                        <i class="ki-duotone ki-abstract-41 fs-5 text-info me-2"><span class="path1"></span><span class="path2"></span></i>
                                                                        <span class="fw-bold text-info fs-7 font-monospace"><?=$user['ip'];?></span>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <!-- Dòng 5 -->
                                                            <tr>
                                                                <td class="w-md-250px fw-bold text-muted text-uppercase tracking-widest fs-8 pt-3 border-bottom-0">Ngày gia nhập hệ thống</td>
                                                                <td class="fw-semibold text-gray-700 fs-6 font-monospace pt-3 border-bottom-0">
                                                                    <?=$user['time'];?>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <!-- KẾT THÚC CỘT PHẢI -->

                                </div>
                                
                            </div>
                        </div>
                        <!--end::Content-->
                        
                    </div>
                    <!--end::Content wrapper-->
                    
                    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/foot.php';?>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
