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

<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
   
    <title>Đổi mật khẩu | <?=$chinhapi['ten_web'];?></title>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/nav.php';?>
 
 

</head>
<!--
# dichvumoon.com - fb.com/dichvumoon.MMO
# dichvumoon.com - fb.com/dichvumoon.MMO -->
<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 on page load-->
    <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 on page load-->
    <!--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::Header-->

            <!--end::Header-->
            <!--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 menu-->
                <!--begin::Footer-->
                
                <!--end::Footer-->
            </div>
            <!--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">
                        <!--begin::Toolbar container-->
                        <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">
                                <!--begin::Title-->
                                <h1
                                    class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                                    Tài Khoản</h1>
                                <!--end::Title-->
                                <!--begin::Breadcrumb-->
                                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                                    <!--begin::Item-->
                                    <li class="breadcrumb-item text-muted">
                                        <a href="../../demo1/dist/index.html"
                                            class="text-muted text-hover-primary">Tài Khoản</a>
                                    </li>
                                    <!--end::Item-->
                                    <!--begin::Item-->
                                    <li class="breadcrumb-item">
                                        <span class="bullet bg-gray-400 w-5px h-2px"></span>
                                    </li>
                                    <!--end::Item-->
                                    <!--begin::Item-->
                                    <li class="breadcrumb-item text-muted">Bảng Tính</li>
                                    <!--end::Item-->
                                </ul>
                                <!--end::Breadcrumb-->
                            </div>
                            <!--end::Page title-->
                            <!--begin::Actions-->
                            <div class="d-flex align-items-center gap-2 gap-lg-3">
                                <!--begin::Filter menu-->
                              <a href="#" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#kt_modal_create_app"><?=tien($user['money']);?>đ</a>
                                <!--end::Primary button-->
                            </div>
                            <!--end::Actions-->
                        </div>
                        <!--end::Toolbar container-->
                    </div>
                    <!--end::Toolbar-->
                    <!--begin::Content-->
                    <div id="kt_app_content" class="app-content flex-column-fluid">
                        <!--begin::Content container-->

        <div class="container" id="kt_content_container">
            <!--begin::Navbar-->
<div class="row g-5 g-xl-10" style="font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;">
    
    <div class="col-100 col-lg-4 col-xl-3">
        <div class="card card-flush shadow-sm h-100">
            <div class="card-body d-flex flex-column pt-9 px-6 pb-6">
                
                <div class="d-flex flex-column align-items-center mb-7">
                    <div class="symbol symbol-100px symbol-circle mb-4 position-relative">
                        <img src="https://i.imgur.com/IXvIW8G.png" alt="Avatar" class="border border-3 border-gray-200" />
                        <div class="position-absolute translate-middle bottom-0 start-100 mb-2 bg-success rounded-circle border border-3 border-white h-15px w-15px shadow"></div>
                    </div>
                    
                    <div class="text-center">
                        <a href="#" class="text-gray-900 text-hover-primary fs-4 fw-boldest d-flex align-items-center justify-content-center gap-1">
                            <?=$username;?>
                            <span class="svg-icon svg-icon-3 svg-icon-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <path d="M10.0813 3.7242C10.8849 2.16438 13.1151 2.16438 13.9187 3.7242V3.7242C14.4016 4.66147 15.4909 5.1127 16.4951 4.79139V4.79139C18.1663 4.25668 19.7433 5.83365 19.2086 7.50485V7.50485C18.8873 8.50905 19.3385 9.59842 20.2758 10.0813V10.0813C21.8356 10.8849 21.8356 13.1151 20.2758 13.9187V13.9187C19.3385 14.4016 18.8873 15.491 19.2086 16.4951V16.4951C19.7433 18.1663 18.1663 19.7433 16.4951 19.2086V19.2086C15.491 18.8873 14.4016 19.3385 13.9187 20.2758V20.2758C13.1151 21.8356 10.8849 21.8356 10.0813 20.2758V20.2758C9.59842 19.3385 8.50905 18.8873 7.50485 19.2086V19.2086C5.83365 19.7433 4.25668 18.1663 4.79139 16.4951V16.4951C5.1127 15.491 4.66147 14.4016 3.7242 13.9187V13.9187C2.16438 13.1151 2.16438 10.8849 3.7242 10.0813V10.0813C4.66147 9.59842 5.1127 8.50905 4.79139 7.50485V7.50485C4.25668 5.83365 5.83365 4.25668 7.50485 4.79139V4.79139C8.50905 5.1127 9.59842 4.66147 10.0813 3.7242V3.7242Z" fill="#00A3FF" />
                                    <path class="permanent" d="M14.8563 9.1903C15.0606 8.94984 15.3771 8.9385 15.6175 9.14289C15.858 9.34728 15.8229 9.66433 15.6185 9.9048L11.863 14.6558C11.6554 14.9001 11.2876 14.9258 11.048 14.7128L8.47656 12.4271C8.24068 12.2174 8.21944 11.8563 8.42911 11.6204C8.63877 11.3845 8.99996 11.3633 9.23583 11.5729L11.3706 13.4705L14.8563 9.1903Z" fill="white" />
                                </svg>
                            </span>
                        </a>
                        <span class="text-muted fs-8 fw-bold text-uppercase tracking-widest mt-1 d-block"><?=capbac($user['level']);?></span>
                    </div>
                </div>

                <div class="separator separator-dashed border-gray-200 mb-6"></div>

                <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">Tài khoản</span>
                    
                    <a href="/profile" class="btn btn-sm btn-text-gray-600 btn-active-light-primary text-start w-100 py-3 px-4 d-flex align-items-center">
                        <i class="bi bi-grid-1x2 me-3 fs-5 text-gray-400"></i>
                        <span class="fw-bold tracking-wide text-uppercase fs-8">Tổng quan hồ sơ</span>
                    </a>
                    
                    <a href="/password" class="btn btn-sm btn-light-primary text-start w-100 py-3 px-4 d-flex align-items-center active">
                        <i class="bi bi-key me-3 fs-5"></i>
                        <span class="fw-bold tracking-wide text-uppercase fs-8">Đổi mật khẩu</span>
                    </a>
                    <a href="/cap-bac" class="btn btn-sm btn-text-gray-600 btn-active-light-primary text-start w-100 py-3 px-4 d-flex align-items-center">
    <i class="bi bi-award me-3 fs-5 text-gray-400"></i>
    <span class="fw-bold tracking-wide text-uppercase fs-8">Cấp bậc</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">Tiện ích</span>
                    
                    <a href="/nap-tien" class="btn btn-sm btn-text-success btn-active-light-success text-start w-100 py-3 px-4 d-flex align-items-center">
                        <i class="bi bi-wallet2 me-3 fs-5 text-success"></i>
                        <span class="fw-bold tracking-wide text-uppercase fs-8">Nạp tiền vào ví</span>
                    </a>

                    <a href="#" class="btn btn-sm btn-text-gray-600 btn-active-light-dark text-start w-100 py-3 px-4 d-flex align-items-center" data-kt-drawer-show="true" data-kt-drawer-target="#kt_drawer_chat">
                        <i class="bi bi-chat-square-text me-3 fs-5 text-gray-400"></i>
                        <span class="fw-bold tracking-wide text-uppercase fs-8">Liên hệ Admin</span>
                    </a>
                </div>

                <div class="mt-auto pt-5">
                    <div class="d-flex justify-content-between w-100 mb-1">
                        <span class="fw-bold fs-9 text-muted text-uppercase tracking-wider">Hồ sơ cá nhân</span>
                        <span class="fw-boldest fs-8 text-success font-monospace">100%</span>
                    </div>
                    <div class="h-6px w-100 bg-light rounded-pill">
                        <div class="bg-success rounded-pill h-6px" style="width: 100%;"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="col-100 col-lg-8 col-xl-9">
        
        <div class="card shadow-sm mb-5 mb-xl-10" id="kt_profile_details_view">
            <div class="card-header align-items-center py-4">
                <div class="card-title m-0">
                    <h3 class="fw-boldest text-uppercase tracking-wider fs-6 m-0 text-gray-800">
                        <i class="bi bi-shield-lock text-primary me-2 fs-5"></i>Thay Đổi Mật Khẩu
                    </h3>
                </div>
            </div>
            
            <div class="card-body p-9">
                <div class="row mb-6 align-items-center">
                    <label class="col-lg-4 fw-bold text-muted text-uppercase tracking-widest fs-8">Tên người dùng</label>
                    <div class="col-lg-7 fv-row">
                        <input type="text" name="username" id="username" class="form-control form-control-lg form-control-solid fw-boldest text-gray-700 bg-light" style="font-family: 'JetBrains Mono', monospace;" readonly value="<?=$username;?>" />
                    </div>
                </div>

                <div class="row mb-6 align-items-center">
                    <label class="col-lg-4 fw-bold text-muted text-uppercase tracking-widest fs-8 required">Mật khẩu hiện tại</label>
                    <div class="col-lg-7 fv-row position-relative">
                        <input type="password" name="password1" id="password1" class="form-control form-control-lg form-control-solid rounded-3 fs-6" placeholder="Nhập mật khẩu hiện tại của bạn" />
                    </div>
                </div>

                <div class="row mb-6 align-items-center">
                    <label class="col-lg-4 fw-bold text-muted text-uppercase tracking-widest fs-8 required">Mật khẩu mới</label>
                    <div class="col-lg-7 fv-row">
                        <input type="password" name="password2" id="password2" class="form-control form-control-lg form-control-solid rounded-3 fs-6" placeholder="Ký tự mật khẩu mới" />
                    </div>
                </div>

                <div class="row mb-3 align-items-center">
                    <label class="col-lg-4 fw-bold text-muted text-uppercase tracking-widest fs-8 required">Nhập lại mật khẩu mới</label>
                    <div class="col-lg-7 fv-row">
                        <input type="password" name="password3" id="password3" class="form-control form-control-lg form-control-solid rounded-3 fs-6" placeholder="Xác nhận lại mật khẩu mới" />
                    </div>
                </div>
            </div>

            <div class="card-footer d-flex justify-content-end py-5 px-9 bg-light bg-opacity-30 border-top">
                <button class="btn btn-primary fw-bold text-uppercase tracking-wide px-6 py-3" id="kt_account_profile_details_submit" type="button" onclick="save()">
                    <i class="bi bi-check-circle-fill me-1"></i> Lưu Thay Đổi
                </button>
            </div>
        </div>

        <div class="card shadow-sm position-relative overflow-hidden" style="border: 1px dashed var(--bs-primary-border-subtle);">
            <div class="position-absolute w-100 h-100 d-flex flex-column align-items-center justify-content-center" style="background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(4px); z-index: 5; top: 0; start: 0;">
                <span class="badge badge-primary text-uppercase tracking-widest px-3 py-2 fs-8 fw-boldest mb-2 shadow-sm">Sắp ra mắt / Coming Soon</span>
                <p class="text-gray-500 fs-7 fw-bold m-0 px-5 text-center">Hệ thống đang phát triển phương thức xác thực nâng cấp nhằm bảo vệ ví tiền của bạn an toàn tuyệt đối.</p>
            </div>

            <div class="card-header py-4">
                <div class="card-title m-0">
                    <h3 class="fw-boldest text-uppercase tracking-wider fs-6 m-0 text-gray-400">
                        <i class="bi bi-shield-shaded me-2 fs-5 text-gray-400"></i>Bảo Mật 2 Lớp Nâng Cao
                    </h3>
                </div>
            </div>
            <div class="card-body p-9">
                <div class="d-flex align-items-center justify-content-between mb-5 opacity-25">
                    <div>
                        <h4 class="fs-6 fw-bolder mb-1">Xác thực qua mã ứng dụng (Google Authenticator / 2FA)</h4>
                        <span class="text-muted fs-7">Yêu cầu mã số ngẫu nhiên đổi liên tục mỗi 30 giây khi thực hiện rút/tiêu tiền.</span>
                    </div>
                    <div class="form-check form-switch form-check-custom form-check-solid">
                        <input class="form-check-input h-25px w-45px" type="checkbox" disabled />
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between opacity-25">
                    <div>
                        <h4 class="fs-6 fw-bolder mb-1">Khóa két tài khoản tạm thời</h4>
                        <span class="text-muted fs-7">Đóng băng toàn bộ số dư và giao dịch mua acc trong thời gian bạn treo máy.</span>
                    </div>
                    <div class="form-check form-switch form-check-custom form-check-solid">
                        <input class="form-check-input h-25px w-45px" type="checkbox" disabled />
                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>

<script>
function save() {
    const password1 = document.getElementById("password1").value;
    const password2 = document.getElementById("password2").value;
    const password3 = document.getElementById("password3").value;

    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/ajax/changepass.php");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onload = function() {
        if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            if (response.success) {
                Swal.fire({
                    icon: "success",
                    text: "Thay đổi mật khẩu thành công!",
                }).then(function() {
                    location.reload();
                });
            } else {
                Swal.fire({
                    icon: "error",
                    text: response.message,
                });
            }
        } else {
            Swal.fire({
                icon: "error",
                text: "Error: " + xhr.statusText,
            });
        }
    };
    xhr.onerror = function() {
        Swal.fire({
            icon: "error",
            text: "Error: " + xhr.statusText,
        });
    };
    xhr.send(
         "password1=" + encodeURIComponent(password1)
        + "&password2=" + encodeURIComponent(password2)
        + "&password3=" + encodeURIComponent(password3)
    );
}
</script>
    <!--end::Content-->
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/foot.php';?>

</body>
<!--end::Body-->