@extends('front_end.template.layout')
@section('content')
<style>
    
    .shop-listview-drawer .collection-hero__image, 
    .shop-sub-collections .collection-hero__image, 
    .shop-top-filter .collection-hero__image { 
        background-image: url("{{ asset($workshop->banner_image) }}"); 
    }
    #load-more-services {

    align-items: center;
    gap: 1px; /* Adjust the value as needed */
}

#loaded-services-count, #total-services-count {
    margin-left: 2px; /* Optional: Add space between the count elements */
}

    
</style>
<!--Body Container-->
<div id="page-content">
                <!-- Collection Banner -->
                <div class="collection-header">
                    <div class="collection-hero medium mb-4 mb-lg-5">
                        <div class="collection-hero__image blur-up lazyload"></div>
                        <div class="collection-hero__title-wrapper container">
                            <h1 class="collection-hero__title medium">{{$workshop->name}}</h1>
                            <div class="breadcrumbs text-uppercase mt-1 mt-lg-2"><a href="{{ route('home') }}" title="Back to the home page">Home</a><span>|</span><span class="fw-bold">{{$workshop->name}}</span></div>
                        </div>
                    </div>
                </div>
                <!-- End Collection Banner -->

                <!--Most Popular-->
                <section class="section product-items pb-0">
                    <div class="container">

                        <!--Product List-->
                        <div class="product-load-more">
                            <!--Product Grid-->
                            <div class="grid-products grid--view-items">
                                <div class="row" id="servicegrid">
                                @if($services->isEmpty())
                                    <<div class="alert alert-warning text-center" role="alert">
                                        <i class="align-middle icon an an-cart icon-large me-2"></i><strong>No workshops availabe.</strong>
                                    </div>
                                @else
                                     @foreach ($services as $service)
                                    <div class="col-12 col-sm-6 col-md-4  item">
                                        <!--Start Product Image-->
                                        <div class="product-image">
                                            <!--Start Product Image-->
                                            <a href="{{ route('workshopdetail', $service->id) }}" class="product-img">
                                                <!--Image-->
                                                <img class="primary blur-up lazyload" data-src="{{ asset($service->image) }}" src="{{ asset($service->image) }}" alt="image" title="" width="800" height="960">
                                                <!--End image-->
                                                <!--Hover image-->
                                                <img class="hover blur-up lazyload" data-src="{{ asset($service->image) }}" src="{{ asset($service->image) }}" alt="image" title="" width="800" height="960">
                                                <!--End hover image-->
                                            </a>
                                            <!--end product image-->

                                            <!--Product Button-->
                                            <div class="button-set-bottom show-always position-absolute style1">
                                                <!--Cart Button-->
                                                <a class="btn-icon btn  rounded  bg-cream9 " href="{{ route('workshopdetail', $service->id) }}">
                                                    <i class="icon an an-cart-l"></i> <span>{{ \Carbon\Carbon::parse($service->from_date)->format('d M Y') }} - {{ \Carbon\Carbon::parse($service->to_date)->format('d M Y') }} - {{ \Carbon\Carbon::parse($service->from_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($service->to_time)->format('H:i') }}</span>
                                                </a>
                                                <!--End Cart Button-->
                                            </div>
                                            <!--End Product Button-->
                                        </div>
                                        <!--End Product Image-->
                                        <!--Start Product Details-->
                                        <div class="product-details text-center">
                                            <!--Product Name-->
                                            <div class="product-name text-uppercase">
                                                <a href="{{ route('workshopdetail', $service->id) }}">{{ $service->name }}</a>
                                            </div>
                                            <!--End Product Name-->
                                            <!--Product Price-->
                                            <div class="product-price">
                                                <span class="price">AED {{ $service->service_price }} </span>
                                            </div>
                                        </div>
                                        <!--End Product Details-->
                                    </div>
                                    @endforeach
                                @endif
                                </div>
                            </div>
                            <!--End Product Grid-->

                            <!--Load More Button-->
                            <div class="infinitpaginOuter">
                                <div class="infinitpagin">	
                                @if($services->count() < $totalServices)
                                    <a href="#" class="btn rounded " id="load-more-services" data-offset="6">Load More <span id="loaded-services-count"> {{ $services->count() }}</span> / <span id="total-services-count">{{ $totalServices }}</span></a>
                                @endif
                                </div>
                            </div>
                            <!--End Load More Button-->
                        </div>
                        <!--End Product List-->
                    </div>
                </section>
                <!--End Most Popular-->
            </div>
            <!--End Body Container-->
@endsection