@php   
    $products = [
        'bestSales' => $bestSales,
        'lastArrivedProducts' => $lastArrivedProducts,
        'homeProducts' => $homeProducts,
        'discountProducts' => $discountProducts,
        'dailyOfferProducts' => $dailyOfferProducts
    ];

    $validSections = [];
    foreach ($home_settings as $home_setting) {
        if ($home_setting->home_settings_device == 'website' && $home_setting->home_settings_status == '1') {
            if (in_array($home_setting->home_settings_key, ['bestSales','lastArrivedProducts','homeProducts','discountProducts','dailyOfferProducts'])) {
                 if(isset($products[$home_setting->home_settings_key]) && is_array($products[$home_setting->home_settings_key]) && sizeof($products[$home_setting->home_settings_key]) > 0) {
                     $validSections[] = $home_setting;
                 }
            }
        }
    }
    $keys = array_map(function($s) { return $s->home_settings_key; }, $validSections);
@endphp

<div class="mb-md-5 mb-4" style="background-image:url('{{ asset('images/theme7/products-section-bg.webp') }}'); background-size:cover;background-position:center;background-repeat:no-repeat;"
     x-data="{ 
        activeTab: {{ count($keys) > 0 ? json_encode($keys[0]) : "''" }},
        keys: {{ json_encode($keys) }},
        isRtl: false,
        get activeIndex() { return this.keys.indexOf(this.activeTab); }
     }"
     x-init="isRtl = (document.body && getComputedStyle(document.body).direction === 'rtl')"
     >
    <div class="container pt-5 d-flex justify-content-center flex-wrap align-items-center" style="gap:10px">
        @foreach ($validSections as $home_setting)
            <button 
                @click="activeTab = '{{ $home_setting->home_settings_key }}'"
                :class="activeTab === '{{ $home_setting->home_settings_key }}' ? 'background_1 text_2' : 'background_2 text_1'"
                class="rounded-pill px-3 py-1 border-0 "
                style="cursor: pointer; transition: all 0.3s ease;">
                {{ $home_setting->home_settings_title }}
            </button>
        @endforeach
    </div>
    
    <div class="overflow-hidden w-100">
         <div class="d-flex"
              style="transition: transform 0.5s ease-in-out;"
              :style="'transform: translateX(' + (activeIndex * 100 * (isRtl ? 1 : -1)) + '%)'">
            @foreach ($validSections as $home_setting)
                <div class="w-100 flex-shrink-0">
                     @include('themes.theme7.includes.productsSection',['products'=>$products[$home_setting->home_settings_key],'sectionName'=>$home_setting->home_settings_key, 'home_setting'=>$home_setting])
                </div>
            @endforeach
         </div>
    </div>
</div>