<?php
/**
 * The template for displaying the footer
 */
?>
    </div><!-- .main-content -->
    
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-left">
                    <div class="footer-logo">
                        <img src="<?php echo esc_url(get_theme_mod('footer_logo', get_theme_file_uri('images/logo-footer.png'))); ?>" alt="<?php bloginfo('name'); ?>">
                    </div>
                    <p class="footer-description">
                        <?php echo wp_kses_post(get_theme_mod('footer_description', 'We\'re a travel agency and tour operator for holidays, activities, and other unforgettable experiences in every corner of the Europe, and for every sort of traveler.')); ?>
                    </p>
                </div>
                <div class="footer-right">
                    <div class="footer-contact">
                        <a href="mailto:<?php echo esc_attr(get_theme_mod('footer_email', 'info@europewonder.com')); ?>">
                            <i class="far fa-envelope"></i>
                            <?php echo esc_html(get_theme_mod('footer_email', 'info@europewonder.com')); ?>
                        </a>
                        <a href="tel:<?php echo esc_attr(str_replace(' ', '', get_theme_mod('footer_phone', '+386 (0) 31 332 823'))); ?>">
                            <i class="fas fa-phone"></i>
                            <?php echo esc_html(get_theme_mod('footer_phone', '+386 (0) 31 332 823')); ?>
                        </a>
                        <a href="https://wa.me/<?php echo esc_attr(get_theme_mod('footer_whatsapp', '38631332823')); ?>">
                            <i class="fab fa-whatsapp"></i>
                            WhatsApp chat
                        </a>
                        <a href="#" class="book-consultation" id="open-calendly">
                            <i class="far fa-calendar-check"></i>
                            Book a Free Consultation
                        </a>
                    </div>
                    <div class="footer-links">
                        <a href="<?php echo esc_url(home_url('/terms-of-service')); ?>">Terms of Service</a>
                        <a href="<?php echo esc_url(home_url('/privacy-policy')); ?>">Privacy Policy</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Menu Overlay -->
    <div class="menu-overlay"></div>
    
    <!-- Calendly Modal -->
    <div id="calendly-modal" class="calendly-modal">
        <div class="calendly-modal-content">
            <span class="calendly-close">&times;</span>
            <div class="calendly-container" id="calendly-container"></div>
        </div>
    </div>

    <!-- Calendly CSS -->
    <style>
    .calendly-modal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.7);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .calendly-modal.active {
        display: block;
        opacity: 1;
    }
    
    .calendly-modal-content {
        position: relative;
        background-color: #fefefe;
        margin: 5% auto;
        padding: 0;
        width: 90%;
        max-width: 800px;
        height: 85vh;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        transform: translateY(-20px);
        transition: transform 0.3s ease;
    }
    
    .calendly-modal.active .calendly-modal-content {
        transform: translateY(0);
    }
    
    .calendly-container {
        height: calc(100% - 40px);
        width: 100%;
        overflow: hidden;
        border-radius: 0 0 8px 8px;
    }
    
    .calendly-close {
        position: absolute;
        right: 15px;
        top: 10px;
        color: #333;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        z-index: 10;
    }
    
    .calendly-close:hover {
        color: var(--accent);
    }
    
    body.calendly-open {
        overflow: hidden;
    }
    
    @media (max-width: 768px) {
        .calendly-modal-content {
            width: 95%;
            margin: 10% auto;
            height: 80vh;
        }
    }
    </style>

    <!-- Mobile Menu JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const mainNav = document.querySelector('.main-nav');
            const menuOverlay = document.querySelector('.menu-overlay');
            
            // Toggle menu when hamburger icon is clicked
            menuToggle?.addEventListener('click', function() {
                mainNav.classList.toggle('active');
                menuOverlay.classList.toggle('active');
                document.body.classList.toggle('menu-open');
            });
            
            // Close menu when overlay is clicked
            menuOverlay?.addEventListener('click', function() {
                mainNav.classList.remove('active');
                menuOverlay.classList.remove('active');
                document.body.classList.remove('menu-open');
            });
            
            // Close menu when escape key is pressed
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && mainNav.classList.contains('active')) {
                    mainNav.classList.remove('active');
                    menuOverlay.classList.remove('active');
                    document.body.classList.remove('menu-open');
                }
                
                // Zapri tudi calendly modal ob pritisku ESC
                if (e.key === 'Escape' && document.getElementById('calendly-modal').classList.contains('active')) {
                    closeCalendlyModal();
                }
            });
            
            // Add dropdown functionality for submenus on mobile
            const hasChildrenItems = document.querySelectorAll('.menu-item-has-children');
            
            hasChildrenItems.forEach(function(item) {
                // Create dropdown toggle button
                const dropdownToggle = document.createElement('span');
                dropdownToggle.className = 'dropdown-toggle';
                dropdownToggle.innerHTML = '<i class="fas fa-chevron-down"></i>';
                
                // Add toggle button after the link
                item.querySelector('a').after(dropdownToggle);
                
                // Toggle submenu on click
                dropdownToggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    this.classList.toggle('active');
                    const submenu = this.nextElementSibling;
                    if (submenu && submenu.classList.contains('sub-menu')) {
                        if (submenu.style.maxHeight) {
                            submenu.style.maxHeight = null;
                        } else {
                            submenu.style.maxHeight = submenu.scrollHeight + 'px';
                        }
                    }
                });
            });
            
            // Calendly Modal functionality
            const openCalendlyBtn = document.getElementById('open-calendly');
            const calendlyModal = document.getElementById('calendly-modal');
            const calendlyClose = document.querySelector('.calendly-close');
            const calendlyContainer = document.getElementById('calendly-container');
            
            // Naloži Calendly SDK
            function loadCalendlyScript() {
                if (!window.Calendly) {
                    const script = document.createElement('script');
                    script.src = 'https://assets.calendly.com/assets/external/widget.js';
                    script.async = true;
                    document.head.appendChild(script);
                }
            }
            
            // Odpri Calendly modal
            function openCalendlyModal() {
                const calendlyLink = '<?php echo esc_url(get_theme_mod('calendly_link', '')); ?>';
                
                // Če Calendly link še ni nastavljen, odpri mailto link
                if (!calendlyLink) {
                    window.location.href = 'mailto:<?php echo esc_attr(get_theme_mod('footer_email', 'info@europewonder.com')); ?>?subject=Free%20Consultation';
                    return;
                }
                
                // Očisti prejšnjo vsebino
                calendlyContainer.innerHTML = '';
                
                // Dodaj Calendly widget
                Calendly.initInlineWidget({
                    url: calendlyLink,
                    parentElement: calendlyContainer,
                    prefill: {},
                    utm: {}
                });
                
                // Prikaži modal
                calendlyModal.classList.add('active');
                document.body.classList.add('calendly-open');
            }
            
            // Zapri Calendly modal
            function closeCalendlyModal() {
                calendlyModal.classList.remove('active');
                document.body.classList.remove('calendly-open');
                
                // Po kratki zakasnitvi resetiraj vsebino
                setTimeout(() => {
                    calendlyContainer.innerHTML = '';
                }, 300);
            }
            
            // Event listeners za Calendly modal
            if (openCalendlyBtn) {
                openCalendlyBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    loadCalendlyScript();
                    openCalendlyModal();
                });
            }
            
            if (calendlyClose) {
                calendlyClose.addEventListener('click', closeCalendlyModal);
            }
            
            // Zapri modal ob kliku izven modala
            calendlyModal?.addEventListener('click', function(e) {
                if (e.target === calendlyModal) {
                    closeCalendlyModal();
                }
            });
            
            // Preloži Calendly knjižnico
            loadCalendlyScript();
        });
    </script>
    
    <?php wp_footer(); ?>
</body>
</html> 