<?php
/**
 * Customer Footer Template
 * File: templates/layouts/customer/footer.php
 * Description: Main footer for customer dashboard and pages
 */
?>
    <!-- Main Content Ends Here -->
    
    <!-- Start Footer -->
    <footer class="footer-dark main-footer overflow-hidden position-relative pt-5 mt-5">
        <div class="container pt-4">
            <div class="py-5">
                <!-- App Download Section -->
                <div class="bg-primary rounded-4">
                    <div class="col-xxl-10 col-md-11 col-10 d-flex flex-md-row flex-column-reverse align-items-md-end align-items-center mx-auto px-0 gap-4">
                        <img class="app-image flex-shrink-0" src="<?= asset('assets/images/phone-mpckup.png') ?>" width="270" alt="Mobile app">
                        <div class="align-items-lg-center align-self-center d-flex flex-column flex-lg-row ps-xxl-4 pt-5 py-md-3 text-center text-md-start">
                            <div class="me-md-5">
                                <h4 class="text-white">Download Our App</h4>
                                <p class="mb-lg-0 text-white">Get access to exclusive deals and rent on-the-go with our mobile app.</p>
                            </div>
                            <div class="d-flex flex-shrink-0 flex-wrap gap-3 justify-content-center">
                                <!-- Apple Store Button -->
                                <a class="align-items-center app-btn d-flex px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> 
                                    <i class="fa-apple fab fs-28 me-2"></i>
                                    <div> 
                                        <span class="fs-13 d-block">Available on the</span> 
                                        <span class="fs-17 text-capitalize">App Store</span> 
                                    </div>
                                </a>
                                <!-- Google Play Button -->
                                <a class="align-items-center app-btn d-flex fs-11 px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> 
                                    <i class="fab fa-google-play fs-25 me-2"></i>
                                    <div> 
                                        <span class="fs-13 d-block">Get it on</span> 
                                        <span class="fs-17 text-capitalize">Google Play</span> 
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="border-top py-5">
                <div class="footer-row row gy-5 g-sm-5 gx-xxl-6">
                    <!-- Get In Touch Section -->
                    <div class="border-end col-lg-4 col-md-7 col-sm-6">
                        <h5 class="fw-bold mb-4">Get In Touch</h5>
                        <div class="mb-4">
                            Join our newsletter and receive the best rental deals of the week, right in your inbox.
                        </div>
                        <div class="border rounded-4 p-4 mb-4">
                            <h6 class="text-white-50 mb-3">Join our WhatsApp:</h6>
                            <a class="align-items-center d-block d-flex whatsapp-number" href="https://wa.me/<?= str_replace(['+', ' '], '', SITE_PHONE) ?>">
                                <i class="fa-brands fa-whatsapp fs-2 me-2"></i>
                                <span class="fs-5 fw-semibold text-decoration-underline"><?= SITE_PHONE ?></span>
                            </a>
                        </div>
                        <h5 class="fw-bold mb-4">Want to become a vendor?<br>Write us!</h5>
                        <span><a href="mailto:<?= SITE_EMAIL ?>"><?= SITE_EMAIL ?></a></span>
                    </div>
                    
                    <!-- Stay Connected Section -->
                    <div class="border-end col-lg-4 col-md-5 col-sm-6">
                        <h5 class="fw-bold mb-4">Stay Connected</h5>
                        <div><?= SITE_ADDRESS ?></div>
                        <div class="mt-4">
                            <a class="d-block fw-medium mb-1" href="tel:<?= SITE_PHONE ?>">
                                <i class="fa-solid fa-phone me-2"></i>
                                <span><?= SITE_PHONE ?></span>
                            </a>
                            <a class="email-link d-block fw-medium" href="mailto:<?= SITE_EMAIL ?>">
                                <i class="fa-solid fa-envelope me-2"></i>
                                <span><?= SITE_EMAIL ?></span>
                            </a>
                        </div>
                        <div class="mt-4">
                            <h6 class="fw-bold mb-3">Quick Links</h6>
                            <ul class="list-unstyled">
                                <li class="mb-2"><a href="<?= url('/public/about.php') ?>" class="text-white-50">About Us</a></li>
                                <li class="mb-2"><a href="<?= url('/public/contact.php') ?>" class="text-white-50">Contact Us</a></li>
                                <li class="mb-2"><a href="<?= url('/public/faq.php') ?>" class="text-white-50">FAQs</a></li>
                                <li class="mb-2"><a href="<?= url('/auth/register.php') ?>" class="text-white-50">Become a Vendor</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- Newsletter Section -->
                    <div class="col-lg-4">
                        <h5 class="fw-bold mb-4">Newsletter</h5>
                        <div class="newsletter position-relative mt-4">
                            <form id="newsletterForm" method="POST" action="<?= url('/api/subscribe-newsletter.php') ?>">
                                <input type="email" name="email" class="form-control" placeholder="name@example.com" required>
                                <button type="submit" class="btn btn-primary search-btn position-absolute top-50 rounded-circle">
                                    <i class="fa-solid fa-angle-right"></i>
                                </button>
                            </form>
                        </div>
                        <div class="border-top my-4"></div>
                        <h5 class="fw-bold mb-4">Follow Us</h5>
                        <!-- Social Icons -->
                        <ul class="d-flex flex-wrap gap-2 list-unstyled mb-0 social-icon">
                            <li>
                                <a href="<?= FACEBOOK_URL ?>" target="_blank" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white fb">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                            </li>
                            <li>
                                <a href="<?= TWITTER_URL ?>" target="_blank" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white twi">
                                    <i class="fab fa-twitter"></i>
                                </a>
                            </li>
                            <li>
                                <a href="<?= INSTAGRAM_URL ?>" target="_blank" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white inst">
                                    <i class="fab fa-instagram"></i>
                                </a>
                            </li>
                            <li>
                                <a href="<?= LINKEDIN_URL ?>" target="_blank" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white">
                                    <i class="fab fa-linkedin-in"></i>
                                </a>
                            </li>
                            <li>
                                <a href="https://wa.me/<?= str_replace(['+', ' '], '', SITE_PHONE) ?>" target="_blank" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white whatsapp">
                                    <i class="fa-brands fa-whatsapp"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Bottom Footer -->
        <div class="container border-top">
            <div class="align-items-center g-3 py-4 row">
                <div class="col-lg-auto">
                    <!-- Footer Nav -->
                    <ul class="list-unstyled list-separator mb-2 footer-nav">
                        <li class="list-inline-item"><a href="<?= url('/public/privacy.php') ?>">Privacy</a></li>
                        <li class="list-inline-item"><a href="<?= url('/public/terms.php') ?>">Terms</a></li>
                        <li class="list-inline-item"><a href="<?= url('/public/sitemap.php') ?>">Sitemap</a></li>
                    </ul>
                </div>
                <div class="col-lg order-md-first">
                    <div class="align-items-center row">
                        <!-- Footer Logo -->
                        <a href="<?= url('/public/index.php') ?>" class="col-sm-auto footer-logo mb-2 mb-sm-0">
                            <img src="<?= asset('assets/images/logo-white.png') ?>" alt="<?= APP_NAME ?>">
                        </a>
                        <!-- Copyright Text -->
                        <div class="col-sm-auto copy">
                            © <?= date('Y') ?> <?= APP_NAME ?>. All Rights Reserved
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- End Footer -->
    
    <!-- JavaScript Files -->
    <script src="<?= asset('assets/plugins/jQuery/jquery.min.js') ?>"></script>
    <script src="<?= asset('assets/plugins/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>
    <script src="<?= asset('assets/plugins/aos/aos.min.js') ?>"></script>
    <script src="<?= asset('assets/plugins/OwlCarousel2/owl.carousel.min.js') ?>"></script>
    <script src="<?= asset('assets/plugins/select2/select2.min.js') ?>"></script>
    <script src="<?= asset('assets/js/script.js') ?>"></script>
    
    <script>
    // Theme Toggle
    document.getElementById('themeToggleBtn')?.addEventListener('click', function() {
        document.body.classList.toggle('dark-mode');
        const icon = this.querySelector('i');
        icon.classList.toggle('fa-moon');
        icon.classList.toggle('fa-sun');
        
        // Save preference
        localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
    });
    
    // Load saved theme
    if (localStorage.getItem('theme') === 'dark') {
        document.body.classList.add('dark-mode');
        const icon = document.querySelector('#themeToggleBtn i');
        if (icon) {
            icon.classList.remove('fa-moon');
            icon.classList.add('fa-sun');
        }
    }
    
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Newsletter form submission
    document.getElementById('newsletterForm')?.addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        
        fetch(this.action, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Thank you for subscribing!');
                this.reset();
            } else {
                alert(data.message || 'Something went wrong. Please try again.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Something went wrong. Please try again.');
        });
    });
    </script>
</body>
</html>