@php
    $telpData = explode(',', $site['Telp']);
    $linkPhone = trim($telpData[0]);
    $phone = isset($telpData[1]) ? trim($telpData[1]) : trim($telpData[0]);
@endphp

<header class="wrapper bg-light">
    <div class="bg-white text-white fw-bold fs-15 border-topnav d-none d-md-block">
        <div class="container py-1 d-md-flex flex-md-row">
            <div class="d-flex flex-row align-items-center">
                @if ($site['SiteId'] == 270)
                    <figure class="d-none">
                        <img class="logo-tag" src="{{ url('images/icons/ex.webp') }}" alt="" loading="lazy"/>
                    </figure>
                @else
                    <figure>
                        <img class="logo-tag" src="{{ url('images/icons/ex.webp') }}" alt="" loading="lazy"/>
                    </figure>
                @endif
                <address class="mb-0 text-dark">{{ $site['Misi'] }}</address>
            </div>
            <div class="d-flex flex-row align-items-center me-3 ms-auto">
                <p class="mb-0 fs-19 me-2 {{ empty($site['Facebook']) ? 'd-none' : '' }}">
                    <a href="{{ $site['Facebook'] }}" target="_blank" aria-label="Facebook"><i class="uil uil-facebook-f text-dark"></i></a>
                </p>
                <p class="mb-0 fs-19 me-2 {{ empty($site['Instagram']) ? 'd-none' : '' }}">
                    <a href="{{ $site['Instagram'] }}" target="_blank" aria-label="Instagram"><i class="uil uil-instagram text-dark"></i></a>
                </p>
                <p class="mb-0 fs-19 me-2 {{ empty($site['Tiktok']) ? 'd-none' : '' }}">
                    <a href="{{ $site['Tiktok'] }}" target="_blank" aria-label="Tiktok">
                        <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                            <style>
                                svg {
                                    fill: #343f52
                                }
                            </style>
                            <path
                                d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z" />
                        </svg>
                    </a>
                </p>
                <p class="mb-0 fs-19 {{ empty($site['Youtube']) ? 'd-none' : '' }}" aria-label="Youtube">
                    <a href="{{ $site['Youtube'] }}" target="_blank"><i class="uil uil-youtube text-dark"></i></a>
                </p>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg center-nav transparent navbar-light pt-0">
        <div class="container flex-lg-row flex-nowrap align-items-center">
            <div class="navbar-brand w-100">
                <a href="/" aria-label="Kembali ke beranda">
                    <img class="logonav-45" src="{{ $logo }}" srcset="{{ $logo }} 12x" alt="" />
                </a>
            </div>
            <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
                <div class="offcanvas-header d-lg-none">
                    <h3 class="text-white fs-30 mb-0">{{ $site['Name'] }}</h3>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>
                <div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
                    <ul class="navbar-nav">
                        @foreach ($header as $key => $menu)
                            @if ($menu['Type'] == 'submenu')
                                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#"
                                        data-bs-toggle="dropdown">{{ $menu['Title'] }}</a>
                                    <ul class="dropdown-menu">
                                        @if (!empty($menu['submenu']))
                                            @foreach ($menu['submenu'] as $key => $submenu)
                                                <li class="nav-item"><a class="dropdown-item"
                                                        href="{{ $submenu['Type'] == 'page' ? '#' . str_replace(' ', '', $submenu['TargetUrl']) : $submenu['TargetUrl'] }}">{{ $submenu['Title'] }}</a>
                                                </li>
                                            @endforeach
                                        @endif
                                    </ul>
                                </li>
                            @elseif($menu['Type'] == 'link')
                                <li class="nav-item"><a class="nav-link"
                                        href="{{ $menu['TargetUrl'] }}">{{ $menu['Title'] }}</a>
                                </li>
                            @else
                                <li class="nav-item"><a class="nav-link"
                                        href="#{{ str_replace(' ', '', $menu['TargetUrl']) }}">{{ $menu['Title'] }}</a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                    <div class="offcanvas-footer d-lg-none">
                        <div>
                            <a href="mailto:{{ $site['Email'] }}" class="link-inverse">{{ $site['Email'] }}</a>
                            <br /> {{ $phone ? '0' . $phone : '' }} <br />
                            <nav class="nav social social-white mt-4">
                                <a href="{{ $site['Facebook'] }}" class="text-dark"><i
                                        class="uil uil-facebook-f text-dark"></i></a>
                                <a href="{{ $site['Instagram'] }}" class="text-dark"><i
                                        class="uil uil-instagram text-dark"></i></a>
                                <a href="{{ $site['Tiktok'] }}" class="text-dark" target="_blank">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                                        <style>
                                            svg {
                                                fill: #343f52
                                            }
                                        </style>
                                        <path
                                            d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z" />
                                    </svg>
                                </a>
                                <a href="{{ $site['Youtube'] }}" class="text-dark"><i
                                        class="uil uil-youtube text-dark"></i></a>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <div class="navbar-other w-100 d-flex ms-auto d-lg-none">
                <ul class="navbar-nav flex-row align-items-center ms-auto">
                    <li class="nav-item d-lg-none">
                        <button class="hamburger offcanvas-nav-btn"><span></span></button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>