@php
    use App\Helpers\RouteTranslator;

    if (!function_exists('getTranslatedUrl')) {
        function getTranslatedUrl(string $urlKey): string
        {
            return RouteTranslator::getUrl($urlKey, app()->getLocale());
        }
    }

    $currentKey = RouteTranslator::detectKey('/' . ltrim(request()->path(), '/'));
@endphp

<style>
    @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet');

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: Oxygen, Helvetica, Arial, Lucida, sans-serif;
        font-size: 13px;
        font-weight: 400;
        color: #4a5568;
        -webkit-font-smoothing: antialiased;
        padding-top: 0;
    }

    #main-header {
        background-color: #ffffff;
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 99999;
        transition: all 0.4s ease;
        will-change: transform;
    }

    .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 40px;
    }

    .et_menu_container {
        display: flex;
        align-items: center;
        height: 100px;
        border-bottom: 1px solid #e5e5e5;
        position: relative;
        overflow: visible;
    }

    #main-header.et-fixed-header .et_menu_container {
        height: 80px;
    }

    .logo_container {
        flex-shrink: 0;
        z-index: 1001;
        padding-right: 30px;
    }

    #logo {
        max-height: 75px;
        width: auto;
        display: block;
        transition: max-height 0.3s ease;
    }

    .header-right-area {
        flex: 1;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .nav-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s ease;
    }

    .search-active .nav-wrapper {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }

    .et_search_outer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        background: #fff;
        z-index: 10;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .search-active .et_search_outer {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    #top-menu {
        display: flex;
        list-style: none;
        align-items: center;
    }

    #top-menu>li {
        position: relative;
    }

    #top-menu>li>a {
        color: #4a5568;
        text-decoration: none;
        font-size: 13px;
        font-weight: 400;
        text-transform: uppercase;
        padding: 10px 15px;
        letter-spacing: 0.5px;
        transition: color 0.3s;
        display: flex;
        align-items: center;
    }

    #top-menu>li>a:hover {
        color: #098687;
    }

    #top-menu>li>a.nav-active {
        color: #098687;
        font-weight: 400;
    }

    .menu-item-has-children>a::after {
        content: "";
 display: inline-block;
        width: 5px;
        height: 5px;
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        transform: rotate(45deg);
        margin-left: 8px;
        margin-bottom: 3px;
        opacity: 0.7;
    }

    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: #f2f2f2;
        min-width: 230px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        list-style: none;
        padding: 10px 0;
        opacity: 0;
        visibility: hidden;
        border-top: 3px solid #00A19A;
        transform: translateY(10px);
        transition: all 0.3s ease;
        z-index: 999999;
    }

    #top-menu>li:hover>.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .sub-menu li a {
        padding: 12px 25px;
        display: block;
        color: #444;
        text-decoration: none;
        font-size: 13px;
        font-weight: 400;
        text-transform: uppercase;
    }

    .sub-menu li a:hover {
        color: #098687;
    }

    .sub-menu li a.sub-active {
        color: #098687;
        font-weight: 400;
    }

    .search-field {
        flex: 1;
        border: none;
        font-size: 16px;
        font-weight: 300;
        padding: 10px 0;
        outline: none;
        color: #666;
        background: transparent;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-left: 10px;
    }

    .search-field::placeholder {
        color: #888;
        font-weight: 300;
    }

    .close-search {
        cursor: pointer;
        font-size: 32px;
        color: #4a5568;
        font-weight: 300;
        margin-left: 20px;
    }

    .header-icons {
        display: flex;
        align-items: center;
        margin-left: 10px;
    }

    #et_search_icon {
        cursor: pointer;
        width: 18px;
        height: 18px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234a5568" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: 15px;
    }

    .wpml-ls-flag {
        width: 18px;
        margin-left: 10px;
        border: 1px solid #eee;
    }

    .mobile_menu_bar {
        display: none;
        font-size: 26px;
        cursor: pointer;
        margin-left: 15px;
    }

    .mobile-flag-item {
        display: none;
    }

    @media (max-width: 980px) {
        .container {
            padding: 0 15px;
        }

        .et_menu_container {
            height: 70px;
        }

        .logo_container {
            padding-right: 10px;
        }

        #logo {
            max-height: 45px;
        }

        .mobile_menu_bar {
            display: block;
        }

        #top-menu-nav {
            display: none;
            position: fixed;
            top: 70px;
            left: 0;
            right: 0;
            width: 100%;
            background: #fff;
            border-top: 2px solid #00A19A;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            z-index: 9999;
            max-height: calc(100vh - 70px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        #top-menu-nav.mobile-active {
            display: block;
        }

        #top-menu {
            flex-direction: column;
            padding: 10px 0;
        }

        #top-menu>li {
            width: 100%;
        }

        #top-menu>li>a {
            padding: 15px 40px;
            border-bottom: 1px solid #eee;
            width: 100%;
            justify-content: space-between;
        }

        .menu-item-has-children>a::after {
            content: "+";
            display: block;
            border: none;
            width: auto;
            height: auto;
            transform: none;
            font-size: 20px;
            font-weight: 300;
            margin: 0;
            opacity: 1;
        }

        .menu-item-has-children.open>a::after {
            content: "-";
        }

        .desktop-flag {
            display: none;
        }

        .mobile-flag-item {
            display: block;
        }

        .sub-menu {
            position: static;
            display: none;
            opacity: 1;
            visibility: visible;
            box-shadow: none;
            border: none;
            transform: none;
            padding-left: 20px;
            background: #fafafa;
        }

        .menu-item-has-children.open .sub-menu {
            display: block;
        }
    }
</style>

<header id="main-header">
    <div class="container">
        <div class="et_menu_container" id="menuContainer">

            <div class="logo_container">
                <a href="{{ RouteTranslator::getUrl('home', app()->getLocale()) }}">
                    <img src="{{ asset('images/logo-spunindo-tbk.png') }}" id="logo"
                        alt="PT Multi Spunindo Jaya Tbk">
                </a>
            </div>

            <div class="header-right-area">
                <div class="nav-wrapper">
                    <nav id="top-menu-nav">
                        <ul id="top-menu">

                            <li>
                                <a href="{{ getTranslatedUrl('why-us') }}"
                                    class="{{ $currentKey === 'why-us' ? 'nav-active' : '' }}">
                                    {{ __('menu.why_us') }}
                                </a>
                            </li>

                            <li>
                                <a href="{{ getTranslatedUrl('product-range') }}"
                                    class="{{ $currentKey === 'product-range' ? 'nav-active' : '' }}">
                                    {{ __('menu.products') }}
                                </a>
                            </li>

                            <li class="menu-item-has-children">
                                <a href="#"
                                    class="{{ in_array($currentKey, ['applications', 'innovations', 'market']) ? 'nav-active' : '' }}">
                                    {{ __('menu.business_applications') }}
                                </a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="{{ getTranslatedUrl('applications') }}"
                                            class="{{ $currentKey === 'applications' ? 'sub-active' : '' }}">
                                            {{ __('menu.product_applications') }}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ getTranslatedUrl('innovations') }}"
                                            class="{{ $currentKey === 'innovations' ? 'sub-active' : '' }}">
                                            {{ __('menu.innovations') }}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ getTranslatedUrl('market') }}"
                                            class="{{ $currentKey === 'market' ? 'sub-active' : '' }}">
                                            {{ __('menu.market') }}
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="menu-item-has-children">
                                <a href="#"
                                    class="{{ in_array($currentKey, ['about-us', 'pt-ss-hygiene-solution', 'pt-trias-spunindo-industri', 'history']) ? 'nav-active' : '' }}">
                                    {{ __('menu.corporate') }}
                                </a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="{{ getTranslatedUrl('about-us') }}"
                                            class="{{ $currentKey === 'about-us' ? 'sub-active' : '' }}">
                                            {{ __('menu.about_us') }}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ getTranslatedUrl('pt-ss-hygiene-solution') }}"
                                            class="{{ $currentKey === 'pt-ss-hygiene-solution' ? 'sub-active' : '' }}">
                                            {{ __('menu.pt_ss') }}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ getTranslatedUrl('pt-trias-spunindo-industri') }}"
                                            class="{{ $currentKey === 'pt-trias-spunindo-industri' ? 'sub-active' : '' }}">
                                            {{ __('menu.pt_trias') }}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ getTranslatedUrl('history') }}"
                                            class="{{ $currentKey === 'history' ? 'sub-active' : '' }}">
                                            {{ __('menu.history') }}
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="menu-item-has-children">
                                <a href="javascript:void(0)"
                                    class="{{ in_array($currentKey, ['corporate-governance', 'prospectus', 'investor-presentation', 'idx-announcement', 'analyst-reports', 'financial-highlight', 'news-release', 'quarterly-press-release', 'investor-calendar', 'shareholder-meetings', 'financial-statements', 'annual-reports', 'sustainability-report', 'supporting-professionals', 'investor-relation-contact']) || str_starts_with($currentKey ?? '', 'investor-') ? 'nav-active' : '' }}">
                                    {{ __('menu.investors') }}
                                </a>
                                <ul class="sub-menu">
                                    @php
                                        $navActiveMenuKey =
                                            $currentKey && str_starts_with($currentKey, 'investor-')
                                                ? substr($currentKey, strlen('investor-'))
                                                : null;

                                        $navLocale = app()->getLocale();
                                        $navLabelCol = match ($navLocale) {
                                            'id' => 'mi.label_id',
                                            'ja' => 'mi.label_jp',
                                            default => 'mi.label_en',
                                        };

                                        $navMenus = \Illuminate\Support\Facades\DB::table('mst_investor as mi')
                                            ->join('sys_enum as se', function ($join) {
                                                $join
                                                    ->on('se.value', '=', 'mi.menu_key')
                                                    ->where('se.idenum', '=', 'investor_menu');
                                            })
                                            ->where('mi.isactive', 1)
                                            ->orderBy('mi.urut')
                                            ->selectRaw(
                                                "mi.menu_key, COALESCE(NULLIF({$navLabelCol}, ''), se.name) as label",
                                            )
                                            ->get();
                                    @endphp

                                    <li>
                                        <a href="{{ getTranslatedUrl('corporate-governance') }}"
                                            class="{{ $currentKey === 'corporate-governance' ? 'sub-active' : '' }}">
                                            {{ __('menu.corporate_governance') }}
                                        </a>
                                    </li>

                                    @foreach ($navMenus as $navMenu)
                                        <li>
                                            <a href="{{ RouteTranslator::getUrl('investor-' . $navMenu->menu_key, $navLocale) }}"
                                                class="{{ $navActiveMenuKey === $navMenu->menu_key ? 'sub-active' : '' }}">
                                                {{ $navMenu->label }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </li>

                            <li>
                                <a href="{{ getTranslatedUrl('sustainability') }}"
                                    class="{{ $currentKey === 'sustainability' ? 'nav-active' : '' }}">
                                    {{ __('menu.sustainability') }}
                                </a>
                            </li>

                            <li>
                                <a href="{{ getTranslatedUrl('contact') }}"
                                    class="{{ $currentKey === 'contact' ? 'nav-active' : '' }}">
                                    {{ __('menu.contact') }}
                                </a>
                            </li>

                            @php $currentLocale = app()->getLocale(); @endphp

                            @if ($currentLocale !== 'ja')
                                <li class="mobile-flag-item">
                                    <a href="{{ RouteTranslator::switchLocale('ja') }}">
                                        <img class="wpml-ls-flag" src="{{ asset('images/Japan-M.jpg') }}" alt="日本語">
                                    </a>
                                </li>
                            @endif

                            @if ($currentLocale !== 'id')
                                <li class="mobile-flag-item">
                                    <a href="{{ RouteTranslator::switchLocale('id') }}">
                                        <img class="wpml-ls-flag" src="{{ asset('images/id.png') }}" alt="Indonesia">
                                    </a>
                                </li>
                            @endif

                            @if ($currentLocale !== 'en')
                                <li class="mobile-flag-item">
                                    <a href="{{ RouteTranslator::switchLocale('en') }}">
                                        <img class="wpml-ls-flag" src="{{ asset('images/US-M.jpg') }}" alt="English">
                                    </a>
                                </li>
                            @endif

                        </ul>
                    </nav>

                    <div class="header-icons">
                        @php $currentLocale = app()->getLocale(); @endphp

                        @if ($currentLocale !== 'ja')
                            <a href="{{ RouteTranslator::switchLocale('ja') }}" class="desktop-flag">
                                <img class="wpml-ls-flag" src="{{ asset('images/Japan-M.jpg') }}" alt="日本語">
                            </a>
                        @endif

                        @if ($currentLocale !== 'id')
                            <a href="{{ RouteTranslator::switchLocale('id') }}" class="desktop-flag">
                                <img class="wpml-ls-flag" src="{{ asset('images/id.png') }}" alt="Indonesia">
                            </a>
                        @endif

                        @if ($currentLocale !== 'en')
                            <a href="{{ RouteTranslator::switchLocale('en') }}" class="desktop-flag">
                                <img class="wpml-ls-flag" src="{{ asset('images/US-M.jpg') }}" alt="English">
                            </a>
                        @endif

                        <span id="et_search_icon"></span>
                        <div class="mobile_menu_bar" id="mobileMenuBtn">&#9776;</div>
                    </div>
                </div>

                <div class="et_search_outer">
                    <input type="text" class="search-field" placeholder="{{ __('menu.search') }}" id="searchInput">
                    <span class="close-search" id="closeSearchBtn">&times;</span>
                </div>

            </div>
        </div>
    </div>
</header>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const menuContainer = document.getElementById('menuContainer');
        const searchIcon = document.getElementById('et_search_icon');
        const closeSearch = document.getElementById('closeSearchBtn');
        const searchInput = document.getElementById('searchInput');
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const topMenuNav = document.getElementById('top-menu-nav');

        searchIcon.addEventListener('click', () => {
            menuContainer.classList.add('search-active');
            topMenuNav.classList.remove('mobile-active');
            setTimeout(() => searchInput.focus(), 300);
        });

        closeSearch.addEventListener('click', () => {
            menuContainer.classList.remove('search-active');
        });

        searchInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                const query = searchInput.value.trim();
                const locale = '{{ app()->getLocale() }}';
                if (query !== '') {
                    const baseUrl = '{{ url('/') }}';
                    const prefix = locale !== 'en' ? '/' + locale : '';
                    window.location.href = baseUrl + prefix + '/search?q=' + encodeURIComponent(query);
                }
            }
        });

        mobileMenuBtn.addEventListener('click', () => {
            topMenuNav.classList.toggle('mobile-active');
        });

        document.querySelectorAll('.menu-item-has-children > a').forEach(parent => {
            parent.addEventListener('click', (e) => {
                if (parent.getAttribute('href') === '#') {
                    e.preventDefault();
                }
                if (window.innerWidth <= 980) {
                    parent.parentElement.classList.toggle('open');
                }
            });
        });

        window.addEventListener('scroll', () => {
            const header = document.getElementById('main-header');
            const scrollY = window.scrollY;

            if (scrollY > 60) {
                header.classList.add('et-fixed-header');
            } else if (scrollY < 40) {
                header.classList.remove('et-fixed-header');
            }
        }, {
            passive: true
        });
    });
</script>