<!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>Đăng Nhập - 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 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>
        /* Tối ưu hóa chiều cao hiển thị tràn màn hình */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #fff;
        }
        .auth-main {
            min-height: 100vh;
            display: flex;
        }
        /* Cột chứa ảnh 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 nhập 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; }

        /* RESPONSIVE: Khi trên màn hình điện thoại (Dưới 992px) */
        @media (max-width: 991.98px) {
            .auth-banner {
                display: none !important; /* Ẩn bức ảnh nền to để không tốn diện tích */
            }
            .auth-content {
                flex: 1;
                width: 100%;
                padding: 1.5rem;
                background-color: #ffffff;
            }
        }
    </style>
</head>

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

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

        <div class="auth-content">
            <div class="auth-form-wrapper">
                
                <div class="text-center mb-5">
                    <a href="/">
                        <img src="https://upanh.top/hp255qrlua.png" alt="Logo dacy.vn" class="img-fluid" style="max-width: 200px; 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 Nhập Với Tài Khoản</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ài khoản</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">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..." />
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <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">Ghi nhớ đăng nhập</label>
                        </div>
                        <a href="auth/password-reset" class="text-primary fw-bold fs-7 text-decoration-none">Quên Mật Khẩu?</a>
                    </div>

                    <div class="mb-4">
                        <button type="button" onclick="login()" class="btn btn-primary w-100 py-3 fw-bold fs-6">
                            <span id="button1">Đăng nhập</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">Chưa Có Tài Khoản?</span>
                        <a href="/auth/register" class="text-primary fw-bold fs-7 text-decoration-none">Tạo Tài Khoản</a>
                    </div>

                </form>

            </div>
        </div>

    </div>

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

        // Bật trạng thái Loading
        button1.style.display = "none";
        button2.style.display = "inline-block";

        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;

        if(!username || !password) {
            Swal.fire({ icon: "warning", text: "Vui lòng nhập đầy đủ tài khoản và mật khẩu!" });
            button1.style.display = "inline-block";
            button2.style.display = "none";
            return;
        }

        const xhr = new XMLHttpRequest();
        xhr.open("POST", "/ajax/auth/xulylogin");
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onload = function() {
            // Tắt trạng thái loading khi có kết quả trả về
            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 nhập 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 cấu trúc dữ liệu từ Server." });
                }
            } else {
                Swal.fire({ icon: "error", text: "Lỗi kết nối hệ thống: " + xhr.statusText });
            }
        };
        xhr.onerror = function() {
            button1.style.display = "inline-block";
            button2.style.display = "none";
            Swal.fire({ icon: "error", text: "Lỗi kết nối mạng, vui lòng thử lại." });
        };
        xhr.send("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
    }
    </script>

</body>
</html>
