<?php
/**
 * FRONTEND FOOTER TEMPLATE
 * File: templates/layouts/frontend/footer.php
 * Footer template for public-facing pages
 */
?>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-main">
            <div class="container">
                <div class="row">
                    <!-- Company Info -->
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="footer-section">
                            <div class="footer-logo">
                                <img src="/public/assets/images/logo-white.png" alt="<?= APP_NAME ?>" class="logo">
                            </div>
                            <p class="footer-description">
                                Nigeria's premier rental marketplace. Rent anything you need or earn by sharing what you own. 
                                Connect, share, and save with our trusted community.
                            </p>
                            <div class="footer-social">
                                <a href="#" class="social-link" aria-label="Facebook">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                                <a href="#" class="social-link" aria-label="Twitter">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="#" class="social-link" aria-label="Instagram">
                                    <i class="fab fa-instagram"></i>
                                </a>
                                <a href="#" class="social-link" aria-label="LinkedIn">
                                    <i class="fab fa-linkedin-in"></i>
                                </a>
                                <a href="#" class="social-link" aria-label="YouTube">
                                    <i class="fab fa-youtube"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quick Links -->
                    <div class="col-lg-2 col-md-6 mb-4">
                        <div class="footer-section">
                            <h5 class="footer-title">Quick Links</h5>
                            <ul class="footer-links">
                                <li><a href="/public/index.php">Home</a></li>
                                <li><a href="/public/about.php">About Us</a></li>
                                <li><a href="/public/contact.php">Contact</a></li>
                                <li><a href="/customer/browse.php">Browse Items</a></li>
                                <li><a href="/public/how-it-works.php">How It Works</a></li>
                                <li><a href="/public/pricing.php">Pricing</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- For Customers -->
                    <div class="col-lg-2 col-md-6 mb-4">
                        <div class="footer-section">
                            <h5 class="footer-title">For Customers</h5>
                            <ul class="footer-links">
                                <li><a href="/customer/browse.php">Browse Items</a></li>
                                <li><a href="/auth/register.php">Sign Up</a></li>
                                <li><a href="/auth/login.php">Login</a></li>
                                <li><a href="/public/safety.php">Safety Tips</a></li>
                                <li><a href="/public/faq.php">FAQ</a></li>
                                <li><a href="/public/insurance.php">Insurance</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- For Vendors -->
                    <div class="col-lg-2 col-md-6 mb-4">
                        <div class="footer-section">
                            <h5 class="footer-title">For Vendors</h5>
                            <ul class="footer-links">
                                <li><a href="/auth/register.php?vendor=1">Become a Vendor</a></li>
                                <li><a href="/vendor/index.php">Vendor Login</a></li>
                                <li><a href="/public/vendor-guide.php">Vendor Guide</a></li>
                                <li><a href="/public/earnings.php">Earnings</a></li>
                                <li><a href="/public/vendor-support.php">Vendor Support</a></li>
                                <li><a href="/public/approval-process.php">Approval Process</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- Contact & Support -->
                    <div class="col-lg-2 col-md-6 mb-4">
                        <div class="footer-section">
                            <h5 class="footer-title">Support</h5>
                            <ul class="footer-links">
                                <li><a href="/public/help-center.php">Help Center</a></li>
                                <li><a href="/public/contact.php">Contact Us</a></li>
                                <li><a href="/public/report-issue.php">Report Issue</a></li>
                                <li><a href="/public/feedback.php">Feedback</a></li>
                                <li><a href="/public/press.php">Press</a></li>
                                <li><a href="/public/careers.php">Careers</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- Newsletter Signup -->
                <div class="row mt-5">
                    <div class="col-lg-6">
                        <div class="newsletter-section">
                            <h5>Stay Updated</h5>
                            <p>Get the latest updates on new items and special offers.</p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <form class="newsletter-form" method="POST" action="/api/newsletter-subscribe.php">
                            <div class="input-group">
                                <input type="email" 
                                       class="form-control" 
                                       name="email" 
                                       placeholder="Enter your email" 
                                       required>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-paper-plane"></i> Subscribe
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Footer Bottom -->
        <div class="footer-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="copyright">
                            <p>&copy; <?= date('Y') ?> <?= APP_NAME ?>. All rights reserved.</p>
                            <div class="legal-links">
                                <a href="/public/privacy-policy.php">Privacy Policy</a>
                                <a href="/public/terms-of-service.php">Terms of Service</a>
                                <a href="/public/cookie-policy.php">Cookie Policy</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="footer-badges text-lg-end">
                            <img src="/public/assets/images/ssl-badge.png" alt="SSL Secured" class="badge">
                            <img src="/public/assets/images/payment-badges.png" alt="Secure Payments" class="badge">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Back to Top Button -->
        <button class="back-to-top" id="backToTop" aria-label="Back to top">
            <i class="fas fa-chevron-up"></i>
        </button>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Font Awesome -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
    
    <!-- AOS Animation Library -->
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    
    <!-- Custom JavaScript -->
    <script>
        // Initialize AOS
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true
        });
        
        // Back to top functionality
        $(document).ready(function() {
            // Show/hide back to top button
            $(window).scroll(function() {
                if ($(this).scrollTop() > 300) {
                    $('#backToTop').fadeIn();
                } else {
                    $('#backToTop').fadeOut();
                }
            });
            
            // Scroll to top when clicked
            $('#backToTop').click(function() {
                $('html, body').animate({scrollTop: 0}, 600);
            });
            
            // Smooth scrolling for anchor links
            $('a[href*="#"]:not([href="#"])').click(function() {
                if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') 
                    && location.hostname === this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                    if (target.length) {
                        $('html, body').animate({
                            scrollTop: target.offset().top - 80
                        }, 800);
                        return false;
                    }
                }
            });
            
            // Navbar scroll effect
            $(window).scroll(function() {
                if ($(this).scrollTop() > 100) {
                    $('.navbar').addClass('scrolled');
                } else {
                    $('.navbar').removeClass('scrolled');
                }
            });
            
            // Mobile menu toggle
            $('.navbar-toggler').click(function() {
                $(this).toggleClass('active');
            });
            
            // Search form enhancement
            $('.hero-search-form').on('submit', function(e) {
                const searchTerm = $(this).find('input[name="search"]').val().trim();
                if (searchTerm.length < 2) {
                    e.preventDefault();
                    alert('Please enter at least 2 characters to search.');
                    return false;
                }
            });
            
            // Newsletter form
            $('.newsletter-form').on('submit', function(e) {
                e.preventDefault();
                const form = $(this);
                const email = form.find('input[name="email"]').val();
                const button = form.find('button');
                const originalText = button.html();
                
                // Basic email validation
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email)) {
                    alert('Please enter a valid email address.');
                    return;
                }
                
                // Show loading state
                button.html('<i class="fas fa-spinner fa-spin"></i> Subscribing...');
                button.prop('disabled', true);
                
                // Simulate API call (replace with actual implementation)
                setTimeout(function() {
                    button.html('<i class="fas fa-check"></i> Subscribed!');
                    form[0].reset();
                    
                    setTimeout(function() {
                        button.html(originalText);
                        button.prop('disabled', false);
                    }, 2000);
                }, 1000);
            });
            
            // Tooltip initialization
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
            
            // Image lazy loading fallback
            $('img[data-src]').each(function() {
                var img = $(this);
                var src = img.attr('data-src');
                
                img.attr('src', src).removeAttr('data-src');
            });
            
            // Form validation enhancement
            $('form').on('submit', function() {
                var form = $(this);
                var isValid = true;
                
                // Check required fields
                form.find('[required]').each(function() {
                    var field = $(this);
                    if (!field.val().trim()) {
                        field.addClass('is-invalid');
                        isValid = false;
                    } else {
                        field.removeClass('is-invalid');
                    }
                });
                
                // Check email fields
                form.find('input[type="email"]').each(function() {
                    var email = $(this);
                    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (email.val() && !emailRegex.test(email.val())) {
                        email.addClass('is-invalid');
                        isValid = false;
                    }
                });
                
                if (!isValid) {
                    event.preventDefault();
                    return false;
                }
            });
            
            // Real-time form validation
            $('input, textarea, select').on('blur', function() {
                var field = $(this);
                if (field.attr('required') && !field.val().trim()) {
                    field.addClass('is-invalid');
                } else {
                    field.removeClass('is-invalid');
                }
            });
            
            // Character counter for textareas
            $('textarea[maxlength]').each(function() {
                var textarea = $(this);
                var maxLength = parseInt(textarea.attr('maxlength'));
                var counter = $('<div class="character-counter text-muted small"></div>');
                textarea.after(counter);
                
                function updateCounter() {
                    var length = textarea.val().length;
                    counter.text(length + ' / ' + maxLength + ' characters');
                    
                    if (length > maxLength * 0.9) {
                        counter.addClass('text-warning');
                    } else {
                        counter.removeClass('text-warning');
                    }
                }
                
                textarea.on('input', updateCounter);
                updateCounter();
            });
        });
        
        // Page-specific scripts
        <?php if (basename($_SERVER['PHP_SELF']) === 'index.php'): ?>
        // Hero section animations
        $(window).on('load', function() {
            $('.hero-title').addClass('animate__animated animate__fadeInUp');
            $('.hero-subtitle').addClass('animate__animated animate__fadeInUp animate__delay-1s');
            $('.hero-search-form').addClass('animate__animated animate__fadeInUp animate__delay-2s');
        });
        <?php endif; ?>
        
        // Utility functions
        window.rentidium = {
            // Format currency
            formatMoney: function(amount) {
                return '₦' + parseFloat(amount).toLocaleString('en-NG');
            },
            
            // Show loading spinner
            showLoading: function(element) {
                element.html('<i class="fas fa-spinner fa-spin"></i> Loading...');
            },
            
            // Hide loading spinner
            hideLoading: function(element, originalText) {
                element.html(originalText);
            },
            
            // Show notification
            showNotification: function(message, type = 'info') {
                const alertClass = 'alert-' + type;
                const alertHtml = `
                    <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `;
                
                $('body').prepend(alertHtml);
                
                // Auto-dismiss after 5 seconds
                setTimeout(function() {
                    $('.alert').fadeOut();
                }, 5000);
            },
            
            // Validate email
            isValidEmail: function(email) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return emailRegex.test(email);
            },
            
            // Get user location
            getUserLocation: function(callback) {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        callback({
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        });
                    }, function(error) {
                        console.log('Geolocation error:', error);
                        callback(null);
                    });
                } else {
                    callback(null);
                }
            }
        };
        
        // Error handling
        window.addEventListener('error', function(e) {
            console.error('JavaScript error:', e.error);
            // You can send this to your error tracking service
        });
        
        // Unhandled promise rejection handling
        window.addEventListener('unhandledrejection', function(e) {
            console.error('Unhandled promise rejection:', e.reason);
            e.preventDefault();
        });
        
    </script>
    
    <!-- Custom Styles -->
    <style>
    /* Footer Styles */
    .footer {
        background: #1a1a1a;
        color: #fff;
        position: relative;
    }
    
    .footer-main {
        padding: 4rem 0 2rem;
    }
    
    .footer-section {
        margin-bottom: 2rem;
    }
    
    .footer-logo .logo {
        height: 40px;
        margin-bottom: 1rem;
        filter: brightness(0) invert(1);
    }
    
    .footer-description {
        color: #ccc;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }
    
    .footer-title {
        color: #fff;
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .footer-links li {
        margin-bottom: 0.5rem;
    }
    
    .footer-links a {
        color: #ccc;
        text-decoration: none;
        transition: color 0.3s ease;
        font-size: 0.9rem;
    }
    
    .footer-links a:hover {
        color: #fff;
    }
    
    .footer-social {
        display: flex;
        gap: 1rem;
    }
    
    .social-link {
        width: 40px;
        height: 40px;
        background: rgba(255,255,255,0.1);
        color: #ccc;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .social-link:hover {
        background: rgba(102, 126, 234, 0.8);
        color: #fff;
        transform: translateY(-2px);
    }
    
    .newsletter-section h5 {
        color: #fff;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .newsletter-section p {
        color: #ccc;
        margin-bottom: 0;
    }
    
    .newsletter-form .input-group {
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .newsletter-form .form-control {
        border: none;
        padding: 0.8rem 1rem;
        background: #fff;
    }
    
    .newsletter-form .btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        padding: 0.8rem 1.5rem;
    }
    
    .newsletter-form .btn:hover {
        opacity: 0.9;
    }
    
    .footer-bottom {
        background: #0d0d0d;
        padding: 1.5rem 0;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    
    .copyright p {
        color: #ccc;
        margin: 0;
        font-size: 0.9rem;
    }
    
    .legal-links {
        display: flex;
        gap: 1.5rem;
        margin-top: 0.5rem;
    }
    
    .legal-links a {
        color: #999;
        text-decoration: none;
        font-size: 0.8rem;
        transition: color 0.3s ease;
    }
    
    .legal-links a:hover {
        color: #ccc;
    }
    
    .footer-badges {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1rem;
    }
    
    .badge {
        height: 30px;
        filter: brightness(0) invert(1);
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }
    
    .badge:hover {
        opacity: 1;
    }
    
    .back-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }
    
    .back-to-top.show {
        opacity: 1;
        visibility: visible;
    }
    
    .back-to-top:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(0,0,0,0.3);
    }
    
    /* Mobile Responsive */
    @media (max-width: 768px) {
        .footer-main {
            padding: 3rem 0 1.5rem;
        }
        
        .footer-section {
            margin-bottom: 2.5rem;
        }
        
        .footer-social {
            justify-content: center;
        }
        
        .newsletter-form {
            margin-top: 1rem;
        }
        
        .footer-badges {
            justify-content: center;
            margin-top: 1rem;
        }
        
        .legal-links {
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .back-to-top {
            bottom: 15px;
            right: 15px;
            width: 45px;
            height: 45px;
        }
    }
    
    /* Dark theme overrides */
    @media (prefers-color-scheme: dark) {
        .footer {
            background: #0a0a0a;
        }
        
        .footer-bottom {
            background: #050505;
        }
    }
    </style>
</body>
</html>