<?php
// Bật hiển thị lỗi
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

if (!defined('IN_SITE')) {
    die('The Request Not Found');
}
$title = 'Đăng Ký - ' . $DVR->site('site_ten');
require_once(__DIR__ . '/header.php');
require_once(__DIR__ . '/nav.php');
?>
<div id="main" class="main">
    <div class="section-gap section-report">
        <form method="post" class="form-theme" id="reportForm" enctype="multipart/form-data">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12">
                        <div class="section-heading">
                            <div class="title">
                                Đăng Ký
                            </div>
                            <div class="line"></div>
                        </div>
                    </div>
                    <div class="col-md-10 col-lg-8">
                        <div class="row row-col-10">
                            <div class="col-md-6 col-12 py-md-3">
                                <div class="form-theme_item">
                                    <input type="text" class="form-theme_item__input" id="username" name="username" required>
                                    <label class="form-theme_item__label" for="username">
                                        Nhập Tài Khoản <span class="font-weight-bold text-danger">*</span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6 col-12 py-md-3">
                                <div class="form-theme_item">
                                    <input type="text" class="form-theme_item__input" id="email" name="email" required>
                                    <label class="form-theme_item__label" for="email">
                                       Nhập Email <span class="font-weight-bold text-danger">*</span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6 col-12 py-md-3">
                                <div class="form-theme_item password-wrapper">
                                    <input type="password" class="form-theme_item__input" id="password" name="password" required>
                                    <label class="form-theme_item__label" for="password">
                                       Nhập Mật Khẩu <span class="font-weight-bold text-danger">*</span>
                                    </label>
                                    <span class="toggle-password" id="togglePassword">
                                        <i class="fa fa-eye-slash"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-6 col-12 py-md-3">
                                <div class="form-theme_item password-wrapper">
                                    <input type="password" class="form-theme_item__input" id="repassword" name="repassword" required>
                                    <label class="form-theme_item__label" for="repassword">
                                       Nhập Lại Mật Khẩu <span class="font-weight-bold text-danger">*</span>
                                    </label>
                                    <span class="toggle-password" id="toggleRePassword">
                                        <i class="fa fa-eye-slash"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-12 mt-2">
                                <div class="form-check form-check-inline">
                                    <div class="custom-control custom-checkbox custom-control-inline mb-3">
                                        <input type="checkbox" class="custom-control-input" id="isCheckbox" required>
                                        <label class="custom-control-label" for="isCheckbox">
                                            Đồng ý với 
                                            <a href="/post/gioi-thieu.html">Chính sách</a>
                                            và 
                                            <a href="/post/dieu-khoan.html">Điều khoản dịch vụ</a>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mt-4">
                                <div class="form-theme_item text-center">
                                    <button id="btnRegister" type="submit" class="btn-theme btn-theme_primary">
                                       Đăng Ký
                                        <span></span>
                                    </button>
                                </div>
                                <div class="text-center mt-3">
                                    <p>Bạn đã có tài khoản? 
                                        <a href="/login" class="text-primary">Đăng Nhập</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- CSS -->
<style>
    .password-wrapper {
        position: relative;
    }

    .form-theme_item__input {
        width: 100%;
        padding-right: 40px; /* Đảm bảo có không gian cho biểu tượng */
    }

    .toggle-password {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 18px;
        color: #333;
    }

    .toggle-password i {
        pointer-events: none;
    }

    .section-heading .title {
        font-size: 24px;
        font-weight: bold;
    }

    .section-heading .line {
        height: 2px;
        background: #FFC107; /* Màu vàng */
        margin-top: 5px;
    }

    .btn-theme {
        background-color: #FFC107; /* Màu vàng */
        color: white;
    }

    .btn-theme:hover {
        background-color: #e0a800; /* Màu vàng đậm khi hover */
    }

    .text-primary {
        color: #007bff; /* Màu cho liên kết */
    }

    .text-primary:hover {
        text-decoration: underline; /* Gạch chân khi hover */
    }
</style>

<!-- JavaScript -->
<script type="text/javascript">
    const togglePassword = document.querySelector('#togglePassword');
    const password = document.querySelector('#password');
    const toggleRePassword = document.querySelector('#toggleRePassword');
    const repassword = document.querySelector('#repassword');

    togglePassword.addEventListener('click', function () {
        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
        password.setAttribute('type', type);
        this.querySelector('i').classList.toggle('fa-eye');
        this.querySelector('i').classList.toggle('fa-eye-slash');
    });

    toggleRePassword.addEventListener('click', function () {
        const type = repassword.getAttribute('type') === 'password' ? 'text' : 'password';
        repassword.setAttribute('type', type);
        this.querySelector('i').classList.toggle('fa-eye');
        this.querySelector('i').classList.toggle('fa-eye-slash');
    });

    $("#btnRegister").on("click", function(event) {
        event.preventDefault(); // Ngăn không cho form gửi đi ngay lập tức
        if (!$('#isCheckbox').is(':checked')) {
            Swal.fire("Lỗi", "Bạn cần đồng ý với các điều khoản!", "error");
            return; // Dừng thực hiện nếu checkbox không được tick
        }

        $('#btnRegister').html('<i class="fa fa-spinner fa-spin"></i> Đang xử lý...').prop('disabled', true);
        $.ajax({
            url: "<?= BASE_URL('ajaxs/client/register.php'); ?>",
            method: "POST",
            dataType: "JSON",
            data: {
                username: $("#username").val(),
                email: $("#email").val(),
                password: $("#password").val(),
                repassword: $("#repassword").val(),
            },
            success: function(respone) {
                if (respone.status == 'success') {
                    Swal.fire("Thành Công", respone.msg, "success");
                    setTimeout("location.href = '<?= BASE_URL(''); ?>';", 100);
                } else {
                    Swal.fire("Thất Bại", respone.msg, "error");
                }
                $('#btnRegister').html('Đăng Ký').prop('disabled', false);
            },
            error: function() {
                cuteToast({
                    type: "error",
                    message: 'Không thể xử lý',
                    timer: 5000
                });
                $('#btnRegister').html('Đăng Ký').prop('disabled', false);
            }
        });
    });
</script>

<?php require_once __DIR__ . '/footer.php'; ?>
