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

<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
    <title>Thanh Toán Host | <?=$lxtdev['ten_web'];?></title>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/nav.php';?>
    <?php
    $id_host = ($_GET['id']);
    $toz_host = $ketnoi->query("SELECT * FROM `list_host` WHERE `id` = '$id_host' AND `status` = 'ON' ")->fetch_array();
    ?>

    <!-- Thư viện biểu tượng hỗ trợ form -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* Tối ưu hóa vùng chứa form thanh toán cao cấp */
        .checkout-card {
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
            border-radius: 16px !important;
            background: #ffffff;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.02) !important;
        }
        [data-bs-theme="dark"] .checkout-card {
            background: #1e1e2d;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

        /* Hộp tóm tắt cấu hình bên phải */
        .summary-box {
            background-color: #f9f9fc;
            border-radius: 12px;
            padding: 24px;
            border: 1px dashed rgba(48, 133, 214, 0.3);
        }
        [data-bs-theme="dark"] .summary-box {
            background-color: #151521;
            border: 1px dashed rgba(255, 255, 255, 0.1);
        }

        .form-label-custom {
            font-size: 0.95rem !important;
            font-weight: 700 !important;
            color: #181c32 !important;
            margin-bottom: 8px;
        }
        [data-bs-theme="dark"] .form-label-custom {
            color: #cdcdde !important;
        }

        .input-group-text-custom {
            background-color: #f1f5f9 !important;
            border-color: #e2e8f0 !important;
            color: #64748b !important;
        }
        [data-bs-theme="dark"] .input-group-text-custom {
            background-color: #2b2b40 !important;
            border-color: #32324d !important;
            color: #92929f !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-cart-shopping text-primary fs-4 mb-1"></i> Cấu Hình Thanh Toán Cloud 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">Hosting</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>

                    <!-- GIAO DIỆN FORM CHÍNH -->
                    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
                        <div class="container-xxl" id="kt_content_container">
                            
                            <div class="card checkout-card">
                                <div class="card-body p-6 p-lg-10">
                                    <div class="row g-10">
                                        
                                        <!-- CỘT TRÁI: ĐIỀN THÔNG TIN ĐĂNG KÝ -->
                                        <div class="col-xl-7 border-end-xl border-gray-200">
                                            <h3 class="text-dark fw-bold mb-6 fs-4"><i class="fa-solid fa-sliders text-muted me-2"></i>Thông tin cấu hình</h3>
                                            
                                            <!-- Chọn gói dịch vụ -->
                                            <div class="mb-6">
                                                <label class="form-label-custom required">Chọn gói hosting cần mua:</label>
                                                <div class="input-group">
                                                    <span class="input-group-text input-group-text-custom"><i class="fa-solid fa-box"></i></span>
                                                    <select name="goi" id="goi" class="form-select form-select-solid form-select-lg fw-bold text-gray-800" onchange="gotoPage()">
                                                        <option value="<?=$toz_host['id'];?>">
                                                            [Đang Chọn] <?=$toz_host['name_host'];?> - <?=$toz_host['dung_luong'];?> - <?=tien($toz_host['gia_host']);?>đ
                                                        </option>
                                                        <?php
                                                        $result = mysqli_query($ketnoi,"SELECT * FROM `list_host` WHERE `id` != '$id_host' ");
                                                        while($row = mysqli_fetch_assoc($result)) { ?>
                                                            <option value="<?=$row['id'];?>">
                                                                <?=$row['name_host'];?> - <?=$row['dung_luong'];?> - <?=tien($row['gia_host']);?>đ
                                                            </option>
                                                        <?php } ?>
                                                    </select>
                                                </div>
                                            </div>

                                            <!-- Nhập Tên Miền -->
                                            <div class="mb-6">
                                                <label class="form-label-custom required">Tên miền chính (Domain):</label>
                                                <div class="input-group">
                                                    <span class="input-group-text input-group-text-custom"><i class="fa-solid fa-globe"></i></span>
                                                    <input type="text" name="domain" id="domain" class="form-control form-control-lg form-control-solid" placeholder="Ví dụ: lxtdev.com, domaincuaban.vn" />
                                                </div>
                                                <div class="form-text text-muted fs-8">Lưu ý: Không nhập http:// hoặc https:// vào ô tên miền.</div>
                                            </div>

                                            <!-- Nhập Email quản trị -->
                                            <div class="mb-6">
                                                <label class="form-label-custom required">Email nhận thông tin tài khoản:</label>
                                                <div class="input-group">
                                                    <span class="input-group-text input-group-text-custom"><i class="fa-solid fa-envelope"></i></span>
                                                    <input type="email" name="email" id="email" class="form-control form-control-lg form-control-solid" placeholder="Nhập email chính chủ của bạn" />
                                                </div>
                                            </div>
                                        </div>

                                        <!-- CỘT PHẢI: TÓM TẮT ĐƠN HÀNG (ORDER SUMMARY) -->
                                        <div class="col-xl-5 d-flex flex-column justify-content-between">
                                            <div class="summary-box">
                                                <h3 class="text-dark fw-bold mb-4 fs-5"><i class="fa-solid fa-receipt text-primary me-2"></i>Tóm tắt đơn hàng</h3>
                                                
                                                <div class="d-flex justify-content-between align-items-center mb-3 py-2 border-bottom border-gray-200 border-opacity-50">
                                                    <span class="text-muted fw-semibold">Sản phẩm:</span>
                                                    <span class="text-dark fw-bold fs-6"><?=$toz_host['name_host'];?></span>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center mb-3 py-2 border-bottom border-gray-200 border-opacity-50">
                                                    <span class="text-muted fw-semibold">Dung lượng ổ đĩa:</span>
                                                    <span class="badge badge-light-danger fw-black"><?=$toz_host['dung_luong'];?></span>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center mb-3 py-2 border-bottom border-gray-200 border-opacity-50">
                                                    <span class="text-muted fw-semibold">Thời hạn gia hạn:</span>
                                                    <span class="text-gray-800 fw-bold">30 Ngày (Hàng tháng)</span>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center mt-5">
                                                    <span class="text-dark fw-black fs-5">Tổng thanh toán:</span>
                                                    <span class="text-primary fw-black fs-2">
                                                        <?=tien($toz_host['gia_host']);?><span class="fs-5 fw-bold ms-0.5">đ</span>
                                                    </span>
                                                </div>
                                            </div>

                                            <!-- Các nút điều hướng thao tác -->
                                            <div class="d-flex justify-content-end gap-3 mt-8 mt-xl-0 pt-4 border-top border-gray-100">
                                                <a href="/server-hosting/<?=$toz_host['server_host'];?>" class="btn btn-light fw-bold px-6 py-3">
                                                    Quay lại
                                                </a>
                                                <button class="btn btn-primary fw-bold px-8 py-3" type="button" onclick="thanhtoan()">
                                                    <span id="button1" class="indicator-label"><i class="fa-solid fa-credit-card me-1"></i> Xác Nhận Thanh Toán</span>
                                                    <span id="button2" class="indicator-progress" style="display: none;">
                                                        Đang xử lý hệ thống... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                                    </span>
                                                </button>
                                            </div>
                                        </div>

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

                        </div>
                    </div>

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

    <!-- JAVASCRIPT LOGIC GIỮ NGUYÊN HOẠT ĐỘNG 100% -->
    <script>
    function gotoPage() {
        var selectBox = document.getElementById("goi");
        var selectedValue = selectBox.options[selectBox.selectedIndex].value;
        window.location.href = "/thanh-toan-host/" + selectedValue;
    }

    function thanhtoan() {
        const button1 = document.getElementById("button1");
        const button2 = document.getElementById("button2");

        button1.style.display = "none";
        button2.style.display = "inline-block";
        button2.disabled = true;

        const username = "<?=$username;?>";
        const goi = "<?=$id_host;?>";
        const domain = document.getElementById("domain").value;
        const email = document.getElementById("email").value;

        Swal.fire({
            title: 'Xác nhận mua host',
            text: "Bạn có chắc chắn muốn mua host này không?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Đồng ý mua',
            cancelButtonText: 'Hủy bỏ'
        }).then((result) => {
            if (result.isConfirmed) {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", "/ajax/hosting/xulyhost");
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.onload = function() {
                    button1.style.display = "inline-block";
                    button2.style.display = "none";
                    button2.disabled = false;

                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        if (response.success) {
                            Swal.fire({
                                icon: "success",
                                text: "Mua host thành công, vui lòng đợi hệ thống setup!",
                            }).then(function() {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                text: response.message,
                            });
                        }
                    } else {
                        Swal.fire({
                            icon: "error",
                            text: "Error: " + xhr.statusText,
                        });
                    }
                };
                xhr.onerror = function() {
                    button1.style.display = "inline-block";
                    button2.style.display = "none";
                    button2.disabled = false;

                    Swal.fire({
                        icon: "error",
                        text: "Error: " + xhr.statusText,
                    });
                };
                xhr.send(
                    "username=" + encodeURIComponent(username) +
                    "&goi=" + encodeURIComponent(goi) +
                    "&domain=" + encodeURIComponent(domain) +
                    "&email=" + encodeURIComponent(email)
                );
            } else {
                button1.style.display = "inline-block";
                button2.style.display = "none";
                button2.disabled = false;
            }
        });
    }
    </script>
</body>
</html>
