@php
    $hasMultipleMagasins = App\Models\Magasin::where('status', '1')->count() > 1;
@endphp

<div class="header">
    <!-- Logo -->
    <div class="header-left active">
        <a href="{{ route('dashboard') }}" class="logo logo-normal">
            <img src="{{ asset('assets/img/' . ($settings->logo ?: 'logo.png')) }}" alt="Steph Lingerie" class="dedi-header-logo">
            <span class="dedi-header-brand">
                @if(auth()->user()->role->name == 'Caissiere' && auth()->user()->magasin)
                    <span class="dedi-header-brand__name">{{ auth()->user()->magasin->name }}</span>
                    <span class="dedi-header-brand__meta">Magasin</span>
                @elseif(auth()->user()->role->name == 'Administrateur' || auth()->user()->managedMagasins->count() > 0)
                    <span class="dedi-header-brand__name">{{ session('active_store_name', 'Mes magasins') }}</span>
                    <span class="dedi-header-brand__meta">Magasin</span>
                @else
                    <span class="dedi-header-brand__name">{{ $settings->entreprise ?? 'Steph Lingerie' }}</span>
                @endif
            </span>
        </a>
        <a href="{{ route('dashboard') }}" class="logo logo-white">
            <img src="{{ asset('assets/img/' . ($settings->logo ?: 'logo.png')) }}" alt="Steph Lingerie" class="dedi-header-logo">
        </a>
        <a href="{{ route('dashboard') }}" class="logo-small">
            <img src="{{ asset('assets/img/' . ($settings->logo ?: 'logo.png')) }}" alt="Steph Lingerie" class="dedi-header-logo">
        </a>
        <a id="toggle_btn" href="javascript:void(0);" title="Réduire le menu">
            <i data-feather="chevrons-left" class="feather-16"></i>
        </a>
    </div>
    <!-- /Logo -->
    <a id="mobile_btn" class="mobile_btn" href="#sidebar">
        <span class="bar-icon">
            <span></span>
            <span></span>
            <span></span>
        </span>
    </a>
    <!-- Header Menu -->
    <ul class="nav user-menu">
        <li class="nav-item nav-searchinputs">
        </li>
        <li></li>
        <!-- Select Store Desktop -->
        @if($hasMultipleMagasins && (auth()->user()->role->name == 'Administrateur' || auth()->user()->managedMagasins->count() > 0))
            <li class="nav-item dropdown has-arrow main-drop select-store-dropdown d-none d-md-block">
                <a href="javascript:void(0);" class="dropdown-toggle nav-link select-store" data-bs-toggle="dropdown">
                    <span class="user-info">
                        <span class="user-letter">
                            @php
                                $activeStoreId = session('active_store');
                                $activeStoreName = session('active_store_name', 'Mes magasins');
                                $activeStoreImage = null;
                                if ($activeStoreId) {
                                    $activeStore = App\Models\Magasin::find($activeStoreId);
                                    if ($activeStore) {
                                        $activeStoreImage = $activeStore->image;
                                    }
                                }
                            @endphp
                            <img src="{{ $activeStoreImage && file_exists(public_path('images/products/' . $activeStoreImage)) ? asset('images/products/' . $activeStoreImage) : asset('assets/img/store/store-01.png') }}"
                                 alt="{{ $activeStoreName }}" class="img-fluid">
                            @if($activeStoreImage && !file_exists(public_path('images/products/' . $activeStoreImage)))
                                <p class="text-danger" style="font-size: 12px;">Image non trouvée dans products : {{ $activeStoreImage }}</p>
                            @endif
                        </span>
                        <span class="user-detail">
                            <span class="user-name">
                                {{ $activeStoreName }}
                            </span>
                        </span>
                    </span>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    @php
                        $magasins = auth()->user()->role->name == 'Administrateur' ? App\Models\Magasin::all() : auth()->user()->managedMagasins;
                    @endphp
                    @foreach($magasins as $magasin)
                        <a href="javascript:void(0);" class="dropdown-item {{ session('active_store') == $magasin->id ? 'active' : '' }}"
                           onclick="setActiveStore({{ $magasin->id }}, '{{ $magasin->name }}')">
                            <img src="{{ $magasin->image && file_exists(public_path('images/products/' . $magasin->image)) ? asset('images/products/' . $magasin->image) : asset('assets/img/default.jpg') }}"
                                 alt="Image {{ $magasin->name }}" class="img-fluid">
                            {{ $magasin->name }}
                            @if($magasin->image && !file_exists(public_path('images/products/' . $magasin->image)))
                                <p class="text-danger" style="font-size: 12px;">Image non trouvée dans products : {{ $magasin->image }}</p>
                            @endif
                        </a>
                    @endforeach
                </div>
            </li>
        @endif
        <!-- /Select Store Desktop -->
        <li class="nav-item nav-item-box">
            <a href="javascript:void(0);" id="btnFullscreen">
                <i data-feather="maximize"></i>
            </a>
        </li>
        <li class="nav-item nav-item-box">
            <a href="{{ route('pos.choose') }}" title="Point de vente">
                <i data-feather="monitor"></i>
            </a>
        </li>
        @if(auth()->user()->role->name == 'Administrateur')
        <li class="nav-item nav-item-box">
           <a href="{{ route('settings') }}"><i data-feather="settings"></i></a>
        </li>
        @endif
        <li class="nav-item dropdown has-arrow main-drop">
            <a href="javascript:void(0);" class="dropdown-toggle nav-link userset" data-bs-toggle="dropdown">
                <span class="user-info">
                    <span class="user-letter">
                        @if(auth()->user()->avatar)
                            <img class="img-fluid" src="{{ asset('assets/img/profiles/' . auth()->user()->avatar) }}" alt="Avatar de {{ auth()->user()->name }}">
                        @else
                            <img class="img-fluid" src="{{ asset('assets/img/avatar/default.jpeg') }}" alt="Avatar par défaut">
                        @endif
                    </span>
                    <span class="user-detail">
                        <span class="user-name">{{ auth()->user()->nom }} {{ auth()->user()->prenom }}</span>
                        <span class="user-role">{{ auth()->user()->role->name ?? 'Aucun rôle attribué' }}</span>
                    </span>
                </span>
            </a>
            <div class="dropdown-menu menu-drop-user">
                <div class="profilename">
                    <div class="profileset">
                        <span class="user-img">
                            @if(auth()->user()->avatar)
                                <img src="{{ asset('assets/img/profiles/' . auth()->user()->avatar) }}" alt="Avatar de {{ auth()->user()->name }}">
                            @else
                                <img src="{{ asset('assets/img/avatar/default.jpeg') }}" alt="Avatar par défaut">
                            @endif
                            <span class="status online"></span>
                        </span>
                        <div class="profilesets">
                            <h6>{{ auth()->user()->nom }} {{ auth()->user()->prenom }}</h6>
                            <h5>{{ auth()->user()->role->name ?? 'Aucun rôle attribué' }}</h5>
                        </div>
                    </div>
                    <hr class="m-0">
                    <a class="dropdown-item" href="{{ route('profile.index') }}"> <i class="me-2" data-feather="user"></i>
                        Profile</a>
                    <hr class="m-0">
                    <a class="dropdown-item logout pb-0" href="#"
                        onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        <img src="{{ asset('assets/img/icons/log-out.svg') }}" class="me-2" alt="Logout Icon">Déconnexion
                    </a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                        @csrf
                    </form>
                </div>
            </div>
        </li>
        <style>
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .dropdown-header {
            font-size: 0.75rem;
            font-weight: 600;
            color: #6c757d;
            text-transform: uppercase;
        }
        .dropdown-item-text {
            padding: 0.25rem 1rem;
            background-color: #f8f9fa;
            border-radius: 0.25rem;
            margin: 0.25rem 0.5rem;
        }
        .dropdown-item.active {
            background-color: #0039BA;
            color: white;
        }
        .dropdown-item img {
            object-fit: cover;
        }
        @media (max-width: 767.98px) {
            .select-store-dropdown {
                display: none !important;
            }
        }
        @media (min-width: 768px) {
            .select-store-dropdown {
                display: block !important;
            }
        }
        </style>
        <script>
        function setActiveStore(storeId, storeName) {
            fetch("{{ route('set_active_store') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({ store_id: storeId, store_name: storeName })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === "success") {
                    location.reload();
                }
            })
            .catch(error => console.error("Erreur lors de la mise à jour du magasin actif :", error));
        }

        </script>
    </ul>
    <!-- Mobile Menu -->
    <div class="dropdown mobile-user-menu">
        <a href="javascript:void(0);" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
            aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>
        <div class="dropdown-menu dropdown-menu-right">
            @if($hasMultipleMagasins && (auth()->user()->role->name == 'Administrateur' || auth()->user()->managedMagasins->count() > 0))
                @php
                    $activeStoreId = session('active_store');
                    $activeStoreName = session('active_store_name', 'Mes magasins');
                    $activeStoreImage = null;
                    if ($activeStoreId) {
                        $activeStore = App\Models\Magasin::find($activeStoreId);
                        if ($activeStore) {
                            $activeStoreImage = $activeStore->image;
                        }
                    }
                @endphp
                <h6 class="dropdown-header">Magasin Actif</h6>
                <div class="dropdown-item-text d-flex align-items-center">
                    <img src="{{ $activeStoreImage && file_exists(public_path('images/products/' . $activeStoreImage)) ? asset('images/products/' . $activeStoreImage) : asset('assets/img/store/store-01.png') }}"
                         alt="{{ $activeStoreName }}" class="img-fluid me-2" style="width: 24px; height: 24px; border-radius: 4px;">
                    <strong>{{ $activeStoreName }}</strong>
                    @if($activeStoreImage && !file_exists(public_path('images/products/' . $activeStoreImage)))
                        <p class="text-danger" style="font-size: 12px;">Image non trouvée dans products : {{ $activeStoreImage }}</p>
                    @endif
                </div>
                <div class="dropdown-divider"></div>
                <h6 class="dropdown-header">Changer de Magasin</h6>
                @php
                    $magasins = auth()->user()->role->name == 'Administrateur' ? App\Models\Magasin::all() : auth()->user()->managedMagasins;
                @endphp
                @foreach($magasins as $magasin)
                    <a href="javascript:void(0);" class="dropdown-item {{ session('active_store') == $magasin->id ? 'active' : '' }}"
                       onclick="setActiveStore({{ $magasin->id }}, '{{ $magasin->name }}')">
                        <img src="{{ $magasin->image && file_exists(public_path('images/products/' . $magasin->image)) ? asset('images/products/' . $magasin->image) : asset('assets/img/default.jpg') }}"
                             alt="Image {{ $magasin->name }}" class="img-fluid me-2" style="width: 20px; height: 20px; border-radius: 4px;">
                        {{ $magasin->name }}
                        @if($magasin->image && !file_exists(public_path('images/products/' . $magasin->image)))
                            <p class="text-danger" style="font-size: 12px;">Image non trouvée dans products : {{ $magasin->image }}</p>
                        @endif
                    </a>
                @endforeach
                <div class="dropdown-divider"></div>
            @endif
            <a class="dropdown-item" href="{{ route('profile.index') }}">Profil</a>
            @if(auth()->user()->role->name == 'Administrateur')
            <a class="dropdown-item" href="{{ route('settings') }}">Réglages</a>

            @endif
            <a class="dropdown-item" href="#" onclick="event.preventDefault(); document.getElementById('logout-form-mobile').submit();">Déconnexion</a>
            <form id="logout-form-mobile" action="{{ route('logout') }}" method="POST" class="d-none">
                @csrf
            </form>
        </div>
    </div>
    <!-- /Mobile Menu -->
</div>