<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Tạo Tài Khoản - Dacy.vn</title>

    <link rel="stylesheet" href="https://dacy.vn/assets/fonts/inter/inter.css" id="main-font-link" />
    <link rel="stylesheet" href="https://dacy.vn/assets/fonts/tabler-icons.min.css" >
    <link rel="stylesheet" href="https://dacy.vn/assets/fonts/feather.css" >
    <link rel="stylesheet" href="https://dacy.vn/assets/fonts/fontawesome.css" >
    <link rel="stylesheet" href="https://dacy.vn/assets/fonts/material.css" >
    
    <link class="main-style-link" rel="stylesheet" href="https://dacy.vn/assets/css/style.css" id="main-style-link" >
    <link rel="stylesheet" href="https://dacy.vn/assets/css/style-preset.css" >
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #fff;
        }
        .auth-main {
            min-height: 100vh;
            display: flex;
        }
        /* Cột chứa ảnh banner bên trái */
        .auth-banner {
            flex: 1;
            background-image: url('https://dacy.vn/assets/images/authentication/img-auth-sideimg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        /* Cột chứa Form đăng ký bên phải */
        .auth-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .auth-form-wrapper {
            width: 100%;
            max-width: 450px;
        }
        /* Đường gạch ngang chữ "Hoặc" */
        .separator-container {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 1.5rem 0;
        }
        .separator-container::before, .separator-container::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #e2e8f0;
        }
        .separator-container:not(:empty)::before { margin-right: .5em; }
        .separator-container:not(:empty)::after { margin-left: .5em; }

        /* Tối ưu hóa trên Điện thoại (Dưới 992px) */
        @media (max-width: 991.98px) {
            .auth-banner {
                display: none !important; /* Ẩn ảnh banner để giải phóng không gian */
            }
            .auth-content {
                flex: 1;
                width: 100%;
                padding: 1.5rem;
                background-color: #ffffff;
            }
        }
    </style>
</head>

<body id="kt_body" class="app-blank">

    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5FS8GGP" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

    <div class="auth-main">
        
        <div class="auth-banner"></div>

        <div class="auth-content">
            <div class="auth-form-wrapper">
                
                <div class="text-center mb-4">
                    <a href="/">
                        <img src="https://upanh.top/hp255qrlua.png" alt="Logo" class="img-fluid" style="max-width: 180px; height: auto;">
                    </a>
                </div>

                <div class="d-grid gap-2 mb-3">
                    <button type="button" class="btn btn-light-primary bg-light text-muted border d-flex align-items-center justify-content-center gap-2 py-2">
                        <img src="https://dacy.vn/assets/images/authentication/facebook.svg" alt="facebook" width="18">
                        <span class="fw-medium text-secondary">Tiếp Tục Với Facebook</span>
                    </button>
                    <button type="button" class="btn btn-light-primary bg-light text-muted border d-flex align-items-center justify-content-center gap-2 py-2">
                        <img src="https://dacy.vn/assets/images/authentication/google.svg" alt="google" width="18">
                        <span class="fw-medium text-secondary">Tiếp Tục Với Google</span>
                    </button>
                </div>

                <div class="separator-container">
                    <span class="text-muted small px-2">Hoặc</span>
                </div>

                <h4 class="text-center fw-bold mb-4 text-dark">Đăng Ký Tài Khoản Mới</h4>

                <form class="form w-100" novalidate="novalidate" id="kt_sign_in_form" action="#">
                    
                    <div class="mb-3">
                        <label class="form-label fw-bolder text-dark fs-6">Tên người dùng</label>
                        <input class="form-control form-control-solid py-3" type="text" id="username" autocomplete="off" placeholder="Tên tài khoản..." />
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bolder text-dark fs-6">Email</label>
                        <input class="form-control form-control-solid py-3" type="email" id="email" autocomplete="off" placeholder="Địa chỉ email..." />
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bolder text-dark fs-6">Mật khẩu</label>
                        <input class="form-control form-control-solid py-3" type="password" id="password" autocomplete="off" placeholder="Mật khẩu bảo mật..." />
                    </div>

                    <div class="mb-4 d-flex align-items-center">
                        <div class="form-check">
                            <input class="form-check-input input-primary" type="checkbox" id="customCheckc1" checked>
                            <label class="form-check-label text-muted fs-7" for="customCheckc1">
                                Tôi đồng ý với các <a href="#" class="text-primary text-decoration-none fw-medium">Điều khoản & Điều kiện</a>
                            </label>
                        </div>
                    </div>

                    <div class="mb-4">
                        <button type="button" onclick="register()" class="btn btn-primary w-100 py-3 fw-bold fs-6">
                            <span id="button1">Đăng ký</span>
                            <span id="button2" style="display: none;">
                                Đang xử lý... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                        </button>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mt-4 border-top pt-3">
                        <span class="text-muted fs-7">Đã Có Tài Khoản?</span>
                        <a href="/auth/login" class="text-primary fw-bold fs-7 text-decoration-none">Đăng Nhập</a>
                    </div>

                </form>

            </div>
        </div>

    </div>

    <script>
    function register() {
        const button1 = document.getElementById("button1");
        const button2 = document.getElementById("button2");

        // Chuyển sang trạng thái Đang xử lý
        button1.style.display = "none";
        button2.style.display = "inline-block";

        const username = document.getElementById("username").value.trim();
        const password = document.getElementById("password").value.trim();
        const email = document.getElementById("email").value.trim();
        const termChecked = document.getElementById("customCheckc1").checked;

        // Kiểm tra nhanh dữ liệu đầu vào phía client
        if (!username || !password || !email) {
            Swal.fire({ icon: "warning", text: "Vui lòng điền đầy đủ tất cả các trường dữ liệu!" });
            button1.style.display = "inline-block";
            button2.style.display = "none";
            return;
        }

        if (!termChecked) {
            Swal.fire({ icon: "warning", text: "Bạn cần đồng ý với Điều khoản & Điều kiện để tiếp tục." });
            button1.style.display = "inline-block";
            button2.style.display = "none";
            return;
        }

        const xhr = new XMLHttpRequest();
        xhr.open("POST", "/ajax/auth/xulyregister");
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onload = function() {
            // Khôi phục lại trạng thái nút bấm ban đầu
            button1.style.display = "inline-block";
            button2.style.display = "none";

            if (xhr.status === 200) {
                try {
                    const response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        Swal.fire({
                            icon: "success",
                            text: "Đăng ký tài khoản thành công!",
                        }).then(() => {
                            window.location.href = "/";
                        });
                    } else {
                        Swal.fire({ icon: "error", text: response.message });
                    }
                } catch(e) {
                    Swal.fire({ icon: "error", text: "Lỗi hệ thống: Dữ liệu trả về không đúng định dạng." });
                }
            } else {
                Swal.fire({ icon: "error", text: "Error: " + xhr.statusText });
            }
        };
        xhr.onerror = function() {
            button1.style.display = "inline-block";
            button2.style.display = "none";
            Swal.fire({ icon: "error", text: "Không thể kết nối đến máy chủ. Vui lòng kiểm tra lại mạng." });
        };
        
        // Gửi dữ liệu đăng ký lên backend
        xhr.send(
            "username=" + encodeURIComponent(username) +
            "&password=" + encodeURIComponent(password) +
            "&email=" + encodeURIComponent(email)
        );
    }
    </script>

    <script src="/assets/plugins/global/plugins.bundle.js"></script>
    <script src="/assets/js/scripts.bundle.js"></script>
</body>
</html>
