<?php

$pageTitle =
    'Đăng ký - PET SPA';

$pageDescription =
    'Tạo tài khoản khách hàng PET SPA.';

require BASE_PATH
    . '/app/views/layouts/header.php';

require BASE_PATH
    . '/app/views/layouts/navbar.php';

?>

<main>

    <section class="auth-section">

        <div class="container">

            <div class="auth-card mx-auto">

                <div class="text-center mb-4">

                    <div class="auth-icon">
                        🐾
                    </div>

                    <h1 class="auth-title">
                        Tạo tài khoản
                    </h1>

                    <p class="text-muted">

                        Đăng ký để mua hàng,
                        quản lý lịch hẹn và theo dõi chăm sóc thú cưng.

                    </p>

                </div>


                <?php if (!empty($errors)): ?>

                    <div class="alert alert-danger">

                        <ul class="mb-0">

                            <?php foreach (
                                $errors
                                as $error
                            ): ?>

                                <li>

                                    <?= htmlspecialchars(
                                        $error
                                    ) ?>

                                </li>

                            <?php endforeach; ?>

                        </ul>

                    </div>

                <?php endif; ?>


                <?php if (empty($registrationClosed)): ?>

                <form
                    action="<?= BASE_URL ?>/?url=register/submit"
                    method="POST"
                >

                    <input
                        type="hidden"
                        name="_token"
                        value="<?= htmlspecialchars(
                            $_SESSION['csrf_token']
                        ) ?>"
                    >


                    <div class="mb-3">

                        <label class="form-label">
                            Họ và tên *
                        </label>

                        <input
                            type="text"
                            name="full_name"
                            class="form-control"
                            maxlength="120"
                            value="<?= htmlspecialchars(
                                $old[
                                    'full_name'
                                ]
                                ?? ''
                            ) ?>"
                            required
                        >

                    </div>


                    <div class="mb-3">

                        <label class="form-label">
                            Số điện thoại *
                        </label>

                        <input
                            type="tel"
                            name="phone"
                            class="form-control"
                            maxlength="15"
                            placeholder="0901234567"
                            value="<?= htmlspecialchars(
                                $old['phone']
                                ?? ''
                            ) ?>"
                            required
                        >

                    </div>


                    <div class="mb-3">

    <label class="form-label">
        Email *
    </label>

    <input
        type="email"
        name="email"
        class="form-control"
        maxlength="190"
        placeholder="vidu@gmail.com"
        value="<?= htmlspecialchars(
            $old['email'] ?? ''
        ) ?>"
        autocomplete="email"
        required
    >

    <small class="text-muted">
        Email dùng để khôi phục mật khẩu khi cần.
    </small>

</div>


                    <div class="mb-3">

                        <label class="form-label">
                            Mật khẩu *
                        </label>

                        <div
                            class="password-field"
                        >

                            <input
                                type="password"
                                name="password"
                                id="registerPassword"
                                class="form-control"
                                minlength="8"
                                autocomplete="new-password"
                                required
                            >

                            <button
                                type="button"
                                class="password-toggle"
                                data-target="registerPassword"
                                aria-label="Hiện mật khẩu"
                                title="Hiện mật khẩu"
                            >

                                <i
                                    class="bi bi-eye"
                                ></i>

                            </button>

                        </div>

                        <small class="text-muted">

                            Ít nhất 8 ký tự.

                        </small>

                    </div>


                    <div class="mb-4">

                        <label class="form-label">
                            Xác nhận mật khẩu *
                        </label>

                        <div
                            class="password-field"
                        >

                            <input
                                type="password"
                                name="password_confirmation"
                                id="registerPasswordConfirmation"
                                class="form-control"
                                minlength="8"
                                autocomplete="new-password"
                                required
                            >

                            <button
                                type="button"
                                class="password-toggle"
                                data-target="registerPasswordConfirmation"
                                aria-label="Hiện mật khẩu"
                                title="Hiện mật khẩu"
                            >

                                <i
                                    class="bi bi-eye"
                                ></i>

                            </button>

                        </div>

                    </div>


                    <button
                        type="submit"
                        class="btn btn-primary btn-lg w-100"
                    >
                        Tạo tài khoản
                    </button>

                </form>

                <?php endif; ?>


                <p class="text-center mt-4 mb-0">

                    Đã có tài khoản?

                    <a
                        href="<?= BASE_URL ?>/?url=login"
                        class="fw-semibold"
                    >
                        Đăng nhập
                    </a>

                </p>

            </div>

        </div>

    </section>

</main>


<?php

require BASE_PATH
    . '/app/views/layouts/footer.php';

?>
