@php
    $items = [
        [
            'id' => '01',
            'href' => '#',
            'text' => 'Notes',
            'icon' => 'ph--note',
            'isActive' => true,
        ],
        [
            'id' => '02',
            'href' => '#',
            'text' => 'Calendar',
            'icon' => 'ph--calendar',
        ],
        [
            'id' => '03',
            'href' => '#',
            'text' => 'Tasks',
            'icon' => 'ph--kanban',
        ],
    ];
@endphp

<x-ui.sidebar-wrapper
    class="fixed h-dvh py-3 overflow-hidden w-11/12 max-w-64 md:w-64 transition-all -translate-x-full fx-open:translate-x-0 md:translate-x-0 bg-bg-surface border-r border-bg-muted/70 flex flex-col justify-between px-4 md:transition-none ease-linear z-80">
    <div class="min-h-max py-2 border-b border-border">
        <a href="#" class="flex items-center gap-x-3 font-semibold text-fg-subtitle">
            <div
                class="size-8 bg-fg-title text-bg rounded-ui d-flex-place-center shadow-sm transition-colors duration-300">
                <svg aria-hidden="true" width="488" height="488" class="size-5" viewBox="0 0 488 488" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_13_164)">
                        <path
                            d="M71.5342 71L416.602 416.068V416.068C321.314 511.356 166.822 511.356 71.5342 416.068V416.068C-23.7537 320.78 -23.7537 166.288 71.5342 71V71Z"
                            fill="currentColor" class=""></path>
                        <path
                            d="M483.659 249.5C483.659 274.629 436.788 344.5 411.659 344.5C386.53 344.5 392.659 274.629 392.659 249.5C392.659 224.371 413.03 204 438.159 204C463.288 204 483.659 224.371 483.659 249.5Z"
                            fill="currentColor" class=""></path>
                        <circle cx="243.429" cy="243.759" r="110" transform="rotate(48.3973 243.429 243.759)"
                            fill="currentColor" stroke="white" stroke-width="80" class="stroke-fg-title"></circle>
                        <path
                            d="M309 71C309 96.129 212.629 101 187.5 101C162.371 101 142 80.629 142 55.5C142 30.371 162.371 10 187.5 10C212.629 10 309 45.871 309 71Z"
                            fill="currentColor" class=""></path>
                        <path
                            d="M417 101.5C417 126.629 415.129 215.5 390 215.5C364.871 215.5 326 126.629 326 101.5C326 76.371 346.371 56 371.5 56C396.629 56 417 76.371 417 101.5Z"
                            fill="currentColor" class=""></path>
                    </g>
                    <defs>
                        <clipPath id="clip0_13_164">
                            <rect width="488" height="488" fill="currentColor" class="text-bg"></rect>
                        </clipPath>
                    </defs>
                </svg>
            </div>
            UnoPlanner
        </a>
    </div>
    <nav class="flex-1 pt-6 flex flex-col">
        <span class="mb-2 text-sm text-fg-muted uppercase">Navigation</span>
        <ul class="text-fg-muted space-y-2">
            @foreach ($items as $item)
                <x-atoms.sidebar-item text="{{ $item['text'] }}" href="{{ $item['href'] }}"
                    icon="{{ $item['icon'] }}" :is-active="$item['isActive'] ?? false" />
            @endforeach
        </ul>
    </nav>
    <div>
        <ul class="flex flex-col gap-y-2 text-fg-muted">
            <x-atoms.sidebar-item text="Settings" href="#" icon="ph--gear" />
            <li class="w-full">
                <x-ui.button size="none" variant="ghost" aria-label="Show Profile dropdown"
                    class="gap-3 w-full p-1.5 border border-border-strong/40">
                    <x-ui.avatar src="/avatar1.webp" height="50" width="50" loading="lazy" decoding="async"
                        alt="Johnkat MJ's avatar" size="md" radius="ui" />

                    <div class="flex flex-1 justify-between items-center overflow-hidden">
                        <div class="flex flex-col -space-y-0.5 text-left flex-1 overflow-hidden">
                            <span class="font-semibold text-sm text-fg-title truncate">
                                Johnkat MJ
                            </span>
                            <span class="text-xs text-fg-muted truncate">
                                johnkatmj@gmail.com
                            </span>
                        </div>
                        <span aria-hidden="true" class="flex min-w-max text-fg-muted opacity-60">
                            <span class="iconify ph--caret-up-down"></span>
                        </span>
                    </div>
                </x-ui.button>
            </li>
        </ul>
    </div>
</x-ui.sidebar-wrapper>

@props(['text', 'icon', 'href' => '', 'isActive' => null])

<li
    class="relative before:absolute before:-left-0.5 before:w-0.5 before:inset-y-2.5 before:rounded-l-md before:bg-transparent has-fx-active:before:bg-fg-title">
    <a href="{{ $href }}" data-state="{{ $isActive ? 'active' : null }}" aria-label="Link to {{ $text }}"
        class="flex items-center text-sm h-10 px-3 py-1.5 gap-x-2.5 fx-active:bg-bg fx-active:text-fg-title fx-current:bg-bg fx-current:text-fg-title border border-transparent fx-active:border-bg-muted/70 fx-active:shadow-xs fx-current:border-bg-muted/70 fx-current:shadow-xs rounded-ui">
        <x-ui.icon size="xs" :name="$icon"/>
        {{ $text }}
    </a>
</li>

<main class="md:pl-64">
    <header class="w-full flex h-16 bg-bg sticky top-0 z-35">
        <div class="flex items-center justify-between w-full h-full px-4 sm:px-8">
            <div class="flex items-center gap-3">
                <div
                    class="flex md:hidden pr-2 relative before:absolute before:inset-y-2 before:right-0 before:w-0.5 before:bg-border">
                    <button data-toggle-sidebar
                        class="outline-none aspect-square flex flex-col relative justify-center items-center">
                        <span aria-hidden="true" class="iconify ph--door-open"></span>
                    </button>
                </div>
            </div>
            <div class="flex items-center gap-0.5">
                <x-ui.button variant="ghost" size="sm" iconOnly>
                    <span class="iconify ph--gear size-4.5"></span>
                </x-ui.button>
                <div class="relative">
                    <x-ui.button variant="ghost" size="sm" iconOnly>
                        <span class="iconify ph--bell size-4.5"></span>
                    </x-ui.button>
                    <span class="absolute top-1.5 right-2 w-2 h-2 bg-danger rounded-full border-2 border-bg"></span>
                </div>
            </div>
        </div>
    </header>

    {{ $slot }}
</main>

@php
    $items = [
        [
            'id' => 'group01',
            'title' => 'Main Navigation',
            'items' => [
                [
                    'id' => 'g1_01',
                    'text' => 'Dashboard',
                    'href' => '#',
                    'isActive' => true,
                    'icon' => 'ph--chart-line-up',
                ],
                [
                    'id' => 'g1_02',
                    'text' => 'Analytics',
                    'href' => '#',
                    'icon' => 'ph--chart-pie',
                ],
                [
                    'id' => 'g1_03',
                    'text' => 'Reports',
                    'href' => '#',
                    'icon' => 'ph--file-text',
                ],
                [
                    'id' => 'g1_04',
                    'text' => 'Calendar',
                    'href' => '#',
                    'icon' => 'ph--calendar',
                ],
            ],
        ],
        [
            'id' => 'group02',
            'title' => 'Management',
            'items' => [
                [
                    'id' => 'g2_01',
                    'text' => 'Customers',
                    'href' => '#',
                    'icon' => 'ph--users',
                ],
                [
                    'id' => 'g2_02',
                    'text' => 'Products',
                    'href' => '#',
                    'icon' => 'ph--package',
                ],
                [
                    'id' => 'g2_03',
                    'text' => 'Orders',
                    'href' => '#',
                    'icon' => 'ph--shopping-cart',
                ],
                [
                    'id' => 'g2_04',
                    'text' => 'Inventory',
                    'href' => '#',
                    'icon' => 'ph--warehouse',
                ],
            ],
        ],
    ];
@endphp

<x-ui.sidebar-wrapper
    class="w-64 bg-bg lg:bg-gray-50/50 lg:dark:bg-bg border-r border-border flex-col flex z-60 lg:z-20 fixed left-0 transition-all duration-200 -translate-x-full invisible fx-open:visible fx-open:translate-x-0 lg:translate-x-0 lg:transition-none lg:visible transform h-dvh">
    <div class="h-14 flex items-center px-3 border-b border-border-strong/60">
        <div class="w-full flex items-center gap-2.5 py-1.5 group text-left">
            <div
                class="size-8 bg-fg-title text-bg rounded-ui d-flex-place-center shadow-sm transition-colors duration-300">
                <svg aria-hidden="true" width="488" height="488" class="size-5" viewBox="0 0 488 488" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_13_164)">
                        <path
                            d="M71.5342 71L416.602 416.068V416.068C321.314 511.356 166.822 511.356 71.5342 416.068V416.068C-23.7537 320.78 -23.7537 166.288 71.5342 71V71Z"
                            fill="currentColor" class=""></path>
                        <path
                            d="M483.659 249.5C483.659 274.629 436.788 344.5 411.659 344.5C386.53 344.5 392.659 274.629 392.659 249.5C392.659 224.371 413.03 204 438.159 204C463.288 204 483.659 224.371 483.659 249.5Z"
                            fill="currentColor" class=""></path>
                        <circle cx="243.429" cy="243.759" r="110" transform="rotate(48.3973 243.429 243.759)"
                            fill="currentColor" stroke="white" stroke-width="80" class="stroke-fg-title"></circle>
                        <path
                            d="M309 71C309 96.129 212.629 101 187.5 101C162.371 101 142 80.629 142 55.5C142 30.371 162.371 10 187.5 10C212.629 10 309 45.871 309 71Z"
                            fill="currentColor" class=""></path>
                        <path
                            d="M417 101.5C417 126.629 415.129 215.5 390 215.5C364.871 215.5 326 126.629 326 101.5C326 76.371 346.371 56 371.5 56C396.629 56 417 76.371 417 101.5Z"
                            fill="currentColor" class=""></path>
                    </g>
                    <defs>
                        <clipPath id="clip0_13_164">
                            <rect width="488" height="488" fill="currentColor" class="text-bg"></rect>
                        </clipPath>
                    </defs>
                </svg>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-fg-title truncate">
                    UnoFlex
                </p>
                <p class="text-[10px] text-fg-muted/60 font-medium truncate">
                    Sales
                </p>
            </div>
            <x-ui.button variant="ghost" size="sm" icon-only aria-label="Resize sidebar" data-toggle-sidebar-size>
                <span class="flex iconify ph--caret-up-down"></span>  
            </x-ui.button>
        </div>
    </div>

    <nav class="flex-1 overflow-y-auto py-4 px-3">
        @foreach ($items as $item)
            <x-atoms.sidebar-nav-group :title="$item['title']" :items="$item['items']" />
        @endforeach
    </nav>
    <div class="p-3 border-t border-border-strong/60">
        <x-ui.button variant="ghost" size="none"
            class="gap-3 w-full px-2 py-2 text-sm font-medium rounded-ui transition-colors">
            <div
                class="size-6 rounded-full bg-linear-to-tr from-bg-muted to-bg-surface d-flex-place-center text-fg-muted font-semibold ring-1 ring-bg">
                JM
            </div>
            <div class="text-left flex-1">
                <p class="text-xs font-medium text-fg-title truncate">Johnkat MJ</p>
            </div>
            <span aria-hidden="true" class="iconify size-3.5 opacity-80 ph--caret-up"></span>
        </x-ui.button>
    </div>
</x-ui.sidebar-wrapper>

@props(['icon', 'text', 'href', 'isActive' => false])

<li>
    <a href="{{ $href }}" data-state="{{ $isActive ? 'active' : 'inactive' }}" class="flex items-center gap-3 px-2 h-9 fx-current:bg-bg-muted/60 fx-current:text-fg-title fx-active:bg-bg-muted/60 fx-active:text-fg-title text-fg-muted hover:bg-bg-muted/50 rounded-ui text-sm">
        <x-ui.icon size="sm" :name="$icon"
            class="opacity-70 in-fx-active:text-fg-title in-fx-current:text-fg-title"/>
        <span>{{ $text }}</span>
    </a>
</li>

@props(['title', 'items' => []])
<div class="mt-6 first:mt-1">
    <div class="px-2 text-xs font-medium text-fg-muted/70 uppercase tracking-wider">
        {{ $title }}
    </div>
    <ul class="flex flex-col mt-1.5 space-y-0.5">
        @foreach ($items as $item)
            <x-atoms.sidebar-item :href="$item['href']" :text="$item['text']" :icon="$item['icon']"
                :is-active="$item['isActive'] ?? false" />
        @endforeach
    </ul>
</div>

<div class="lg:pl-64 flex-1 flex flex-col h-full relative overflow-hidden bg-bg">
    <header
        class="h-14 bg-bg border-b border-border-strong/60 flex items-center justify-between px-6 sticky top-0 z-10">
        <div class="flex items-center gap-4">
            <div class="flex lg:hidden border-r border-border pr-2">
                <x-ui.button data-toggle-sidebar variant="soft" size="sm" icon-only aria-label="Open Sidebar">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="size-4">
                        <rect width="18" height="18" x="3" y="3" rx="2" />
                        <path d="M9 3v18" />
                        <path d="m14 9 3 3-3 3" />
                    </svg>
                </x-ui.button>
            </div>
        </div>
        <div class="flex items-center gap-1">

        </div>
    </header>
    <main class="flex-1 overflow-y-auto p-8">

    </main>
</div>

@php
    $items = [
        [
            'id' => '01',
            'href' => '#',
            'text' => 'Notes',
            'icon' => 'ph--note',
            'isActive' => true,
        ],
        [
            'id' => '02',
            'href' => '#',
            'text' => 'Calendar',
            'icon' => 'ph--calendar',
        ],
        [
            'id' => '03',
            'href' => '#',
            'text' => 'Tasks',
            'icon' => 'ph--kanban',
        ],
    ];
@endphp

<x-ui.sidebar-overlay
    class="md:hidden md:invisible invisible opacity-0 fx-open:visible fx-open:opacity-100 ease-linear transition-all duration-200 z-40" />
<x-ui.sidebar-wrapper
    class="group fixed md:fx-resized:w-14 w-64 md:transition-[width] ease-linear duration-200
         left-1.5 inset-y-1.5 z-100 flex flex-col overflow-hidden bg-gray-950 border border-gray-800/50 dark:border-gray-800 rounded-ui dark:bg-gray-900/50
         -translate-x-full scale-97 md:translate-x-0 md:scale-100 fx-open:translate-x-0 fx-open:scale-100">
    <div class="px-2 py-1 pb-4 border-b border-white/10">
        <div class="flex items-center gap-3 pt-2">
            <div class="min-w-9 bg-primary text-white size-9 rounded-ui d-flex-place-center">
                <svg aria-hidden="true" width="488" height="488" class="size-7" viewBox="0 0 488 488" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_13_164)">
                        <path
                            d="M71.5342 71L416.602 416.068V416.068C321.314 511.356 166.822 511.356 71.5342 416.068V416.068C-23.7537 320.78 -23.7537 166.288 71.5342 71V71Z"
                            fill="currentColor" class=""></path>
                        <path
                            d="M483.659 249.5C483.659 274.629 436.788 344.5 411.659 344.5C386.53 344.5 392.659 274.629 392.659 249.5C392.659 224.371 413.03 204 438.159 204C463.288 204 483.659 224.371 483.659 249.5Z"
                            fill="currentColor" class=""></path>
                        <circle cx="243.429" cy="243.759" r="110" transform="rotate(48.3973 243.429 243.759)"
                            fill="currentColor" stroke="white" stroke-width="80" class="stroke-primary"></circle>
                        <path
                            d="M309 71C309 96.129 212.629 101 187.5 101C162.371 101 142 80.629 142 55.5C142 30.371 162.371 10 187.5 10C212.629 10 309 45.871 309 71Z"
                            fill="currentColor" class=""></path>
                        <path
                            d="M417 101.5C417 126.629 415.129 215.5 390 215.5C364.871 215.5 326 126.629 326 101.5C326 76.371 346.371 56 371.5 56C396.629 56 417 76.371 417 101.5Z"
                            fill="currentColor" class=""></path>
                    </g>
                    <defs>
                        <clipPath id="clip0_13_164">
                            <rect width="488" height="488" fill="currentColor" class="text-bg"></rect>
                        </clipPath>
                    </defs>
                </svg>
            </div>
            <div class="lg:group-fx-resized:hidden flex-1 flex flex-col leading-tight">
                <span class="line-clamp-1 text-sm font-bold tracking-wide text-white">Sky Sales</span>
                <span class="line-clamp-1 text-xs text-white/50 tracking-wide">Soft Store</span>
            </div>
        </div>
    </div>
    <ul class="px-2 py-3 flex flex-col gap-0.5 flex-1">
        @foreach ($items as $item)
            <x-atoms.sidebar-item text="{{ $item['text'] }}" href="{{ $item['href'] }}"
                icon="{{ $item['icon'] }}" :is-active="$item['isActive'] ?? false" />
        @endforeach
    </ul>
    <div class="hidden md:flex h-max dark">
        <x-ui.button :radius="false" data-toggle-sidebar-size type='button' size='none' variant='ghost'
            class="flex flex-1 items-center justify-center py-3 border-t border-white/10 transition-colors">
            <x-ui.icon name='ph--caret-right' class="hidden group-fx-resized:inline-flex" />
            <x-ui.icon name='ph--caret-left' class="group-fx-resized:hidden" />
        </x-ui.button>
    </div>
</x-ui.sidebar-wrapper>

@props(['text', 'icon', 'href' => '', 'isActive' => null])

<li class="flex h-max w-full">
    <a href="{{ $href }}" data-state="{{ $isActive ? 'active' : null }}" aria-label="Link to {{ $text }}"
        class="flex flex-1 items-center gap-3 px-3 py-2.5 rounded-ui text-sm text-white/65 hover:bg-white/5 hover:text-white/90 font-medium whitespace-nowrap transition-all duration-150
                fx-active:bg-white/8 fx-active:text-white fx-current:bg-white/8 fx-current:text-white">
        <x-ui.icon size="xs" :name="$icon" />
        <span class="md:group-fx-resized:hidden">
            {{ $text }}
        </span>
    </a>
</li>

<div data-page-content class="group md:pl-65.5 md:fx-resized:pl-15.5 min-h-screen transition-all duration-200 bg-bg">
    <header class="w-full flex h-16 bg-bg sticky top-0 z-35">
        <div class="flex items-center justify-between w-full h-full px-4 sm:px-8">
            <div class="flex items-center gap-3">
                <div
                    class="flex md:hidden pr-2 relative before:absolute before:inset-y-2 before:right-0 before:w-0.5 before:bg-border">
                    <button data-toggle-sidebar
                        class="outline-none aspect-square flex flex-col relative justify-center items-center">
                        <span aria-hidden="true" class="iconify ph--door-open"></span>
                    </button>
                </div>
            </div>
            <div class="flex items-center gap-0.5">
                <x-ui.button variant="ghost" size="sm" iconOnly>
                    <span class="iconify ph--gear size-4.5"></span>
                </x-ui.button>
                <div class="relative">
                    <x-ui.button variant="ghost" size="sm" iconOnly>
                        <span class="iconify ph--bell size-4.5"></span>
                    </x-ui.button>
                    <span class="absolute top-1.5 right-2 w-2 h-2 bg-danger rounded-full border-2 border-bg"></span>
                </div>
            </div>
        </div>
    </header>
    <main class="w-full">
        {{ $slot }}
    </main>
</div>