<?php

$user = $_SESSION['user'] ?? null;
$role = $user['role'] ?? null;


/*
|--------------------------------------------------------------------------
| THÔNG TIN CỬA HÀNG
|--------------------------------------------------------------------------
*/

require_once BASE_PATH . '/app/models/ShopSetting.php';

$navbarShopName = 'PET SPA';
$navbarShopLogo = '';

try {

    $shopSettings = (new ShopSetting())->get();

    $navbarShopName = trim(
        (string) ($shopSettings['shop_name'] ?? '')
    );

    if ($navbarShopName === '') {
        $navbarShopName = 'PET SPA';
    }

    $navbarShopLogo = trim(
        (string) ($shopSettings['logo'] ?? '')
    );

} catch (Throwable $e) {

    $navbarShopName = 'PET SPA';
    $navbarShopLogo = '';
}


/*
|--------------------------------------------------------------------------
| THÔNG BÁO
|--------------------------------------------------------------------------
*/

$unreadNotificationCount = 0;
$ownerNavbarUnreadCount = 0;

if ($user && in_array($role, ['customer', 'owner'], true)) {

    require_once BASE_PATH . '/app/models/Notification.php';

    try {

        $notificationCount =
            (new Notification())->countUnreadByUser(
                (int) $user['id']
            );

        if ($role === 'customer') {
            $unreadNotificationCount = $notificationCount;
        }

        if ($role === 'owner') {
            $ownerNavbarUnreadCount = $notificationCount;
        }

    } catch (Throwable $e) {
        // Không làm hỏng navbar nếu notification lỗi.
    }
}


/*
|--------------------------------------------------------------------------
| THÔNG TIN CUSTOMER
|--------------------------------------------------------------------------
*/

$customerName = '';
$customerAvatar = '';
$customerInitial = 'K';

if ($role === 'customer' && $user) {

    $customerName = trim(
        (string) ($user['full_name'] ?? 'Khách hàng')
    );

    if ($customerName === '') {
        $customerName = 'Khách hàng';
    }

    $customerAvatar = trim(
        (string) ($user['avatar'] ?? '')
    );

    $customerInitial = mb_strtoupper(
        mb_substr(
            $customerName,
            0,
            1,
            'UTF-8'
        ),
        'UTF-8'
    );
}


/*
|--------------------------------------------------------------------------
| THÔNG TIN OWNER
|--------------------------------------------------------------------------
*/

$ownerName = '';
$ownerAvatar = '';
$ownerInitial = 'O';

if ($role === 'owner' && $user) {

    $ownerName = trim(
        (string) ($user['full_name'] ?? 'Chủ PET SPA')
    );

    if ($ownerName === '') {
        $ownerName = 'Chủ PET SPA';
    }

    $ownerAvatar = trim(
        (string) ($user['avatar'] ?? '')
    );

    $ownerInitial = mb_strtoupper(
        mb_substr(
            $ownerName,
            0,
            1,
            'UTF-8'
        ),
        'UTF-8'
    );
}

?>


<style>

/* =========================================================
   ACCOUNT TOOLS
========================================================= */

.owner-navbar-tools {
    display: flex;
    align-items: center;
    gap: 9px;
}


/* =========================================================
   ACCOUNT DROPDOWN
========================================================= */

.owner-account {
    position: relative;
}


.owner-account-button {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 5px 11px 5px 6px;

    border: 1px solid #e2e2e7;
    border-radius: 999px;

    background: #fff;
    color: #2f3038;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: all .2s ease;
}


.owner-account-button:hover,
.owner-account-button:focus {
    background: #fff7f9;
    border-color: #ef9eb2;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, .08);
}


/* =========================================================
   AVATAR
========================================================= */

.owner-navbar-avatar {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: #ffffff;
    color: #ff604f;

    border: 1px solid #dedee5;

    box-shadow: none;
}


.owner-navbar-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    padding: 3px;

    background: #ffffff;

    border-radius: 50%;
}

.owner-navbar-avatar span {
    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   ACCOUNT NAME
========================================================= */

.owner-navbar-name {
    max-width: 150px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =========================================================
   NOTIFICATION BELL
========================================================= */

.owner-navbar-notification {
    position: relative;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e2e2e7;
    border-radius: 50%;

    background: #fff;
    color: #34343c;

    font-size: 20px;

    text-decoration: none;

    transition: all .2s ease;
}


.owner-navbar-notification:hover {
    background: #fff7f9;

    border-color: #ef9eb2;

    color: #ff5f78;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, .08);

    transform: translateY(-1px);
}


.owner-navbar-notification:focus {
    outline: none;

    border-color: #ef9eb2;

    box-shadow:
        0 0 0 3px
        rgba(239, 158, 178, .18);
}


.owner-navbar-notification i {
    line-height: 1;
}


/* =========================================================
   NOTIFICATION BADGE
========================================================= */

.owner-navbar-notification-badge {
    position: absolute;

    top: -4px;
    right: -4px;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #fff;
    border-radius: 999px;

    background: #ff536e;
    color: #fff;

    font-size: 10px;
    font-weight: 700;

    line-height: 1;

    box-shadow:
        0 2px 5px
        rgba(0, 0, 0, .12);
}


/* =========================================================
   ĐẶT LỊCH
========================================================= */

.customer-booking-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 44px;

    padding-left: 16px;
    padding-right: 16px;

    border-radius: 999px;

    font-weight: 600;
}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.owner-account-menu {
    min-width: 220px;

    padding: 7px;

    border: 1px solid #ececf0;
    border-radius: 12px;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, .12);
}


.owner-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 10px 12px;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 500;
}


.owner-account-menu .dropdown-item:hover {
    background: #f7f7f9;
}


.owner-account-menu .dropdown-divider {
    margin: 5px;
}


.owner-account-menu form {
    margin: 0;
}


/* =========================================================
   LOGOUT
========================================================= */

.owner-account-logout {
    width: 100%;

    border: 0;

    background: transparent;

    text-align: left;

    color: #dc3545 !important;
}


.owner-account-logout:hover {
    background: #fff0f2 !important;

    color: #c82333 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .owner-navbar-tools {
        width: 100%;

        margin-top: 8px;
    }


    .owner-account {
        flex: 1;
    }


    .owner-account-button {
        width: 100%;
    }


    .owner-account-button::after {
        margin-left: auto;
    }


    .owner-navbar-name {
        max-width: none;
    }


    .owner-account-menu {
        width: 100%;
    }


    .owner-navbar-notification {
        width: 46px;
        height: 46px;

        flex: 0 0 46px;
    }


    .customer-booking-button {
        min-height: 46px;
    }

}

</style>



<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom sticky-top">

    <div class="container">


        <!-- =====================================================
             LOGO
        ====================================================== -->

        <a
            class="navbar-brand pet-navbar-brand"
            href="<?= BASE_URL ?>/"
        >

            <?php if ($navbarShopLogo !== ''): ?>

                <span class="pet-navbar-logo">

                    <img
                        src="<?= BASE_URL ?>/<?= htmlspecialchars(
                            ltrim($navbarShopLogo, '/')
                        ) ?>"
                        alt="<?= htmlspecialchars($navbarShopName) ?>"
                    >

                </span>

            <?php else: ?>

                <span class="pet-navbar-logo pet-navbar-logo-fallback">

                    <i class="bi bi-heart-pulse"></i>

                </span>

            <?php endif; ?>


            <span class="pet-navbar-shop-name">

                <?= htmlspecialchars($navbarShopName) ?>

            </span>

        </a>



        <!-- =====================================================
             MOBILE TOGGLE
        ====================================================== -->

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNav"
            aria-controls="mainNav"
            aria-expanded="false"
            aria-label="Mở menu"
        >

            <span class="navbar-toggler-icon"></span>

        </button>



        <div
            class="collapse navbar-collapse"
            id="mainNav"
        >


            <!-- =================================================
                 MENU TRÁI
            ================================================== -->

            <ul class="navbar-nav me-auto">


                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="<?= BASE_URL ?>/?url=services"
                    >
                        Dịch vụ Spa
                    </a>

                </li>


                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="<?= BASE_URL ?>/?url=posts"
                    >
                        Bài viết
                    </a>

                </li>


                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="<?= BASE_URL ?>/?url=gallery"
                    >
                        Thư viện
                    </a>

                </li>


                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="<?= BASE_URL ?>/?url=contact"
                    >
                        Liên hệ
                    </a>

                </li>

            </ul>



            <!-- =================================================
                 KHU VỰC BÊN PHẢI
            ================================================== -->

            <div class="d-flex gap-2 align-items-center">


                <?php if (!$user): ?>


                    <!-- =========================================
                         GUEST
                    ========================================== -->

                    <a
                        class="btn btn-outline-primary btn-sm"
                        href="<?= BASE_URL ?>/?url=login"
                    >
                        Đăng nhập
                    </a>


                    <a
                        class="btn btn-primary btn-sm"
                        href="<?= BASE_URL ?>/?url=register"
                    >
                        Đăng ký
                    </a>



                <?php elseif ($role === 'customer'): ?>


                    <!-- =========================================
                         CUSTOMER
                    ========================================== -->

                    <div class="owner-navbar-tools">


                        <!-- ĐẶT LỊCH -->

                        <a
                            class="
                                btn
                                btn-primary
                                btn-sm
                                customer-booking-button
                            "
                            href="<?= BASE_URL ?>/?url=customer/booking/create"
                        >

                            <i class="bi bi-calendar-plus"></i>

                            <span>
                                Đặt lịch
                            </span>

                        </a>



                        <!-- CHUÔNG -->

                        <a
                            href="<?= BASE_URL ?>/?url=customer/notifications"
                            class="owner-navbar-notification"
                            title="Thông báo"
                            aria-label="Thông báo"
                        >

                            <i class="bi bi-bell-fill"></i>


                            <span
                                class="owner-navbar-notification-badge"
                                style="<?= $unreadNotificationCount > 0
                                    ? ''
                                    : 'display:none;' ?>"
                            >

                                <?= (int) $unreadNotificationCount ?>

                            </span>

                        </a>



                        <!-- ACCOUNT CUSTOMER -->

                        <div class="dropdown owner-account">


                            <button
                                class="
                                    btn
                                    dropdown-toggle
                                    owner-account-button
                                "
                                type="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >


                                <!-- AVATAR -->

                                <span class="owner-navbar-avatar">

                                    <?php if ($customerAvatar !== ''): ?>

                                        <img
                                            src="<?= BASE_URL ?>/<?= htmlspecialchars(
                                                ltrim(
                                                    $customerAvatar,
                                                    '/'
                                                )
                                            ) ?>?v=<?= urlencode(
                                                (string) (
                                                    $user['avatar_version']
                                                    ?? '1'
                                                )
                                            ) ?>"
                                            alt="Ảnh đại diện <?= htmlspecialchars(
                                                $customerName
                                            ) ?>"
                                        >

                                    <?php else: ?>

                                        <span>
                                            <?= htmlspecialchars(
                                                $customerInitial
                                            ) ?>
                                        </span>

                                    <?php endif; ?>

                                </span>


                                <!-- TÊN KHÁCH -->

                                <span class="owner-navbar-name">

                                    <?= htmlspecialchars(
                                        $customerName
                                    ) ?>

                                </span>

                            </button>



                            <!-- DROPDOWN -->

                            <ul
                                class="
                                    dropdown-menu
                                    dropdown-menu-end
                                    owner-account-menu
                                "
                            >


                                <!-- TÀI KHOẢN -->

                                <li>

                                    <a
                                        class="dropdown-item"
                                        href="<?= BASE_URL ?>/?url=customer"
                                    >

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

                                        <span>
                                            Tài khoản
                                        </span>

                                    </a>

                                </li>



                                <!-- LỊCH HẸN -->

                                <li>

                                    <a
                                        class="dropdown-item"
                                        href="<?= BASE_URL ?>/?url=customer/bookings"
                                    >

                                        <i class="bi bi-calendar-check"></i>

                                        <span>
                                            Lịch hẹn của tôi
                                        </span>

                                    </a>

                                </li>



                                <!-- THÔNG BÁO -->

                                <li>

                                    <a
                                        class="dropdown-item"
                                        href="<?= BASE_URL ?>/?url=customer/notifications"
                                    >

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

                                        <span>
                                            Thông báo
                                        </span>


                                        <?php if ($unreadNotificationCount > 0): ?>

                                            <span
                                                class="
                                                    badge
                                                    text-bg-danger
                                                    ms-auto
                                                "
                                            >
                                                <?= (int) $unreadNotificationCount ?>
                                            </span>

                                        <?php endif; ?>

                                    </a>

                                </li>



                                <li>
                                    <hr class="dropdown-divider">
                                </li>



                                <!-- ĐĂNG XUẤT -->

                                <li>

                                    <form
                                        method="post"
                                        action="<?= BASE_URL ?>/?url=logout"
                                    >

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


                                        <button
                                            type="submit"
                                            class="
                                                dropdown-item
                                                owner-account-logout
                                            "
                                        >

                                            <i class="bi bi-box-arrow-right"></i>

                                            <span>
                                                Đăng xuất
                                            </span>

                                        </button>

                                    </form>

                                </li>


                            </ul>

                        </div>

                    </div>



                <?php elseif ($role === 'owner'): ?>


                    <!-- =========================================
                         OWNER
                    ========================================== -->

                    <div class="owner-navbar-tools">


                        <!-- CHUÔNG -->

                        <a
                            href="<?= BASE_URL ?>/?url=owner/notifications"
                            class="owner-navbar-notification"
                            title="Thông báo"
                            aria-label="Thông báo"
                        >

                            <i class="bi bi-bell-fill"></i>


                            <span
                                id="ownerNavbarNotificationBadge"
                                class="owner-navbar-notification-badge"
                                style="<?= $ownerNavbarUnreadCount > 0
                                    ? ''
                                    : 'display:none;' ?>"
                            >

                                <?= (int) $ownerNavbarUnreadCount ?>

                            </span>

                        </a>



                        <!-- ACCOUNT OWNER -->

                        <div class="dropdown owner-account">


                            <button
                                class="
                                    btn
                                    dropdown-toggle
                                    owner-account-button
                                "
                                type="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >


                                <!-- AVATAR -->

                                <span class="owner-navbar-avatar">

                                    <?php if ($ownerAvatar !== ''): ?>

                                        <img
                                            src="<?= BASE_URL ?>/<?= htmlspecialchars(
                                                ltrim(
                                                    $ownerAvatar,
                                                    '/'
                                                )
                                            ) ?>?v=<?= urlencode(
                                                (string) (
                                                    $user['avatar_version']
                                                    ?? '1'
                                                )
                                            ) ?>"
                                            alt="Ảnh đại diện <?= htmlspecialchars(
                                                $ownerName
                                            ) ?>"
                                        >

                                    <?php else: ?>

                                        <span>
                                            <?= htmlspecialchars(
                                                $ownerInitial
                                            ) ?>
                                        </span>

                                    <?php endif; ?>

                                </span>


                                <!-- TÊN OWNER -->

                                <span class="owner-navbar-name">

                                    <?= htmlspecialchars(
                                        $ownerName
                                    ) ?>

                                </span>

                            </button>



                            <!-- DROPDOWN -->

                            <ul
                                class="
                                    dropdown-menu
                                    dropdown-menu-end
                                    owner-account-menu
                                "
                            >


                                <!-- QUẢN LÝ -->

                                <li>

                                    <a
                                        class="dropdown-item"
                                        href="<?= BASE_URL ?>/?url=owner"
                                    >

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

                                        <span>
                                            Quản lý Spa
                                        </span>

                                    </a>

                                </li>



                                <!-- THÔNG BÁO -->

                                <li>

                                    <a
                                        class="dropdown-item"
                                        href="<?= BASE_URL ?>/?url=owner/notifications"
                                    >

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

                                        <span>
                                            Thông báo
                                        </span>


                                        <?php if ($ownerNavbarUnreadCount > 0): ?>

                                            <span
                                                class="
                                                    badge
                                                    text-bg-danger
                                                    ms-auto
                                                "
                                            >
                                                <?= (int) $ownerNavbarUnreadCount ?>
                                            </span>

                                        <?php endif; ?>

                                    </a>

                                </li>



                                <li>
                                    <hr class="dropdown-divider">
                                </li>



                                <!-- LOGOUT -->

                                <li>

                                    <form
                                        method="post"
                                        action="<?= BASE_URL ?>/?url=logout"
                                    >

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


                                        <button
                                            class="
                                                dropdown-item
                                                owner-account-logout
                                            "
                                            type="submit"
                                        >

                                            <i class="bi bi-box-arrow-right"></i>

                                            <span>
                                                Đăng xuất
                                            </span>

                                        </button>

                                    </form>

                                </li>


                            </ul>

                        </div>

                    </div>



                <?php else: ?>


                    <!-- =========================================
                         ADMIN
                    ========================================== -->

                    <a
                        class="btn btn-outline-secondary btn-sm"
                        href="<?= BASE_URL ?>/?url=admin"
                    >
                        Quản trị
                    </a>


                <?php endif; ?>



                <!-- =============================================
                     LOGOUT RIÊNG CHỈ CÒN ADMIN
                ============================================== -->

                <?php if (
                    $user
                    &&
                    $role !== 'owner'
                    &&
                    $role !== 'customer'
                ): ?>

                    <form
                        method="post"
                        action="<?= BASE_URL ?>/?url=logout"
                        class="d-inline"
                    >

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


                        <button
                            class="btn btn-link btn-sm"
                            type="submit"
                        >
                            Đăng xuất
                        </button>

                    </form>

                <?php endif; ?>


            </div>

        </div>

    </div>

</nav>