<?php
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\{Auth, Session};
use Livewire\Component;
use Livewire\Attributes\On;
use Mary\Traits\Toast;
?>

<x-nav sticky full-width class="bg-blue-500 text-white shadow-lg">

    <x-slot:brand>
        {{-- Bouton du Drawer Mobile --}}
        <label for="main-drawer" class="mr-3 lg:hidden cursor-pointer hover:opacity-80 transition-opacity">
            <x-icon name="o-bars-3" class="w-6 h-6 text-white" />
        </label>

        <a href="/" wire:navigate class="hover:opacity-90 transition-opacity">
            <x-app-brand />
        </a>
    </x-slot:brand>

    <x-slot:actions>
        <div class="flex items-center gap-2">

            {{-- Menu Utilisateur --}}
            <div class="hidden lg:block">
                @if ($user = auth()->user())
                    <x-dropdown class="dropdown-end">
                        <x-slot:trigger>
                            <x-button
                                class="btn-ghost btn-sm text-white hover:bg-white/10"
                                icon="o-user-circle"
                            >
                                {{ $user->firstname ?: $user->name }}
                            </x-button>
                        </x-slot:trigger>

                        <x-menu class="p-2 bg-base-100 text-base-content rounded-box shadow-2xl min-w-56 space-y-1">
                            <x-menu-item
                                title="{{ __('Mon profil') }}"
                                link="{{ route('profile') }}"
                                icon="o-user"
                            />
                            <x-menu-item
                                title="{{ __('Mes adresses') }}"
                                link="{{ route('addresses') }}"
                                icon="o-map-pin"
                            />
                            <x-menu-item
                                title="{{ __('Mes commandes') }}"
                                link="/"
                                icon="o-document-text"
                            />
                            <x-menu-item
                                title="{{ __('Confidentialité') }}"
                                link="/"
                                icon="o-shield-check"
                            />

                            <x-menu-separator />

                            <x-menu-item
                                title="{{ __('Déconnexion') }}"
                                wire:click="logout"
                                icon="o-arrow-right-on-rectangle"
                                class="text-error hover:bg-error/10 font-medium"
                            />
                        </x-menu>
                    </x-dropdown>
                @else
                    <x-button
                        label="{{ __('Connexion') }}"
                        link="/login"
                        class="btn-ghost btn-sm text-white hover:bg-white/10"
                        icon="o-arrow-right-on-rectangle"
                    />
                @endif
            </div>

        </div>
    </x-slot:actions>
</x-nav>