<?php

use App\Livewire\Actions\Logout;
use Livewire\Volt\Component;

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

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

<nav x-data="{ open: false }" class="navbar navbar-expand-sm bg-white border-bottom">
    <div class="container-fluid px-4">
        <a class="navbar-brand" href="{{ route('home') }}" wire:navigate>
            <x-application-logo style="height: 2.25rem; width: auto; color: #343a40;" />
        </a>

        <button class="navbar-toggler d-sm-none" type="button" @click="open = ! open">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="d-none d-sm-flex align-items-center">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <x-nav-link :href="route('home')" :active="request()->routeIs('home') || request()->routeIs('dashboard')" wire:navigate>
                        {{ __('Home') }}
                    </x-nav-link>
                </li>
                <li class="nav-item">
                    <x-nav-link :href="route('chat.show')" :active="request()->routeIs('chat.*')" wire:navigate>
                        {{ __('Campaign chat') }}
                    </x-nav-link>
                </li>
                <li class="nav-item">
                    <x-nav-link :href="route('campaigns.performance')" :active="request()->routeIs('campaigns.*')" wire:navigate>
                        {{ __('Campaign performance') }}
                    </x-nav-link>
                </li>
                <li class="nav-item">
                    <x-nav-link :href="route('creatives.index')" :active="request()->routeIs('creatives.*')" wire:navigate>
                        {{ __('Creatives') }}
                    </x-nav-link>
                </li>
                <li class="nav-item">
                    <x-nav-link :href="route('landing-pages.index')" :active="request()->routeIs('landing-pages.*') || request()->routeIs('catalog-landing-pages.*') || request()->routeIs('prompt-landing-pages.*')" wire:navigate>
                        {{ __('Landing Pages') }}
                    </x-nav-link>
                </li>
            </ul>
        </div>

        <div class="d-none d-sm-flex align-items-center ms-auto">
            <div class="dropdown">
                <button class="btn btn-light btn-sm d-flex align-items-center dropdown-toggle" type="button" id="accountDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <span>{{ auth()->user()->name }}</span>
                    <span class="ms-1">▾</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="accountDropdown">
                    <li>
                        <a class="dropdown-item" href="{{ route('profile') }}" wire:navigate>
                            {{ __('Profile') }}
                        </a>
                    </li>
                    <li>
                        <button wire:click="logout" class="dropdown-item border-0 bg-transparent">
                            {{ __('Log Out') }}
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Responsive Navigation Menu -->
    <div x-show="open" style="display: none;" class="w-100 d-sm-none border-top mt-2 pt-2">
        <div class="px-3">
            <x-responsive-nav-link :href="route('home')" :active="request()->routeIs('home') || request()->routeIs('dashboard')" wire:navigate>
                {{ __('Home') }}
            </x-responsive-nav-link>
            <x-responsive-nav-link :href="route('campaigns.performance')" :active="request()->routeIs('campaigns.*')" wire:navigate>
                {{ __('Campaign performance') }}
            </x-responsive-nav-link>
            <x-responsive-nav-link :href="route('creatives.index')" :active="request()->routeIs('creatives.*')" wire:navigate>
                {{ __('Creatives') }}
            </x-responsive-nav-link>
            <x-responsive-nav-link :href="route('landing-pages.index')" :active="request()->routeIs('landing-pages.*') || request()->routeIs('catalog-landing-pages.*') || request()->routeIs('prompt-landing-pages.*')" wire:navigate>
                {{ __('Landing Pages') }}
            </x-responsive-nav-link>
        </div>

        <!-- Responsive Settings Options -->
        <div class="border-top mt-2 pt-3 px-3">
            <div class="fw-medium" x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
            <div class="small text-muted">{{ auth()->user()->email }}</div>

            <div class="mt-2">
                <x-responsive-nav-link :href="route('profile')" wire:navigate>
                    {{ __('Profile') }}
                </x-responsive-nav-link>

                <!-- Authentication -->
                <button wire:click="logout" class="w-100 text-start border-0 bg-transparent p-0">
                    <x-responsive-nav-link>
                        {{ __('Log Out') }}
                    </x-responsive-nav-link>
                </button>
            </div>
        </div>
    </div>
</nav>
