<!--Site Footer Start-->
<footer class="site-footer">
    <div class="site-footer__shape-1">
        <img src="<?php echo e(asset('assets/images/shapes/krsconnect.png')); ?>" alt="" style="width:500px; height:auto; padding-top:20px;">
    </div>
    <div class="site-footer__shape-2 float-bob-y">
        <img src="<?php echo e(asset('assets/images/shapes/4pkp.png')); ?>" alt="">
    </div>
    <div class="site-footer__shape-3 float-bob-y">
        <img src="<?php echo e(asset('assets/images/shapes/5pkp.png')); ?>" alt="">
    </div>
    <div class="container">
        <div class="site-footer__top">
            <div class="row">
                <div class="col-xl-3 wow fadeInUp" data-wow-delay="100ms">
                    <div class="footer-widget__column" style="margin-top: 40px;">
                        <div class="site-footer__bg-color"></div>
                        <div class="footer-widget__logo" style="display: flex; align-items: center; gap: 16px;">
                            <img src="<?php echo e(asset('assets/images/resources/logopkp2.png')); ?>" alt="Logo PKP"
                                style="width:48px; height:48px; object-fit:contain; border-radius:8px; background:#444;">
                            <div>
                                <span style="font-weight: bold; font-size: 1.2rem;" id="site-name-footer">Loading...</span><br>
                            </div>
                        </div>
                        <p class="footer-widget__about-text" style="margin-top: 18px; id">
                            Klinik Perumahan dan Kawasan Permukiman hadir untuk memberikan solusi terbaik dalam
                            pembangunan rumah layak huni.
                        </p>
                        <div class="footer-widget__working-box" style="margin-top: 24px;">
                            <h3 class="footer-widget__working-title">Hasil kerjasama:</h3>
                            <ul class="footer-widget__working-hour list-unstyled"
                                style="display: flex; gap: 12px; margin-top: 12px;">
                                <li>
                                    <a href="https://www.upnyk.ac.id/" target="_blank" rel="noopener">
                                        <img src="<?php echo e(asset('assets/images/resources/logoupn2.png')); ?>" alt="Partner 1"
                                            style="width:60px; height:60px; object-fit:contain; border-radius:8px; background:#444;">
                                    </a>
                                    <a href="https://www.utdi.ac.id/" target="_blank" rel="noopener">
                                        <img src="<?php echo e(asset('assets/images/resources/utdi.png')); ?>" alt="Partner 2"
                                            style="width:100px; height:60px; object-fit:contain; border-radius:8px; background:#444;">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-9">
                    <div class="footer-widget__right">
                        <div class="footer-widget__right-bottom" style="margin-top: 40px;">
                            <div class="row">
                                <div class="col-xl-4 col-lg-4 col-md-4 wow fadeInUp" data-wow-delay="300ms">
                                    <div class="footer-widget_column footer-widget_services">
                                        <div class="footer-widget__title-box">
                                            <h3 class="footer-widget__title">Layanan</h3>
                                        </div>
                                        <ul class="footer-widget__link list-unstyled">
                                            <li><a href="https://wa.me/6282137191145" target="_blank" rel="noopener">Konsultasi</a></li>
                                            <li><a href="#" id="feedback-trigger">Masukan dan Saran</a>
                                            </li>
                                            <li><a href="#">FAQ</a></li>
                                            <li><a href="#" id="org-structure-trigger">Pejabat Struktural</a></li>
                                            <li><a href="/timmagang">Tim Magang</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 wow fadeInUp" data-wow-delay="400ms">
                                    <div class="footer-widget__contact-box">
                                        <div class="footer-widget__title-box">
                                            <h3 class="footer-widget__title">Kontak</h3>
                                        </div>
                                        <ul class="footer-widget__contact list-unstyled">
                                            <li>
                                                <div class="icon">
                                                    <span class="icon-pin"></span>
                                                </div>
                                                <div class="content">
                                                    <a href="#" id="footer-location-link">Loading...</a>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="icon">
                                                    <span class="icon-call"></span>
                                                </div>
                                                <div class="content">
                                                    <p><a href="tel:" id="site-phone-footer">Loading...</a></p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="icon">
                                                    <span class="icon-email"></span>
                                                </div>
                                                <div class="content">
                                                    <p><a href="mailto:" id="site-email-footer">Loading...</a>
                                                    </p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="site-footer__social">
                                <a href="#"><i class="icon-facebook-app-symbol fab fa-facebook-f"></i></a>
                                <a href="#"><i class="icon-instagram fab fa-instagram"></i></a>
                                <a href="#"><i class="icon-youtube fab fa-youtube"></i></a>
                                <a href="#"><i class="icon-wa fab fa-whatsapp"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="site-footer__bottom">
        <div class="container">
            <div class="site-footer__bottom-inner">
                <p class="site-footer__bottom-text">© Copywright 2025 by <a href="#">KLINIK PKP JAWA 3</a>
                    All Rights
                    Reserved.</p>
                <ul class="list-unstyled site-footer__bottom-menu">
                    <li style="display:inline-flex;align-items:center;gap:12px;">
                        <span id="bug-icon-wrapper" style="position:relative;display:inline-block;">
                            <a href="#" id="bug-support-link" style="display:inline-flex;align-items:center;">
                                <i class="fas fa-bug" style="font-size:1.2em;color:var(--judges-base);vertical-align:middle;"></i>
                            </a>
                            <div id="bug-modal">
                                <label for="bug-desc">Laporkan Bug</label>
                                <textarea id="bug-desc" placeholder="Deskripsikan bug yang anda temukan"></textarea>
                                <button id="bug-send"><i class="fas fa-paper-plane"></i> Kirim</button>
                            </div>
                        </span>
                        <a href="#" style="margin-left:8px;">Support</a>
                    </li>
                    <li><a href="#">Terms and Condition</a></li>
                    <li><a href="#">Privacy and Policy</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>
<!--Site Footer End-->

<!--Feedback Popup-->
<div id="feedback-popup" class="feedback-popup">
    <div class="popup-inner">
        <div class="close-feedback"><i class="fa fa-times"></i></div>
        <div class="feedback-form">
            <h4>Masukan dan Saran</h4>
            <p>Silakan berikan masukan dan saran Anda untuk membantu kami memberikan layanan yang lebih baik.</p>
            <form id="suggestionForm" class="contact-form-validated">
                <div class="form-group">
                    <input type="text" id="suggestionName" name="name" placeholder="Nama Anda" required>
                </div>
                <div class="form-group">
                    <input type="email" id="suggestionEmail" name="email" placeholder="Email Anda" required>
                </div>
                <div class="form-group">
                    <textarea id="suggestionMessage" name="message" placeholder="Masukan dan Saran Anda" required></textarea>
                </div>
                <div class="form-group message-btn">
                    <button type="submit" class="thm-btn" id="submitSuggestionBtn">
                        <span class="thm-btn-text">Kirim</span>
                        <span class="thm-btn-icon-box"><i class="fas fa-arrow-right"></i></span>
                    </button>
                </div>
                <div class="result"></div>
            </form>
        </div>
    </div>
</div>

<!--Organization Structure Popup-->
<div id="org-structure-popup" class="org-structure-popup">
    <div class="popup-inner">
        <div class="close-org-structure"><i class="fa fa-times"></i></div>
        <div class="org-structure-content">
            <h4>Struktur Organisasi</h4>
            <div class="org-chart">
                <!-- Kepala Balai -->
                <div class="org-level level-1">
                    <div class="org-card kepala-balai">
                        <div class="org-photo">
                            <img src="https://via.placeholder.com/80x80/4F46E5/FFFFFF?text=AH" alt="Foto ALDINO HERUPRAWAWAN">
                        </div>
                        <div class="org-info">
                            <div class="org-title">KEPALA BALAI</div>
                            <div class="org-name">ALDINO HERUPRAWAWAN, ST, MT</div>
                        </div>
                    </div>
                </div>

                <!-- Kepala Sub Bagian -->
                <div class="org-level level-2">
                    <div class="org-card">
                        <div class="org-photo">
                            <img src="https://via.placeholder.com/80x80/059669/FFFFFF?text=BM" alt="Foto BRAMANTYO MARJUKI">
                        </div>
                        <div class="org-info">
                            <div class="org-title">KEPALA SUB BAGIAN UMUM DAN TATA USAHA</div>
                            <div class="org-name">BRAMANTYO MARJUKI, S.Si, M.P.W.K</div>
                        </div>
                    </div>
                </div>

                <!-- Kepala Seksi -->
                <div class="org-level level-3">
                    <div class="org-card">
                        <div class="org-photo">
                            <img src="https://via.placeholder.com/80x80/DC2626/FFFFFF?text=AJ" alt="Foto ANTIN JULIATI">
                        </div>
                        <div class="org-info">
                            <div class="org-title">KEPALA SEKSI PELAKSANA WILAYAH I</div>
                            <div class="org-name">ANTIN JULIATI, S.T, M.M</div>
                        </div>
                    </div>
                    <div class="org-card">
                        <div class="org-photo">
                            <img src="https://via.placeholder.com/80x80/7C3AED/FFFFFF?text=CW" alt="Foto CHITRA WIDYASARI">
                        </div>
                        <div class="org-info">
                            <div class="org-title">KEPALA SEKSI PELAKSANA WILAYAH II</div>
                            <div class="org-name">CHITRA WIDYASARI SURYA PUTRI, S.T, M.ENG</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- SweetAlert2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Feedback Popup Styles -->
<style>
.feedback-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

.feedback-popup.active {
    display: flex;
}

.feedback-popup .popup-inner {
    background: #ffffff;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.feedback-popup .close-feedback {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: all 0.3s ease;
}

.feedback-popup .close-feedback:hover {
    background: #e2e8f0;
    transform: scale(1.1);
}

.feedback-popup .close-feedback i {
    color: #64748b;
    font-size: 16px;
}

.feedback-popup .feedback-form {
    padding: 40px 30px 30px 30px;
}

.feedback-popup .feedback-form h4 {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
}

.feedback-popup .feedback-form p {
    margin: 0 0 25px 0;
    color: #64748b;
    text-align: center;
    line-height: 1.6;
}

.feedback-popup .form-group {
    margin-bottom: 20px;
}

.feedback-popup .form-group input,
.feedback-popup .form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
    color: #1e293b;
}

.feedback-popup .form-group input:focus,
.feedback-popup .form-group textarea:focus {
    outline: none;
    border-color: var(--judges-base, #4285f4);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.feedback-popup .form-group textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.feedback-popup .message-btn {
    text-align: center;
    margin-top: 30px;
}

.feedback-popup .thm-btn {
    background: var(--judges-base, #4285f4);
    color: #ffffff;
    padding: 14px 30px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.feedback-popup .thm-btn:hover {
    background: #2a6ad7;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(66, 133, 244, 0.3);
}

.feedback-popup .thm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.feedback-popup .result {
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    display: none;
    text-align: center;
}

.feedback-popup .result.success {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
    display: block;
}

.feedback-popup .result.error {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    display: block;
}

@media (max-width: 768px) {
    .feedback-popup .feedback-form {
        padding: 30px 20px 20px 20px;
    }
    
    .feedback-popup .feedback-form h4 {
        font-size: 20px;
    }
}
</style>

<!-- Organization Structure Popup Styles -->
<style>
.org-structure-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

.org-structure-popup.active {
    display: flex;
}

.org-structure-popup .popup-inner {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    border-radius: 20px;
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.org-structure-popup .close-org-structure {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.org-structure-popup .close-org-structure:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.org-structure-popup .close-org-structure i {
    color: #ffffff;
    font-size: 18px;
}

.org-structure-popup .org-structure-content {
    padding: 40px 30px 30px 30px;
}

.org-structure-popup .org-structure-content h4 {
    margin: 0 0 40px 0;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.org-level {
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
}

.org-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 25px;
    min-width: 280px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.org-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.org-card.kepala-balai {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #ffffff;
    border: 2px solid #fbbf24;
}

.org-card.kepala-balai .org-info {
    color: #ffffff;
}

.org-photo {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.org-card.kepala-balai .org-photo {
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.org-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.org-info .org-title {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.org-card.kepala-balai .org-info .org-title {
    color: rgba(255, 255, 255, 0.9);
}

.org-info .org-name {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.4;
}

.org-card.kepala-balai .org-info .org-name {
    color: #ffffff;
}

/* Connecting Lines */
.org-level.level-1::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: rgba(255, 255, 255, 0.6);
}

.org-level.level-2::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: rgba(255, 255, 255, 0.6);
}

.org-level.level-2::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: rgba(255, 255, 255, 0.6);
}

.org-level.level-3::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
}

.org-level.level-3::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .org-structure-popup .org-structure-content {
        padding: 30px 20px 20px 20px;
    }
    
    .org-structure-popup .org-structure-content h4 {
        font-size: 24px;
    }
    
    .org-level {
        flex-direction: column;
        gap: 20px;
    }
    
    .org-card {
        min-width: 260px;
    }
    
    /* Hide connecting lines on mobile */
    .org-level::before,
    .org-level::after {
        display: none;
    }
}
</style>

<!-- Bug Report Modal style: now absolute above icon -->
<style>
    #bug-icon-wrapper {
        position: relative;
        display: inline-block;
    }

    #bug-modal {
        position: absolute;
        left: 0;
        bottom: 100%;
        z-index: 9999;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
        padding: 18px 18px 12px 18px;
        min-width: 260px;
        display: none;
        margin-bottom: 12px;
    }

    #bug-modal textarea {
        width: 100%;
        min-height: 60px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        margin-bottom: 10px;
        padding: 8px;
        font-size: 1rem;
        resize: vertical;
    }

    #bug-modal label {
        font-weight: 600;
        margin-bottom: 6px;
        display: block;
    }

    #bug-modal button {
        background: #4285f4;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 7px 18px;
        font-size: 1rem;
        cursor: pointer;
        float: right;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s ease;
    }

    #bug-modal button:hover {
        background: #2a6ad7;
    }

    #bug-modal button:disabled {
        background: #9ca3af;
        cursor: not-allowed;
        opacity: 0.7;
    }

    #bug-modal button:disabled:hover {
        background: #9ca3af;
    }
</style>
<style>
    /* Footer contact link styles: make the Lokasi link white and blue on hover like phone/email */
    #footer-location-link {
        color: #ffffff;
        text-decoration: none;
        transition: color 150ms ease-in-out;
    }

    #footer-location-link:hover,
    #footer-location-link:focus {
        color: var(--judges-base); /* same blue used for action buttons */
        text-decoration: none;
    }
</style>
<style>
    /* Make social icons display horizontally (inline) instead of stacked */
    .site-footer__social {
        display: flex !important;
        gap: 12px;
        align-items: center;
        justify-content: flex-start; /* change to center if you prefer centered icons */
        flex-wrap: nowrap;
    }

    .site-footer__social a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px; /* keep circular button size consistent */
        height: 44px;
        border-radius: 50%;
        background: rgba(255,255,255,0.04); /* subtle background if desired */
        color: #ffffff;
        text-decoration: none;
    }

    .site-footer__social a i {
        font-size: 18px; /* adjust icon size if needed */
    }
</style>
<script>
    // Footer site name and email update
    (function() {
        function updateFooterSiteName() {
            const footerElement = document.getElementById('site-name-footer');
            if (footerElement && window.pkpSiteName) {
                footerElement.textContent = window.pkpSiteName;
            }
        }

        function updateFooterEmail(email) {
            const emailElement = document.getElementById('site-email-footer');
            if (!emailElement) return;
            if (email) {
                emailElement.textContent = email;
                emailElement.href = `mailto:${email}`;
            } else {
                emailElement.href = '#';
                emailElement.textContent = 'Tidak tersedia';
            }
        }

        function updateFooterPhone(phone) {
            const phoneElement = document.getElementById('site-phone-footer');
            if (!phoneElement) return;
            if (phone) {
                // sanitize phone for tel: (keep digits and +)
                const tel = (phone + '').replace(/[^0-9+]/g, '').trim();
                phoneElement.href = `tel:${tel}`;
                phoneElement.textContent = phone;
            } else {
                phoneElement.href = '#';
                phoneElement.textContent = 'Tidak tersedia';
            }
        }

        function updateFooterMedsos(medsos) {
            // medsos expected as object with keys instagram, facebook, youtube, whatsapp
            const container = document.querySelector('.site-footer__social');
            if (!container) return;

            // If medsos is missing or all values are empty, keep existing static icons (do not wipe)
            const hasMedsos = medsos && (medsos.facebook || medsos.instagram || medsos.youtube || medsos.whatsapp);
            if (!hasMedsos) {
                // ensure the container is visible if it already has children, otherwise hide
                if (container.children.length) {
                    container.style.display = 'flex';
                } else {
                    container.style.display = 'none';
                }
                return;
            }

            // clear existing
            container.innerHTML = '';

            function appendLink(href, title, iconClass) {
                const a = document.createElement('a');
                a.href = href || '#';
                a.target = '_blank';
                a.rel = 'noopener';
                a.title = title || '';
                const i = document.createElement('i');
                // provide both FontAwesome and legacy custom icon class as fallback
                // e.g. 'fab fa-facebook-f icon-facebook-app-symbol'
                i.className = (iconClass ? iconClass + ' ' : '') + (iconClass === 'fab fa-facebook-f' ? 'icon-facebook-app-symbol' : '') || 'fab fa-share';
                a.appendChild(i);
                container.appendChild(a);
            }

            // Helper: build whatsapp URL — accept full URL or phone number
            function buildWhatsAppUrl(value) {
                if (!value) return null;
                value = String(value).trim();
                // if looks like URL, return as-is (ensure https)
                if (/^https?:\/\//i.test(value)) return value;
                // otherwise assume it's a phone number, strip non-digits and leading +, then use wa.me
                const digits = value.replace(/[^0-9+]/g, '');
                const normalized = digits.replace(/^\+/, '');
                if (!normalized) return null;
                return `https://wa.me/${normalized}`;
            }

            // Order: facebook, instagram, youtube, whatsapp
            if (medsos.facebook) {
                appendLink(medsos.facebook, 'Facebook', 'fab fa-facebook-f');
            }
            if (medsos.instagram) {
                appendLink(medsos.instagram, 'Instagram', 'fab fa-instagram');
            }
            if (medsos.youtube) {
                appendLink(medsos.youtube, 'YouTube', 'fab fa-youtube');
            }
            if (medsos.whatsapp) {
                const wa = buildWhatsAppUrl(medsos.whatsapp);
                if (wa) appendLink(wa, 'WhatsApp', 'fab fa-whatsapp');
            }

            // If container empty, hide it
            if (!container.children.length) {
                container.style.display = 'none';
            } else {
                container.style.display = 'block';
            }
        }

        // Update the footer location link text and href from site data
        function updateFooterLocation(site) {
            try {
                const locLink = document.getElementById('footer-location-link');
                if (!locLink) return;

                const name = (site && (site.name || site.title)) ? (site.name || site.title) : 'Lokasi';
                locLink.textContent = name;

                // Prefer maps_url but check other possible fields
                const maps = (site && (site.maps_url || site.map_url || site.map_link || site.gmaps || site.link_maps || site.location_url || site.map_embed || site.embed_map)) || '';
                if (maps) {
                    locLink.href = maps;
                    locLink.target = '_blank';
                    locLink.rel = 'noopener';
                } else {
                    // If no maps link, keep it as a trigger for modal
                    locLink.href = '#';
                    locLink.removeAttribute('target');
                    locLink.removeAttribute('rel');
                }
            } catch (err) {
                console.warn('updateFooterLocation error', err);
            }
        }

        // Fetch data from API immediately
        function fetchSiteData() {
            const baseUrl = "<?php echo e(env('BASE_URL')); ?>";
            const slug = "<?php echo e(env('DAERAH')); ?>";
            const apiUrl = `${baseUrl}/api/public/sites/${slug}`;

            console.log('Footer: Fetching from', apiUrl);

            fetch(apiUrl)
                .then(res => {
                    console.log('Footer: Response status', res.status);
                    return res.json();
                })
                .then(data => {
                    console.log('Footer: Full API response', data);
                    console.log('Footer: data.site', data.site);

                    if (!data || !data.site) {
                        console.error('Footer: Invalid data structure', data);
                        return;
                    }

                    const siteName = data.site.name || '';
                    const siteEmail = data.site.email || '';

                    console.log('Footer: Extracted siteName', siteName);
                    console.log('Footer: Extracted siteEmail', siteEmail);

                    if (siteName) {
                        // Do NOT prepend "Dinas PKP" here — keep raw site name and let header
                        // or cleaning code decide presentation. This prevents duplicate prefixes.
                        window.pkpSiteName = siteName;
                        updateFooterSiteName();
                        // update the footer location link immediately if maps info exists
                        try { updateFooterLocation(data.site); } catch (e) { }
                        console.log('Footer: Site name updated');
                    }

                    if (siteEmail) {
                        window.pkpSiteEmail = siteEmail;
                        updateFooterEmail(siteEmail);
                        console.log('Footer: Email updated to', siteEmail);
                    } else {
                        console.warn('Footer: No email found in API response');
                    }

                    // Social media links (medsos)
                    try { updateFooterMedsos(data.site && data.site.medsos ? data.site.medsos : {}); } catch (e) { console.warn('updateFooterMedsos error', e); }

                    // Phone field - prefer `no_phone` from API
                    const sitePhone = (data.site.no_phone || data.site.phone || data.site.phone_number || data.site.noPhone) || '';
                    try { updateFooterPhone(sitePhone); } catch (e) { console.warn('updateFooterPhone error', e); }
                })
                .catch(err => {
                    console.error('Error loading site data in footer:', err);
                    // Set fallback email
                    const emailElement = document.getElementById('site-email-footer');
                    if (emailElement) {
                        emailElement.textContent = 'info@klinikpkp.go.id';
                        emailElement.href = 'mailto:info@klinikpkp.go.id';
                    }
                });
        }

        // Check if data already loaded by header
        if (window.pkpSiteName) {
            updateFooterSiteName();
        }

        if (window.pkpSiteEmail) {
            updateFooterEmail(window.pkpSiteEmail);
        } else {
            // If not loaded yet, fetch from API
            document.addEventListener('DOMContentLoaded', function() {
                // Check one more time if header loaded it
                if (!window.pkpSiteEmail) {
                    fetchSiteData();
                } else {
                    updateFooterEmail(window.pkpSiteEmail);
                }
            });
        }

        // Also listen for when header updates the global variable
        let checkInterval = setInterval(function() {
            if (window.pkpSiteName) {
                updateFooterSiteName();
            }
            if (window.pkpSiteEmail) {
                updateFooterEmail(window.pkpSiteEmail);
                clearInterval(checkInterval);
            }
            // If another component populated full site data, use it to update medsos/location/phone
            if (window.pkpSiteData) {
                try {
                    updateFooterMedsos(window.pkpSiteData.medsos || {});
                } catch (e) { /* ignore */ }
                try {
                    updateFooterLocation(window.pkpSiteData);
                } catch (e) { /* ignore */ }
                try {
                    const sp = window.pkpSiteData.no_phone || window.pkpSiteData.phone || window.pkpSiteData.phone_number || '';
                    updateFooterPhone(sp);
                } catch (e) { /* ignore */ }
                // if we also have email, we can stop polling
                if (window.pkpSiteEmail) clearInterval(checkInterval);
            }
        }, 100);

        // Stop checking after 5 seconds
        setTimeout(function() {
            clearInterval(checkInterval);
        }, 5000);

        // Also react when the header fetch finishes -- head.blade.php dispatches this event
        try {
            window.addEventListener('pkpSiteDataReady', function(e) {
                const s = (e && e.detail) ? e.detail : (window.pkpSiteData || {});
                if (s.name) {
                    window.pkpSiteName = s.name;
                    try { updateFooterSiteName(); } catch (err) { /* ignore */ }
                }
                if (s.email) {
                    window.pkpSiteEmail = s.email;
                    try { updateFooterEmail(s.email); } catch (err) { /* ignore */ }
                }
                try { updateFooterMedsos(s.medsos || {}); } catch (err) { /* ignore */ }
                try { updateFooterLocation(s); } catch (err) { /* ignore */ }
                try {
                    const sp = s.no_phone || s.phone || s.phone_number || '';
                    updateFooterPhone(sp);
                } catch (err) { /* ignore */ }
            });
        } catch (e) { /* ignore */ }
    })();

    // Feedback popup functionality
    document.addEventListener('DOMContentLoaded', function() {
        const feedbackTrigger = document.getElementById('feedback-trigger');
        const feedbackPopup = document.getElementById('feedback-popup');
        const closeFeedback = document.querySelector('.close-feedback');
        const suggestionForm = document.getElementById('suggestionForm');
        const API_URL = '<?php echo e(env('BASE_URL')); ?>/api/public/sites/feedback';
        const SITE_SLUG = '<?php echo e(strtolower(env('DAERAH', 'kota-yogyakarta'))); ?>';

        // Open popup
        if (feedbackTrigger) {
            feedbackTrigger.addEventListener('click', function(e) {
                e.preventDefault();
                feedbackPopup.classList.add('active');
                document.body.style.overflow = 'hidden';
            });
        }

        // Close popup
        function closeFeedbackPopup() {
            feedbackPopup.classList.remove('active');
            document.body.style.overflow = '';
        }

        if (closeFeedback) {
            closeFeedback.addEventListener('click', closeFeedbackPopup);
        }

        // Close popup when clicking outside
        feedbackPopup.addEventListener('click', function(e) {
            if (e.target === feedbackPopup) {
                closeFeedbackPopup();
            }
        });

        // Handle form submission
        if (suggestionForm) {
            suggestionForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                const submitBtn = document.getElementById('submitSuggestionBtn');
                const btnText = submitBtn.querySelector('.thm-btn-text');
                const originalText = btnText.textContent;
                
                // Disable button and show loading
                submitBtn.disabled = true;
                btnText.textContent = 'Mengirim...';
                
                // Get form data
                const formData = {
                    name: document.getElementById('suggestionName').value.trim(),
                    email: document.getElementById('suggestionEmail').value.trim(),
                    substance: document.getElementById('suggestionMessage').value.trim(),
                    slug: SITE_SLUG
                };
                
                console.log('Sending suggestion to:', API_URL);
                console.log('Data:', formData);
                
                try {
                    const response = await fetch(API_URL, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(formData)
                    });
                    
                    console.log('Response status:', response.status);
                    
                    // Check if response is HTML (error page) instead of JSON
                    const contentType = response.headers.get('content-type');
                    if (!contentType || !contentType.includes('application/json')) {
                        const text = await response.text();
                        console.error('Received HTML instead of JSON:', text.substring(0, 200));
                        throw new Error('Server mengembalikan format yang tidak valid. Periksa endpoint API.');
                    }
                    
                    const result = await response.json();
                    console.log('Response data:', result);
                    
                    if (response.ok || response.status === 201) {
                        // Success
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: 'Terima kasih atas masukan dan saran Anda. Feedback Anda sangat berharga bagi kami.',
                            timer: 3000,
                            showConfirmButton: false
                        });
                        
                        // Reset form
                        suggestionForm.reset();
                        
                        // Close popup after 2 seconds
                        setTimeout(() => {
                            closeFeedbackPopup();
                        }, 2000);
                        
                    } else {
                        // Error from server
                        throw new Error(result.error || result.message || `Error ${response.status}: Gagal mengirim masukan dan saran`);
                    }
                    
                } catch (error) {
                    console.error('Error submitting suggestion:', error);
                    
                    let errorMessage = 'Terjadi kesalahan saat mengirim masukan dan saran.';
                    
                    if (error.message.includes('Failed to fetch')) {
                        errorMessage = 'Tidak dapat terhubung ke server. Periksa koneksi internet Anda.';
                    } else if (error.message.includes('format yang tidak valid')) {
                        errorMessage = 'Endpoint API tidak ditemukan atau tidak valid. Hubungi administrator.';
                    } else {
                        errorMessage = error.message;
                    }
                    
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: errorMessage
                    });
                } finally {
                    // Re-enable button
                    submitBtn.disabled = false;
                    btnText.textContent = originalText;
                }
            });
        }

        // Close popup with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && feedbackPopup.classList.contains('active')) {
                closeFeedbackPopup();
            }
        });
    });

    // Organization Structure popup functionality
    document.addEventListener('DOMContentLoaded', function() {
        const orgStructureTrigger = document.getElementById('org-structure-trigger');
        const orgStructurePopup = document.getElementById('org-structure-popup');
        const closeOrgStructure = document.querySelector('.close-org-structure');

        // Open popup
        if (orgStructureTrigger) {
            orgStructureTrigger.addEventListener('click', function(e) {
                e.preventDefault();
                orgStructurePopup.classList.add('active');
                document.body.style.overflow = 'hidden';
            });
        }

        // Close popup
        function closeOrgStructurePopup() {
            orgStructurePopup.classList.remove('active');
            document.body.style.overflow = '';
        }

        if (closeOrgStructure) {
            closeOrgStructure.addEventListener('click', closeOrgStructurePopup);
        }

        // Close popup when clicking outside
        orgStructurePopup.addEventListener('click', function(e) {
            if (e.target === orgStructurePopup) {
                closeOrgStructurePopup();
            }
        });

        // Close popup with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && orgStructurePopup.classList.contains('active')) {
                closeOrgStructurePopup();
            }
        });
    });

    // Bug report modal
    const bugSupportLink = document.getElementById('bug-support-link');
    const bugModal = document.getElementById('bug-modal');
    const bugSendBtn = document.getElementById('bug-send');
    const bugDescInput = document.getElementById('bug-desc');
    
    bugSupportLink.onclick = function(e) {
        e.preventDefault();
        bugModal.style.display = bugModal.style.display === 'block' ? 'none' : 'block';
    };
    
    bugSendBtn.onclick = async function() {
        const bugReport = bugDescInput.value.trim();
        
        if (!bugReport) {
            Swal.fire({
                icon: 'warning',
                title: 'Perhatian',
                text: 'Mohon deskripsikan bug yang Anda temukan!',
                confirmButtonColor: '#4285f4'
            });
            return;
        }
        
        // Disable button and show loading
        bugSendBtn.disabled = true;
        bugSendBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mengirim...';
        
        try {
            const API_URL = '<?php echo e(env('BASE_URL')); ?>/api/public/bug-reports';
            const SITE_SLUG = '<?php echo e(strtolower(env('DAERAH', 'kota-yogyakarta'))); ?>';
            
            const response = await fetch(API_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    report: bugReport,
                    slug: SITE_SLUG
                })
            });
            
            console.log('Bug report response status:', response.status);
            
            if (response.ok || response.status === 201) {
                // Success notification
                await Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    html: '<p style="font-size: 1.1rem;">Terima kasih atas laporan bug Anda!</p><p style="color: #6b7280; margin-top: 8px;">Kami akan segera memperbaikinya.</p>',
                    confirmButtonColor: '#4285f4',
                    confirmButtonText: 'OK',
                    showConfirmButton: true,
                    timer: 3000,
                    timerProgressBar: true
                });
                
                bugModal.style.display = 'none';
                bugDescInput.value = '';
            } else {
                const errorData = await response.json();
                console.error('Error response:', errorData);
                throw new Error(errorData.message || 'Gagal mengirim laporan bug');
            }
        } catch (error) {
            console.error('Error submitting bug report:', error);
            
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: error.message || 'Terjadi kesalahan saat mengirim laporan bug. Silakan coba lagi.',
                confirmButtonColor: '#4285f4'
            });
        } finally {
            // Re-enable button
            bugSendBtn.disabled = false;
            bugSendBtn.innerHTML = '<i class="fas fa-paper-plane"></i> Kirim';
        }
    };
    
    document.addEventListener('click', function(e) {
        if (!bugModal.contains(e.target) && e.target !== bugSupportLink && !bugSupportLink.contains(e.target)) {
            bugModal.style.display = 'none';
        }
    });
</script>
<?php /**PATH D:\laravel\krs-jawa3-template\krs-jawa3-web-template\resources\views/components/footer_one.blade.php ENDPATH**/ ?>