<?php $__env->startSection('title', __('Tambura')); ?>

<?php $__env->startPush('css'); ?>
<style>
    .menus {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
    border-bottom: 2px solid white; /* 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: 250px !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: #cd134f;
}

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

</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>

<div class="latest-news mt-150 mb-150">
    <div class="container">
        <!-- Kategoriyalar -->
        <div class="row">
            <div class="menus scroll-container">
                <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <a href="javascript:void(0);" class="menu" data-category="<?php echo e($category->id); ?>">
                        <?php echo e($category->menu_category()); ?>

                    </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>

        <br><br>

        <!-- Menyular -->
        <div class="container">
            <div class="row">
                <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class=" menu-items <?php echo e($loop->first ? 'active' : ''); ?>" data-category="<?php echo e($category->id); ?>">
                        <?php $__currentLoopData = $menyus->where('category_id', $category->id); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $menyu): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="row" >
                                <div class="single-latest-news " style="margin: 10px;" >
                                    <?php if($menyu->image()): ?>
                                    <a href="#" >
                                        <img src="<?php echo e($menyu->image()); ?>" alt="<?php echo e($menyu->title()); ?>" class="latest-news-img" style="object-fit: cover !important;" >
                                    </a>
                                    <?php endif; ?> 
                                    <div class="news-text-box" style="width:368px" >
                                        <div style="display: flex; justify-content: space-between;">
                                            <h3 style="color:#cd134f;"><?php echo e($menyu->title()); ?></h3>
                                            <h3 style="color:white;"><?php echo e($menyu->price); ?> ₼</h3>
                                        </div>
                                        <p class="blog-meta" style="margin:1px !important;">
                                            <span class="date"><i class="fas fa-calendar"></i> <?php echo e($category->menu_category()); ?></span>
                                        </p>
                                        <?php if($menyu->description_az): ?>
                                         <p class="excerpt"><?php echo $menyu->description(); ?></p>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>

    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('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>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('app.web.layout.layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\Users\MAGA\Downloads\menyum.az\menyum.az\resources\views/app/web/pages/cresent/cresent.blade.php ENDPATH**/ ?>