<header class="main-header">
    <nav class="main-menu">
        <div class="main-menu__wrapper">
            <div class="main-menu__wrapper-inner">
                <div class="main-menu__left" style="display:flex;align-items:center;">
                    <div class="main-menu__logo">
                        <a href="<?php echo e(route('index')); ?>">
                            <img id="site-logo-header" src="<?php echo e(asset('assets/images/resources/logopkp2.png')); ?>"
                                alt="Logo PKP" style="max-height: 60px; width: auto;">
                        </a>
                    </div>
                    <div class="main-menu__brand-text" style="margin-left:16px;">
                        <h6 class="main-menu__brand-title" style="margin:0;line-height:1.2;">KEMENTERIAN PKP</h6>
                        <h4 class="main-menu__brand-subtitle" style="margin:2px 0 0 0;" id="site-name-header"></h4>
                    </div>
                </div>

                <script>
                    // Global variable to store site name and logo
                    window.pkpSiteName = '';
                    window.pkpSiteLogo = '<?php echo e(asset('assets/images/resources/logopkp2.png')); ?>';

                    document.addEventListener('DOMContentLoaded', function() {
                        const baseUrl = "<?php echo e(env('BASE_URL')); ?>";
                        const slug = "<?php echo e(env('DAERAH')); ?>";
                        const apiUrl = `${baseUrl}/api/public/sites/${slug}`;

                        function updateSiteName() {
                            // Update ALL elements with site-name-header ID (including sticky header clone)
                            const headerElements = document.querySelectorAll('#site-name-header, .main-menu__brand-subtitle');
                            headerElements.forEach(function(element) {
                                if (element) {
                                    element.textContent = window.pkpSiteName;
                                }
                            });
                        }

                        function updateSiteLogo() {
                            // Update ALL logo elements (including sticky header clone)
                            const logoElements = document.querySelectorAll('#site-logo-header, .main-menu__logo img');
                            logoElements.forEach(function(element) {
                                if (element) {
                                    element.src = window.pkpSiteLogo;
                                }
                            });
                        }

                        fetch(apiUrl)
                            .then(res => res.json())
                            .then(data => {
                                console.log('Site data loaded:', data);

                                const siteName = (data && data.site && data.site.name) ? data.site.name : '';
                                const pathLogo = (data && data.site && data.site.path_logo) ? data.site.path_logo : '';

                                if (siteName) {
                                    // Remove any occurrence of "Dinas PKP" (case-insensitive),
                                    // trim surrounding punctuation/whitespace and collapse multiple spaces.
                                    let cleanName = siteName.replace(/\bDinas\s*PKP\b/ig, '');
                                    // Remove leading/trailing punctuation like - : – — and whitespace
                                    cleanName = cleanName.replace(/^[\s\:\-\–\—]+|[\s\:\-\–\—]+$/g, '').trim();
                                    // Collapse repeated spaces
                                    cleanName = cleanName.replace(/\s{2,}/g, ' ');
                                    // Fallback to original if cleaning removed everything
                                    window.pkpSiteName = cleanName || siteName;
                                    updateSiteName();
                                }

                                if (pathLogo) {
                                    // Build full logo URL
                                    window.pkpSiteLogo = `${baseUrl}/${pathLogo}`;
                                    updateSiteLogo();
                                    console.log('Logo updated to:', window.pkpSiteLogo);
                                }
                            })
                            .catch(err => {
                                console.error('Error loading site data:', err);
                            });

                        // Observer to watch for DOM changes and re-apply site name and logo
                        // This will catch when sticky header is cloned
                        const observer = new MutationObserver(function(mutations) {
                            let shouldUpdate = false;
                            mutations.forEach(function(mutation) {
                                // Check if sticky header content was added/changed
                                if (mutation.type === 'childList') {
                                    mutation.addedNodes.forEach(function(node) {
                                        if (node.nodeType === 1) { // Element node
                                            if (node.classList && (node.classList.contains(
                                                        'sticky-header__content') ||
                                                    node.querySelector && node.querySelector(
                                                        '.main-menu__brand-subtitle'))) {
                                                shouldUpdate = true;
                                            }
                                        }
                                    });
                                }
                            });

                            if (shouldUpdate) {
                                setTimeout(function() {
                                    updateSiteName();
                                    updateSiteLogo();
                                }, 100); // Small delay to ensure clone is complete
                            }
                        });

                        // Observe the entire document body for sticky header creation
                        observer.observe(document.body, {
                            childList: true,
                            subtree: true
                        });

                        // Also update on scroll events to catch sticky header activation
                        let scrollTimeout;
                        window.addEventListener('scroll', function() {
                            clearTimeout(scrollTimeout);
                            scrollTimeout = setTimeout(function() {
                                updateSiteName();
                                updateSiteLogo();
                            }, 50);
                        });

                        // Update immediately on load and after a short delay
                        updateSiteName();
                        updateSiteLogo();
                        setTimeout(function() {
                            updateSiteName();
                            updateSiteLogo();
                        }, 500);
                        setTimeout(function() {
                            updateSiteName();
                            updateSiteLogo();
                        }, 1000);
                    });
                </script>
                <div class="main-menu__main-menu-box">
                    <a href="#" class="mobile-nav__toggler"><i class="fa fa-bars"></i></a>
                    <?php if (isset($component)) { $__componentOriginal07805a2794ef1dc5b0357b14376687f2 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal07805a2794ef1dc5b0357b14376687f2 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.menu_list','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('menu_list'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal07805a2794ef1dc5b0357b14376687f2)): ?>
<?php $attributes = $__attributesOriginal07805a2794ef1dc5b0357b14376687f2; ?>
<?php unset($__attributesOriginal07805a2794ef1dc5b0357b14376687f2); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal07805a2794ef1dc5b0357b14376687f2)): ?>
<?php $component = $__componentOriginal07805a2794ef1dc5b0357b14376687f2; ?>
<?php unset($__componentOriginal07805a2794ef1dc5b0357b14376687f2); ?>
<?php endif; ?>
                </div>
                <div class="main-menu__right" style="display:flex;align-items:center;gap:16px;">
                    <button type="button" class="theme-toggle" aria-label="Toggle theme"
                        style="background:transparent;border:0;color:var(--thm-black);font-size:18px;cursor:pointer;">
                        <i class="far fa-moon"></i>
                    </button>
                    
                    
                    
                    
                    
                </div>
            </div>
    </nav>
</header>
<?php /**PATH D:\laravel\krs-jawa3-template\daerah\resources\views/components/header_one.blade.php ENDPATH**/ ?>