<?php

$pageTitle =
    'Hồ sơ cá nhân - PET SPA';

$pageStyles = [
    'customer.css'
];

$activeCustomerPage =
    'profile';


$successMessage =
    $_SESSION['flash_success']
    ?? null;

$errorMessage =
    $_SESSION['flash_error']
    ?? null;


unset(
    $_SESSION['flash_success'],
    $_SESSION['flash_error']
);


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

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

?>

<main class="customer-area">

    <div class="container">

        <div class="row g-4">

            <div class="col-lg-3">

                <?php require BASE_PATH
                    . '/app/views/layouts/customer-sidebar.php';
                ?>

            </div>


            <div class="col-lg-9">

                <div class="customer-page-header">

                    <div>

                        <h1>
                            Hồ sơ cá nhân
                        </h1>

                        <p>
                            Quản lý thông tin tài khoản.
                        </p>

                    </div>

                </div>


                <?php if ($successMessage): ?>

                    <div class="alert alert-success">

                        <?= htmlspecialchars(
                            $successMessage
                        ) ?>

                    </div>

                <?php endif; ?>


                <?php if ($errorMessage): ?>

                    <div class="alert alert-danger">

                        <?= htmlspecialchars(
                            $errorMessage
                        ) ?>

                    </div>

                <?php endif; ?>


                <!-- AVATAR -->

                <section class="customer-card mb-4">

                    <h2>
                        Ảnh đại diện
                    </h2>

                    <div class="d-flex flex-wrap align-items-center gap-3 mt-3">

                        <div class="customer-avatar">

                            <?php if (!empty($customer['avatar'])): ?>

                                <img
                                    src="<?= BASE_URL ?>/<?= htmlspecialchars(
                                        ltrim($customer['avatar'], '/')
                                    ) ?>"
                                    alt="Ảnh đại diện"
                                >

                            <?php else: ?>

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

                            <?php endif; ?>

                        </div>


                        <form
                            action="<?= BASE_URL ?>/?url=customer/avatar/upload"
                            method="POST"
                            enctype="multipart/form-data"
                            class="d-flex flex-wrap align-items-center gap-2"
                        >

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

                            <input
                                type="file"
                                name="avatar"
                                class="form-control"
                                accept="image/jpeg,image/png,image/webp"
                                required
                            >

                            <button type="submit" class="btn btn-outline-primary">
                                Tải ảnh lên
                            </button>

                        </form>


                        <?php if (!empty($customer['avatar'])): ?>

                            <form
                                action="<?= BASE_URL ?>/?url=customer/avatar/delete"
                                method="POST"
                            >

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

                                <button type="submit" class="btn btn-outline-danger">
                                    Xóa ảnh
                                </button>

                            </form>

                        <?php endif; ?>

                    </div>

                    <small class="text-muted d-block mt-2">
                        Chấp nhận JPG, PNG hoặc WEBP. Dung lượng theo giới hạn hệ thống.
                    </small>

                </section>


                <!-- PROFILE -->

                <section class="customer-card">

                    <h2>
                        Thông tin cá nhân
                    </h2>


                    <form
                        action="<?= BASE_URL ?>/?url=customer/profile/update"
                        method="POST"
                    >

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


                        <div class="row g-3 mt-1">

                            <div class="col-md-6">

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

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

                            </div>


                            <div class="col-md-6">

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

                                <input
                                    type="tel"
                                    name="phone"
                                    class="form-control"
                                    value="<?= htmlspecialchars(
                                        $customer['phone']
                                    ) ?>"
                                    required
                                >

                            </div>


                            <div class="col-12">

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

                                <input
                                    type="email"
                                    name="email"
                                    class="form-control"
                                    value="<?= htmlspecialchars(
                                        $customer['email']
                                        ?? ''
                                    ) ?>"
                                >

                            </div>


                            <div class="col-12">

                                <button
                                    type="submit"
                                    class="btn btn-primary"
                                >
                                    Lưu thay đổi
                                </button>

                            </div>

                        </div>

                    </form>

                </section>


                <!-- PASSWORD -->

                <section id="change-password" class="customer-card mt-4">

                    <h2>
                        Đổi mật khẩu
                    </h2>


                    <form
                        action="<?= BASE_URL ?>/?url=customer/password/update"
                        method="POST"
                    >

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


                        <div class="row g-3 mt-1">

                            <div class="col-12">

                                <label class="form-label">
                                    Mật khẩu hiện tại
                                </label>

                                <div class="password-field"><input id="currentPassword" type="password" name="current_password" class="form-control" required><button type="button" class="password-toggle" data-target="currentPassword" aria-label="Hiện mật khẩu" title="Hiện mật khẩu"><i class="bi bi-eye"></i></button></div>

                            </div>


                            <div class="col-md-6">

                                <label class="form-label">
                                    Mật khẩu mới
                                </label>

                                <div class="password-field"><input id="newPassword" type="password" name="new_password" class="form-control" minlength="8" required><button type="button" class="password-toggle" data-target="newPassword" aria-label="Hiện mật khẩu" title="Hiện mật khẩu"><i class="bi bi-eye"></i></button></div>

                            </div>


                            <div class="col-md-6">

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

                                <div class="password-field"><input id="newPasswordConfirmation" type="password" name="new_password_confirmation" class="form-control" minlength="8" required><button type="button" class="password-toggle" data-target="newPasswordConfirmation" aria-label="Hiện mật khẩu" title="Hiện mật khẩu"><i class="bi bi-eye"></i></button></div>

                            </div>


                            <div class="col-12">

                                <button
                                    type="submit"
                                    class="btn btn-outline-dark"
                                >
                                    Đổi mật khẩu
                                </button>

                            </div>

                        </div>

                    </form>

                </section>

            </div>

        </div>

    </div>

</main>


<?php

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

?>
