<?php
use Illuminate\Support\Facades\Auth;
use App\Livewire\Actions\Logout;
use Livewire\Volt\Component;

new class extends Component
{
    public array $menus=[
        ['label' => 'Dashboard', 'route' => 'admin.dashboard', 'icon' => 'home', 'permission' => null],
        ['label' => 'ActivityLog', 'route' => 'admin.activity-log', 'icon' => 'clock', 'permission' => null],
        ['label' => 'RoomStatusLog', 'route' => 'admin.room-status-log', 'icon' => 'clock', 'permission' => null],
        ['label' => 'Role', 'route' => 'admin.roles', 'icon' => 'user-circle', 'permission' => 'role-list'],
        ['label' => 'User', 'route' => 'admin.users', 'icon' => 'user-circle', 'permission' => 'user-list'],
        ['label' => 'Artist', 'route' => 'admin.artists', 'icon' => 'musical-note', 'permission' => 'song-list'],
        ['label' => 'Song', 'route' => 'admin.songs', 'icon' => 'musical-note', 'permission' => 'song-list'],
        ['label' => 'Branche', 'route' => 'admin.branches', 'icon' => 'building-library', 'permission' => 'room-list'],
        ['label' => 'Room', 'route' => 'admin.rooms', 'icon' => 'building-library', 'permission' => 'room-list'],
        ['label' => 'RoomGrid', 'route' => 'admin.room-grids', 'icon' => 'film', 'permission' => 'room-list'],
        ['label' => 'TextAd', 'route' => 'admin.text-ads', 'icon' => 'megaphone', 'permission' => 'text-ad-list'],
        ['label' => 'BroadcastTemplate', 'route' => 'admin.broadcast-templates', 'icon' => 'megaphone', 'permission' => 'broadcast-list'],
    ];

    /**
     * Log the current user out of the application.
     */
    public function logout(Logout $logout): void
    {
        $logout();

        $this->redirect('/', navigate: true);
    }
}; ?>

<aside class="w-64 bg-white border-r flex flex-col justify-between h-screen">
    {{-- 頂部區塊 --}}
    <div>
        <div class="p-4 border-b">
            <div class="flex items-center justify-between">
                <div class="font-bold text-lg">管理後台</div>

                <x-dropdown align="right" width="48">
                    <x-slot name="trigger">
                        <button class="inline-flex items-center px-2 py-1 text-sm font-medium text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition">
                            <div x-data="{{ json_encode(['name' => auth()->user()->name]) }}" 
                                x-text="name"
                                x-on:profile-updated.window="name = $event.detail.name"></div>
                            <svg class="ml-1 w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                    </x-slot>

                    <x-slot name="content">
                        <x-dropdown-link :href="route('profile')" wire:navigate>
                            {{ __('Profile') }}
                        </x-dropdown-link>
                    </x-slot>
                </x-dropdown>
            </div>
        </div>

        {{-- 選單 --}}
        <nav class="mt-4">
            @foreach ($menus as $menu)
                @if (!$menu['permission'] || Auth::user()->can($menu['permission']))
                    <a href="{{ route($menu['route']) }}"
                        class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 {{ request()->routeIs($menu['route']) ? 'bg-gray-100 font-semibold' : '' }}">
                        <x-wireui:icon name="{{ $menu['icon'] }}" class="w-5 h-5 mr-2" />
                        {{ $menu['label'] }}
                    </a>
                @endif
            @endforeach
        </nav>
    </div>

    {{-- 登出按鈕（固定底部） --}}
    <div class="p-4 border-t">
        <button wire:click="logout"
            class="flex items-center text-sm text-gray-700 hover:text-red-600">
            {{ __('Log Out') }}
        </button>
    </div>
</aside>