@if ($page_title ?? 0)
    <div class="titlebar titlebar-sm scheme-light text-center" data-parallax="true"
        data-parallax-options='{ "parallaxBG": true }'
        style="background-image: url({{ $page_cover ?? 'https://avehtml.liquid-themes.com/assets/demo/bg/bg-53.jpg' }}); background-position: 50%">
@endif
<header class="main-header-client main-header-overlay has-alert">
    <div class="mainbar-wrap {{ $isStuck ?? 0 ? 'black' : '' }} bg-white is-stuck">

        <div class="container-fluid mainbar-container sub-menu-container">
            <div class="row align-items-center">
                <!-- Left Logo -->
                <div class="col-md-6 col-sm-8">
                    <div class="logo hide-on-mobile">
                        <a href="{{ route('client.dashboard') }}">
                            <img src="{{ asset(auth()->user()->photo ?? 'images/default-user.png') }}" alt=""
                                style="height: 40px; width: 40px; border-radius: 50%; object-fit: contain;"
                                class="mr-2">
                            <label class="ml-3 mb-15 mt-15"
                                style="text-transform: capitalize;cursor: pointer;font-size: 14px;color: #535865 !important;">
                                {{ Auth::user()->username }}
                            </label>
                        </a>

                    </div>
                    <div class="logo display-on-mobile" id="dropdown-trigger" data-toggle="dropdown">
                        <img src="{{ asset(auth()->user()->photo ?? 'images/default-user.png') }}" alt=""
                            style="height: 40px; width: 40px; border-radius: 50%; object-fit: contain;" class="mr-2">
                        <label class="ml-3 mb-15 mt-15"
                            style="text-transform: capitalize;cursor: pointer;font-size: 14px;color: #535865 !important;">
                            {{ Auth::user()->username }} <i
                                class="fa fa-chevron-down font-size-10 ml-1 mobile-menu-icon"></i>
                        </label>
                    </div>
                    <div class="dropdown-menu">
                        <ul class="nav tabs-nav" role="tablist">
                            <li class="{{ isCurrent('client.dashboard') ? 'active' : '' }}">
                                <a href="{{ route('client.dashboard') }}">
                                    <span>Mon espace</span>
                                </a>
                            </li>
                            <li class="{{ isCurrent('client.concept') ? 'active' : '' }}">
                                <a href="{{ route('client.concept') }}">
                                    <span>Concept</span>
                                </a>
                            </li>
                            <li class="{{ isCurrent('client.designers') ? 'active' : '' }}">
                                <a href="{{ route('client.designers') }}">
                                    <span>Designers</span>
                                </a>
                            </li>
                            <li class="no-hover" style="margin-bottom: 0px !important;padding: 0 !important;">
                                <span class="disabled text-black disabled-offres">Offres</span>
                            </li>
                            <li class="pl-3 {{ isCurrent('client.offres.residentiel') ? 'active' : '' }}">
                                <a href="{{ route('client.offres.residentiel') }}">
                                    <span>Résidentiel</span>
                                </a>
                            </li>
                            <li class="pl-3 {{ isCurrent('client.offres.pro') ? 'active' : '' }}">
                                <a href="{{ route('client.offres.pro') }}">
                                    <span>Professionnel</span>
                                </a>
                            </li>
                            <li class="{{ isCurrent('client.mescommandes') ? 'active' : '' }}">
                                <a href="{{ route('client.mescommandes') }}">
                                    <span>Commandes</span>
                                </a>
                            </li>
                            <li class="{{ isCurrent('client.mesconsultations') ? 'active' : '' }}">
                                <a href="{{ route('client.mesconsultations') }}">
                                    <span>Consultations</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 col-sm-4 d-flex justify-content-end align-items-center sub-menu-client">
                    <div class="icon-item border-box" id="dropdown-notif">
                        <span class="icon-number">{{ $newNotifs ?? 0 }}</span>
                        <i class="fa fa-bell"></i>
                        <div class="notification-content">
                            @if (isset($notifs) && count($notifs) > 0)
                                @foreach ($notifs as $notif)
                                    <div class="notif-content {{ $notif->read_at ? '' : 'unread' }}">
                                        <a href="{{ $notif->action }}">
                                            {{ $notif->sujet }}
                                        </a>
                                        <span class="notif-date">
                                            {{ \Carbon\Carbon::parse($notif->created_at)->format('d-m-Y') }}
                                        </span>
                                    </div>
                                @endforeach
                            @else
                                <div class="notif-content">
                                    <p>Aucune notification</p>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="profile-dropdown border-box" id="dropdown-profile">
                        <i class="fa fa-bars hamburger-icon"></i>
                        <i class="fa fa-user profile-icon"></i>
                        <div class="dropdown-content">
                            <a href="{{ route('client.monprofile') }}"
                                class="{{ isCurrent('client.monprofile') ? 'active' : '' }}">
                                <i class="fa fa-user"></i> Mon profil
                            </a>
                            <a href="{{ route('client.monstyle') }}"
                                class="{{ isCurrent('client.monstyle') ? 'active' : '' }}">
                                <i class="fa fa-pencil"></i> Mon style
                            </a>
                            <a href="{{ route('client.mesfavoris') }}"
                                class="{{ isCurrent('client.mesfavoris') ? 'active' : '' }}">
                                <i class="fa fa-heart"></i> Mes favoris
                            </a>
                            <a href="{{ route('client.bonsachat') }}"
                                class="{{ isCurrent('client.bonsachat') ? 'active' : '' }}">
                                <i class="fa fa-ticket"></i> Bons d'achat
                            </a>
                            <a href="{{ route('client.mesconsultations') }}"
                                class="{{ isCurrent('client.mesconsultations') ? 'active' : '' }}">
                                <i class="fa fa-tasks"></i> Consultations
                            </a>
                            <hr />
                            <a href="{{ route('logout') }}">
                                <i class="fa fa-sign-out"></i> Déconnexion
                            </a>
                        </div>
                    </div>
                    <div class="hide-on-mobile ml-4">
                        <a href="{{ route('nouveauprojet') }}"
                            class="btn btnCallToAction btn-action semi-round font-weight-semibold"
                            style="line-height: 0 !important;">
                            {!! lang('Démarrer mon projet') !!}
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
    @yield('sub-menu')
</header>
@if ($page_title ?? 0)
    <div class="titlebar-inner">
        <div class="container titlebar-container">
            <div class="titlebar-container">
                <div class="titlebar-col">
                    <h1>{{ $page_title }}</h1>
                    @if (!($hide_nav_down ?? 0))
                        <a class="titlebar-scroll-link" href="#content" data-localscroll="true"><i
                                class="fa fa-angle-down"></i></a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    </div>
@endif
@if (session()->has('success'))
    <div class="flash">
        <div class="alert text-center">
            {!! session('success') !!}
        </div>
    </div>
@endif