<?php

$shop = $GLOBALS['shop_settings'] ?? [];
$socialLinks = $GLOBALS['social_links'] ?? [];

$shopName = trim(
    (string) ($shop['shop_name'] ?? 'PET SPA')
);

if ($shopName === '') {
    $shopName = 'PET SPA';
}


$socialIcons = [
    'facebook' => 'bi-facebook',
    'instagram' => 'bi-instagram',
    'youtube' => 'bi-youtube',
    'tiktok' => 'bi-tiktok',
    'zalo' => 'bi-chat-dots'
];


$socialNames = [
    'facebook' => 'Facebook',
    'instagram' => 'Instagram',
    'youtube' => 'YouTube',
    'tiktok' => 'TikTok',
    'zalo' => 'Zalo'
];

?>


<footer class="site-footer">

    <div class="container">


        <!-- =====================================================
             FOOTER MAIN
        ====================================================== -->

        <div class="row g-5">


            <!-- BRAND -->

            <div class="col-lg-4 col-md-6">

                <div class="footer-brand-new">


                    <a
                        href="<?= BASE_URL ?>/"
                        class="footer-logo"
                    >

                        <?php if (!empty($shop['logo'])): ?>

                            <span class="footer-logo-image">

                                <img
                                    src="<?= BASE_URL ?>/<?= htmlspecialchars(
                                        ltrim(
                                            $shop['logo'],
                                            '/'
                                        )
                                    ) ?>"
                                    alt="<?= htmlspecialchars($shopName) ?>"
                                >

                            </span>

                        <?php else: ?>

                            <span class="footer-logo-fallback">
                                🐾
                            </span>

                        <?php endif; ?>


                        <strong>
                            <?= htmlspecialchars($shopName) ?>
                        </strong>

                    </a>


                    <p>

                        <?= htmlspecialchars(
                            $shop['description']
                            ?? 'Dịch vụ chăm sóc thú cưng tận tâm, tiện lợi và dễ dàng đặt lịch.'
                        ) ?>

                    </p>


                    <?php if (!empty($socialLinks)): ?>

                        <div class="footer-social-new">

                            <?php foreach ($socialLinks as $social): ?>

                                <?php

                                $platform = strtolower(
                                    (string) $social['platform']
                                );

                                ?>


                                <a
                                    href="<?= htmlspecialchars(
                                        $social['url']
                                    ) ?>"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    aria-label="<?= htmlspecialchars(
                                        $socialNames[$platform]
                                        ?? ucfirst($platform)
                                    ) ?>"
                                    title="<?= htmlspecialchars(
                                        $socialNames[$platform]
                                        ?? ucfirst($platform)
                                    ) ?>"
                                >

                                    <?php if ($platform === 'zalo'): ?>

                                        <img
                                            src="<?= BASE_URL ?>/assets/images/zalo-footer-icon.svg"
                                            alt="Zalo"
                                            class="footer-zalo-logo"
                                        >

                                    <?php else: ?>

                                        <i
                                            class="bi <?= htmlspecialchars(
                                                $socialIcons[$platform]
                                                ?? 'bi-link-45deg'
                                            ) ?>"
                                        ></i>

                                    <?php endif; ?>

                                </a>

                            <?php endforeach; ?>

                        </div>

                    <?php endif; ?>


                </div>

            </div>



            <!-- QUICK LINKS -->

            <div class="col-lg-2 col-md-6">

                <div class="footer-column">

                    <h4>
                        Khám phá
                    </h4>

                    <ul>

                        <li>
                            <a href="<?= BASE_URL ?>/?url=services">
                                Dịch vụ Spa
                            </a>
                        </li>

                        <li>
                            <a href="<?= BASE_URL ?>/?url=customer/booking/create">
                                Đặt lịch
                            </a>
                        </li>

                        <li>
                            <a href="<?= BASE_URL ?>/?url=posts">
                                Bài viết
                            </a>
                        </li>

                        <li>
                            <a href="<?= BASE_URL ?>/?url=gallery">
                                Thư viện
                            </a>
                        </li>

                        <li>
                            <a href="<?= BASE_URL ?>/?url=contact">
                                Liên hệ
                            </a>
                        </li>

                    </ul>

                </div>

            </div>



            <!-- CONTACT -->

            <div class="col-lg-3 col-md-6">

                <div class="footer-column">

                    <h4>
                        Liên hệ
                    </h4>


                    <?php if (!empty($shop['phone'])): ?>

                        <a
                            class="footer-contact-item"
                            href="tel:<?= htmlspecialchars(
                                preg_replace(
                                    '/[^0-9+]/',
                                    '',
                                    (string) $shop['phone']
                                )
                            ) ?>"
                        >

                            <i class="bi bi-telephone"></i>

                            <span>
                                <?= htmlspecialchars($shop['phone']) ?>
                            </span>

                        </a>

                    <?php endif; ?>


                    <?php if (!empty($shop['email'])): ?>

                        <a
                            class="footer-contact-item"
                            href="mailto:<?= htmlspecialchars(
                                $shop['email']
                            ) ?>"
                        >

                            <i class="bi bi-envelope"></i>

                            <span>
                                <?= htmlspecialchars($shop['email']) ?>
                            </span>

                        </a>

                    <?php endif; ?>


                    <?php if (!empty($shop['address'])): ?>

                        <div class="footer-contact-item">

                            <i class="bi bi-geo-alt"></i>

                            <span>
                                <?= htmlspecialchars($shop['address']) ?>
                            </span>

                        </div>

                    <?php endif; ?>


                </div>

            </div>



            <!-- CTA -->

            <div class="col-lg-3 col-md-6">

                <div class="footer-booking-box">

                    <div class="footer-booking-icon">
                        🐶
                    </div>

                    <h4>
                        Bé cần được chăm sóc?
                    </h4>

                    <p>
                        Đặt lịch Spa ngay để chọn khung giờ phù hợp.
                    </p>

                    <a
                        href="<?= BASE_URL ?>/?url=customer/booking/create"
                        class="btn btn-primary w-100"
                    >
                        Đặt lịch ngay
                    </a>

                </div>

            </div>


        </div>



        <!-- =====================================================
             FOOTER BOTTOM
        ====================================================== -->

        <div class="footer-bottom">

            <div>

                © <?= date('Y') ?>

                <strong>
                    <?= htmlspecialchars($shopName) ?>
                </strong>.

                All rights reserved.

            </div>


            <div class="footer-bottom-links">

                <a href="<?= BASE_URL ?>/?url=services">
                    Dịch vụ
                </a>

                <a href="<?= BASE_URL ?>/?url=posts">
                    Bài viết
                </a>

                <a href="<?= BASE_URL ?>/?url=contact">
                    Liên hệ
                </a>

            </div>

        </div>


    </div>

</footer>



<!-- =========================================================
     FLOATING CONTACT
========================================================== -->

<div
    class="contact-widget"
    data-contact-widget
>


    <button
        type="button"
        class="contact-widget-toggle"
        aria-expanded="false"
        aria-controls="contactWidgetPanel"
        aria-label="Mở liên hệ nhanh"
    >

        <i class="bi bi-chat-heart"></i>

    </button>



    <div
        id="contactWidgetPanel"
        class="contact-widget-panel"
        aria-hidden="true"
    >


        <div class="contact-widget-title">

            <div>

                <small>
                    Hỗ trợ nhanh
                </small>

                <strong>
                    Liên hệ với chúng tôi
                </strong>

            </div>

        </div>



        <?php if (!empty($shop['phone'])): ?>

            <a
                href="tel:<?= htmlspecialchars(
                    preg_replace(
                        '/[^0-9+]/',
                        '',
                        (string) $shop['phone']
                    )
                ) ?>"
            >

                <span class="contact-widget-icon phone">
                    <i class="bi bi-telephone-fill"></i>
                </span>

                <div>

                    <small>
                        Hotline
                    </small>

                    <strong>
                        <?= htmlspecialchars($shop['phone']) ?>
                    </strong>

                </div>

            </a>

        <?php endif; ?>



        <?php foreach ($socialLinks as $social): ?>

            <?php

            $platform = strtolower(
                (string) $social['platform']
            );

            ?>


            <a
                href="<?= htmlspecialchars(
                    $social['url']
                ) ?>"
                target="_blank"
                rel="noopener noreferrer"
            >

                <span class="contact-widget-icon <?= htmlspecialchars(
                    $platform
                ) ?>">

                    <?php if ($platform === 'zalo'): ?>

                        <img
                            class="contact-widget-zalo-logo"
                            src="<?= BASE_URL ?>/assets/images/zalo-icon.svg"
                            alt="Zalo"
                        >

                    <?php else: ?>

                        <i
                            class="bi <?= htmlspecialchars(
                                $socialIcons[$platform]
                                ?? 'bi-link-45deg'
                            ) ?>"
                        ></i>

                    <?php endif; ?>

                </span>


                <div>

                    <small>
                        <?= htmlspecialchars(
                            $socialNames[$platform]
                            ?? ucfirst($platform)
                        ) ?>
                    </small>

                    <strong>

                        <?= $platform === 'zalo'
                            ? 'Nhắn tin Zalo'
                            : (
                                $platform === 'facebook'
                                    ? 'Fanpage'
                                    : 'Xem trang'
                            )
                        ?>

                    </strong>

                </div>

            </a>

        <?php endforeach; ?>



        <a href="<?= BASE_URL ?>/?url=contact">

            <span class="contact-widget-icon contact">

                <i class="bi bi-envelope-fill"></i>

            </span>

            <div>

                <small>
                    Hỗ trợ
                </small>

                <strong>
                    Gửi liên hệ
                </strong>

            </div>

        </a>


    </div>

</div>



<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
></script>

<script src="<?= BASE_URL ?>/assets/js/main.js"></script>


<script>

document
    .querySelectorAll('.sidebar-toggle')
    .forEach((toggle) => {

        toggle.addEventListener(
            'click',
            () => {

                const sidebar =
                    toggle.closest(
                        '.owner-sidebar, .admin-sidebar, .customer-sidebar'
                    );

                if (!sidebar) {
                    return;
                }

                const isOpen =
                    sidebar.classList.toggle(
                        'is-open'
                    );

                toggle.setAttribute(
                    'aria-expanded',
                    isOpen
                        ? 'true'
                        : 'false'
                );

            }
        );

    });



document
    .querySelectorAll('[data-contact-widget]')
    .forEach((widget) => {

        const CLOSE_DELAY = 150;

        let isPinned = false;
        let closeTimer = null;

        const toggle =
            widget.querySelector(
                '.contact-widget-toggle'
            );

        const panel =
            widget.querySelector(
                '.contact-widget-panel'
            );

        if (!toggle || !panel) {
            return;
        }

        const canHover =
            window.matchMedia(
                '(hover: hover) and (pointer: fine)'
            );

        const clearCloseTimer = () => {

            if (closeTimer === null) {
                return;
            }

            window.clearTimeout(closeTimer);
            closeTimer = null;

        };

        const openPanel = () => {

            clearCloseTimer();

            widget.classList.add('is-open');

            toggle.setAttribute('aria-expanded', 'true');
            panel.setAttribute('aria-hidden', 'false');

        };

        const closePanel = () => {

            clearCloseTimer();

            widget.classList.remove('is-open');

            toggle.setAttribute('aria-expanded', 'false');
            panel.setAttribute('aria-hidden', 'true');

        };

        const scheduleClose = () => {

            clearCloseTimer();

            if (isPinned) {
                return;
            }

            closeTimer =
                window.setTimeout(
                    closePanel,
                    CLOSE_DELAY
                );

        };

        if (canHover.matches) {

            widget.addEventListener(
                'mouseenter',
                openPanel
            );

            widget.addEventListener(
                'mouseleave',
                scheduleClose
            );

        }

        toggle.addEventListener(
            'click',
            () => {

                isPinned =
                    !isPinned;

                if (isPinned) {

                    openPanel();

                    return;
                }

                closePanel();

            }
        );

        document.addEventListener(
            'click',
            (event) => {

                if (
                    event.target instanceof Node
                    && widget.contains(event.target)
                ) {
                    return;
                }

                isPinned = false;
                closePanel();

            }
        );

    });

</script>



<?php if (!empty($pageScript)): ?>

    <?php if ($pageScript !== 'main.js'): ?>

        <script
            src="<?= BASE_URL ?>/assets/js/<?= htmlspecialchars(
                $pageScript
            ) ?>"
        ></script>

    <?php endif; ?>

<?php endif; ?>


</body>
</html>
