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

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

@push('css')
<style>
    .menus {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
    border-bottom: 2px solid #ddd; /* Aşağı xətt */
}

.menu {
    padding: 10px 20px;
    border-radius: 20px; /* Yumru kənarlar */
    background:  #cd134f; /* Sarı fon */
    color: white;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    border: none;
    display: inline-block;
    text-align: center;
}

.menu:hover, .menu.active {
    background: #2f3235; /* Hover üçün tünd sarı */
    color: white;
}

.menu-items {
    display: none;
    flex-wrap: wrap;
    gap: 20px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.menu-items.active {
    display: flex;
    opacity: 1;
}

/* Şəkillər üçün */
.latest-news-img {
    width: 500px !important;
    height: 270px !important;
    object-fit: cover;
    border-radius: 10px;
 
}

/* Scrollbar Customization */
.scroll-container::-webkit-scrollbar {
    height: 4px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color:  #cd134f;
    border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.news-text-box{
    border: 1px solid   #cd134f;
    background: #cd134f ;
background: linear-gradient(212deg, #cd134f 0%, rgba(242,242,242,1) 35%);

}

</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)
                    <a href="javascript:void(0);" class="menu" data-category="{{ $category->id }}">
                        {{ $category->menu_category() }}
                    </a>
                @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-sm-12 col-md-6" >
                                <div class="single-latest-news " style="margin: 10px;" >
                                    @if($menyu->image())
                                    <a href="#" >
                                        <img src="{{ $menyu->image() }}" alt="{{ $menyu->title() }}" class="latest-news-img" style="object-fit: cover !important; width: 100%" >
                                    </a>
                                    @endif 
                                    <div class="news-text-box"  >
                                        <div style="display: flex; justify-content: space-between;">
                                            <h3 style="color: #cd134f;">{{ $menyu->title() }}</h3>
                                            <h3 style="color: white;">{{ $menyu->price }} ₼</h3>
                                        </div>
                                        <p class="blog-meta" style="margin:1px !important;">
                                            <span class="date"><i class="fas fa-calendar"></i> {{ $category->menu_category() }}</span>
                                        </p>
                                        @if($menyu->description_az)
                                         <p class="excerpt">{!! $menyu->description() !!}</p>
                                        @endif
                                    </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 => {
                    item.classList.remove("active");
                    if (item.getAttribute("data-category") === category) {
                        item.classList.add("active");
                    }
                });
            });
        });
    });
</script>
@endpush
