<div role="navigation" aria-label="Navbar" class="" id="layout-topbar">
    <div class="flex items-center justify-between px-6 py-3 bg-menu">
        <div class="inline-flex items-center gap-5">
            <a href="/">
                <img src="{{ 'logo_new.png' | asset_url }}" class="h-[20px]" />
            </a>
            <button
                class="btn btn-outline btn-sm btn-ghost border-base-300 text-base-content/70 hidden h-9 w-96 justify-start gap-2 px-2 !text-sm md:flex bg-white"
                onclick="document.getElementById('topbar-search-modal')?.showModal()">
                <i data-lucide="search"></i>
                <span>Tìm Kiếm</span>
            </button>
            <button
                class="btn btn-outline btn-sm btn-square btn-ghost border-base-300 text-base-content/70 flex size-9 md:hidden"
                aria-label="Search" onclick="document.getElementById('topbar-search-modal')?.showModal()">
                <i data-lucide="search"></i>
            </button>
            <dialog id="topbar-search-modal" class="modal p-0">
                <div class="modal-box bg-transparent p-0 shadow-none max-w-xl">
                    <div class="bg-base-100 rounded-box">
                        <div class="input w-full border-0 !outline-none pl-0">
                            <select name="search-category" id="search-category"
                                class="select !outline-none border-0 border-r-1 border-base-300 font-bold">
                                <option value="">Chọn nội dung tìm</option>
                                <option value="">Bán hàng</option>
                                <option value="">Sản phẩm</option>
                                <option value="">Khách hàng</option>
                            </select>
                            <i data-lucide="search" class="text-base-content/60 size-8"></i>
                            <input type="search" class="grow" placeholder="Tìm kiếm" aria-label="Search" />
                            <form method="dialog">
                                <button class="btn btn-xs btn-circle btn-ghost" aria-label="Close">
                                    <i data-lucide="x" class="text-base-content/80 size-4"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="bg-base-100 rounded-box mt-4">
                        <div class="px-5 py-3">
                            <p class="text-base-content/80 text-sm font-medium">Từ khóa tìm kiếm gần đây...</p>
                            <div class="mt-2 flex flex-wrap gap-1.5">
                                <div
                                    class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
                                    Đơn hàng
                                </div>
                                <div
                                    class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
                                    Sản phẩm
                                </div>
                                <div
                                    class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
                                    Bài viết
                                </div>
                                <div
                                    class="border-base-300 hover:bg-base-200 rounded-box flex cursor-pointer items-center gap-1 border border-dashed px-2.5 py-1 text-sm/none">
                                    Khách hàng
                                </div>
                            </div>
                        </div>
                        <hr class="border-base-300 h-px border-dashed" />

                        <ul class="menu w-full pt-1">
                            <li class="menu-title">Tác vụ nhanh</li>
                            <li>
                                <a href="/order" class="group">
                                    <i data-lucide="store" class="size-3"></i>
                                    <p class="grow text-sm">Danh sách đơn hàng</p>
                                </a>
                            </li>
                            <li>
                                <a href="/product" class="group">
                                    <i data-lucide="package" class="size-3"></i>
                                    <p class="grow text-sm">Danh sách sản phẩm</p>
                                </a>
                            </li>
                            <li>
                                <a href="/customer" class="group">
                                    <i data-lucide="user" class="size-3"></i>
                                    <p class="grow text-sm">Danh sách khách hàng</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <form method="dialog" class="modal-backdrop">
                    <button>close</button>
                </form>
            </dialog>
        </div>
        <div class="inline-flex items-center gap-0.5">

            <div class="dropdown dropdown-bottom sm:dropdown-end dropdown-center">
                <div tabindex="0" role="button" class="btn btn-circle btn-sm relative" aria-label="Notifications">
                    <i data-lucide="bell" class="motion-preset-seesaw size-4.5"></i>
                    <div class="status status-error status-sm absolute end-1 top-1"></div>
                </div>
                <div tabindex="0"
                    class="dropdown-content bg-base-100 rounded-box mt-1 w-80 shadow-md duration-1000 hover:shadow-lg">
                    <div class="bg-base-200/30 rounded-t-box border-base-200 border-b ps-4 pe-2 pt-3">
                        <div class="flex items-center justify-between">
                            <p class="font-medium">Thông báo</p>
                            <button class="btn btn-xs btn-circle btn-ghost" aria-label="Close"
                                onclick="document.activeElement.blur()">
                                <span data-lucide="x" class="size-4"></span>
                            </button>
                        </div>
                        <div class="-ms-2 mt-2 -mb-px flex items-center justify-between">
                            <div role="tablist" class="tabs tabs-sm tabs-border">
                                <div role="tab" class="tab tab-active gap-2 px-3 font-medium">
                                    <span>Tất cả</span>
                                    <div class="badge badge-sm">4</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hover:bg-base-200/20 relative flex items-start gap-3 p-4 transition-all">
                        <div class="avatar avatar-online size-12">
                            <img src="{{ 'avatars/2.png' | asset_url }}"
                                class="from-primary/80 to-primary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
                                alt="" />
                        </div>
                        <div class="grow">
                            <p class="text-sm leading-tight">Lena submitted a draft for review.</p>
                            <p class="text-base-content/60 text-xs">15 min ago</p>
                            <div class="mt-2 flex items-center gap-2">
                                <button class="btn btn-sm btn-primary">Approve</button>
                                <button class="btn btn-sm btn-outline border-base-300">Decline</button>
                            </div>
                        </div>
                        <div class="status status-primary absolute end-4 top-4 size-1.5"></div>
                    </div>
                    <hr class="border-base-300 border-dashed" />
                    <div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
                        <div class="avatar avatar-offline size-12">
                            <img src="{{ 'avatars/4.png' | asset_url }}"
                                class="from-secondary/80 to-secondary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
                                alt="" />
                        </div>
                        <div class="grow">
                            <p class="text-sm leading-tight">Kai mentioned you in a project.</p>
                            <p class="text-base-content/60 text-xs">22 min ago</p>
                            <div
                                class="from-base-200 via-base-200/80 rounded-box mt-2 flex items-center justify-between gap-2 bg-linear-to-r to-transparent py-1 ps-2.5">
                                <p class="text-sm">Check model inputs?</p>
                                <button class="btn btn-xs btn-ghost text-xs">
                                    <span class="iconify lucide--reply size-3.5"></span>
                                    Reply
                                </button>
                            </div>
                        </div>
                    </div>
                    <hr class="border-base-300 border-dashed" />
                    <div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
                        <div class="avatar size-12">
                            <img src="{{ 'avatars/5.png' | asset_url }}"
                                class="mask mask-squircle bg-linear-to-b from-orange-500/80 to-orange-500/60 px-1 pt-1"
                                alt="" />
                        </div>
                        <div class="grow">
                            <p class="text-sm leading-tight">Your latest results are ready</p>
                            <div
                                class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
                                <p class="text-sm">
                                    Forecast Report
                                    <span class="text-base-content/60 text-xs">(12 MB)</span>
                                </p>
                                <button class="btn btn-xs btn-square btn-ghost text-xs">
                                    <span class="iconify lucide--arrow-down-to-line size-4"></span>
                                </button>
                            </div>
                            <div
                                class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
                                <p class="text-sm">
                                    Generated Summary
                                    <span class="text-base-content/60 text-xs">(354 KB)</span>
                                </p>
                                <button class="btn btn-xs btn-square btn-ghost text-xs">
                                    <span class="iconify lucide--arrow-down-to-line size-4"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <hr class="border-base-200" />
                    <div class="flex items-center justify-between px-2 py-2">
                        <button class="btn btn-sm btn-soft btn-primary"
                            onclick="document.getElementById('topbar-notifications')?.showModal()">Xem tất cả</button>
                    </div>
                </div>
            </div>
            <!-- hiển thị popup thông báo -->
            <dialog id="topbar-notifications" class="modal p-0">
                <div class="modal-box bg-transparent p-0 shadow-none max-w-xl">
                    <div class="bg-base-100 rounded-box p-3">
                        <div class="flex items-center justify-between">
                            <p class="font-medium">Thông báo</p>
                            <form method="dialog">
                                <button class="btn btn-xs btn-circle btn-ghost" aria-label="Close">
                                    <i data-lucide="x" class="text-base-content/80 size-4"></i>
                                </button>
                            </form>
                        </div>
                        <div class="-ms-2 mt-2 -mb-px flex items-center justify-between">
                            <div role="tablist" class="tabs tabs-sm tabs-border">
                                <div role="tab" class="tab tab-active gap-2 px-3 font-medium">
                                    <span>Tất cả</span>
                                    <div class="badge badge-sm">8</div>
                                </div>
                                <div role="tab" class="tab gap-2 px-3 font-medium">
                                    <span>Đã đọc</span>
                                    <div class="badge badge-sm">4</div>
                                </div>
                                <div role="tab" class="tab gap-2 px-3 font-medium">
                                    <span>Chưa đọc</span>
                                    <div class="badge badge-sm">4</div>
                                </div>
                            </div>
                        </div>
                        <div class="overflow-auto max-h-[450px]">
                            <div class="hover:bg-base-200/20 relative flex items-start gap-3 p-4 transition-all">
                                <div class="avatar avatar-online size-12">
                                    <img src="{{ 'avatars/2.png' | asset_url }}"
                                        class="from-primary/80 to-primary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
                                        alt="" />
                                </div>
                                <div class="grow">
                                    <p class="text-sm leading-tight">Lena submitted a draft for review.</p>
                                    <p class="text-base-content/60 text-xs">15 min ago</p>
                                    <div class="mt-2 flex items-center gap-2">
                                        <button class="btn btn-sm btn-primary">Approve</button>
                                        <button class="btn btn-sm btn-outline border-base-300">Decline</button>
                                    </div>
                                </div>
                                <div class="status status-primary absolute end-4 top-4 size-1.5"></div>
                            </div>
                            <hr class="border-base-300 border-dashed" />
                            <div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
                                <div class="avatar avatar-offline size-12">
                                    <img src="{{ 'avatars/4.png' | asset_url }}"
                                        class="from-secondary/80 to-secondary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
                                        alt="" />
                                </div>
                                <div class="grow">
                                    <p class="text-sm leading-tight">Kai mentioned you in a project.</p>
                                    <p class="text-base-content/60 text-xs">22 min ago</p>
                                    <div
                                        class="from-base-200 via-base-200/80 rounded-box mt-2 flex items-center justify-between gap-2 bg-linear-to-r to-transparent py-1 ps-2.5">
                                        <p class="text-sm">Check model inputs?</p>
                                        <button class="btn btn-xs btn-ghost text-xs">
                                            <span class="iconify lucide--reply size-3.5"></span>
                                            Reply
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <hr class="border-base-300 border-dashed" />
                            <div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
                                <div class="avatar size-12">
                                    <img src="{{ 'avatars/5.png' | asset_url }}"
                                        class="mask mask-squircle bg-linear-to-b from-orange-500/80 to-orange-500/60 px-1 pt-1"
                                        alt="" />
                                </div>
                                <div class="grow">
                                    <p class="text-sm leading-tight">Your latest results are ready</p>
                                    <div
                                        class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
                                        <p class="text-sm">
                                            Forecast Report
                                            <span class="text-base-content/60 text-xs">(12 MB)</span>
                                        </p>
                                        <button class="btn btn-xs btn-square btn-ghost text-xs">
                                            <span class="iconify lucide--arrow-down-to-line size-4"></span>
                                        </button>
                                    </div>
                                    <div
                                        class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
                                        <p class="text-sm">
                                            Generated Summary
                                            <span class="text-base-content/60 text-xs">(354 KB)</span>
                                        </p>
                                        <button class="btn btn-xs btn-square btn-ghost text-xs">
                                            <span class="iconify lucide--arrow-down-to-line size-4"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <form method="dialog" class="modal-backdrop">
                    <button>close</button>
                </form>
            </dialog>

            <!-- tài khoản người dùng -->
            <div class="dropdown dropdown-bottom dropdown-end w-full">
                <div tabindex="0" role="button"
                    class="hover:bg-base-300 rounded-box mx-2 mt-0 flex cursor-pointer items-center gap-2.5 transition-all group">
                    <div class="avatar">
                        <div class="bg-base-200 mask mask-squircle w-8">
                            <img src="{{ 'avatars/1.png' | asset_url }}" alt="Avatar" />
                        </div>
                    </div>
                    <div class="grow -space-y-0.5">
                        <p class="text-sm font-medium text-white group-hover:text-black">Admin</p>
                        <p class="text-base-content/60 text-xs text-white group-hover:text-black">@hura</p>
                    </div>
                </div>
                <ul role="menu" tabindex="0"
                    class="dropdown-content menu bg-base-100 rounded-box shadow-base-content/4 mb-1 w-48 p-1 shadow-[0px_-10px_40px_0px]">
                    <li>
                        <a href="">
                            <i data-lucide="user" class="size-4"></i>
                            <span>Hồ sơ cá nhân</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i data-lucide="settings" class="size-4"></i>
                            <span>Cài đặt tài khoản</span>
                        </a>
                    </li>
                    <li>
                        <a href="/logout.php">
                            <i data-lucide="log-out" class="size-4"></i>
                            <span>Đăng xuất</span>
                        </a>
                    </li>
                </ul>
            </div>

            <!-- cài đặt hệ thống -->
            <div class="dropdown dropdown-bottom dropdown-end w-full">
                <div tabindex="0" role="button" class="btn btn-sm relative" aria-label="settings">
                    <i data-lucide="settings" class="motion-preset-seesaw size-4.5"></i>
                    <span>Cài đặt</span>
                </div>
                <ul role="setting" tabindex="0"
                    class="dropdown-content menu bg-base-100 rounded-box shadow-base-content/4 mb-1 w-48 p-1 shadow-[0px_-10px_40px_0px]">
                    <div class="max-h-[400px] overflow-auto">
                        {% for _menu_item in global.main_menu %}
                        {% assign _menu_children = _menu_item.menu %}
                        {% if _menu_item.id == 'system' %}
                        {% for _item in _menu_children | limit: 10 %}
                        <li>
                            <a href="{{ _item.url }}">
                                <span>{{ _item.name }}</span>
                            </a>
                        </li>
                        {% endfor %}
                        {% endif %}
                        {% endfor %}
                    </div>
                </ul>
            </div>

        </div>
    </div>
    <div class="flex items-center justify-between gap-3 relative">
        <ul class="menu menu-horizontal">
            <li>
                <a href="/" class="flex items-center gap-3">
                    <i data-lucide="house" class="size-4.5 menu-icon-color"></i>
                    <span class="grow">Home</span>
                </a>
            </li>
            {% for _menu_item in global.main_menu %}
            {% assign _menu_children = _menu_item.menu %}
            {% if _menu_item.id != 'system' %}
            <li
                class="{%- for _item in _menu_children -%}{%- if _item.url == global.url -%} active  {%- endif -%} {%- endfor -%}">
                <div class="flex items-center gap-3">
                    {% if _menu_item.icon_class != '' %}
                    <i data-lucide="{{_menu_item.icon_class}}" class="size-4.5 menu-icon-color"></i>
                    {% endif %}
                    <span class="grow">{{ _menu_item.name }}</span>
                </div>
                <ul class="p-2 submenu">
                    {% for _item in _menu_children %}
                    <li class="{% if _item.url == global.url %} active  {% endif %}"><a href="{{ _item.url }}"
                            style="white-space: nowrap">{{ _item.name }}</a></li>
                    {% endfor %}
                </ul>
            </li>
            {% endif %}
            {% endfor %}
        </ul>
    </div>
</div>