@props([
    'content' => null,
    'particles' => null,
    'bgrgba' => false
])
<header {{ $attributes->merge(['class' => 'position-relative']) }}>
    {{ $particles }}
    <div class="{{ $bgrgba?'bg-rgba':'' }}">
        @if ($bgrgba)
            <x-header-cloud />
        @endif
        <img class="end-0 top-0 position-absolute" src="{{ asset('img/bg/top-star.svg') }}" alt="star1">
        <!-- Menu -->
        <nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <x-logo />
                <div class="d-flex justify-content-end w-lg-740">
                    <ul class="navbar-nav flex-row">
                        {{-- <li class="nav-item">
                            <a class="nav-link d-flex btnTheme" href="#">
                                <i class='bx bx-moon fs-4'></i>
                            </a>
                        </li> --}}

                        @if (count(config('app.available_locales')) > 2 )
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle py-1" href="#" role="button" id="dropdownLang" data-bs-toggle="dropdown" aria-expanded="false">
                                @foreach (config('app.available_locales') as $locale => $lang)
                                    @if ($locale == app()->getLocale())
                                        <img class="flags" alt="langauge" src="{{ asset('img/flags/'.$locale.'.jpg') }}">
                                    @endif
                                @endforeach
                            </a>
                            <ul class="dropdown-menu py-0 list-flag" aria-labelledby="dropdownLang">
                                @foreach (config('app.available_locales') as $lang)
                                    @if ($lang != app()->getLocale())
                                        <li>
                                            <a class="dropdown-item" href="{{ route(\Illuminate\Support\Facades\Route::currentRouteName(), $lang) }}">
                                                <img class="flags" alt="langauge" src="{{ asset('img/flags/'.$lang.'.jpg') }}">
                                            </a>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </li>
                        @else
                        <li class="nav-item">
                            @foreach (config('app.available_locales') as $locale => $lang)
                                @if ($locale != app()->getLocale())
                                    <a class="nav-link py-1" href="{{ route(\Illuminate\Support\Facades\Route::currentRouteName(), $locale) }}">
                                        <img class="flags" alt="langauge" src="{{ asset('img/flags/'.$locale.'.jpg') }}"
                                        data-bs-toggle="tooltip" data-bs-placement="top" title="{{$lang}}">
                                    </a>
                                @endif
                            @endforeach
                        </li>
                        @endif


                        <!-- button opon modal mobile view -->
                        <li class="nav-item me-0 d-lg-none">
                            <div class="icon nav-icon-5 " id="btnBarMobile" data-bs-toggle="offcanvas"
                                data-bs-target="#phkaynav" aria-controls="phkaynav">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </li>
                    </ul>

                    <div class="offcanvas offcanvas-start" tabindex="-1" id="phkaynav"
                        aria-labelledby="phkaynavLabel">
                        <div class="offcanvas-header pt-0">
                            <x-logo />
                            <div class="icon nav-icon-5 open" id="btnBarMobile" data-bs-dismiss="offcanvas"
                                aria-label="Close">
                                <span class="bg-light"></span>
                                <span class="bg-light"></span>
                                <span class="bg-light"></span>
                            </div>
                        </div>

                        <ul class="navbar-nav mb-2 mb-lg-0 offcanvas-body">
                            <li class="nav-item">
                                <a href="{{route('career',app()->getLocale())}}" class="text-uppercase fw-bold nav-link pkm-border {{ Route::is('career')?'active':'' }}">{{ __('message.career') }}</a>
                            </li>
                            <li class="nav-item">
                                <span class="text-uppercase d-block pkm-border {{ (request()->segment(2) == 'services') ? 'active' : '' }} fw-bold dropdown">
                                    <a class="dropdown-toggle nav-link show {{ (request()->segment(2) == 'services') ? 'active' : '' }}" href="#" role="button"
                                        id="menuDropdown" data-bs-toggle="dropdown"
                                        aria-expanded="true">{{ __('message.services') }} <i
                                            class='bx bx-chevron-down'></i></a>

                                    <ul class="dropdown-menu p-0 d-block d-lg-none list-service show" aria-labelledby="menuDropdown">
                                        <li>
                                            <a class="dropdown-item d-flex align-items-center py-2 {{Route::is('digital')?'active':''}}" href="{{route('digital',app()->getLocale())}}">
                                                <img src="{{ asset('img/emoji/digital20x20.png') }}" alt="digital">
                                                {{ __('message.digital marketing') }}</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item d-flex align-items-center py-2 {{Route::is('creative')?'active':''}}" href="{{route('creative',app()->getLocale())}}">
                                                <img src="{{ asset('img/emoji/creative20.png') }}" alt="creative">
                                                {{ __('message.creative design') }}</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item d-flex align-items-center py-2 {{Route::is('photo')?'active':''}}" href="{{route('photo',app()->getLocale())}}">
                                                <img src="{{ asset('img/emoji/photo20.png') }}" alt="photo">
                                                {{ __('message.photo video graphy') }}</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item d-flex align-items-center py-2 {{Route::is('2d3dvfx')?'active':''}}" href="{{route('2d3dvfx',app()->getLocale())}}">
                                                <img src="{{ asset('img/emoji/vfx20.png') }}" alt="vfx">
                                                {{ __('message.2d 3d vfx') }}</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item d-flex align-items-center py-2 {{Route::is('tvc-film')?'active':''}}" href="{{route('tvc-film',app()->getLocale())}}">
                                                <img src="{{ asset('img/emoji/tvc-film20.png') }}" alt="tvc-film">
                                                {{ __('message.tvc film') }}</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item d-flex align-items-center py-2 {{Route::is('livestream')?'active':''}}" href="{{route('livestream',app()->getLocale())}}">
                                                <img src="{{ asset('img/emoji/studio20.png') }}" alt="studio">
                                                {{ __('message.livestream studio') }}</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item d-flex align-items-center py-2 {{Route::is('decor')?'active':''}}" href="{{route('decor',app()->getLocale())}}">
                                                <img src="{{ asset('img/emoji/decor20.png') }}" alt="decor">
                                                {{ __('message.decor printing') }}</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item d-flex align-items-center py-2 {{Route::is('mobile')?'active':''}}" href="{{route('mobile',app()->getLocale())}}">
                                                <img src="{{ asset('img/emoji/mobile20.png') }}" alt="mobile">
                                                {{ __('message.web app') }}</a>
                                        </li>
                                    </ul>
                                </span>
                            </li>
                            <li class="nav-item">
                                <a href="{{ route('about',app()->getLocale()) }}" class="text-uppercase fw-bold nav-link pkm-border {{ Route::is('about')?'active':'' }}">{{ __('message.about') }}</a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ route('contact',app()->getLocale()) }}" class="text-uppercase fw-bold nav-link pkm-border {{ Route::is('contact')?'active':'' }}">{{ __('message.contact us') }}</a>
                            </li>

                            <li class="d-flex contact-header justify-content-center d-lg-none mt-5">
                                <a href="#" class="text-decoration-none px-2 text-fb"><i
                                        class='bx bxl-facebook-square'></i></a>
                                <a href="#" class="text-decoration-none px-2 text-telegram"><i
                                        class='bx bxl-telegram'></i></a>
                                <a href="#" class="text-decoration-none px-2 text-gmail"><i
                                        class='bx bx-mail-send'></i></a>
                            </li>
                            <li class="contact-header text-center d-lg-none">
                                <a href="#" class="d-block text-decoration-none px-2">+855 (66) 29 99 69 ({{__('message.khmer')}})</a>
                                <a href="#" class="d-block text-decoration-none px-2">+855 (78) 29 99 62 ({{__('message.khmer')}})</a>
                                <a href="#" class="d-block text-decoration-none px-2">+66 (98) 30 555 97 ({{__('message.thai')}})</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
        {{ $content }}
    </div>
</header>