@foreach ($campaigns_product as $campain)
    <style>
        .camppp {
            padding-top: 2rem;
        }
    </style>
    <div class="products camppp">
        <div class="container">
            @include('frontend.partial.index.campaign_section_part.header_camp_grid')
            <div class="text-center mb-2">
                <a href="/Campaign/product/{{ $campain->slug }}"><img src="@if (file_exists(public_path() . '/uploads/campaign/' . $campain->cover_photo)){{ asset('uploads/campaign/' . $campain->cover_photo) }}@else{{ asset('/icon/no-img-cat.png') }}@endif" alt="{{ $campain->cover_photo }}"></a>
            </div>
            <div class="row camp_slides">
                @foreach ($campain->campaing_products->where('status', 0)->take(7) as $cam_products)
                    @php $product = $cam_products->cam_products; @endphp
                    <div class="product">
                        @php $typeid = $product->slug; @endphp
                        <div class="product-wrapper" @if (setting('is_point') == 1) style="height: 355px;" @endif>
                            <div class="pin">
                                <div class="thumbnail">
                                    <a href="{{ route('product.cam.details', $cam_products->id) }}">
                                        <img src="@if (file_exists(public_path() . '/uploads/product/' . $product->image)){{ asset('uploads/product/' . $product->image) }}@else{{ asset('/icon/no-img-cat.png') }}@endif" alt="{{ $product->title }}">
                                    </a>
                                </div>
                                <div class="details mt-2" style="padding-top:0 !important">
                                    @include('frontend.partial.index.campaign_section_part.rating_camp_section')
                                    <a href="{{ route('product.cam.details', $cam_products->id) }}">
                                        <h5>{{ mb_strlen($product->title) > 32 ? mb_substr($product->title, 0, setting('product_grid_title_character_counts') ?? 32) . '...' : $product->title }}</h5>
                                    </a>
                                    <h6>
                                        <strong style="color: var(--primary_color)">৳{{ $cam_products->price ?? ($product->discount_price ?? $product->regular_price) }}</strong>
                                        @if ($cam_products->price > 0 || $product->discount_price > 0)<del>৳{{ $product->regular_price }}</del>@endif
                                    </h6>
                                </div>
                                <div class="quick-view"> <a href="{{ route('product.cam.details', $cam_products->id) }}">
                                    <i class="icofont icofont-search"></i> Quick View</a>
                                </div>
                            </div>
                            @php
                                $hw = App\Models\wishlist::where('product_id', $product->id)
                                    ->where('user_id', auth()->id())
                                    ->first();
                                if ($hw) {
                                    $color = '#54c8ec';
                                } else {
                                    $color = '#a2acb5';
                                }
                            @endphp
                            <div class="home-add2 d-block" style="display:block !important">
                                <div class="cbtn d-block">
                                    @if ($product->quantity <= '0')
                                        <a href="{{ route('product.details', $product->slug) }}" class="redirect" style="margin-top: 10px;background: red;color: white;border-color: red;">Pre Order</a>
                                    @else
                                        <button 
                                            type="submit" 
                                            id="campProductInfo_{{ $product->id }}" 
                                            class="redirect campProductInfoAddToCart" 
                                            style="margin-top: 10px;" 
                                            data-url="{{ route('camp.product.info', $cam_products->id) }}" 
                                            title="Add To Cart">
                                            <i class="fal fa-shopping-cart" aria-hidden="true"></i>
                                        </button>
                                    @endif
                                    <form action="{{ route('wishlist.add') }}" method="post" id="submit_payment_form{{ $typeid }}">
                                        @csrf
                                        <input type="hidden" name="product_id" value="{{ $product->slug }}">
                                        <button style="margin-top: 5px;background:{{ $color }}" class="redirect" type="submit" title="Wishlist"><i class="fal fa-heart" aria-hidden="true"></i> </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endforeach

@push('js')
<script>

    // Event listeners
    $(document).on('click', '.campProductInfoAddToCart', function (e) {
        e.preventDefault();
        updateFormMode('cart');
        productInfoPopUp($(this).data('url'), 'cart');
    });

    $(document).ready(function(){
        $('.camp_slides').slick({
            slidesToShow: 6,       // Number of slides to show at a time
            slidesToScroll: 1,     // Number of slides to scroll at once
            autoplay: true,        // Autoplay functionality
            autoplaySpeed: 1500,   // Autoplay speed in milliseconds
            dots: false,            // Enable dots for navigation
            arrows: false,          // Enable next/previous arrows
            infinite: true,        // Infinite loop
            centerMode: false,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                }
            ]
        });
    });
</script>
@endpush
