@extends('app.web.layout.layout')

@section('title', __('Tambura'))

@push('css')
<style>
    .menus {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
    }
    .menu {
        border: 1px solid yellow;
        padding: 3px 3px;
        cursor: pointer;
    }
    .menu.active {
        background-color: yellow;
        color: black;
    }
    .menu-items {
        display: none;
    }
    .menu-items.active {
        display: flex;
    }
</style>
@endpush

@section('content')

<div class="latest-news mt-150 mb-150">
    <div class="container">
        <!-- Kategoriyalar -->
        <div class="row">
            <div class="menus scroll-container">
                @foreach($categories as $category)
                    <p class="menu" data-category="{{ $category->id }}">{{ $category->menu_category() }}</p>
                @endforeach
            </div>
        </div>

        <br><br>

        <!-- Menyular -->
        <div class="container">
            <div class="row">
                @foreach($categories as $category)
                    <div class="menu-items {{ $loop->first ? 'active' : '' }}" data-category="{{ $category->id }}">
                        @foreach($menyus->where('category_id', $category->id) as $menyu)
                            <div class="col-lg-4 col-md-6">
                                <div class="single-latest-news">
                                    <a href="#"><div class="latest-news-bg news-bg-1"></div></a>
                                    <div class="news-text-box">
                                        <div style="display: flex; justify-content: space-between;">
                                            <h3>{{ $menyu->title() }}</h3>
                                            <h3>{{ $menyu->price }} ₼</h3>
                                        </div>
                                        <p class="blog-meta">
                                            <span class="date"><i class="fas fa-calendar"></i> {{ $category->menu_category() }}</span>
                                        </p>
                                        <p class="excerpt">{{ $menyu->description() }}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endforeach
            </div>
        </div>

    </div>
</div>

@endsection

@push('js')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        let menuButtons = document.querySelectorAll(".menu");
        let menuItems = document.querySelectorAll(".menu-items");

        menuButtons.forEach(button => {
            button.addEventListener("click", function() {
                let category = this.getAttribute("data-category");

                menuButtons.forEach(btn => btn.classList.remove("active"));
                this.classList.add("active");

                menuItems.forEach(item => {
                    if (category === "all") {
                        item.classList.add("active");
                    } else {
                        item.classList.toggle("active", item.getAttribute("data-category") === category);
                    }
                });
            });
        });
    });
</script>
@endpush
