@extends('layouts.app')

@section('title', 'Coffee Menu - Brew & Bean')

@section('content')
<div class="container">
    <div class="menu-header">
        <h1>Nuestro Menú</h1>
        <p class="subtitle">Imperial, El café más antiguo de Tetuán</p>
    </div>

    <div class="search-container">
        <input type="text" class="search-input" placeholder="Busque en nuestro menú..." id="searchInput">
    </div>

    <div class="menu-filters">
        <button class="filter-btn active" data-category="all">Todos los artículos</button>
        @foreach($categories as $category)
        <button class="filter-btn" data-category="{{ $category->slug }}">{{ $category->name }}</button>
        @endforeach
    </div>

    @foreach($categories as $category)
    @if($category->activeMenuItems->count() > 0)
    <div class="menu-section" data-category="{{ $category->slug }}">
        <h2 class="section-title">{{ $category->name }}</h2>
        <div class="menu-grid">
            @foreach($category->activeMenuItems as $item)
            <div class="menu-item" data-category="{{ $category->slug }}" data-item-id="{{ $item->id }}">
                <div class="item-image-container">
                    <img src="{{ $item->image_url }}" 
                         alt="{{ $item->name }}" 
                         class="item-image"
                         data-full-image="{{ $item->image_url }}">
                    <div class="image-hover-overlay">
                        <i class="fas fa-search-plus"></i>
                        <span>Ver imagen completa</span>
                    </div>
                    @if($item->overlay)
                    <div class="image-overlay">{{ $item->overlay }}</div>
                    @endif
                </div>
                <div class="item-content">
                    <div class="item-header">
                        <div>
                            <div class="item-name">{{ $item->name }}</div>
                            <div class="item-description">{{ $item->description }}</div>
                        </div>
                        <div class="item-price">{{ number_format($item->price, 2) }}Dh</div>
                    </div>
                    @if($item->tags)
                    <div class="item-tags">
                        @foreach($item->tags as $tag)
                        <span class="tag">{{ $tag }}</span>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif
    @endforeach

    <div class="no-results" id="noResults" style="display: none;">
        No items found matching your search.
    </div>
</div>

<!-- Image Modal -->
<div id="imageModal" class="modal">
    <div class="modal-content">
        <span class="close-modal">&times;</span>
        <div class="modal-header">
            <h3 id="modalItemName"></h3>
            <p id="modalItemPrice"></p>
        </div>
        <div class="modal-image-container">
            <img id="modalImage" src="/placeholder.svg" alt="">
        </div>
        <div class="modal-details">
            <p id="modalItemDescription"></p>
            <div id="modalItemTags"></div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Keep all your existing styles and add these fixes */
    
    /* Modal Styles - UPDATED */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        animation: fadeIn 0.3s ease;
        overflow-y: auto;
        padding: 0;
    }

    .modal-content {
        background-color: white;
        width: 90%;
        max-width: 800px;
        border-radius: 15px;
        position: relative;
        animation: slideIn 0.3s ease;
        margin: 20px auto;
        padding: 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    /* Prevent body scroll when modal is open */
    body.modal-open {
        position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
    left: 0;
    }

    .close-modal {
        position: absolute;
        top: 15px;
        right: 25px;
        color: #7C1D1B;
        font-size: 35px;
        font-weight: bold;
        cursor: pointer;
        z-index: 1001;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .close-modal:hover {
        background: rgba(124, 29, 27, 0.1);
        transform: scale(1.1);
    }

    .modal-header {
        padding: 25px 25px 15px;
        border-bottom: 2px solid #f0f0f0;
    }

    .modal-header h3 {
        margin: 0;
        font-size: 2rem;
        color: #7C1D1B;
        font-weight: bold;
    }

    .modal-header p {
        margin: 5px 0 0;
        font-size: 1.4rem;
        color: #d2691e;
        font-weight: bold;
    }

    .modal-image-container {
        padding: 20px;
        text-align: center;
    }

    .modal-image-container img {
        max-width: 100%;
        max-height: 60vh;
        object-fit: contain;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .modal-details {
        padding: 0 25px 25px;
    }

    .modal-details p {
        font-size: 1.1rem;
        color: #666;
        font-style: italic;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    #modalItemTags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    #modalItemTags .tag {
        background: #f0e6d2;
        color: #7C1D1B;
        padding: 6px 15px;
        border-radius: 15px;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .menu-header {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 40px;
        padding: 40px 0;
        background: linear-gradient(135deg, #7C1D1B 0%, #a0522d 100%);
        color: white;
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .menu-header h1 {
        font-size: 3.5rem;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }

    .subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
        font-style: italic;
    }

    .menu-filters {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-bottom: 40px;
        flex-wrap: wrap;
    }

    .filter-btn {
        padding: 12px 24px;
        background: #7C1D1B;
        color: white;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
    }

    .filter-btn:hover,
    .filter-btn.active {
        background: #a0522d;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(139, 69, 19, 0.4);
    }

    .menu-section {
        margin-bottom: 50px;
        opacity: 1;
        transition: all 0.5s ease;
    }

    .menu-section.hidden {
        display: none;
    }

    .section-title {
        font-size: 2.5rem;
        color: #7C1D1B;
        text-align: center;
        margin-bottom: 30px;
        position: relative;
    }

    .section-title::after {
        content: '';
        display: block;
        width: 100px;
        height: 3px;
        background: #7C1D1B;
        margin: 10px auto;
        border-radius: 2px;
    }

    .menu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 25px;
    }

    .menu-item {
        background: white;
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border-left: 5px solid #7C1D1B;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .menu-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 35px rgba(0,0,0,0.15);
    }

    .item-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .menu-item:hover .item-image {
        transform: scale(1.05);
    }

    .item-image-container {
        position: relative;
        overflow: hidden;
    }

    .image-hover-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(124, 29, 27, 0.8);
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .image-hover-overlay i {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .menu-item:hover .image-hover-overlay {
        opacity: 1;
    }

    .item-content {
        padding: 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .item-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .item-name {
        font-size: 1.4rem;
        font-weight: bold;
        color: #7C1D1B;
        margin-bottom: 5px;
    }

    .item-price {
        font-size: 1.3rem;
        font-weight: bold;
        color: #d2691e;
        min-width: 60px;
        text-align: right;
        margin-right: 12px;
    }

    .item-description {
        color: #666;
        font-style: italic;
        margin-bottom: 15px;
        line-height: 1.5;
        flex-grow: 1;
    }

    .item-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: auto;
    }

    .tag {
        background: #f0e6d2;
        color: #7C1D1B;
        padding: 4px 12px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .search-container {
        text-align: center;
        margin-bottom: 30px;
    }

    .search-input {
        padding: 12px 20px;
        font-size: 1rem;
        border: 2px solid #7C1D1B;
        border-radius: 25px;
        width: 300px;
        max-width: 100%;
        outline: none;
        transition: all 0.3s ease;
    }

    .search-input:focus {
        border-color: #a0522d;
        box-shadow: 0 0 10px rgba(139, 69, 19, 0.3);
    }

    .no-results {
        text-align: center;
        color: #666;
        font-style: italic;
        margin: 40px 0;
        font-size: 1.2rem;
    }

    .image-overlay {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(139, 69, 19, 0.9);
        color: white;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: bold;
        z-index: 2;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideIn {
        from { 
            opacity: 0; 
            transform: translateY(-50px);
        }
        to { 
            opacity: 1; 
            transform: translateY(0);
        }
    }

    @media (max-width: 768px) {
        .menu-header h1 {
            font-size: 2.5rem;
        }

        .menu-grid {
            grid-template-columns: 1fr;
        }

        .filter-btn {
            padding: 10px 20px;
            font-size: 0.9rem;
        }

        .search-input {
            width: 100%;
        }

        .item-image {
            height: 180px;
        }

        .modal-content {
            width: 95%;
            margin: 10px auto;
        }

        .modal-header h3 {
            font-size: 1.6rem;
        }

        .close-modal {
            top: 10px;
            right: 15px;
            font-size: 28px;
            width: 35px;
            height: 35px;
        }
    }

    .fade-in {
        animation: fadeIn 0.5s ease-in;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Filter functionality
    const filterBtns = document.querySelectorAll('.filter-btn');
    const menuItems = document.querySelectorAll('.menu-item');
    const menuSections = document.querySelectorAll('.menu-section');
    const searchInput = document.getElementById('searchInput');
    const noResults = document.getElementById('noResults');

    // Modal elements
    const modal = document.getElementById('imageModal');
    const modalImage = document.getElementById('modalImage');
    const modalItemName = document.getElementById('modalItemName');
    const modalItemPrice = document.getElementById('modalItemPrice');
    const modalItemDescription = document.getElementById('modalItemDescription');
    const modalItemTags = document.getElementById('modalItemTags');
    const closeModal = document.querySelector('.close-modal');
    const modalContent = document.querySelector('.modal-content');

    // Variable to store scroll position
    let scrollPosition = 0;

    // Filter by category
    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // Remove active class from all buttons
            filterBtns.forEach(b => b.classList.remove('active'));
            // Add active class to clicked button
            btn.classList.add('active');
            
            const category = btn.dataset.category;
            filterItems(category, searchInput.value);
        });
    });

    // Search functionality
    searchInput.addEventListener('input', (e) => {
        const activeCategory = document.querySelector('.filter-btn.active').dataset.category;
        filterItems(activeCategory, e.target.value);
    });

    // Modal functionality - UPDATED
    menuItems.forEach(item => {
        item.addEventListener('click', (e) => {
            e.preventDefault();
            
            // Store current scroll position
            scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

            // Get item data
            const itemName = item.querySelector('.item-name').textContent;
            const itemPrice = item.querySelector('.item-price').textContent;
            const itemDescription = item.querySelector('.item-description').textContent;
            const itemImage = item.querySelector('.item-image');
            const itemTags = item.querySelectorAll('.tag');
            
            // Populate modal
            modalItemName.textContent = itemName;
            modalItemPrice.textContent = itemPrice;
            modalItemDescription.textContent = itemDescription;
            modalImage.src = itemImage.dataset.fullImage || itemImage.src;
            modalImage.alt = itemName;
            
            // Clear and populate tags
            modalItemTags.innerHTML = '';
            itemTags.forEach(tag => {
                const tagClone = tag.cloneNode(true);
                modalItemTags.appendChild(tagClone);
            });
            
            // Show modal and prevent body scroll
            // document.body.style.top = `-${scrollPosition}px`;
            document.body.classList.add('modal-open');
            modal.style.display = 'block';
            
            // QUICK FIX: Scroll the modal into view
            // Get the current scroll position
            const scrollY = window.scrollY || window.pageYOffset;
            
            // Set the modal content to appear in the current viewport
            modalContent.style.marginTop = '20px';
            modalContent.style.marginBottom = '20px';
            
            // Scroll to ensure the modal is visible in the current viewport
            window.scrollTo({
                top: scrollY,
                behavior: 'auto'
            });
        });
    });

    // Close modal functionality
    closeModal.addEventListener('click', closeModalFunc);
    
    // Close modal when clicking outside
    window.addEventListener('click', (e) => {
        if (e.target === modal) {
            closeModalFunc();
        }
    });

    // Close modal with Escape key
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && modal.style.display === 'block') {
            closeModalFunc();
        }
    });

    function closeModalFunc() {
        modal.style.display = 'none';
        document.body.classList.remove('modal-open'); // Re-enable body scroll
        document.body.style.top = '';

        window.scrollTo(0, scrollPosition); // Scroll back to the original position
        modalContent.style.marginTop = ''; // Reset the margin
        modalContent.style.marginBottom = ''; // Reset the margin
    }

    function filterItems(category, searchTerm) {
        let visibleCount = 0;
        
        menuSections.forEach(section => {
            const sectionCategory = section.dataset.category;
            let sectionHasVisibleItems = false;
            
            // Show/hide sections based on category
            if (category === 'all' || category === sectionCategory) {
                const itemsInSection = section.querySelectorAll('.menu-item');
                
                itemsInSection.forEach(item => {
                    const itemName = item.querySelector('.item-name').textContent.toLowerCase();
                    const itemDescription = item.querySelector('.item-description').textContent.toLowerCase();
                    const searchLower = searchTerm.toLowerCase();
                    
                    const matchesSearch = searchTerm === '' || 
                                        itemName.includes(searchLower) || 
                                        itemDescription.includes(searchLower);
                    
                    if (matchesSearch) {
                        item.style.display = 'block';
                        item.classList.add('fade-in');
                        visibleCount++;
                        sectionHasVisibleItems = true;
                    } else {
                        item.style.display = 'none';
                        item.classList.remove('fade-in');
                    }
                });
                
                // Show section if it has visible items
                section.style.display = sectionHasVisibleItems ? 'block' : 'none';
            } else {
                section.style.display = 'none';
            }
        });
        
        // Show/hide no results message
        noResults.style.display = visibleCount === 0 ? 'block' : 'none';
    }

    // Add hover effects and animations
    menuItems.forEach(item => {
        item.addEventListener('mouseenter', () => {
            if (modal.style.display !== 'block') {
                item.style.transform = 'translateY(-5px) scale(1.02)';
            }
        });
        
        item.addEventListener('mouseleave', () => {
            if (modal.style.display !== 'block') {
                item.style.transform = 'translateY(0) scale(1)';
            }
        });
    });

    // Initialize with fade-in animation
    menuItems.forEach((item, index) => {
        setTimeout(() => {
            item.classList.add('fade-in');
        }, index * 100);
    });
});
</script>
@endpush