@hookinsert('layout.header.top')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

    :root {
        --primary-pink: #e91e63; /* red towards pink */
        --hover-pink: #d81b60;
        --input-bg: #ffe6f0;
        --input-border: #e91e63;
    }

    /* Expand the container area */
    .header-desktop .container,
    .header-mobile .container {
        max-width: 1400px;
    }

    /* Logo styles */
    .jaydigital-logo {
        font-family: 'Pacifico', cursive;
        font-size: 2rem;
        font-weight: bold;
        color: var(--primary-pink);
        text-decoration: none;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        transition: color 0.3s ease, transform 0.3s ease;
        white-space: nowrap;
    }
    .jaydigital-logo:hover {
        color: var(--hover-pink);
        transform: scale(1.1);
    }
    /* Make TM look like a true superscript (a little smaller) */
    .jaydigital-logo sup {
        font-size: 0.4em;
        vertical-align: super;
        margin-left: 2px;
    }

    /* Desktop header adjustments */
    .logo {
        flex-shrink: 0;
        margin-left: -15px; /* Move logo slightly to the left */
    }
    .header-desktop .left {
        display: flex;
        align-items: center;
        gap: 4rem; /* Space between logo and menu */
        flex-wrap: nowrap;
    }
    .menu {
        flex-grow: 1;
    }
    .menu-item {
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    .menu-item:hover {
        background-color: rgba(233, 30, 99, 0.1);
        transform: translateY(-2px);
    }
    /* Dropdown menu styles */
    .dropdown-menu {
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .dropdown-item {
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    .dropdown-item:hover {
        background-color: var(--primary-pink);
        color: #fff;
    }
    /* Search input styles */
    .search-group .form-control {
        background-color: var(--input-bg);
        border: 1px solid var(--input-border);
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .search-group .form-control:focus {
        border-color: var(--hover-pink);
        box-shadow: 0 0 8px rgba(233, 30, 99, 0.5);
    }
    .search-group .btn {
        background-color: var(--primary-pink);
        border: 1px solid var(--primary-pink);
        color: #fff;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .search-group .btn:hover {
        background-color: var(--hover-pink);
        border-color: var(--hover-pink);
    }

    /* Mobile header enhancements */
    .header-mobile {
        background: linear-gradient(135deg, #fff 0%, #ffe6f0 100%);
        padding: 1rem 1.5rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .header-mobile > .d-flex {
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }
    .header-mobile .logo {
        margin: 0; /* Ensure no extra margin on mobile logo */
    }
    /* Mobile icons container for Cart and Hamburger */
    .mobile-icons {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .header-mobile .header-cart-icon {
        /* No additional margin needed; spacing handled by mobile-icons gap */
    }
    .mb-icon {
        color: var(--primary-pink);
        transition: transform 0.3s ease, color 0.3s ease;
    }
    .mb-icon:hover {
        transform: scale(1.2);
        color: var(--hover-pink);
    }

    /* Offcanvas enhancements */
    .offcanvas {
        background: #fff;
        border-right: 2px solid var(--primary-pink);
    }
    .offcanvas-header {
        background: var(--primary-pink);
        color: #fff;
        padding: 1.5rem;
    }
    .offcanvas-body {
        padding: 1.5rem;
    }
    .close-offcanvas {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        color: #fff;
        transition: transform 0.3s ease;
    }
    .close-offcanvas:hover {
        transform: rotate(90deg);
    }
    .accordion-item .nav-link {
        color: var(--primary-pink);
        font-weight: 500;
    }
    .accordion-item .nav-link:hover {
        color: var(--hover-pink);
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
        .header-desktop .left {
            gap: 2rem;
        }
        .jaydigital-logo {
            font-size: 1.8rem;
        }
    }
</style>

<header id="appHeader">
    <div class="header-top">
        <div class="container d-flex justify-content-between align-items-center">
            <div class="language-switch d-flex align-items-center">
                @if (locales()->count() > 1)
                    <div class="dropdown">
                        <a class="btn dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="{{ asset($current_locale->image) }}" alt="{{ $current_locale->name }} flag" class="img-fluid"> {{ $current_locale->name }}
                        </a>
                        <div class="dropdown-menu">
                            @foreach (locales() as $locale)
                                <a class="dropdown-item d-flex align-items-center" href="{{ front_route('locales.switch', ['code' => $locale->code]) }}">
                                    <div class="wh-20 me-2">
                                        <img src="{{ image_origin($locale['image']) }}" alt="{{ $locale->name }} flag" class="img-fluid border">
                                    </div>
                                    {{ $locale->name }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if (currencies()->count() > 1)
                    <div class="dropdown ms-4">
                        <a class="btn dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            {{ current_currency()->name }}
                        </a>
                        <div class="dropdown-menu">
                            @foreach (currencies() as $currency)
                                <a class="dropdown-item" href="{{ front_route('currencies.switch', ['code' => $currency->code]) }}">
                                    {{ $currency->name }} ({{ $currency->symbol_left }})
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
                @hookinsert('layouts.header.currency.after')
            </div>
            <div class="top-info">
                @hookinsert('layouts.header.news.before')
                <a href="{{ front_route('articles.index') }}" class="me-3 menu-item">News</a>
                @hookupdate('layouts.header.telephone')
                    <a href="tel:{{ system_setting('telephone') }}" class="text-decoration-none menu-item">
                        <span><i class="bi bi-telephone-outbound"></i> {{ system_setting('telephone') }}</span>
                    </a>
                @endhookupdate
            </div>
        </div>
    </div>

    <!-- Desktop Header -->
    <div class="header-desktop">
        <div class="container d-flex justify-content-between align-items-center">
            <div class="left d-flex align-items-center">
                <h1 class="logo m-0">
                    <a href="{{ front_route('home.index') }}" class="jaydigital-logo animate__animated animate__fadeIn">
                        Jaydigital Solutions<sup>TM</sup>
                    </a>
                </h1>
                <div class="menu">
                    <nav class="navbar navbar-expand-md navbar-light">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link menu-item {{ request()->routeIs('home.index') ? 'active' : '' }}" href="{{ front_route('home.index') }}">
                                    {{ __('front/common.home') }}
                                </a>
                            </li>
                            @hookupdate('layouts.header.menu.pc')
                                @foreach($header_menus as $menu)
                                    @if($menu['children'] ?? [])
                                        <li class="nav-item dropdown">
                                            <a class="nav-link dropdown-toggle menu-item {{ request()->is(trim(parse_url($menu['url'], PHP_URL_PATH), '/')) ? 'active' : '' }}"
                                               href="{{ $menu['url'] }}"
                                               role="button"
                                               data-bs-toggle="dropdown"
                                               aria-expanded="false">
                                                {{ $menu['name'] }}
                                            </a>
                                            <ul class="dropdown-menu">
                                                @foreach($menu['children'] as $child)
                                                    @if($child['name'])
                                                        <li>
                                                            <a class="dropdown-item menu-item {{ request()->is(trim(parse_url($child['url'], PHP_URL_PATH), '/')) ? 'active' : '' }}"
                                                               href="{{ $child['url'] }}">
                                                                {{ $child['name'] }}
                                                            </a>
                                                        </li>
                                                    @endif
                                                @endforeach
                                            </ul>
                                        </li>
                                    @else
                                        @if($menu['name'])
                                            <li class="nav-item">
                                                <a class="nav-link menu-item {{ request()->is(trim(parse_url($menu['url'], PHP_URL_PATH), '/')) ? 'active' : '' }}"
                                                   href="{{ $menu['url'] }}">
                                                    {{ $menu['name'] }}
                                                </a>
                                            </li>
                                        @endif
                                    @endif
                                @endforeach
                            @endhookupdate
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="right d-flex align-items-center">
                <form action="{{ front_route('products.index') }}" method="get" class="search-group me-3">
                    <div class="input-group">
                        <input type="text" class="form-control" name="keyword" placeholder="{{ __('front/common.search') }}" value="{{ request('keyword') }}">
                        <button type="submit" class="btn">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </form>
                <div class="icons d-flex">
                    <div class="item dropdown account-icon">
                        <a class="btn dropdown-toggle px-2" href="{{ front_route('account.index') }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="{{ asset('icon/account.svg') }}" alt="Account" class="img-fluid">
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            @if (current_customer())
                                <a href="{{ front_route('account.index') }}" class="dropdown-item menu-item">{{ __('front/account.account') }}</a>
                                <a href="{{ front_route('account.orders.index') }}" class="dropdown-item menu-item">{{ __('front/account.orders') }}</a>
                                <a href="{{ front_route('account.favorites.index') }}" class="dropdown-item menu-item">{{ __('front/account.favorites') }}</a>
                                <a href="{{ front_route('account.logout') }}" class="dropdown-item menu-item">{{ __('front/account.logout') }}</a>
                            @else
                                <a href="{{ front_route('login.index') }}" class="dropdown-item menu-item">{{ __('front/common.login') }}</a>
                                <a href="{{ front_route('register.index') }}" class="dropdown-item menu-item">{{ __('front/common.register') }}</a>
                            @endif
                        </div>
                    </div>
                    <div class="item mx-2">
                        <a href="{{ account_route('favorites.index') }}" aria-label="Favorites" class="position-relative">
                            <img src="{{ asset('icon/love.svg') }}" alt="Favorites" class="img-fluid">
                            <span class="icon-quantity position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                {{ $fav_total }}
                            </span>
                        </a>
                    </div>
                    <div class="item">
                        <a href="{{ front_route('carts.index') }}" class="header-cart-icon position-relative" aria-label="Cart">
                            <img src="{{ asset('icon/cart.svg') }}" alt="Cart" class="img-fluid">
                            <span class="icon-quantity position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                {{ $cart_total ?? 0 }}
                            </span>
                        </a>
                    </div>
                    @hookinsert('layouts.header.cart.after')
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile Header -->
    <div class="header-mobile">
        <div class="d-flex justify-content-between align-items-center">
            <div class="logo">
                <a href="{{ front_route('home.index') }}" class="jaydigital-logo animate__animated animate__fadeIn">
                    Jaydigital Solutions<sup>TM</sup>
                </a>
            </div>
            <div class="mobile-icons d-flex align-items-center">
                <a href="{{ front_route('carts.index') }}" class="header-cart-icon position-relative" aria-label="Cart">
                    <img src="{{ asset('icon/cart.svg') }}" alt="Cart" class="img-fluid">
                    <span class="icon-quantity position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                        {{ $cart_total ?? 0 }}
                    </span>
                </a>
                <div class="mb-icon" data-bs-toggle="offcanvas" data-bs-target="#mobile-menu-offcanvas" aria-controls="mobile-menu-offcanvas">
                    <i class="bi bi-list fs-2"></i>
                </div>
            </div>
        </div>

        <div class="offcanvas offcanvas-start" tabindex="-1" id="mobile-menu-offcanvas" aria-labelledby="mobile-menu-offcanvas-label">
            <div class="offcanvas-header d-flex justify-content-between align-items-center">
                <form action="{{ front_route('products.index') }}" method="get" class="search-group flex-grow-1 me-3">
                    <div class="input-group">
                        <input type="text" class="form-control" name="keyword" placeholder="{{ __('front/common.search') }}" value="{{ request('keyword') }}">
                        <button type="submit" class="btn">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </form>
                <div class="dropdown account-icon">
                    <a class="btn px-0" href="{{ front_route('account.index') }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="{{ asset('icon/account.svg') }}" alt="Account" class="img-fluid">
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                        @if (current_customer())
                            <a href="{{ front_route('account.index') }}" class="dropdown-item menu-item">{{ __('front/account.account') }}</a>
                            <a href="{{ front_route('account.orders.index') }}" class="dropdown-item menu-item">{{ __('front/account.orders') }}</a>
                            <a href="{{ front_route('account.favorites.index') }}" class="dropdown-item menu-item">{{ __('front/account.favorites') }}</a>
                            <a href="{{ front_route('account.logout') }}" class="dropdown-item menu-item">{{ __('front/account.logout') }}</a>
                        @else
                            <a href="{{ front_route('login.index') }}" class="dropdown-item menu-item">{{ __('front/common.login') }}</a>
                            <a href="{{ front_route('register.index') }}" class="dropdown-item menu-item">{{ __('front/common.register') }}</a>
                        @endif
                    </div>
                </div>
            </div>
            <button class="close-offcanvas btn btn-link" data-bs-dismiss="offcanvas" aria-label="Close">
                <i class="bi bi-chevron-compact-left fs-2"></i>
            </button>
            <div class="offcanvas-body mobile-menu-wrap">
                <div class="accordion accordion-flush" id="menu-accordion">
                    <div class="accordion-item">
                        <div class="nav-item-text">
                            <a class="nav-link menu-item {{ request()->routeIs('home.index') ? 'active' : '' }}"
                               href="{{ front_route('home.index') }}">
                                {{ __('front/common.home') }}
                            </a>
                        </div>
                    </div>
                    @hookupdate('layouts.header.menu.mobile')
                        @foreach ($header_menus as $key => $menu)
                            @if ($menu['name'])
                                <div class="accordion-item">
                                    <div class="nav-item-text d-flex justify-content-between align-items-center">
                                        <a class="nav-link menu-item {{ request()->is(trim(parse_url($menu['url'], PHP_URL_PATH), '/')) ? 'active' : '' }}"
                                           href="{{ $menu['url'] }}"
                                           data-bs-toggle="{{ ($menu['children'] ?? []) ? 'collapse' : '' }}"
                                           data-bs-target="{{ ($menu['children'] ?? []) ? '#flush-menu-'.$key : '' }}">
                                            {{ $menu['name'] }}
                                        </a>
                                        @if ($menu['children'] ?? [])
                                            <span class="collapsed" data-bs-toggle="collapse" data-bs-target="#flush-menu-{{ $key }}">
                                                <i class="bi bi-chevron-down"></i>
                                            </span>
                                        @endif
                                    </div>
                                    @if ($menu['children'] ?? [])
                                        <div class="accordion-collapse collapse" id="flush-menu-{{ $key }}" data-bs-parent="#menu-accordion">
                                            <div class="children-group">
                                                <ul class="nav flex-column ul-children">
                                                    @foreach($menu['children'] as $child)
                                                        @if($child['name'])
                                                            <li class="nav-item">
                                                                <a class="nav-link menu-item {{ request()->is(trim(parse_url($child['url'], PHP_URL_PATH), '/')) ? 'active' : '' }}"
                                                                   href="{{ $child['url'] }}">
                                                                    {{ $child['name'] }}
                                                                </a>
                                                            </li>
                                                        @endif
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endif
                        @endforeach
                    @endhookupdate
                </div>
            </div>
        </div>
    </div>
</header>

@hookinsert('layout.header.bottom')