<div class="mobile-nav__wrapper">
    <div class="mobile-nav__overlay mobile-nav__toggler"></div>
    <!-- /.mobile-nav__overlay -->
    <div class="mobile-nav__content">
        <span class="mobile-nav__close mobile-nav__toggler"><i class="fa fa-times"></i></span>

        <div class="logo-box">
            <a href="<?php echo e(route('index')); ?>" aria-label="logo image">
                <img id="mobile-site-logo" src="<?php echo e(asset('assets/images/resources/logo-2.png')); ?>" width="140" alt="Site logo" />
            </a>
        </div>
        <!-- site name (populated from API) -->
        <div class="mobile-nav__site" style="padding:8px 24px 0 24px;">
            <a id="mobile-site-name" href="<?php echo e(route('index')); ?>" style="color:inherit;text-decoration:none;font-weight:700;">Klinik PKP</a>
        </div>
        <!-- /.logo-box -->
        <div class="mobile-nav__container"></div>
        <!-- /.mobile-nav__container -->

        <ul class="mobile-nav__contact list-unstyled">
            <li>
                <i class="fa fa-envelope"></i>
                <a id="mobile-email" href="mailto:info@klinikpkpjawa3.com">info@klinikpkpjawa3.com</a>
            </li>
            <li>
                <i class="fas fa-phone"></i>
                <a id="mobile-phone" href="tel:666-888-0000">666 888 0000</a>
            </li>
        </ul><!-- /.mobile-nav__contact -->
        <div class="mobile-nav__top">
            <div class="mobile-nav__social">
                <a id="mobile-fb" href="#" target="_blank" class="fab fa-facebook-square" aria-label="facebook"></a>
                <a id="mobile-ig" href="#" target="_blank" class="fab fa-instagram" aria-label="instagram"></a>
                <a id="mobile-yt" href="#" target="_blank" class="fab fa-youtube" aria-label="youtube"></a>
                <a id="mobile-wa" href="#" target="_blank" class="fab fa-whatsapp" aria-label="whatsapp"></a>
            </div><!-- /.mobile-nav__social -->
        </div><!-- /.mobile-nav__top -->



    </div>
    <!-- /.mobile-nav__content -->
</div>
<!-- /.mobile-nav__wrapper -->

<script>
    // navbar mobile: populate site name and contact/social links from public API
    (function() {
        const baseUrl = "<?php echo e(env('BASE_URL')); ?>";
        const slug = "<?php echo e(env('DAERAH')); ?>";
        const apiUrl = `${baseUrl}/api/public/sites/${slug}`;

        function ensureHref(val) {
            if (!val) return '';
            // if already absolute URL, return as-is
            if (/^https?:\/\//i.test(val)) return val;
            // if value looks like a path or domain, prefix https://
            return 'https://' + val.replace(/^\/+/, '');
        }

        function formatPhoneForTel(p) {
            if (!p) return '';
            // remove non-digit plus signs except leading +
            const plus = p.trim().startsWith('+') ? '+' : '';
            const digits = p.replace(/[^0-9]/g, '');
            return (plus ? plus : '') + digits;
        }

        function buildWhatsappLink(val) {
            if (!val) return '';
            if (/^https?:\/\//i.test(val)) return val;
            // if numeric phone, build wa.me link
            const digits = val.replace(/[^0-9]/g, '');
            if (digits.length >= 6) return `https://wa.me/${digits}`;
            return ''; // fallback
        }

        function populate(site) {
            try {
                // logo handling
                const logoEl = document.getElementById('mobile-site-logo');
                if (logoEl && site) {
                    // possible fields: logo, logo_url, logo_path, path_logo, path_image
                    const logoCandidate = site.logo || site.logo_url || site.logo_path || site.path_logo || site.path_image || site.image || '';
                    if (logoCandidate) {
                        // build absolute URL when needed
                        let src = logoCandidate;
                        if (!/^https?:\/\//i.test(src)) {
                            // avoid double slash
                            src = baseUrl.replace(/\/+$/, '') + '/' + src.replace(/^\/+/, '');
                        }
                        logoEl.src = src;
                    }
                }

                const siteNameEl = document.getElementById('mobile-site-name');
                if (siteNameEl && site && (site.name || site.title)) {
                    siteNameEl.textContent = site.name || site.title;
                }

                const emailEl = document.getElementById('mobile-email');
                if (emailEl) {
                    const email = (site && (site.email || site.site_email)) || '';
                    if (email) {
                        emailEl.href = `mailto:${email}`;
                        emailEl.textContent = email;
                    }
                }

                const phoneEl = document.getElementById('mobile-phone');
                if (phoneEl) {
                    const phone = (site && (site.no_phone || site.phone || site.phone_number || site.tel)) || '';
                    if (phone) {
                        const tel = formatPhoneForTel(phone);
                        phoneEl.href = `tel:${tel}`;
                        phoneEl.textContent = phone;
                    }
                }

                const meds = (site && site.medsos) ? site.medsos : {};
                const fb = document.getElementById('mobile-fb');
                const ig = document.getElementById('mobile-ig');
                const yt = document.getElementById('mobile-yt');
                const wa = document.getElementById('mobile-wa');

                if (fb) {
                    if (meds.facebook) fb.href = ensureHref(meds.facebook);
                    else fb.style.display = 'none';
                }
                if (ig) {
                    if (meds.instagram) ig.href = ensureHref(meds.instagram);
                    else ig.style.display = 'none';
                }
                if (yt) {
                    if (meds.youtube) yt.href = ensureHref(meds.youtube);
                    else yt.style.display = 'none';
                }
                if (wa) {
                    if (meds.whatsapp) wa.href = buildWhatsappLink(meds.whatsapp);
                    else wa.style.display = 'none';
                }
            } catch (e) {
                console.warn('populate mobile nav error', e);
            }
        }

        // Try to use global site data if already loaded
        if (window.pkpSiteName || window.pkpSiteEmail) {
            // attempt to call fetchSiteData from footer if present
            if (window.pkpSiteData) {
                populate(window.pkpSiteData);
            } else if (window.pkpSiteName) {
                populate({ name: window.pkpSiteName, email: window.pkpSiteEmail });
            }
        }

        // Otherwise fetch directly
        fetch(apiUrl)
            .then(r => r.json())
            .then(d => {
                if (d && d.site) {
                    // store for other components
                    window.pkpSiteData = d.site;
                    if (!window.pkpSiteName && d.site.name) window.pkpSiteName = d.site.name;
                    if (!window.pkpSiteEmail && d.site.email) window.pkpSiteEmail = d.site.email;
                    populate(d.site);
                }
            })
            .catch(err => {
                console.warn('mobile nav: failed to load site data', err);
            });
    })();
</script><?php /**PATH D:\laravel\krs-jawa3-template\krs-jawa3-web-template\resources\views/components/mobile_nav.blade.php ENDPATH**/ ?>