@extends('layouts.front')
@section('content')
<!--Block 01: Main slide-->
<div class="main-slide block-slider">
    <ul class="biolife-carousel nav-none-on-mobile"
        data-slick='{"arrows": true, "dots": false, "slidesMargin": 0, "slidesToShow": 1, "infinite": true, "speed": 800}'>
        @foreach ($Banners as $Banner)
             <li>
                <div class="slide-contain slider-opt03__layout01">
                    <div class="media">
                        <div class="child-elememt">
                            <a href="#" class="link-to">
                                <img src="{{ $Banner->imageUrl }}" width="604" height="580" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="text-content">
                        <i class="first-line">{{ $Banner->discount_text }}</i>
                        <h3 class="second-line">{{ $Banner->title }}</h3>
                        <p class="third-line">{{$Banner->description}}</p>
                        <p class="buttons">
                            {{-- <a href="#" class="btn btn-bold">Shop now</a> --}}
                            @if($Banner->link) <a href="{{ $Banner->link }}" class="btn btn-thin">{{ $Banner->button?? "Shop now" }}</a> @endif
                        </p>
                    </div>
                </div>
            </li>
        @endforeach


    </ul>
</div>

<div style="padding-top:3rem;"
    class="product-tab z-index-20 sm-margin-top-193px xs-margin-top-30px">
    <div class="container">
        <div class="biolife-title-box" style="padding-bottom: 2rem;">
            <span class="subtitle">All the best Products</span>
            <h3 class="main-title">Product Categories</h3>
        </div>
        <ul class="biolife-carousel nav-center-bold nav-none-on-mobile" data-slick='{
            "rows":1,
            "arrows":true,
            "dots":false,
            "infinite":false,
            "speed":400,
            "slidesMargin":30,
            "slidesToShow":4,
            "responsive":[
                {"breakpoint":1200, "settings":{ "slidesToShow": 4 }},
                {"breakpoint":992, "settings":{ "slidesToShow": 3 }},
                {"breakpoint":768, "settings":{ "slidesToShow": 2, "slidesMargin":10 }},
                {"breakpoint":450, "settings":{ "slidesToShow": 1, "slidesMargin":10 }}
            ]
        }'>
            @foreach ($ProductCategoies as $ProductCategory)
                <li>
                    <a href="{{ route('products',$ProductCategory->id) }}">
                        <div class="biolife-brd-container text-center p-3 bg-white rounded shadow">
                            <figure><img src="{{ $ProductCategory->imageUrl }}"  style="height: 150px; object-fit: contain; width: 100%;"
                                    alt="{{ $ProductCategory->title }}" loading="lazy"></figure>
                            <h4 class="mt-2 text-lg font-semibold" style="color: #e11600">{{ $ProductCategory->title }}</h4>
                            <p class="text-sm text-gray-600" style="color: white">{{ $ProductCategory->description }}</p>
                        </div>
                    </a>
                </li>
            @endforeach
        </ul>
        {{-- <ul class="biolife-carousel nav-center-bold nav-none-on-mobile" data-slick='{
    "rows": 1,
    "arrows": true,
    "dots": false,
    "infinite": false,
    "speed": 400,
    "slidesMargin": 30,
    "slidesToShow": 4,
    "responsive": [
        { "breakpoint": 1200, "settings": { "slidesToShow": 4 }},
        { "breakpoint": 992,  "settings": { "slidesToShow": 3 }},
        { "breakpoint": 768,  "settings": { "slidesToShow": 2, "slidesMargin": 10 }},
        { "breakpoint": 450,  "settings": { "slidesToShow": 1, "slidesMargin": 10 }}
    ]
}'>
    @foreach ($ProductCategoies as $ProductCategory)
        <li class="px-2">
            <a href="{{ route('products', $ProductCategory->id) }}" class="text-decoration-none">
                <div class="biolife-brd-container bg-white rounded shadow-sm p-3 text-center h-100 d-flex flex-column justify-content-between">

                    <figure class="mb-3">
                        <img src="{{ $ProductCategory->imageUrl }}"
                             alt="{{ $ProductCategory->title }}"
                             class="img-fluid"
                             loading="lazy"
                             style="height: 150px; object-fit: contain; width: 100%;">
                    </figure>

                    <h4 class="text-danger fs-6 fw-semibold mb-2">
                        {{ $ProductCategory->title }}
                    </h4>

                    @if(!empty($ProductCategory->description))
                        <p class="text-muted small mb-0">
                            {{ \Illuminate\Support\Str::limit($ProductCategory->description, 60) }}
                        </p>
                    @endif
                </div>
            </a>
        </li>
    @endforeach
</ul> --}}

    </div>
</div>


{{-- banner --}}

<div class="banner-promotion-02 z-index-0" style="margin-top: 15rem;">
    <div class="biolife-banner promotion2 biolife-banner__promotion2">
        <div class="banner-contains">
            <div class="container">
                {{-- <div class="media"></div> --}}
                <div class="text-content">
                    {{-- <b class="first-line">Food Heaven Made</b> --}}
                    {{-- <span class="second-line">Easy <i>Healthy, Happy Life</i></span> --}}
                    <span class="second-line" style="color: white; font-weight: bold;">Premium Safety
                        Equipment Shop Deals Today</span>
                    <p class="third-line" style="color: white;">Certified safety gear at competitive
                        prices.</p>
                    <p class="buttons">
                        <a href="#" class="btn btn-bold">Read More</a>
                        <a href="#" class="btn btn-thin" style="color: white;">View Menu Now</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>



<!--Block 03: Product Tab-->
<div class="product-tab z-index-20 sm-margin-top-193px xs-margin-top-30px" style="margin-top:3rem;">
    <div class="container">
        <div class="biolife-title-box">
            <span class="subtitle">All the best item for You</span>
            <h3 class="main-title">Products</h3>
        </div>
        <div class="biolife-tab biolife-tab-contain sm-margin-top-34px">
            <div class="tab-content">
                <div id="tab01_1st" class="tab-contain active">
                    <ul class="products-list biolife-carousel nav-center-02 nav-none-on-mobile eq-height-contain"
                        data-slick='{"rows":2 ,"arrows":true,"dots":false,"infinite":true,"speed":400,"slidesMargin":10,"slidesToShow":4, "responsive":[{"breakpoint":1200, "settings":{ "slidesToShow": 4}},{"breakpoint":992, "settings":{ "slidesToShow": 3, "slidesMargin":25 }},{"breakpoint":768, "settings":{ "slidesToShow": 2, "slidesMargin":15}}]}'>
                        @foreach ($Products as $Product)
                            <li class="product-item">
                                <div class="contain-product layout-default">
                                    <div class="product-thumb">
                                        <a href="{{ route('view_product',$Product->slug) }}" class="link-to-product">
                                            <img src="{{ $Product->imageUrl }}" alt="Vegetables"
                                                style="height: 200px; object-fit: contain; width: 100%;" class="product-thumnail">
                                        </a>
                                        <a class="lookup btn_call_quickview" href="{{ route('view_product',$Product->slug) }}"><i
                                                class="biolife-icon icon-search"></i></a>
                                    </div>
                                    <div class="info">
                                        <b class="categories">{{ $Product->Category->title }}</b>
                                        <h4 class="product-title"><a href="{{ route('view_product',$Product->slug) }}" class="pr-name">{{$Product->title}}</a></h4>
                                        <div class="price ">
                                            {{-- <ins><span class="price-amount"><span
                                                        class="currencySymbol">£</span>85.00</span></ins>
                                            <del><span class="price-amount"><span
                                                        class="currencySymbol">£</span>95.00</span></del> --}}
                                        </div>
                                        {{-- <div class="slide-down-box"> --}}
                                            <p class="message">{{$Product->description}}</p>

                                            <div class="buttons">
                                                   <a href="#" onclick="AddToCart({{ $Product->id }},1); return false;"
       style="background: linear-gradient(135deg, #1e90ff, #3742fa);
              color: white;
              padding: 10px 20px;
              border-radius: 30px;
              text-decoration: none;
              font-size: 16px;
              font-weight: bold;
              text-transform: uppercase;
              box-shadow: 0 4px 8px rgba(0,0,0,0.2);
              display: flex;
              align-items: center;">
        <i class="fa fa-cart-arrow-down" aria-hidden="true" style="margin-right: 8px;"></i>
        Add to Cart
    </a>
                                                {{-- <a href="#" class="btn wishlist-btn"><i class="fa fa-heart"
                                                        aria-hidden="true"></i></a>
                                                <a href="#" class="btn add-to-cart-btn" style="background-color: black"><i class="fa fa-cart-arrow-down"
                                                        aria-hidden="true"></i>add
                                                    to cart</a>
                                                <a href="#" class="btn compare-btn"><i class="fa fa-random"
                                                        aria-hidden="true"></i></a> --}}
                                            </div>
                                            {{-- <div class="buttons" style="display: flex; gap: 10px; align-items: center; justify-content: flex-start;">

    <!-- Wishlist Button -->
    <a href="#"
       style="background: linear-gradient(135deg, #ff6b81, #ff4757);
              color: white;
              padding: 10px 12px;
              border-radius: 50%;
              text-align: center;
              text-decoration: none;
              font-size: 18px;
              box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
        <i class="fa fa-heart" aria-hidden="true"></i>
    </a>

    <!-- Add to Cart Button -->
    <a href="#" onclick="AddToCart({{ $Product->id }},1); return false;"
       style="background: linear-gradient(135deg, #1e90ff, #3742fa);
              color: white;
              padding: 10px 20px;
              border-radius: 30px;
              text-decoration: none;
              font-size: 16px;
              font-weight: bold;
              text-transform: uppercase;
              box-shadow: 0 4px 8px rgba(0,0,0,0.2);
              display: flex;
              align-items: center;">
        <i class="fa fa-cart-arrow-down" aria-hidden="true" style="margin-right: 8px;"></i>
        Add to Cart
    </a>

    <!-- Compare Button -->
    <a href="#"
       style="background: linear-gradient(135deg, #2ed573, #1abc9c);
              color: white;
              padding: 10px 12px;
              border-radius: 50%;
              text-align: center;
              text-decoration: none;
              font-size: 18px;
              box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
        <i class="fa fa-random" aria-hidden="true"></i>
    </a>

</div> --}}

                                        {{-- </div> --}}
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


<!--Block 05: Banner Promotion 02-->
<div class="banner-promotion-02 z-index-0" style="margin-top: 15rem;">
    <div class="biolife-banner promotion2 biolife-banner__promotion2">
        <div class="banner-contain">
            <div class="container">
                <div class="media"></div>
                <div class="text-content">
                    {{-- <b class="first-line">Food Heaven Made</b> --}}
                    {{-- <span class="second-line">Easy <i>Healthy, Happy Life</i></span> --}}
                    <span class="second-line" style="font-weight: bold;">Premium Safety
                        Equipment Shop Deals Today</span>
                    <p class="third-line" style="color: white;">Certified safety gear at competitive
                        prices.</p>
                    <p class="buttons">
                        <a href="#" class="btn btn-bold">Read More</a>
                        <a href="#" class="btn btn-thin" style="color: white;">View Menu Now</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>



<!--Block 07: Brands-->
<div class="brand-slide sm-margin-top-100px background-rgb(55 65 81) xs-margin-top-80px xs-margin-bottom-80px">
    <div class="container">
        <ul class="biolife-carousel nav-center-bold nav-none-on-mobile"
            data-slick='{"rows":1,"arrows":true,"dots":false,"infinite":false,"speed":400,"slidesMargin":30,"slidesToShow":4, "responsive":[{"breakpoint":1200, "settings":{ "slidesToShow": 4}},{"breakpoint":992, "settings":{ "slidesToShow": 3}},{"breakpoint":768, "settings":{ "slidesToShow": 2, "slidesMargin":10}},{"breakpoint":450, "settings":{ "slidesToShow": 1, "slidesMargin":10}}]}'>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-1.png" width="214" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-2.png" width="214" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-3.png" width="153" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-4.png" width="224" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-5.png" width="214" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-6.png" width="214" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-7.png" width="153" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-8.png" width="224" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-9.png" width="224" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-10.png" width="224" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-11.png" width="224" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
            <li>
                <div class="biolife-brd-container">
                    <a href="#" class="link">
                        <figure><img src="assets/images/home-03/companie-12.png" width="224" height="163" alt="">
                        </figure>
                    </a>
                </div>
            </li>
        </ul>
    </div>
</div>

<!--Block 08: Blog Posts-->


<div class="blog-posts sm-margin-top-93px sm-padding-top-72px xs-padding-bottom-50px">
    <div class="container">
        <div class="biolife-title-box">
            <span class="subtitle">The freshest and most exciting news</span>
            <h3 class="main-title">From the Blog</h3>
        </div>
        <ul class="biolife-carousel nav-center nav-none-on-mobile xs-margin-top-36px"
            data-slick='{"rows":1,"arrows":true,"dots":false,"infinite":false,"speed":400,"slidesMargin":30,"slidesToShow":3, "responsive":[{"breakpoint":1200, "settings":{ "slidesToShow": 3}},{"breakpoint":992, "settings":{ "slidesToShow": 2}},{"breakpoint":768, "settings":{ "slidesToShow": 1}}]}'>
           @foreach ($Blogs as $Blog)
            <li>
                <div class="post-item"
                    style="background: #hsl(217.2 32.6% 17.5%); border-radius: 18px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); width: 350px; height: 480px; display: flex; flex-direction: column; overflow: hidden; margin: 0 auto;">
                    <div class="thumbnail"
                        style="height: 200px; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative;">
                        <a href="#" class="link-to-post">

                            <img src="{{ $Blog->bannerUrl }}" width="320" height="200" alt=""

                                style="object-fit: contain; max-width: 100%; max-height: 100%;">
                        </a>
                        <div class="post-date"
                            style="position: absolute; top: 18px; left: 18px; background: #2563eb; color: #fff; border-radius: 8px; padding: 6px 12px; font-size: 14px;">
                            <span class="date">{{date('d',strtotime($Blog->created_at))}}</span>
                            <span class="month" style="text-transform: uppercase;">{{date('F',strtotime($Blog->created_at))}}</span>
                        </div>
                    </div>
                    <div class="post-content"
                        style="padding: 18px 18px 12px 18px; flex: 1; display: flex; flex-direction: column;">
                        <h4 class="post-name" style="font-size: 18px; font-weight: 700; margin-bottom: 10px;">
                            <a href="#" class="linktopost" style="color: white; text-decoration: none;">
                               {{$Blog->title}}</a>
                        </h4>
                        <div class="post-meta"
                            style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                            <a href="#" class="post-meta__item author"
                                style="display: flex; align-items: center; gap: 5px;">
                                <img src="assets/images/home-03/post-author.png" width="28" height="28" alt=""
                                    style="border-radius: 50%;">
                                <span style="font-size: 13px; color: #2563eb;"> {{$Blog->User->name}}</span>
                            </a>
                            {{-- <a href="#" class="post-meta__item btn liked-count"
                                style="font-size: 13px; color: #64748b;">2<span
                                    class="biolife-icon icon-comment"></span></a>
                            <a href="#" class="post-meta__item btn comment-count"
                                style="font-size: 13px; color: #64748b;">6<span
                                    class="biolife-icon icon-like"></span></a> --}}
                            <div class="post-meta__item post-meta__item-social-box" style="margin-left: auto;">
                                <span class="tbn"><i class="fa fa-share-alt" aria-hidden="true"></i></span>
                            </div>
                        </div>
                        <p class="excerpt" style="font-size: 14px; color: white; margin-bottom: 18px; flex: 1;">
                            {{$Blog->para1}}
                        </p>
                        {{-- <div class="group-buttons" style="margin-top: auto;">
                            <a href="#" class="btn readmore"
                                style="background:  #hsl(217.2 32.6% 17.5%); color: #fff; border-radius: 20px; padding: 8px 18px; font-size: 15px; font-weight: 600; border: none; text-decoration: none;">continue
                                reading</a>
                        </div> --}}
                    </div>
                </div>
            </li>
            @endforeach
        </ul>
    </div>

</div>
@endsection