@extends('frontend.layouts.app')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" integrity="sha512-GqP/pjlymwlPb6Vd7KmT5YbapvowpteRq9ffvufiXYZp0YpMTtR9tI6/v3U3hFi1N9MQmXum/yBfELxoY+S1Mw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" integrity="sha512-GQz6nApkdT7cWN1Cnj/DOAkyfzNOoq+txIhSEK1G4HTCbSHVGpsrvirptbAP60Nu7qbw0+XlAAPGUmLU2L5l4g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    .owl-carousel .owl-item img{
        width:auto !important;
    }
</style>
@section('content')
    {{-- Categories , Sliders . Today's deal --}}
    <div class="home-banner-area mb-4">
        <div class="container-fluid">
            <div class="row position-relative">
            {{--<div class="col-lg-3 position-absolute ml-md-5 z-1 d-none d-lg-block">
                    @include('frontend.partials.category_menu')
                </div>--}}

                @php
                    $num_todays_deal = count(filter_products(\App\Product::where('published', 1)->where('todays_deal', 1 ))->get());
                    $featured_categories = \App\Category::where('featured', 1)->get();
                @endphp

                <div class="@if($num_todays_deal > 0) col-lg-10 @else col-lg-12 p-0 @endif">
                    @if (get_setting('home_slider_images') != null)
                        <div class="aiz-carousel dots-inside-bottom mobile-img-auto-height" data-arrows="true" data-dots="true" data-autoplay="true">
                            @php $slider_images = json_decode(get_setting('home_slider_images'), true);  @endphp
                            @foreach ($slider_images as $key => $value)
                                <div class="carousel-box">
                                    <a href="{{ json_decode(get_setting('home_slider_links'), true)[$key] }}">
                                        <img
                                            class="d-block mw-100 img-fit rounded shadow-sm overflow-hidden"
                                            src="{{ uploaded_asset($slider_images[$key]) }}"
                                            alt="{{ env('APP_NAME')}} promo"
                                            style="min-height:270px !important;"
                                            @if(count($featured_categories) == 0)
                                            height="622"
                                            @else
                                            height="622"
                                            @endif
                                            onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder-rect.jpg') }}';"
                                        >
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    @endif
                {{--@if (count($featured_categories) > 0)
                        <ul class="list-unstyled mb-0 row gutters-5 mx-md-5">
                            @foreach ($featured_categories as $key => $category)
                                <li class="minw-0 col-4 col-md mt-3 carousel-box-custom">
                                    <a href="{{ route('products.category', $category->slug) }}" class="d-block rounded bg-white p-2 text-reset shadow-sm">
                                        <img
                                            src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                            data-src="{{ uploaded_asset($category->banner) }}"
                                            alt="{{ $category->getTranslation('name') }}"
                                            class="lazyload img-fit h-md-250px carousel-img-custom"
                                            height="78"
                                            onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder-rect.jpg') }}';"
                                        >
                                        <div class="text-truncate fs-12 fw-600 mt-2 opacity-70">{{ $category->getTranslation('name') }}</div>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endif--}}
                </div>

                @if($num_todays_deal > 0)
                <div class="col-lg-2 order-3 mt-3 mt-lg-0">
                    <div class="bg-white rounded shadow-sm">
                        <div class="bg-soft-primary rounded-top p-3 d-flex align-items-center justify-content-center">
                            <span class="fw-600 fs-16 mr-2 text-truncate">
                                {{ translate('Todays Deal') }}
                            </span>
                            <span class="badge badge-primary badge-inline">{{ translate('Hot') }}</span>
                        </div>
                        <div class="c-scrollbar-light overflow-auto h-lg-400px p-2 bg-primary rounded-bottom">
                            <div class="gutters-5 lg-no-gutters row row-cols-2 row-cols-lg-1">
                            @foreach (filter_products(\App\Product::where('published', 1)->where('todays_deal', '1'))->get() as $key => $product)
                                @if ($product != null)
                                <div class="col mb-2">
                                    <a href="{{ route('product', $product->slug) }}" class="d-block p-2 text-reset bg-white h-100 rounded">
                                        <div class="row gutters-5 align-items-center">
                                            <div class="col-xxl">
                                                <div class="img">
                                                    <img
                                                        class="lazyload img-fit h-140px h-lg-80px"
                                                        src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                                        data-src="{{ uploaded_asset($product->thumbnail_img) }}"
                                                        alt="{{ $product->getTranslation('name') }}"
                                                        onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                                    >
                                                </div>
                                            </div>
                                            <div class="col-xxl">
                                                <div class="fs-16">
                                                    <span class="d-block text-primary fw-600">{{ home_discounted_base_price($product) }}</span>
                                                    @if(home_base_price($product) != home_discounted_base_price($product))
                                                        <del class="d-block opacity-70">{{ home_base_price($product) }}</del>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endif
                            @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                @endif

            </div>
        </div>
    </div>


    {{-- Banner section 1 --}}
    @if (get_setting('home_banner1_images') != null)
    <div class="mb-4">
        <div class="container">
            <div class="row gutters-10">
                @php $banner_1_imags = json_decode(get_setting('home_banner1_images')); @endphp
                @foreach ($banner_1_imags as $key => $value)
                    <div class="col-xl col-md-6">
                        <div class="mb-3 mb-lg-0">
                            <a href="{{ json_decode(get_setting('home_banner1_links'), true)[$key] }}" class="d-block text-reset">
                                <img src="{{ static_asset('assets/img/placeholder-rect.jpg') }}" data-src="{{ uploaded_asset($banner_1_imags[$key]) }}" alt="{{ env('APP_NAME') }} promo" class="img-fluid lazyload w-100" style="max-height:550px;border-radius: 0.5rem !important;">
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif


    {{-- Flash Deal --}}
    @php
        $flash_deal = \App\FlashDeal::where('status', 1)->where('featured', 1)->first();
    @endphp
    @if($flash_deal != null && strtotime(date('Y-m-d H:i:s')) >= $flash_deal->start_date && strtotime(date('Y-m-d H:i:s')) <= $flash_deal->end_date)
    <section class="mb-4">
        <div class="container">
            <div class="px-2 py-4 px-md-4 py-md-3 bg-white shadow-sm rounded">

                <div class="d-flex flex-wrap mb-3 align-items-baseline border-bottom">
                    <h3 class="h5 fw-700 mb-0">
                        <span class="border-bottom border-primary border-width-2 pb-3 d-inline-block">{{ translate('Flash Sale') }}</span>
                    </h3>
                    <div class="aiz-count-down ml-auto ml-lg-3 align-items-center" data-date="{{ date('Y/m/d H:i:s', $flash_deal->end_date) }}"></div>
                    <a href="{{ route('flash-deal-details', $flash_deal->slug) }}" class="ml-auto mr-0 btn btn-primary btn-sm shadow-md w-100 w-md-auto">{{ translate('View More') }}</a>
                </div>

                <div class="aiz-carousel gutters-10 half-outside-arrow" data-items="6" data-xl-items="5" data-lg-items="4"  data-md-items="3" data-sm-items="2" data-xs-items="2" data-arrows='true'>
                    @foreach ($flash_deal->flash_deal_products as $key => $flash_deal_product)
                        @php
                            $product = \App\Product::find($flash_deal_product->product_id);
                        @endphp
                        @if ($product != null && $product->published != 0)
                            <div class="carousel-box carousel-box-custom">
                                @include('frontend.partials.product_box_1',['product' => $product])
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    @endif


    {{-- Featured Section --}}
    <div id="section_featured" style="min-height:550px;">

    </div>
    
    {{-- Inquiry Section --}}
    <div id="section_inquiry" class="bg-white" style="min-height:550px;">
        <section class="mb-4">
            <div class="container">
                <div class="px-2 py-4 px-md-4 py-md-3 shadow-sm rounded">
                    <div class="d-flex mb-5 justify-content-center flex-column align-items-center">
                        <h3 class="h5 fw-700 mb-0 fs-36 text-center c-pointer">
                            <span class="pb-3 d-inline-block" id="featuredHead" style="background: url({{asset('public/assets/img/li.png')}}) no-repeat center bottom;">{{ translate('Inquiry Products') }}</span>
                        </h3>
                        <div class="featured-div d-none text-center">
                            <p class="py-3 text-center fs-16 w-75 mx-auto">
                                 R & D and innovation of in transit entertainment and service demand for long-distance buses, tourist buses, passenger trains, cruise ships and other means of transportation
                            </p>
                        </div>
                    </div>
                    <div class="row gutters-10">
                    @foreach (\App\Product::where('published', 1)->where('online_sell', 0)->limit(12)->get() as $key => $product)
                    <div class="col-6 col-sm-6 col-md-4 mt-3 carousel-box-custom" data-aos="fade-up"
                                data-aos-offset="200"
                                data-aos-delay="50"
                                data-aos-duration="1500"
                                data-aos-easing="ease-in-out"
                                data-aos-mirror="false"
                                data-aos-once="true">
                        @include('frontend.partials.product_box_1',['product' => $product, 'back' => 'bg-light' ])
                    </div>
                    @endforeach
                    </div>
                {{--<div class="aiz-carousel gutters-10 half-outside-arrow" data-items="4" data-xl-items="4" data-lg-items="4"  data-md-items="3" data-sm-items="2" data-xs-items="2" data-arrows='true'>
                        @foreach (\App\Product::where('published', 1)->where('online_sell', 0)->limit(12)->get() as $key => $product)
                        <div class="carousel-box carousel-box-custom" data-aos="fade-right"
                                data-aos-offset="200"
                                data-aos-delay="50"
                                data-aos-duration="1500"
                                data-aos-easing="ease-in-out"
                                data-aos-mirror="false"
                                data-aos-once="true">
                            @include('frontend.partials.product_box_1',['product' => $product, 'back' => 'bg-light' ])
                        </div>
                        @endforeach
                    </div>--}}
                </div>
            </div>
        </section>
    </div>
    
    {{-- Online Section --}}
    @if(\App\Product::where('published', 1)->where('online_sell', 1)->count() > 0)
    <div id="section_online" style="min-height:550px;">
        <section class="mb-4">
            <div class="container">
                <div class="px-2 py-4 px-md-4 py-md-3 shadow-sm rounded">
                    <div class="d-flex mb-5 justify-content-center flex-column align-items-center">
                        <h3 class="h5 fw-700 mb-0 fs-36 text-center c-pointer">
                            <span class="pb-3 d-inline-block" id="featuredHead" style="background: url({{asset('public/assets/img/li.png')}}) no-repeat center bottom;">{{ translate('Online Products') }}</span>
                        </h3>
                        <div class="featured-div d-none text-center">
                            <p class="py-3 text-center fs-16 w-75 mx-auto">
                                 R & D and innovation of in transit entertainment and service demand for long-distance buses, tourist buses, passenger trains, cruise ships and other means of transportation
                            </p>
                        </div>
                    </div>
                    <div class="aiz-carousel gutters-10 half-outside-arrow" data-items="4" data-xl-items="4" data-lg-items="4"  data-md-items="3" data-sm-items="2" data-xs-items="2" data-arrows='true'>
                        @foreach (filter_products(\App\Product::where('published', 1)->where('online_sell', 1))->limit(12)->get() as $key => $product)
                        <div class="carousel-box carousel-box-custom" data-aos="fade-right"
                                data-aos-offset="200"
                                data-aos-delay="50"
                                data-aos-duration="1500"
                                data-aos-easing="ease-in-out"
                                data-aos-mirror="false"
                                data-aos-once="true">
                            @include('frontend.partials.product_box_1',['product' => $product])
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    </div>
    @endif
    
    

    {{-- Best Selling  --}}
    <div id="section_best_selling" class="p-0 py-5" style="background: url({{asset('public/assets/img/BG.jpg')}}) no-repeat fixed center top;">
        <section>
            <div class="container my-5">
                <div class="px-2 py-4 px-md-4 py-md-3 shadow-sm rounded">
                    <div class="d-flex justify-content-center flex-column align-items-center">
                        <h3 class="h5 fw-700 mb-0 fs-36 text-white c-pointer">
                            <span class="pb-3 d-inline-block" id="aboutHead" style="background: url({{asset('public/assets/img/li.png')}}) no-repeat center bottom;">{{ translate('About Datasys') }}</span>
                        </h3>
                        <div class="about-div text-center" style="height:0px;overflow:hidden;">
                        <p class="bg-white fs-16 fw-400 mt-3 mb-5 px-4 pt-3 pb-4 rounded-lg text-center text-dark text-white">
                            <a href="#" class="d-block rounded p-2 mt-2 mb-3 text-reset">
                                @php
                                    $header_logo = get_setting('header_logo');
                                    
                                @endphp
                                @if($header_logo != null)
                                    <img src="{{ uploaded_asset($header_logo) }}" alt="{{ env('APP_NAME') }}" class="mw-100 h-30px h-md-40px" height="40">
                                @endif
                            </a>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel felis arcu. Sed vulputate maximus ante quis bibendum. Duis bibendum placerat leo. Suspendisse pulvinar nisi volutpat metus consequat pretium. Aliquam quis augue ex. Morbi viverra ante quis nibh euismod, at placerat felis vestibulum. Maecenas tincidunt et eros ac aliquet. Ut laoreet tortor rhoncus, porta dui in, ultrices est. Nullam malesuada ipsum dolor, ut dignissim velit hendrerit et. Aliquam erat volutpat. Nunc vitae sodales nulla, at ornare magna. In pretium tempor dolor vel feugiat. Quisque imperdiet mollis tempus. Sed tempus orci risus, condimentum volutpat arcu commodo sit amet. Sed vel elementum metus.
                        </p>
                        <a href="#" class="btn btn-outline-light text-white btn-sm shadow-md hov-bg-dark">{{ translate('Read More') }}</a>
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </section>
    </div>
    
    {{-- Category wise Products --}}
    <div id="section_home_categories" class="p-0 py-5">
        
        @if (count($featured_categories) > 0)
            <div class="row gutters-10 px-md-10 mt-5" style="padding-right:1rem;padding-left:1rem;">
                @foreach ($featured_categories as $key => $category)
                    <div class="col-4 mt-3 carousel-box-custom">
                        <a href="{{ route('products.category', $category->slug) }}" class="d-block rounded bg-white p-2 text-reset shadow-sm" style="border-radius: 0.6rem!important;">
                            <img
                                src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                data-src="{{ uploaded_asset($category->banner) }}"
                                alt="{{ $category->getTranslation('name') }}"
                                class="lazyload img-fit h-md-250px carousel-img-custom"
                                height="78"
                                onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder-rect.jpg') }}';"
                            >
                            <div class="text-truncate fs-12 fw-600 mt-2 opacity-70">{{ $category->getTranslation('name') }}</div>
                        </a>
                    </div>
                @endforeach
            </div>
        @endif
        
    </div>
    
    {{-- Banner Section 2 --}}
    @if (get_setting('home_banner2_images') != null)
    <div class="mb-4">
        <div class="container">
            <div class="row gutters-10">
                @php $banner_2_imags = json_decode(get_setting('home_banner2_images')); @endphp
                @foreach ($banner_2_imags as $key => $value)
                    <div class="col-xl col-md-6">
                        <div class="mb-3 mb-lg-0">
                            <a href="{{ json_decode(get_setting('home_banner2_links'), true)[$key] }}" class="d-block text-reset">
                                <img src="{{ static_asset('assets/img/placeholder-rect.jpg') }}" data-src="{{ uploaded_asset($banner_2_imags[$key]) }}" alt="{{ env('APP_NAME') }} promo" class="img-fluid lazyload w-100">
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif
    
    {{-- Classified Product --}}
    @if(get_setting('classified_product') == 1)
        @php
            $classified_products = \App\CustomerProduct::where('status', '1')->where('published', '1')->take(10)->get();
        @endphp
           @if (count($classified_products) > 0)
               <section class="mb-4">
                   <div class="container">
                       <div class="px-2 py-4 px-md-4 py-md-3 bg-white shadow-sm rounded">
                            <div class="d-flex mb-3 align-items-baseline border-bottom">
                                <h3 class="h5 fw-700 mb-0">
                                    <span class="border-bottom border-primary border-width-2 pb-3 d-inline-block">{{ translate('Classified Ads') }}</span>
                                </h3>
                                <a href="{{ route('customer.products') }}" class="ml-auto mr-0 btn btn-primary btn-sm shadow-md">{{ translate('View More') }}</a>
                            </div>
                           <div class="aiz-carousel gutters-10 half-outside-arrow" data-items="6" data-xl-items="5" data-lg-items="4"  data-md-items="3" data-sm-items="2" data-xs-items="2" data-arrows='true'>
                               @foreach ($classified_products as $key => $classified_product)
                                   <div class="carousel-box carousel-box-custom">
                                        <div class="aiz-card-box border border-light rounded hov-shadow-md my-2 has-transition">
                                            <div class="position-relative">
                                                <a href="{{ route('customer.product', $classified_product->slug) }}" class="d-block">
                                                    <img
                                                        class="img-fit lazyload mx-auto h-140px h-md-210px"
                                                        src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                                        data-src="{{ uploaded_asset($classified_product->thumbnail_img) }}"
                                                        alt="{{ $classified_product->getTranslation('name') }}"
                                                        onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                                    >
                                                </a>
                                                <div class="absolute-top-left pt-2 pl-2">
                                                    @if($classified_product->conditon == 'new')
                                                       <span class="badge badge-inline badge-success">{{translate('new')}}</span>
                                                    @elseif($classified_product->conditon == 'used')
                                                       <span class="badge badge-inline badge-danger">{{translate('Used')}}</span>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="p-md-3 p-2 text-left">
                                                <div class="fs-15 mb-1">
                                                    <span class="fw-700 text-primary">{{ single_price($classified_product->unit_price) }}</span>
                                                </div>
                                                <h3 class="fw-600 fs-13 text-truncate-2 lh-1-4 mb-0 h-35px">
                                                    <a href="{{ route('customer.product', $classified_product->slug) }}" class="d-block text-reset">{{ $classified_product->getTranslation('name') }}</a>
                                                </h3>
                                            </div>
                                       </div>
                                   </div>
                               @endforeach
                           </div>
                       </div>
                   </div>
               </section>
           @endif
       @endif

    {{-- Banner Section 2 --}}
    @if (get_setting('home_banner3_images') != null)
    <div class="mb-4">
        <div class="container">
            <div class="row gutters-10">
                @php $banner_3_imags = json_decode(get_setting('home_banner3_images')); @endphp
                @foreach ($banner_3_imags as $key => $value)
                    <div class="col-xl col-md-6">
                        <div class="mb-3 mb-lg-0">
                            <a href="{{ json_decode(get_setting('home_banner3_links'), true)[$key] }}" class="d-block text-reset">
                                <img src="{{ static_asset('assets/img/placeholder-rect.jpg') }}" data-src="{{ uploaded_asset($banner_3_imags[$key]) }}" alt="{{ env('APP_NAME') }} promo" class="img-fluid lazyload w-100">
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    {{-- Best Seller --}}
    @if (get_setting('vendor_system_activation') == 1)
    <div id="section_best_sellers">

    </div>
    @endif

    {{-- Top 10 categories and Brands --}}
    @if (get_setting('top10_categories') != null && get_setting('top10_brands') != null)
    <section class="py-5" style="background: url({{asset('public/assets/img/BG.jpg')}}) no-repeat fixed center top;">
        <div class="container">
            <div class="row gutters-10">
            {{--@if (get_setting('top10_categories') != null)
                    <div class="col-lg-6">
                        <div class="d-flex mb-3 align-items-baseline border-bottom">
                            <h3 class="h5 fw-700 mb-0">
                                <span class="border-bottom border-primary border-width-2 pb-3 d-inline-block">{{ translate('Top 10 Categories') }}</span>
                            </h3>
                            <a href="{{ route('categories.all') }}" class="ml-auto mr-0 btn btn-primary btn-sm shadow-md">{{ translate('View All Categories') }}</a>
                        </div>
                        <div class="row gutters-5">--}}
                            @php //$top10_categories = json_decode(get_setting('top10_categories')); @endphp
                        {{--@foreach ($top10_categories as $key => $value)--}}
                                @php //$category = \App\Category::find($value); @endphp
                            {{--@if ($category != null)
                                    <div class="col-sm-6">
                                        <a href="{{ route('products.category', $category->slug) }}" class="bg-white border d-block text-reset rounded p-2 hov-shadow-md mb-2">
                                            <div class="row align-items-center no-gutters">
                                                <div class="col-3 text-center">
                                                    <img
                                                        src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                                        data-src="{{ uploaded_asset($category->banner) }}"
                                                        alt="{{ $category->getTranslation('name') }}"
                                                        class="img-fluid img lazyload h-60px"
                                                        onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                                    >
                                                </div>
                                                <div class="col-7">
                                                    <div class="text-truncat-2 pl-3 fs-14 fw-600 text-left">{{ $category->getTranslation('name') }}</div>
                                                </div>
                                                <div class="col-2 text-center">
                                                    <i class="la la-angle-right text-primary"></i>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endif--}}
                        {{--@endforeach
                        </div>
                    </div>
                @endif--}}
                @if (get_setting('top10_brands') != null)
                    <div class="col-lg-12">
                        <div class="d-flex mb-5 align-items-baseline justify-content-center">
                            <h3 class="h5 fw-700 mb-0 fs-36 text-white">
                                <span class="pb-3 d-inline-block" style="background: url({{asset('public/assets/img/li.png')}}) no-repeat center bottom;">{{ translate('Our Clients') }}</span>
                            </h3>
                        {{--<a href="{{ route('brands.all') }}" class="ml-auto mr-0 btn btn-primary btn-sm shadow-md">{{ translate('View All Brands') }}</a>--}}
                        </div>
                        <div class="row gutters-5">
                            @php $top10_brands = json_decode(get_setting('top10_brands')); @endphp
                            
                            <!--<div class="aiz-carousel gutters-10 half-outside-arrow" data-items="4" data-xl-items="4" data-lg-items="4"  data-md-items="3" data-sm-items="2" data-xs-items="2" data-arrows='true' data-center='true' data-autoplay="true" data-infinite="true">-->
                            <!--<div class="slick marquee gutters-10 half-outside-arrow">-->
                            <div class="owl-carousel owl-theme">
                            @foreach ($top10_brands as $key => $value)
                                @php $brand = \App\Brand::find($value); @endphp
                                @if ($brand != null)
                                    
                                        <div class="item">
                                            <div class="d-flex justify-content-center position-relative">
        
                                                <img
                                                    src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                                    data-src="{{ uploaded_asset($brand->logo) }}"
                                                    alt="{{ $brand->getTranslation('name') }}"
                                                    class="img-fluid img lazyload"
                                                    style="height:65px;"
                                                    onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                                >
                                                
                                            </div>
                                        </div>
                                    
                                    
                                    
                                {{--<div class="carousel-box carousel-box-custom">
                                        @include('frontend.partials.brand_logo_box',['brand' => $brand])
                                    </div>--}}
                                    
                                {{--<div class="bg-white carousel-box p-3 m-3 rounded-lg" style="height: 70px !important;">
                                        
                                    <a href="{{ route('products.brand', $brand->slug) }}" class="bg-white border d-block text-reset rounded p-2 hov-shadow-md mb-2">
                                            <div class="row align-items-center no-gutters">
                                                <div class="col-4 text-center">
                                                    <div class="brand_cr_inner">
                                                        <img
                                                            src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                                            data-src="{{ uploaded_asset($brand->logo) }}"
                                                            alt="{{ $brand->getTranslation('name') }}"
                                                            class="img-fluid img lazyload"
                                                            style="max-height:70px;"
                                                            onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                                        >
                                                    </div>
                                            </div>
                                                <div class="col-6">
                                                    <div class="text-truncate-2 pl-3 fs-14 fw-600 text-left">{{ $brand->getTranslation('name') }}</div>
                                                </div>
                                                <div class="col-2 text-center">
                                                    <i class="la la-angle-right text-primary"></i>
                                                </div>
                                            </div>
                                        </a>
                                        
                                    </div>--}}
                                    
                                @endif
                            @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>
    @endif

@endsection

@section('script')
    
    <script src="{{ static_asset('assets/js/custom-owl.js') }}"></script>
    <script>
        $(document).ready(function(){
            $.post('{{ route('home.section.featured') }}', {_token:'{{ csrf_token() }}'}, function(data){
                $('#section_featured').html(data);
                AIZ.plugins.slickCarousel();
            });
            // $.post('{{ route('home.section.best_selling') }}', {_token:'{{ csrf_token() }}'}, function(data){
            //     $('#section_best_selling').html(data);
            //     AIZ.plugins.slickCarousel();
            // });
            // $.post('{{ route('home.section.home_categories') }}', {_token:'{{ csrf_token() }}'}, function(data){
            //     $('#section_home_categories').html(data);
            //     AIZ.plugins.slickCarousel();
            // });
            
            var owl = $('.owl-carousel');
                owl.owlCarousel({
                    loop: true,
                    margin: 20,
                    autoplay: true,
                    slideTransition: 'linear',
                    autoplayTimeout: 0,
                    autoplaySpeed: 5000,
                    autoplayHoverPause: false,
                    responsive:{
                        0:{
                            items:3
                        },
                        600:{
                            items:3
                        },
                        1000:{
                            items:5
                        },
                        1400:{
                            items:6
                        }
                        
                    }
            
                });
            
            $('#aboutHead').on('click', function(){
               
            //   $('.about-div').fadeToggle("slow");
            //   $('.about-div').toggleClass('d-none');
               var aboutDiv = $('.about-div');
               
                if(aboutDiv.height() === 0){
                  autoHeightAnimate(aboutDiv, 500);
                } else {
                  aboutDiv.stop().animate({ height: '0' }, 500);
                }
                
            });
            
            setTimeout(function(){ 
                $('#featuredHead').on('click', function(){
               
                  $('.featured-div').toggleClass('d-none');
                    
                });
            }, 2000);
            
            function autoHeightAnimate(element, time){
              	var curHeight = element.height(), // Get Default Height
                    autoHeight = element.css('height', 'auto').height(); // Get Auto Height
                	  element.height(curHeight); // Reset to Default Height
                	  element.stop().animate({ height: autoHeight }, time); // Animate to Auto Height
            }
            
            
            @if (get_setting('vendor_system_activation') == 1)
            $.post('{{ route('home.section.best_sellers') }}', {_token:'{{ csrf_token() }}'}, function(data){
                $('#section_best_sellers').html(data);
                AIZ.plugins.slickCarousel();
            });
            @endif
        });
    </script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
      AOS.init();
    </script>
@endsection
