<footer class="bg-[#1a1a2e] text-white">
    <div class="container mx-auto px-4">
        <!-- Main Footer -->
        <div class="grid grid-cols-1 md:grid-cols-12 gap-8 py-12">
            <!-- Brand -->
            <div class="md:col-span-4">
                <img src="{{ asset('images/aphro_logod.png') }}" alt="AphroDailyMart" class="h-12 mb-4">
                <p class="text-gray-400 text-sm leading-relaxed mb-6">We're committed to delivering the freshest groceries right to your doorstep. Quality, convenience, and satisfaction guaranteed.</p>
                <div class="flex gap-3">
                    <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-emerald-500 transition-colors">
                        <i class="fab fa-facebook-f text-sm"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-emerald-500 transition-colors">
                        <i class="fab fa-twitter text-sm"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-emerald-500 transition-colors">
                        <i class="fab fa-instagram text-sm"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-emerald-500 transition-colors">
                        <i class="fab fa-tiktok text-sm"></i>
                    </a>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="md:col-span-2">
                <h6 class="text-white font-semibold mb-4 text-sm tracking-wider uppercase">Shop</h6>
                <ul class="space-y-2">
                    <li><a href="{{ route('home') }}" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">Home</a></li>
                    <li><a href="/products/index" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">Products</a></li>
                    <li><a href="/categories" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">Categories</a></li>
                    <li><a href="/about" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">About Us</a></li>
                    <li><a href="{{ route('contact') }}" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">Contact</a></li>
                </ul>
            </div>

            <!-- Customer Service -->
            <div class="md:col-span-2">
                <h6 class="text-white font-semibold mb-4 text-sm tracking-wider uppercase">Support</h6>
                <ul class="space-y-2">
                    <li><a href="/about" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">My Account</a></li>
                    <li><a href="{{ route('contact') }}" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">Track Order</a></li>
                    <li><a href="/shipping-policy" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">Shipping Policy</a></li>
                    <li><a href="/return-policy" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">Return Policy</a></li>
                    <li><a href="/faq" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">FAQ</a></li>
                </ul>
            </div>

            <!-- Contact -->
            <div class="md:col-span-4">
                <h6 class="text-white font-semibold mb-4 text-sm tracking-wider uppercase">Contact Us</h6>
                <ul class="space-y-3">
                    <li class="flex items-start gap-3 text-gray-400 text-sm">
                        <i class="fas fa-phone text-emerald-400 mt-1"></i>
                        <span>+1 (609) 760-6144</span>
                    </li>
                    <li class="flex items-start gap-3 text-gray-400 text-sm">
                        <i class="fas fa-envelope text-emerald-400 mt-1"></i>
                        <div>
                            <span class="block">support@aphrodailymart.com</span>
                            <span class="block">Dailyaphro@gmail.com</span>
                        </div>
                    </li>
                    <li class="flex items-start gap-3 text-gray-400 text-sm">
                        <i class="fas fa-map-marker-alt text-emerald-400 mt-1"></i>
                        <span>3515 David Cox Rd, Unit 480906, Charlotte, NC 28269</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Bottom Bar -->
        <div class="border-t border-white/10 py-6 flex flex-col md:flex-row items-center justify-between gap-4">
            <p class="text-gray-400 text-sm mb-0">&copy; {{ date('Y') }} AphroDailyMart. All rights reserved.</p>
            <div class="flex gap-6">
                <a href="/privacy-policy" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">Privacy Policy</a>
                <a href="/terms-of-service" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">Terms of Service</a>
                <a href="{{ route('sitemap') }}" class="text-gray-400 text-sm hover:text-emerald-400 transition-colors">Sitemap</a>
            </div>
        </div>
    </div>
</footer>

<!-- Mobile Navigation -->
<div class="mobile-nav md:hidden">
    <a href="{{ route('home') }}">
        <i class="fas fa-home"></i>
        <span>Home</span>
    </a>
    <a href="{{ route('search') }}">
        <i class="fas fa-search"></i>
        <span>Search</span>
    </a>
    <a href="{{ route('cart.index') }}" class="mobile-cart-counter">
        <i class="fas fa-shopping-cart"></i>
        <span data-cart-count class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-red-500 rounded-full">{{ session('cart') ? array_sum(array_column(session('cart'), 'quantity')) : 0 }}</span>
            {{ session('cart') ? array_sum(array_column(session('cart'), 'quantity')) : 0 }}
        </span>
    </a>
    
    <a href="/profile/edit">
        <i class="fas fa-user"></i>
        <span>Account</span>
    </a>
</div>

<!-- Newsletter Popup -->
<div class="fixed inset-0 z-50 hidden overflow-y-auto" id="newsletterModal" tabindex="-1" aria-hidden="true">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black bg-opacity-50"></div>
        <div class="relative bg-white rounded-lg shadow-xl w-full max-w-lg mx-auto z-10">
            <div class="flex items-start justify-between p-4 border-b-0">
                <button type="button" class="text-gray-400 hover:text-gray-600 ml-auto" data-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="text-center p-6">
                <i class="fas fa-envelope-open-text fa-3x text-blue-600 mb-3"></i>
                <h4 class="text-lg font-semibold mb-2">Subscribe to Our Newsletter</h4>
                <p class="text-gray-600">Get the latest updates on fresh products and exclusive offers!</p>
                <form class="mt-4">
                    <div class="flex mb-3">
                        <input type="email" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your email">
                        <button class="inline-flex items-center px-4 py-2 bg-blue-600 text-white font-medium text-sm rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500" type="submit">Subscribe</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var navbarToggler = document.querySelector('.navbar-toggler');
    var navbarCollapse = document.querySelector('.navbar-collapse');

    if (navbarToggler && navbarCollapse) {
        // Remove any existing click handlers
        document.removeEventListener('click', documentClickHandler);
        
        function documentClickHandler(e) {
            if (!navbarCollapse.contains(e.target) && !navbarToggler.contains(e.target) && 
                navbarCollapse.classList.contains('show')) {
                smoothToggle(navbarCollapse, false);
                navbarToggler.setAttribute('aria-expanded', 'false');
                e.stopPropagation();
            }
        }
        
        document.addEventListener('click', documentClickHandler);
        navbarToggler.removeEventListener('click', togglerClickHandler);
        
        function togglerClickHandler(e) {
            e.preventDefault();
            e.stopPropagation();
            
            if (navbarCollapse.classList.contains('show')) {
                smoothToggle(navbarCollapse, false);
                navbarToggler.setAttribute('aria-expanded', 'false');
            } else {
                smoothToggle(navbarCollapse, true);
                navbarToggler.setAttribute('aria-expanded', 'true');
            }
        }
        
        navbarToggler.addEventListener('click', togglerClickHandler);
        navbarToggler.removeAttribute('data-bs-toggle');
        navbarToggler.removeAttribute('data-bs-target');
        
        // Custom smooth toggle function
        function smoothToggle(element, show) {
            if (show) {
                // First add the collapsing class
                element.classList.add('collapsing');
                element.classList.remove('show');
                
                // Get the target height
                element.style.height = '0px';
                
                // Force a reflow
                element.offsetHeight;
                
                // Set the target height
                const targetHeight = element.scrollHeight + 'px';
                element.style.height = targetHeight;
                
                // After transition completes
                setTimeout(function() {
                    element.classList.remove('collapsing');
                    element.classList.add('show');
                    element.style.height = '';
                }, 300); // Match transition duration
            } else {
                // Closing animation
                element.style.height = element.scrollHeight + 'px';
                
                // Force a reflow
                element.offsetHeight;
                
                // Add collapsing class
                element.classList.add('collapsing');
                element.classList.remove('show');
                
                // Set height to 0
                setTimeout(function() {
                    element.style.height = '0px';
                }, 10);
                
                // After transition completes
                setTimeout(function() {
                    element.classList.remove('collapsing');
                    element.style.height = '';
                }, 300); // Match transition duration
            }
        }
    }
});


// document.addEventListener('DOMContentLoaded', function() {
//     var navbarToggler = document.querySelector('.navbar-toggler');
//     var navbarCollapse = document.querySelector('.navbar-collapse');

//     if (navbarToggler && navbarCollapse) {
//         // Remove any existing click handlers from document first
//         document.removeEventListener('click', documentClickHandler);
        
//         // Define document click handler
//         function documentClickHandler(e) {
//             if (!navbarCollapse.contains(e.target) && !navbarToggler.contains(e.target) && 
//                 navbarCollapse.classList.contains('show')) {
//                 navbarCollapse.classList.remove('show');
//                 navbarToggler.setAttribute('aria-expanded', 'false');
//                 e.stopPropagation();
//             }
//         }
        
//         // Add document click handler
//         document.addEventListener('click', documentClickHandler);
        
//         // Remove and re-add toggle click handler
//         navbarToggler.removeEventListener('click', togglerClickHandler);
        
//         function togglerClickHandler(e) {
//             e.preventDefault();
//             e.stopPropagation();
            
//             if (navbarCollapse.classList.contains('show')) {
//                 navbarCollapse.classList.remove('show');
//                 navbarToggler.setAttribute('aria-expanded', 'false');
//             } else {
//                 navbarCollapse.classList.add('show');
//                 navbarToggler.setAttribute('aria-expanded', 'true');
//             }
//         }
        
//         navbarToggler.addEventListener('click', togglerClickHandler);
        
//         // Disable Bootstrap's data-bs attributes for the toggler
//         navbarToggler.removeAttribute('data-bs-toggle');
//         navbarToggler.removeAttribute('data-bs-target');
//     }
// });
</script>

<!-- ... rest of your scripts ... -->

<script type="text/javascript">
    // Get reference to the category wrapper (the scrollable area)
const categoryWrapper = document.getElementById('categoryWrapper');

// Variables to track the drag or touch position
let isDragging = false;
let startX;
let scrollLeft;

// Mouse Dragging (for desktop)
categoryWrapper.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.pageX - categoryWrapper.offsetLeft;
scrollLeft = categoryWrapper.scrollLeft;
categoryWrapper.style.cursor = 'grabbing'; // Change cursor to indicate dragging
});

categoryWrapper.addEventListener('mouseleave', () => {
isDragging = false;
categoryWrapper.style.cursor = 'grab'; // Reset cursor when mouse leaves
});

categoryWrapper.addEventListener('mouseup', () => {
isDragging = false;
categoryWrapper.style.cursor = 'grab'; // Reset cursor when mouse is released
});

categoryWrapper.addEventListener('mousemove', (e) => {
if (!isDragging) return; // If not dragging, do nothing
e.preventDefault();
const x = e.pageX - categoryWrapper.offsetLeft;
const walk = (x - startX) * 3; // The "3" here is the speed of scrolling, you can adjust
categoryWrapper.scrollLeft = scrollLeft - walk;
});

// Touch Swipe Scrolling (for mobile)
let touchStartX = 0;
let touchEndX = 0;

categoryWrapper.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
});

categoryWrapper.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
});

function handleSwipe() {
if (touchEndX < touchStartX) {
    // Swiped left
    categoryWrapper.scrollBy({
        left: 200,  // Scroll right by 200px
        behavior: 'smooth',
    });
}
if (touchEndX > touchStartX) {
    // Swiped right
    categoryWrapper.scrollBy({
        left: -200,  // Scroll left by 200px
        behavior: 'smooth',
    });
}
}

</script>


<script>

$(document).ready(function () {
$('.add-to-cart-form button').click(function (e) {
    e.preventDefault();
    const form = $(this).closest('form');
    const formData = form.serialize();
    const button = $(this);

    // Disable button temporarily to prevent double-clicks
    button.prop('disabled', true);

    // AJAX request to add to cart
    $.ajax({
        type: 'POST',
        url: 'cart_ajax.php',
        data: formData + '&add_to_cart=1',
        dataType: 'json', // Explicitly specify we expect JSON
        success: function (response) {
    if (response.success) {
            // Update both desktop and mobile cart counters with the new count
            const cartCount = response.cartCount;
            $('.badge.badge-pill.bg-danger').text(cartCount); // This will update all cart badges
            
            // Show appropriate message
            showFlashMessage(response.message, 'success');
            
            // Optional: Update button text temporarily
            const originalText = button.text();
            button.text(response.isUpdate ? 'Updated!' : 'Added!');
            setTimeout(() => button.text(originalText), 2000);
        } else {
            showFlashMessage(response.message || 'Failed to add to cart', 'error');
        }
    },
        error: function (xhr, status, error) {
            // More detailed error handling
            let errorMessage = 'An error occurred while adding to cart.';
            try {
                const response = JSON.parse(xhr.responseText);
                if (response.message) {
                    errorMessage = response.message;
                }
            } catch (e) {
                console.error('Error parsing response:', error);
            }
            showFlashMessage(errorMessage, 'error');
        },
        complete: function() {
            // Re-enable button
            button.prop('disabled', false);
        }
    });
});

// Enhanced flash message function with support for different types
function showFlashMessage(message, type = 'success') {
    const flashMessage = $(`<div class="flash-message ${type}">${message}</div>`);
    $('body').append(flashMessage);

    // Add CSS for different message types
    flashMessage.css({
        'position': 'fixed',
        'top': '20px',
        'right': '20px',
        'padding': '15px 25px',
        'border-radius': '5px',
        'z-index': '9999',
        'background-color': type === 'success' ? '#4CAF50' : '#f44336',
        'color': 'white',
        'box-shadow': '0 2px 5px rgba(0,0,0,0.2)'
    });

    // Animate and remove
    flashMessage.fadeIn().delay(3000).fadeOut(function() {
        $(this).remove();
    });
}
});

</script>

<script>
    $(document).ready(function() {
        // Handle all add to cart forms
        $('body').on('submit', '.add-to-cart-section', function(e) {
            e.preventDefault();
            const form = $(this);
            const submitBtn = form.find('button[type="submit"]');
            
            // Add CSRF token to form data
            const formData = new FormData(form[0]);
            formData.append('_token', '{{ csrf_token() }}');
            
            $.ajax({
                url: form.attr('action'),
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        // Update cart count everywhere
                        $('.custom-green.rounded-circle, .badge.badge-pill.bg-danger').text(response.cartCount);
                        
                        // Show success message
                        showToast('success', response.message);
                    }
                },
                error: function(xhr) {
                    showToast('error', xhr.responseJSON?.message || 'Failed to add item to cart');
                },
                complete: function() {
                    submitBtn.prop('disabled', false);
                }
            });
        });
    });
    </script>
    
    <style>
    .toast-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        padding: 15px 25px;
        border-radius: 4px;
        animation: slideIn 0.3s ease-out;
    }
    
    .toast-notification.success {
        background-color: #28a745;
        color: white;
    }
    
    .toast-notification.error {
        background-color: #dc3545;
        color: white;
    }
    
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    </style>

<script src="https://js.paystack.co/v1/inline.js"></script>
</body>
</html>
