<!DOCTYPE html>
<html lang="en">
<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
    <title>Lịch Sử Mua Host | <?=$lxtdev['ten_web'];?></title>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/nav.php';?>

    <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ử Hosting */
        .premium-host-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-host-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-host-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-host-table thead tr {
            background: rgba(255, 255, 255, 0.02) !important;
            border-bottom: 2px solid rgba(255, 255, 255, 0.05) !important;
        }

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

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

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

        .badge-index {
            background: #f4f6f9;
            color: #5e6278;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 700;
        }
        [data-bs-theme="dark"] .badge-index {
            background: #2b2b40;
            color: #92929f;
        }

        .btn-manage-host {
            background-color: rgba(48, 133, 214, 0.08) !important;
            color: #3085d6 !important;
            font-weight: 600 !important;
            border-radius: 8px !important;
            transition: 0.3s !important;
        }
        .btn-manage-host:hover {
            background-color: #3085d6 !important;
            color: #ffffff !important;
            transform: translateY(-1px);
        }
    </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">
                    
                    <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-server text-primary fs-4 mb-1"></i> Lịch Sử Đăng Ký Hosting
                                </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">Dịch Vụ Cloud</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>

                    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
                        <div class="container-xxl" id="kt_content_container">
                            
                            <div class="card premium-host-card mb-5">
                                <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">Danh sách gói dịch vụ Cloud Hosting</span>
                                            <span class="text-muted fw-semibold fs-7"><i class="fa-regular fa-clock me-1"></i> Đồng bộ thời gian thực: <?=$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="Tải lại bảng dữ liệu">
                                            <i class="fa-solid fa-rotate me-1"></i> Tải lại trang
                                        </a>
                                    </div>
                                </div>
                                
                                <div class="card-body py-4">
                                    <div class="table-responsive">
                                        <table class="table custom-host-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="w-60px text-center">STT</th>
                                                    <th class="min-w-180px">Tên Miền Đăng Ký</th>
                                                    <th class="min-w-120px text-center">Gói Host</th>
                                                    <th class="min-w-150px text-center">Ngày Khởi Tạo</th>
                                                    <th class="min-w-150px text-center">Ngày Hết Hạn</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
                                                $i = 1;
                                                $result = mysqli_query($ketnoi, "SELECT * FROM `lich_su_mua_host` WHERE `username` = '$username' ORDER BY `id` DESC");
                                                while($row1 = mysqli_fetch_assoc($result)) { ?>
                                                <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 class="text-center">
                                                        <span class="badge-index"><?=$i++;?></span>
                                                    </td>

                                                    <td>
                                                        <a href="https://<?=$row1['domain'];?>/" target="_blank" class="text-dark fw-bolder text-hover-primary fs-6 d-inline-flex align-items-center gap-1">
                                                            <i class="fa-solid fa-globe text-muted fs-7"></i> <?=$row1['domain'];?>
                                                        </a>
                                                    </td>

                                                    <td class="text-center">
                                                        <span class="badge badge-light-primary fw-bold px-3 py-1.5 fs-7">
                                                            <?=$row1['goi_host'];?>
                                                        </span>
                                                    </td>

                                                    <td class="text-center text-gray-700 fw-semibold fs-7">
                                                        <?=date('H:i d-m-Y', $row1['ngay_mua']);?>
                                                    </td>

                                                    <td class="text-center text-gray-700 fw-semibold fs-7">
                                                        <span class="text-danger"><?=date('H:i d-m-Y', $row1['ngay_het']);?></span>
                                                    </td>

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

                                                    <td class="text-end pe-3">
                                                        <a href="/quan-ly-host/<?=$row1['id'];?>" class="btn btn-sm btn-manage-host px-3 py-2 d-inline-flex align-items-center gap-1" data-bs-toggle="tooltip" title="Vào bảng quản lý chi tiết Hosting">
                                                            <i class="fa-solid fa-gear fs-7"></i> Quản lý
                                                        </a>
                                                    </td>
                                                </tr>
                                                <?php } ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

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