<!DOCTYPE html>
<html lang="en">
<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
    <title>Đăng Ký Tên Miền | <?=$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>
        /* Tối ưu hóa card giao diện mua miền cao cấp */
        .domain-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"] .domain-checkout-card {
            background: #1e1e2d;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

        .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;
        }

        /* Hộp tóm tắt hóa đơn từ AJAX render */
        .receipt-dynamic-box {
            background-color: #f8fafc;
            border: 1px dashed #3085d6;
            border-radius: 12px;
            padding: 20px;
        }
        [data-bs-theme="dark"] .receipt-dynamic-box {
            background-color: #151521;
            border: 1px dashed rgba(255, 255, 255, 0.1);
        }
    </style>

    <script>
    function tongmien() {
        var ten_mien = document.getElementById("ten_mien").value;
        var duoi_mien = document.getElementById("duoi_mien").value;

        if (ten_mien && duoi_mien) {
            $.ajax({
                type: "POST",
                url: "/ajax/tenmien/tongmien.php",
                data: {
                    ten_mien: ten_mien,
                    duoi_mien: duoi_mien
                },
                success: function(result) {
                    var menhGiaList = JSON.parse(result);
                    var selectHtml = '';
                    for (var i = 0; i < menhGiaList.length; i++) {
                        selectHtml += '<div class="receipt-dynamic-box mt-2 mb-6 animate__animated animate__fadeIn">';
                        selectHtml += '<h4 class="text-dark fw-bold mb-4 fs-6"><i class="fa-solid fa-receipt text-primary me-2"></i>Thông tin kiểm tra giá</h4>';
                        
                        selectHtml += '<div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom border-gray-200 border-opacity-50">';
                        selectHtml += '<span class="text-muted fw-semibold">Tên miền đầy đủ:</span>';
                        selectHtml += '<span class="text-dark fw-bold fs-6 text-primary">' + menhGiaList[i].domain + '</span>';
                        selectHtml += '<input type="hidden" name="domain" id="domain" value="' + menhGiaList[i].domain + '" />';
                        selectHtml += '</div>';

                        selectHtml += '<div class="d-flex justify-content-between align-items-center">';
                        selectHtml += '<span class="text-muted fw-semibold">Phí đăng ký ổn định:</span>';
                        selectHtml += '<span class="badge badge-light-success fw-black fs-6 px-3 py-1.5">' + menhGiaList[i].gia + 'đ / 1 Năm</span>';
                        selectHtml += '</div>';
                        
                        selectHtml += '</div>';
                    }
                    document.getElementById("menh_gia_container").innerHTML = selectHtml;
                },
                error: function() {
                    alert("Đã xảy ra lỗi khi gửi yêu cầu tính toán tên miền.");
                }
            });
        }
    }
    </script>
</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-cart-plus text-primary fs-4 mb-1"></i> Đăng Ký Sở Hữu Tên Miề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">Domain System</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 domain-checkout-card">
                                <div class="card-body p-6 p-lg-10">
                                    <div class="row g-10">
                                        
                                        <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-magnifying-glass text-muted me-2"></i>Cấu hình địa chỉ</h3>
                                            
                                            <div class="mb-6">
                                                <label class="form-label-custom required">Tên miền cần đăng ký:</label>
                                                <div class="input-group">
                                                    <span class="input-group-text input-group-text-custom"><i class="fa-solid fa-signature"></i></span>
                                                    <input type="text" name="ten_mien" id="ten_mien" class="form-control form-control-lg form-control-solid" onchange="tongmien()" placeholder="Nhập tên miền (Ví dụ: lxtdev, shopacc)" />
                                                </div>
                                            </div>

                                            <div class="mb-6">
                                                <label class="form-label-custom required">Đuôi mở rộng (Extension):</label>
                                                <div class="input-group">
                                                    <span class="input-group-text input-group-text-custom"><i class="fa-solid fa-tags"></i></span>
                                                    <select name="duoi_mien" id="duoi_mien" class="form-select form-select-solid form-select-lg fw-bold" onchange="tongmien()">
                                                        <option value="">-- Click để chọn Đuôi Domain --</option>
                                                        <?php
                                                        $result = mysqli_query($ketnoi,"SELECT * FROM `ds_domain` WHERE `status` = 'ON' ORDER BY `id` DESC");
                                                        while($row = mysqli_fetch_assoc($result)) { ?>
                                                            <option value="<?=$row['duoi_mien'];?>"><?=$row['duoi_mien'];?> - <?=tien($row['gia']);?>đ / 1 năm</option>
                                                        <?php } ?>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="mb-2">
                                                <label class="form-label-custom required">Cấu hình cặp Nameservers (DNS):</label>
                                                <textarea class="form-control form-control-lg form-control-solid" id="nameserver" rows="4" placeholder="ns1.cloudflare.com&#10;ns2.cloudflare.com&#10;(Mỗi hàng nhập duy nhất 1 bản ghi định danh)"></textarea>
                                                <div class="form-text text-muted fs-8 mt-2"><i class="fa-solid fa-circle-info text-primary me-1"></i>Hệ thống khuyến khích sử dụng Nameservers trung gian từ <strong>Cloudflare.com</strong> để quản lý DNS tốt nhất.</div>
                                            </div>
                                        </div>

                                        <div class="col-xl-5 d-flex flex-column justify-content-between">
                                            <div>
                                                <div id="menh_gia_container">
                                                    <div class="alert alert-dismissible bg-light-primary d-flex flex-column flex-sm-row p-5 mb-10">
                                                        <i class="fa-solid fa-circle-question fs-2hx text-primary me-4 mb-5 mb-sm-0"></i>
                                                        <div class="d-flex flex-column pe-0 pe-sm-10">
                                                            <h5 class="fw-bold text-dark fs-6">Chưa có thông tin định giá</h5>
                                                            <span class="fs-7 text-gray-600">Vui lòng hoàn thành việc nhập dữ liệu ở ô <strong>Tên miền</strong> và chọn <strong>Đuôi miền</strong> ở bên cạnh để xem báo giá.</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="d-flex justify-content-end gap-3 pt-6 border-top border-gray-100">
                                                <button type="button" onclick="muangay()" class="btn btn-primary fw-bold w-100 py-4 fs-5">
                                                    <span id="button1" class="indicator-label"><i class="fa-solid fa-basket-shopping me-1"></i> Gửi Yêu Cầu Đăng Ký</span>
                                                    <span id="button2" class="indicator-progress" style="display: none;">
                                                        Đang xử lý kết nối máy chủ TLD... <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>

    <script>
    function muangay() {
        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 ten_mien = document.getElementById("ten_mien").value;
        const duoi_mien = document.getElementById("duoi_mien").value;
        const nameserver = document.getElementById("nameserver").value;

        Swal.fire({
            title: 'Xác nhận mua miền',
            text: "Bạn có chắc chắn muốn mua đăng ký tên miền này không?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Xác nhận mua',
            cancelButtonText: 'Hủy bỏ'
        }).then((result) => {
            if (result.isConfirmed) {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", "/ajax/tenmien/xulydomain.php");
                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: "Đăng ký mua miền thành công, xin vui lòng chờ!",
                            }).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) +
                    "&ten_mien=" + encodeURIComponent(ten_mien) +
                    "&duoi_mien=" + encodeURIComponent(duoi_mien) +
                    "&nameserver=" + encodeURIComponent(nameserver)
                );
            } else {
                button1.style.display = "inline-block";
                button2.style.display = "none";
                button2.disabled = false;
            }
        });
    }
    </script>
</body>
</html>
