<?php

$pageTitle =
    'Đăng nhập - PET SPA';

$pageDescription =
    'Đăng nhập tài khoản 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">
                        Chào mừng trở lại
                    </h1>

                    <p class="text-muted">

                        Đăng nhập để quản lý lịch hẹn
                        và thông tin thú cưng của bạn.

                    </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; ?>


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

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


                    <div class="mb-3">

                        <label
                            class="form-label fw-semibold"
                        >
                            Email hoặc số điện thoại
                        </label>

                        <input
                            type="text"
                            name="identifier"
                            class="form-control form-control-lg"
                            autocomplete="username"
                            value="<?= htmlspecialchars(
                                $old[
                                    'identifier'
                                ]
                                ?? ''
                            ) ?>"
                            required
                        >

                    </div>


                    <div class="mb-4">

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

                        <div
                            class="password-field"
                        >

                            <input
                                type="password"
                                name="password"
                                id="loginPassword"
                                class="form-control form-control-lg"
                                autocomplete="current-password"
                                required
                            >

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

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

                            </button>

                        </div>

                    </div>

                    <div class="form-check mb-4"><input class="form-check-input" type="checkbox" name="remember" value="1" id="rememberLogin"><label class="form-check-label" for="rememberLogin">Ghi nhớ đăng nhập</label></div>


                    <button
                        type="submit"
                        class="btn btn-primary btn-lg w-100"
                    >
                        Đăng nhập
                    </button>

                </form>


                <p class="text-center mt-3 mb-0">
                    <a href="<?= BASE_URL ?>/?url=forgot-password" class="small">
                        Quên mật khẩu?
                    </a>
                </p>


                <div
                    class="auth-divider"
                >
                    <span>
                        hoặc
                    </span>
                </div>


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

                    Chưa có tài khoản?

                    <a
                        href="<?= BASE_URL ?>/?url=register"
                        class="fw-semibold"
                    >
                        Đăng ký ngay
                    </a>

                </p>

            </div>

        </div>

    </section>

</main>


<?php

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

?>
