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

<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
    <title>Kho Code | <?=$lxtdev['ten_web'];?></title>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/nav.php';?>
    
    <!-- Bộ thư viện Icon trực quan -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* CSS Nâng Cấp Bảng Dữ Liệu Lịch Sử Mua Hàng */
        .premium-history-card {
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
            border-radius: 16px !important;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.02) !important;
            background: #ffffff;
            overflow: hidden;
        }
        [data-bs-theme="dark"] .premium-history-card {
            background: #1e1e2d;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2) !important;
        }

        .custom-history-table thead tr {
            background: rgba(48, 133, 214, 0.04) !important;
            border-bottom: 2px solid rgba(48, 133, 214, 0.1) !important;
        }
        [data-bs-theme="dark"] .custom-history-table thead tr {
            background: rgba(255, 255, 255, 0.02) !important;
            border-bottom: 2px solid rgba(255, 255, 255, 0.05) !important;
        }

        .custom-history-table th {
            padding: 16px 12px !important;
            font-size: 0.85rem !important;
            letter-spacing: 0.5px;
        }

        .custom-history-table td {
            padding: 16px 12px !important;
            vertical-align: middle !important;
            font-size: 0.95rem;
        }

        .custom-history-table tbody tr {
            transition: background 0.2s ease;
        }
        .custom-history-table tbody tr:hover {
            background: rgba(48, 133, 214, 0.01) !important;
        }

        .badge-trans-id {
            background: #f4f6f9;
            color: #181c32;
            padding: 6px 10px;
            border-radius: 6px;
            font-family: Monaco, Consolas, monospace;
            font-weight: 700;
        }
        [data-bs-theme="dark"] .badge-trans-id {
            background: #2b2b40;
            color: #ffffff;
        }

        .btn-premium-download {
            background: linear-gradient(135deg, #10b981, #059669) !important;
            color: white !important;
            font-weight: 600 !important;
            border-radius: 8px !important;
            transition: 0.3s !important;
            box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2) !important;
        }
        .btn-premium-download:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35) !important;
        }
    </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 TIÊU ĐỀ -->
                    <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-receipt text-primary fs-4 mb-1"></i> Lịch Sử Mua Mã Nguồn
                                </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">Bảng Tính</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 LỊCH SỬ -->
                    <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-10">
                                <div class="col-xl-12">
                                    
                                    <div class="card premium-history-card mb-5">
                                        <!-- Header Thẻ -->
                                        <div class="card-header border-0 pt-6 bg-transparent">
                                            <div class="card-title">
                                                <div class="d-flex flex-column">
                                                    <span class="fw-black text-dark fs-4 mb-1">Giao dịch mua Item thành công</span>
                                                    <span class="text-muted fw-semibold fs-7"><i class="fa-regular fa-clock me-1"></i> Đồng bộ tự động: <?=$time;?></span>
                                                </div>
                                            </div>
                                            <div class="card-toolbar">
                                                <a href="" class="btn btn-sm btn-light-primary fw-bold px-4 py-2" data-bs-toggle="tooltip" title="Làm mới dữ liệu mua">
                                                    <i class="fa-solid fa-rotate me-1"></i> Tải lại trang
                                                </a>
                                            </div>
                                        </div>
                                        
                                        <!-- Thân Thẻ / Bảng Dữ Liệu -->
                                        <div class="card-body py-4">
                                            <div class="table-responsive">
                                                <table class="table custom-history-table table-row-dashed align-middle gs-0 gy-4">
                                                    <thead>
                                                        <tr class="fw-bolder text-muted text-uppercase fs-8">
                                                            <th class="w-25px ps-3">
                                                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                    <input class="form-check-input" type="checkbox" value="1" data-kt-check="true" data-kt-check-target=".widget-9-check" />
                                                                </div>
                                                            </th>
                                                            <th class="min-w-140px">Mã Giao Dịch</th>
                                                            <th class="min-w-200px">Sản Phẩm Mã Nguồn</th>
                                                            <th class="min-w-150px text-center">Thời Gian Mua</th>
                                                            <th class="min-w-130px text-center">Trạng Thái</th>
                                                            <th class="min-w-100px text-end pe-3">Hành Động</th>
                                                        </tr>
                                                    </thead>
                                                    
                                                    <tbody>
                                                        <?php
                                                        $result = mysqli_query($ketnoi, "SELECT * FROM `lich_su_mua_code` WHERE `username` = '$username' ORDER BY `id` DESC ");
                                                        while($row = mysqli_fetch_assoc($result)) { 
                                                            $id_code = $row['loaicode'];
                                                            $code = $ketnoi->query("SELECT * FROM `khocode` WHERE `id` = '$id_code' ")->fetch_array();
                                                        ?>
                                                        <tr>
                                                            <td class="ps-3">
                                                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                    <input class="form-check-input widget-9-check" type="checkbox" value="1" />
                                                                </div>
                                                            </td>

                                                            <td>
                                                                <span class="badge-trans-id">
                                                                    #<?=$row['trans_id'];?>
                                                                </span>
                                                            </td>

                                                            <td>
                                                                <span class="text-dark fw-bold text-hover-primary fs-6 d-block">
                                                                    <?=isset($code['title']) ? $code['title'] : 'Mã nguồn đã bị xóa hoặc ẩn';?>
                                                                </span>
                                                            </td>

                                                            <td class="text-center text-gray-700 fw-semibold fs-7">
                                                                <i class="fa-regular fa-calendar me-1 text-muted"></i> <?=ngay($row['time']);?>
                                                            </td>

                                                            <td class="text-center">
                                                                <?=code($row['status']);?>
                                                            </td>

                                                            <td class="text-end pe-3">
                                                                <?php if(!empty($code['link'])) { ?>
                                                                    <a href="<?=$code['link'];?>" target="_blank" class="btn btn-sm btn-premium-download px-3 py-2 d-inline-flex align-items-center gap-1" data-bs-toggle="tooltip" title="Tải tệp zip mã nguồn về máy">
                                                                        <i class="fa-solid fa-cloud-arrow-down fs-7"></i> Tải về
                                                                    </a>
                                                                <?php } else { ?>
                                                                    <button class="btn btn-sm btn-secondary px-3 py-2" disabled><i class="fa-solid fa-link-slash me-1"></i> Trống</button>
                                                                <?php } ?>
                                                            </td>
                                                        </tr>
                                                        <?php } ?>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

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