<!DOCTYPE html>

<html lang="en">

<!--begin::Head-->



<head>

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

   

    <title>Code Free | <?=$chinhapi['ten_web'];?></title>

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

 

 



</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 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">

<div class="container-fluid py-5" style="font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;">
    
    <div class="text-center mb-10">
        <h1 class="fw-bold text-gray-900 mb-2"><i class="bi bi-code-slash text-primary me-2"></i>KHO MÃ NGUỒN & PHẦN MỀM ĐỘC QUYỀN</h1>
        <p class="text-gray-500 fs-6">Tải xuống tài nguyên miễn phí dựa theo cấp bậc thạch anh & đá quý của tài khoản</p>
        <div class="d-inline-block badge badge-light-primary border border-primary border-opacity-25 fw-bold px-4 py-2.5 fs-7 mt-2 shadow-sm">
            <i class="bi bi-gem text-primary me-1"></i> Rank hiện tại của bạn: 
            <?php 
                $lvl = (int)$user['level'];
                if($lvl == 0) echo 'Thạch Anh';
                elseif($lvl == 1) echo 'Đồng (Bronze)';
                elseif($lvl == 2) echo 'Bạc (Silver)';
                elseif($lvl == 3) echo 'Vàng (Gold)';
                elseif($lvl == 4) echo 'Bạch Kim';
                elseif($lvl == 5) echo 'Lục Bảo';
                elseif($lvl == 6) echo 'Kim Cương';
                elseif($lvl == 9) echo 'Admin tối cao';
                else echo 'Thạch Anh';
            ?>
        </div>
    </div>

    <div class="row g-6 justify-content-center">
        <?php
        $get_codes = mysqli_query($ketnoi, "SELECT * FROM `free_codes` ORDER BY rank_req ASC");
        while($code = mysqli_fetch_assoc($get_codes)) {
            $req = (int)$code['rank_req'];
            $img_src = !empty($code['image']) ? $code['image'] : 'https://images.unsplash.com/photo-1618401471353-b98aedd07871?q=80&w=600&auto=format&fit=crop';
        ?>
        <div class="col-12 col-md-6 col-lg-4 col-xl-3">
            <div class="card h-100 shadow-sm border border-gray-200 rounded-3 overflow-hidden d-flex flex-column" style="background: #ffffff;">
                
                <div class="position-relative w-100 overflow-hidden border-bottom" style="height: 170px;">
                    <img src="<?=htmlspecialchars($img_src);?>" alt="Thumbnail" class="w-100 h-100" style="object-fit: cover;">

                    <div class="position-absolute top-0 end-0 m-3 z-index-2">
                        <?php
                        if($req == 0) echo '<span class="badge bg-secondary text-white fw-bold fs-9 py-1.5 px-2.5 shadow-sm">Thạch Anh</span>';
                        elseif($req == 1) echo '<span class="badge text-white fw-bold fs-9 py-1.5 px-2.5 shadow-sm" style="background-color: #B87333;">Rank Đồng</span>';
                        elseif($req == 2) echo '<span class="badge bg-gray-500 text-white fw-bold fs-9 py-1.5 px-2.5 shadow-sm">Rank Bạc</span>';
                        elseif($req == 3) echo '<span class="badge bg-warning text-white fw-bold fs-9 py-1.5 px-2.5 shadow-sm">Rank Vàng</span>';
                        elseif($req == 4) echo '<span class="badge bg-primary text-white fw-bold fs-9 py-1.5 px-2.5 shadow-sm">Bạch Kim</span>';
                        elseif($req == 5) echo '<span class="badge bg-success text-white fw-bold fs-9 py-1.5 px-2.5 shadow-sm">Lục Bảo</span>';
                        elseif($req == 6) echo '<span class="badge bg-info text-white fw-bold fs-9 py-1.5 px-2.5 shadow-sm">Kim Cương</span>';
                        ?>
                    </div>
                </div>

                <div class="card-body p-5 d-flex flex-column flex-grow-1">
                    <h3 class="fs-6 fw-bold text-gray-900 mb-2" style="display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;"><?=htmlspecialchars($code['title']);?></h3>
                    <p class="text-gray-500 fs-7 mb-0 flex-grow-1" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.5;"><?=htmlspecialchars($code['description']);?></p>
                </div>

                <div class="card-footer p-5 bg-transparent border-top-0 pt-0">
                    <button type="button" class="btn btn-primary w-100 fw-bold py-2.5 text-uppercase fs-8 rounded-2 text-white shadow-xs" onclick="startDownloadProcess(<?=$code['id'];?>, '<?=mysqli_real_escape_string($ketnoi, $code['title']);?>')">
                        <i class="bi bi-download me-1"></i> Truy cập trang tải
                    </button>
                </div>
            </div>
        </div>
        <?php } ?>
    </div>
</div>

<div class="modal fade" id="downloadCountdownModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-3 border-0 shadow">
            <div class="modal-body p-8 text-center">
                <div class="spinner-border text-primary mb-4" role="status" style="width: 3rem; height: 3rem;"></div>
                <h4 class="fw-bold text-gray-900 mb-2" id="modalCodeTitle">Đang kết nối đường truyền tải...</h4>
                <p class="text-gray-500 fs-6 mb-4">Vui lòng chờ trong giây lát hệ thống đang xử lý cấu trúc tệp tin.</p>
                <div class="fs-1 fw-bold text-primary font-monospace my-3" id="countdownNumber">5</div>
                <span class="text-muted fs-8 text-uppercase tracking-wider">Vui lòng không đóng tab này</span>
            </div>
        </div>
    </div>
</div>

<script>
var currentTimer = null;

function startDownloadProcess(codeId, codeTitle) {
    if (currentTimer !== null) {
        clearInterval(currentTimer);
    }

    var xhr = new XMLHttpRequest();
    // BẮN AJAX SANG FILE TÁCH BIỆT ĐỂ KHÔNG BỊ LẪN HTML GÂY LỖI CẤU TRÚC
    xhr.open("POST", "check_rank.php", true); 
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    
    xhr.onload = function() {
        if (xhr.status === 200) {
            try {
                var response = JSON.parse(xhr.responseText.trim());
                
                if (response.status === 'success') {
                    document.getElementById('modalCodeTitle').innerText = codeTitle;
                    document.getElementById('countdownNumber').innerText = "5";
                    
                    var downloadModalElement = document.getElementById('downloadCountdownModal');
                    var downloadModal = bootstrap.Modal.getInstance(downloadModalElement) || new bootstrap.Modal(downloadModalElement);
                    downloadModal.show();

                    var timeLeft = 5;
                    currentTimer = setInterval(function() {
                        timeLeft--;
                        document.getElementById('countdownNumber').innerText = timeLeft;
                        
                        if (timeLeft <= 0) {
                            clearInterval(currentTimer);
                            window.location.href = response.url; 
                            setTimeout(function() { downloadModal.hide(); }, 1000);
                        }
                    }, 1000);
                    
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Giới hạn cấp bậc!',
                        text: response.message,
                        confirmButtonText: 'Đã hiểu',
                        customClass: {
                            confirmButton: 'btn btn-warning'
                        }
                    });
                }
            } catch (e) {
                Swal.fire({ icon: 'error', title: 'Lỗi cấu trúc!', text: 'Hệ thống phản hồi dữ liệu không hợp lệ.' });
            }
        } else {
            Swal.fire({ icon: 'error', title: 'Lỗi hệ thống!', text: 'Không thể kết nối đến máy chủ.' });
        }
    };
    
    xhr.send("code_id=" + encodeURIComponent(codeId));
}
</script>
<?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/foot.php';?>
                <!--end::Footer-->
            </div>
            <!--end:::Main-->
        </div>
        <!--end::Wrapper-->
    </div>
    <!--end::Page-->
    </div>
