@extends("website.layouts.layout")
@section('title', "Home Page")
@section("body")
<!-- Stepper -->
@include("website.layouts.modal")
<style>
    .filled {
        color: #f2b600 !important;
    }

    /* Optionally, add a smooth fade-in effect on hover for thumbnails */
    .workimagethumbnail:hover {
        transform: scale(1.05);
    }

    .close {
        color: #fff;
        font-size: 40px;
        font-weight: bold;
        position: absolute;
        top: 10px;
        right: 25px;
        cursor: pointer;
    }
</style>
<section class="banner-services">
    <img class="banner-background-ellipse" src="{{asset('webAssets/assets/images/banner-bg-img.png')}}" alt="">
</section>

<!--- services section -->
<section class="services-breadcrumb-section">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb m-0">
                <li class="breadcrumb-item"><a href="{{route('homepage')}}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{route('services')}}">Services</a></li>
                <!-- <li class="breadcrumb-item"><a href="cleaning.html">Deep Cleaning</a></li> -->
                <li class="breadcrumb-item active" aria-current="page">Book Service</li>
            </ol>
        </nav>
    </div>
</section>

<section class="stepper">
    <div class="container">
        <div class="row stepper-block text-center justify-content-center">
            <div class="col-lg-3">
                <button type="button" class="btn-circle first-btn completed-state">
                    <span>1</span>
                </button>
                <div class="steps-text">Add Project Location</div>
            </div>
            <div class="col-lg-3">
                <button type="button" class="btn-circle second-btn active-state">
                    <span>2</span>
                </button>
                <div class="steps-text active">Choose Service <br> Provider & Rates</div>
            </div>
            <div class="col-lg-3">
                <button type="button" class="btn-circle next-state">
                    <span>3</span>
                </button>
                <div class="steps-text">Choose Date & Time</div>
            </div>
            <div class="col-lg-3">
                <button type="button" class="btn-circle last-btn">
                    <span>4</span>
                </button>
                <div class="steps-text">Confirm Details</div>
            </div>
        </div>
    </div>

</section>


<!-- Service Provider Selection -->


<section class="individual-block">
    <div class="container">
        <div class="individual-row">
            <div class="filter-right">
                <div class="filter-block">
                    <div class="filter-heading d-flex justify-content-between">
                        <h6>Filter</h6>
                        <button type="button" class="btn btn-secondary" id="clear-filters">Clear All</button>
                        <img id="filter_icon" onclick="showfilter()"
                            src="{{ asset('webAssets/assets/images/filter.svg') }}" alt="filter"
                            style="cursor: pointer;">

                    </div>


                    <!-- Accordion -->
                    <div class="accordion mt-3" id="filter-accordion">
                        <div class="accordion-item availability">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#availability-accordion" aria-expanded="true"
                                    aria-controls="availability-accordion">
                                    Availability
                                </button>
                            </h2>
                            <!-- Accordion section visible by default -->
                            <div id="availability-accordion" class="accordion-collapse collapse show">
                                <div class="accordion-body">
                                    <form class="boxed">
                                        <input type="radio" id="same" name="avl_filter" value="today" {{ request()->get('avl_filter') == 'today' ? 'checked' : '' }}>
                                        <label for="same">Same Day</label>

                                        <input type="radio" id="3days" name="avl_filter" value="three_day" {{ request()->get('avl_filter') == 'three_day' ? 'checked' : '' }}>
                                        <label for="3days">Within 3 Days </label>

                                        <input type="radio" id="week" name="avl_filter" value="week" {{ request()->get('avl_filter') == 'week' ? 'checked' : '' }}>
                                        <label for="week">Within a week </label>

                                        <input type="radio" id="month" name="avl_filter" value="month" {{ request()->get('avl_filter') == 'month' ? 'checked' : '' }}>
                                        <label for="month">Within a month</label>

                                        <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#custom-date">
                                            Custom date
                                        </button> -->
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item top-performer">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#top-performer-accordion" aria-expanded="false"
                                    aria-controls="top-performer-accordion">
                                    Top Performers
                                </button>
                            </h2>
                            <!-- Accordion section visible by default -->
                            <div id="top-performer-accordion" class="accordion-collapse collapse show">
                                <div class="accordion-body">
                                    <form class="boxed">
                                        <input type="radio" id="master" name="tp_filter" value="1" {{ request()->get('tp_filter') == '1' ? 'checked' : '' }}>
                                        <label for="master">Skill Masters</label>

                                        <input type="radio" id="deal" name="tp_filter" value="2" {{ request()->get('tp_filter') == '2' ? 'checked' : '' }}>
                                        <label for="deal">Great Deal</label>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item great-deal">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#price-accordion" aria-expanded="false"
                                    aria-controls="price-accordion">
                                    Price
                                </button>
                            </h2>
                            <!-- Accordion section visible by default -->
                            <div id="price-accordion" class="accordion-collapse collapse show">
                                <div class="accordion-body">
                                    <div data-role="main" class="ui-content">
                                        <div class="range-slider__display"
                                            style="display: ruby-text;margin-inline-start: -13px;margin-inline-end: 40px;">
                                            <span id="">Min</span>
                                            <span id="">Max</span>
                                        </div>
                                        <div class="range-slider">
                                            <!-- <input type="range" name="min_price_filter" min="1" max="100" step="1"
                                                value="{{ request()->get('min_price_filter', 1) }}"
                                                class="range-slider__input" />
                                            <input type="range" name="max_price_filter" min="1" max="100" step="1"
                                                value="{{ request()->get('max_price_filter', 100) }}"
                                                class="range-slider__input" /> -->
                                            <div class="custom_range_slider_container">
                                                <input type="range" min="0" max="{{$max_rate}}" id="minRange"
                                                    class="custom_slider custom_min_slider range-slider__input"
                                                    name="min_price_filter" min="1" max="{{$max_rate}}" step="1"
                                                    value="{{ request()->get('min_price_filter', 1) }}">
                                                <input type="range" min="0" max="{{$max_rate}}" id="maxRange"
                                                    class="custom_slider custom_max_slider range-slider__input"
                                                    name="max_price_filter" min="1" max="{{$max_rate}}" step="1"
                                                    value="{{ request()->get('max_price_filter', $max_rate) }}">
                                                <!-- <div class="range-values">
                                                    <span id="minValue">20</span> <span id="maxValue">80</span>
                                                </div> -->
                                            </div>

                                            <div class="range-slider__display">
                                                <span id="min-price-display"  class="range_slider_item">$0</span> 
                                                <span id="max-price-display"  class="range_slider_item">${{$max_rate}}</span>
                                            </div>
                                            <button type="button" class="btn btn-primary mt-2" id="apply-price">Apply
                                                Price</button>
                                        </div>


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

                </div>
            </div>

            <div class="individual-provider">
                <div class="individual-items">
                    <ul class="nav-buttons d-flex">
                        <div class="ul-action-btn d-flex flex-wrap">
                            <li>
                                <a type="button" id="individualbtn" class="btn btn-primary"
                                    onclick="hideBusiness()">Individual</a>
                            </li>
                            <li>
                                <a type="button" id="bussinessbtn" class="btn btn-secondary"
                                    onclick="hideIndividual()">Business</a>
                            </li>
                        </div>

                    </ul>
                    <div class="individual-wrapper-items">
                        <div class="individual-inner-items">
                            <div class="individual-text-col">
                                <h3 class="heading">Popular service provider</h3>
                                <p class="paragraph">No Worries! All Service Providers went through ID and criminal
                                    background <br> checks</p>
                            </div>

                        </div>

                        <div class="individual-sorted-items">
                            <p>Sorted by</p>
                            <div class="individual-recommended">
                                <select class="form-select" name="sort" aria-label="Default select example"
                                    id="sort-select">
                                    <option value="recommended" {{ request()->get('sort') == 'recommended' ? 'selected' : '' }}>Recommended
                                    </option>
                                    <option value="low_to_high" {{ request()->get('sort') == 'low_to_high' ? 'selected' : '' }}>Price: Low to
                                        High</option>
                                    <option value="high_to_low" {{ request()->get('sort') == 'high_to_low' ? 'selected' : '' }}>Price: High to
                                        Low</option>
                                    <option value="5_star_review" {{ request()->get('sort') == '5_star_review' ? 'selected' : '' }}>5 Star Review
                                    </option>
                                    <option value="most_projects" {{ request()->get('sort') == 'most_projects' ? 'selected' : '' }}>Completed
                                        Projects</option>
                                </select>
                            </div>
                        </div>


                        <div class="user-profile-row" id="individualDiv">
                            @if($service_providers['success']['data']['providers']['individual'])
                                                    @foreach($service_providers['success']['data']['providers']['individual'] as $provider)
                                <div class="user-profile">
                                    <div class="user-basic-details ser-profile">
                                        <img src="{{$provider['profile_image']}}" alt="ser-profile">
                                        <div class="user-profile-inner-details">
                                            <h5 class="user-name">

                                            
                                                {{ $provider['first_name'] }}
                                                {{ strtoupper(substr($provider['last_name'], 0, 1)) }}.
                                            </h5>

                                            <span class="skill">
                                                <p class="skill-set">
                                                    {{ $provider['badge'] ? $provider['badge'] : 'No Badge' }}
                                                </p>
                                            </span>
                                            <span class="review"><img src="{{asset('webAssets/assets/images/star.svg')}}"
                                                    alt="">

                                                <p class="provider-reviews-para"> {{ $provider['total_stars'] }}
                                                    ({{ $provider['total_reviews'] }} Reviews)</p>
                                            </span>
                                            <p class="fees "> <span> Minimum Fee:</span> {{ $provider['hours'] }} Hours</p>

                                        </div>
                                        <div class="working-cost">
                                            <p class="cost">$ {{$provider['rate']}}/hr</p>
                                        </div>

                                    </div>
                                    <div class="users-completed-jobs">
                                        <div class="users-job-details">
                                            <span><img src="{{asset('webAssets/assets/images/job-img.svg')}}"
                                                    alt="job-icon"></span>
                                            <div class="users-text-col">
                                                <h6 class="heading">{{$provider['totalProject']}} Jobs
                                                    completed</h6>
                                                <p class="paragraph">{{$provider['totalProject']}}
                                                    {{$provider['sub_category_name']}} jobs completed overall
                                                </p>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="users-skills">
                                        <div class="users-skill-details">
                                            <span>
                                                <img src="{{ asset('webAssets/assets/images/skills-icon.svg') }}"
                                                    alt="job-icon">
                                            </span>
                                            <div class="users-text-col">
                                                <h6 class="heading">Skills</h6>
                                                <p class="paragraph">
                                                    @php
                                                        $categories = $provider['additional_details']['categories'];
                                                        $categoryNames =
                                                            collect($categories)->pluck('category_name')->unique()->implode(', ');
                                                    @endphp
                                                    {{ $categoryNames }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="user-exp-details">
                                        <p class="paragraph">{{$provider['bio']}}</p>
                                    </div>
                                    <div class="view-profile-modal">
                                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
                                            data-bs-target="#viewProfileModal{{$provider['id']}}">
                                            View Profile
                                        </button>

                                        <div class="view-profile-action-button">
                                            <a href="{{route('choose.dateAndTime', $provider['id'])}}" type="button"
                                                class="btn btn-primary"> Select & Continue</a>
                                        </div>

                                    </div>


                                </div>
                    <div class="view-profile-modal">
                        <div class="modal fade" id="viewProfileModal{{$provider['id']}}"
                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                            aria-labelledby="viewProfileModalLabel{{$provider['id']}}" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-scrollable">
                                <div class="modal-content reviews d-flex flex-column gap-8px">
                                    <div class="modal-header align-items-start">
                                        <div class="modal-title fs-5 w-100"
                                            id="viewProfileModalLabel{{$provider['id']}}">
                                            <div class="user-basic-details ser-profile d-flex gap-8px">
                                                <img src="{{ $provider['profile_image'] ? asset($provider['profile_image']) : asset('nophoto.jpg') }}"
                                                    alt="user-profile">
                                                <!-- <img src="./assets/images/user-profile.png" alt="user-profile"> -->
                                                <div class="user-profile-modal-inner w-100">
                                                    <div class="user-profile-inner-details">


                                                        <h5 class="user-name">
                                                            {{ $provider['first_name'] }}
                                                            {{ strtoupper(substr($provider['last_name'], 0, 1)) }}.
                                                        </h5>
                                                        <h6 class="user-name category-col blue-color">
                                                            {{ $provider['category_name'] ?? '' }}

                                                        </h6>
                                                        <h6 class="user-name category-col blue-color">
                                                            {{ $provider['sub_category_name'] ?? ''}}

                                                        </h6>
                                                        <span class="skill">
                                                            {{ $provider['badge'] ? $provider['badge'] : 'No Badge' }}
                                                            <p class="skill-set">
                                                                Top 5</p>
                                                        </span>

                                                        <div
                                                            class="star-rating d-flex  gap-8px align-items-center">

                                                            <input id="star-5" type="radio" name="rating"
                                                                value="star-5" />
                                                            <label for="star-5" class="single-star"
                                                                title="5 stars">
                                                                <i class="active fa fa-star"
                                                                    aria-hidden="true"></i>
                                                            </label>
                                                            <p class="provider-reviews-para">
                                                                {{ $provider['total_stars'] }}
                                                                ({{ $provider['total_reviews'] }} Reviews)
                                                            </p>
                                                        </div>

                                                    </div>

                                                    <div class="provider-pricing">
                                                        <h3 class="heading">$ {{$provider['rate']}}/hr</h3>

                                                    </div>
                                                </div>

                                            </div>


                                        </div>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>


                                    </div>

                                    <div class="working-details-block my-2">
                                        <div class="working-details-items">
                                            <h4 class="heading">$
                                                {{ $provider['additional_details']['sp_rate'] > 0 ? $provider['additional_details']['sp_rate'] : 0 }}
                                            </h4>
                                            <p class="para">Per Hour</p>

                                        </div>

                                        <!-- Conditions Needs to be change for below two divs as per the need -->

                                        <div class="working-details-items">
                                            <h4 class="heading">
                                                {{ $provider['hours'] > 0 ? $provider['hours'] : 0 }}
                                            </h4>
                                            <p class="para">Hour Required</p>

                                        </div>
                                        <div class="working-details-items">
                                            <h4 class="heading">
                                                {{ $provider['additional_details']['total_job_completed'] > 0 ? $provider['additional_details']['total_job_completed'] : 0 }}
                                            </h4>
                                            <p class="para">Job completed</p>

                                        </div>
                                    </div>

                                    <div class="modal-body user-profile-body">
                                        <div class="accordion reviews d-flex flex-column gap-8px"
                                            id="reviewsAccordion">
                                            @if ($provider['additional_details']['categories'])
                                                <h6 class="">
                                                    {{ $provider['first_name'] }}
                                                    {{ strtoupper(substr($provider['last_name'], 0, 1)) }}.
                                                    Can help
                                                </h6>
                                            @endif

                                            @foreach ($provider['additional_details']['categories'] as $cat)
                                                <div class="accordion-item border-bottom commented-reviews">

                                                    <h2 class="accordion-header">

                                                        <button class="accordion-button collapsed" type="button"
                                                            data-bs-toggle="collapse"
                                                            data-bs-target="#reviews{{$cat['category_id']}}"
                                                            aria-expanded="true"
                                                            aria-controls="reviews{{$cat['category_id']}}"
                                                            style="color:  var(--blue-color);">
                                                            {{$cat['category_name']}}
                                                        </button>

                                                        <div class="rating-cost d-flex gap-24px">
                                                            <p class="fw-light font-size-14">$ {{$cat['rate']}}/hr
                                                            </p>
                                                            <div
                                                                class="star-rating d-flex gap-8px flex-row-reverse">
                                                                
                                                                <p class="fw-light font-size-14">
                                                                    {{$cat['total_stars']}}({{$cat['total_reviews']}}
                                                                    Reviews)
                                                                </p>
                                                                <input id="star-5" type="radio" name="rating"
                                                                    value="star-5" />
                                                                <label for="star-5" class="single-star"
                                                                    title="5 stars">
                                                                    <i class="active fa fa-star"
                                                                        aria-hidden="true"></i>
                                                                </label>

                                                            </div>

                                                        </div>
                                                            <div class="reviews-action-btn m-2">
                                                                <a type="button" style="padding:4px 35px;"
                                                                    href="{{route('choose.dateAndTime', ['sp_id' => $provider['id']]) }}"
                                                                    class="btn btn-secondary">
                                                                    Book Now
                                                                </a>
                                                            </div>
                                                    </h2>
                                                    <div id="reviews{{$cat['category_id']}}"
                                                        class="accordion-collapse collapse"
                                                        data-bs-parent="#reviewsAccordion">
                                                        <div class="accordion-body d-flex flex-column gap-8px">


                                                            <div class="">
                                                                {{$cat['description']}}
                                                            </div>




                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach

                                                                <div class="aboutblock">
                                                                    <h3 class="font-size-16">About</h3>
                                                                    <p class="para">{{ $provider['bio'] }}</p>
                                                                </div>


                                                                <hr>

                                                                <div class="highlight-block d-flex flex-column gap-8px">
                                                                    <div
                                                                        class="highlight-tool-block d-flex gap-8px align-items-center">
                                                                        <span class="tool job-img-icon">
                                                                            <img src="{{asset('webAssets/assets/images/tool-img.png')}}"
                                                                                alt="tool-img">

                                                                        </span>
                                                                        <p class="para">
                                                                            <span class="grey-color fw-bold">Tools:</span>
                                                                            @if(
                                                                                    count($provider['additional_details']['toolNames'])
                                                                                    > 0
                                                                                )
                                                                                                                                                                                                                        {{ implode(', ', $provider['additional_details']['toolNames']) }}
                                                                            @else
                                                                                No tools available
                                                                            @endif
                                                                        </p>
                                                                    </div>

                                                <div
                                                    class="highlight-language-block d-flex gap-8px align-items-center">
                                                    <span class="tool job-img-icon"><img
                                                            src="{{asset('webAssets/assets/images/tool-img.png')}}"
                                                            alt="tool-img"></span>


                                                    <p class="para"><span class="grey-color fw-bold">Languages:
                                                        </span>
                                                        @if(
                                                                count($provider['additional_details']['language_name'])
                                                                > 0
                                                            )
                                                                            {{ implode(', ', $provider['additional_details']['language_name']) }}
                                                                        @else
                                                                            No language available
                                                                        @endif
                                                                    </p>
                                                                </div>
                                                                <div
                                                                    class="highlight-language-block d-flex gap-8px align-items-center">
                                                                    <span class="tool job-img-icon"><img
                                                                            src="{{asset('webAssets/assets/images/tool-img.png')}}"
                                                                            alt="tool-img"></span>


                                                                    <p class="para"><span class="grey-color fw-bold">Allergies:
                                                                        </span>
                                                                        @if(
                                                                                count($provider['additional_details']['allergies'])
                                                                                > 0
                                                                            )
                                                                                                                                                                                                                           {{ implode(', ', $provider['additional_details']['allergies']) }}
                                                            @else
                                                                No language available
                                                            @endif
                                                        </p>
                                                    </div>
                                                </div>

                                                <hr>
                                                <div class="project-images d-flex flex-column ">
                                                    <div class="project-images-text-col">
                                                        <h3 class="font-size-18">Work Images</h3>
                                                    </div>

                                                    <div
                                                        class="project-images-img-col pro-img-col d-flex newproject-images-img-col">
                                                        @foreach($provider['additional_details']['all_work_images'] as $key => $image)
                                                            <img src="{{ $image['img'] }}" class="workimagethumbnail"
                                                                alt="Work Images" data-index="{{ $key }}">
                                                        @endforeach
                                                    </div>
                                                </div>

                                                <hr>

                                                <div class="project-linking" href="">
                                                    <div
                                                        class="project-header-item d-flex align-items-center gap-8px justify-space-between">
                                                        <h3 class=" font-size-24">Reviews</h3>
                                                        <div class="project-header-item gap-8px" id="filter-btnsss">
                                                            <a href="{{ route('sp.providerReviews', ['sp_id' => $provider['id']]) }}"
                                                                target="_blank">
                                                                <img src="{{ asset('webAssets/assets/images/lets-icons_filter.png') }}"
                                                                    alt="Filter"> </a>
                                                        </div>
                                                    </div>

                                                    <div class="reviews-block">
                                                        <div class="reviews-rating d-flex">
                                                            <div
                                                                class="reviews-rating-items d-flex flex-column gap-8px">
                                                                <!-- 5 Star Rating -->
                                                                <div
                                                                    class="reviews-rating-inner d-flex align-items-center">
                                                                    <div class="star-rating">
                                                                        <input id="star-5" type="radio"
                                                                            name="rating" value="star-5" />
                                                                        <label for="star-5" class="single-star"
                                                                            title="5 stars">
                                                                            <i class="active fa fa-star"
                                                                                aria-hidden="true"></i>
                                                                            <span class="grey-color">5</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="progress-bar"
                                                                        style="width: {{ isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews']) && $provider['additional_details']['data']['success']['total_reviews'] > 0 ? ($provider['additional_details']['data']['success']['star_counts'][5] / $provider['additional_details']['data']['success']['total_reviews']) * 100 : 0 }}%; background-color: #2446c0;height: 6px;margin-left:10px">
                                                                    </div>
                                                                </div>

                                                                <!-- 4 Star Rating -->
                                                                <div
                                                                    class="reviews-rating-inner d-flex align-items-center">
                                                                    <div class="star-rating">
                                                                        <input id="star-4" type="radio"
                                                                            name="rating" value="star-4" />
                                                                        <label for="star-4" class="single-star"
                                                                            title="4 stars">
                                                                            <i class="active fa fa-star"
                                                                                aria-hidden="true"></i>
                                                                            <span class="grey-color">4</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="progress-bar"
                                                                        style="width: {{ isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews']) && $provider['additional_details']['data']['success']['total_reviews'] > 0 ? ($provider['additional_details']['data']['success']['star_counts'][4] / $provider['additional_details']['data']['success']['total_reviews']) * 100 : 0 }}%; background-color: #2446c0;height: 6px;margin-left:10px">
                                                                    </div>
                                                                </div>
                                                                <!-- 3 Star Rating -->
                                                                <div
                                                                    class="reviews-rating-inner d-flex align-items-center">
                                                                    <div class="star-rating">
                                                                        <input id="star-3" type="radio"
                                                                            name="rating" value="star-3" />
                                                                        <label for="star-3" class="single-star"
                                                                            title="3 stars">
                                                                            <i class="active fa fa-star"
                                                                                aria-hidden="true"></i>
                                                                            <span class="grey-color">3</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="progress-bar"
                                                                        style="width: {{ isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews']) && $provider['additional_details']['data']['success']['total_reviews'] > 0 ? ($provider['additional_details']['data']['success']['star_counts'][3] / $provider['additional_details']['data']['success']['total_reviews']) * 100 : 0 }}%; background-color: #2446c0;height: 6px;margin-left:10px">
                                                                    </div>
                                                                </div>
                                                                <!-- 2 Star Rating -->
                                                                <div
                                                                    class="reviews-rating-inner d-flex align-items-center">
                                                                    <div class="star-rating">
                                                                        <input id="star-2" type="radio"
                                                                            name="rating" value="star-2" />
                                                                        <label for="star-2" class="single-star"
                                                                            title="2 stars">
                                                                            <i class="active fa fa-star"
                                                                                aria-hidden="true"></i>
                                                                            <span class="grey-color">2</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="progress-bar"
                                                                        style="width: {{ isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews']) && $provider['additional_details']['data']['success']['total_reviews'] > 0 ? ($provider['additional_details']['data']['success']['star_counts'][2] / $provider['additional_details']['data']['success']['total_reviews']) * 100 : 0 }}%; background-color: #2446c0;height: 6px;margin-left:10px">
                                                                    </div>
                                                                </div>

                                                                <!-- 1 Star Rating -->
                                                                <div
                                                                    class="reviews-rating-inner d-flex align-items-center">
                                                                    <div class="star-rating">
                                                                        <input id="star-1" type="radio"
                                                                            name="rating" value="star-1" />
                                                                        <label for="star-1" class="single-star"
                                                                            title="1 star">
                                                                            <i class="active fa fa-star"
                                                                                aria-hidden="true"></i>
                                                                            <span class="grey-color">1</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="progress-bar"
                                                                        style="width: {{ isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews']) && $provider['additional_details']['data']['success']['total_reviews'] > 0 ? ($provider['additional_details']['data']['success']['star_counts'][1] / $provider['additional_details']['data']['success']['total_reviews']) * 100 : 0 }}%; background-color: #2446c0;height: 6px;margin-left:10px">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="reviews-rating-items">
                                                                <div
                                                                    class="total-ratings d-flex flex-column gap-8px align-items-end">
                                                                    @php 
                                                                                                                                                                                                                                                                                                                                                                                                              $average_rating = 0;
                                                            if (isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews'])) {
                                                                $average_rating = $provider['additional_details']['data']['success']['average_rating'];
                                                            }
                                                        @endphp
                                                        <p class="font-size-32 grey-color fw-bold">
                                                            {{ $average_rating ?? '0' }}
                                                        </p>
                                                        <div
                                                            class="rating-cost d-flex flex-column gap-8px">
                                                            <fieldset class="multi-rating">
                                                                <!-- 5 Star Rating -->
                                                                <input type="radio" id="star5"
                                                                    name="rating" value="5" {{ $average_rating >= 5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="full {{ $average_rating >= 5 ? 'filled' : '' }}"
                                                                    for="star5"
                                                                    title="Awesome - 5 stars"></label>

                                                                <!-- 4.5 Star Rating -->
                                                                <input type="radio" id="star4half"
                                                                    name="rating" value="4 and a half"
                                                                    {{ $average_rating >= 4.5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="half {{ $average_rating >= 4.5 ? 'filled' : '' }}"
                                                                    for="star4half"
                                                                    title="Pretty good - 4.5 stars"></label>

                                                                <!-- 4 Star Rating -->
                                                                <input type="radio" id="star4"
                                                                    name="rating" value="4" {{ $average_rating >= 4 ? 'checked' : '' }} />
                                                                <label
                                                                    class="full {{ $average_rating >= 4 ? 'filled' : '' }}"
                                                                    for="star4"
                                                                    title="Pretty good - 4 stars"></label>

                                                                <!-- 3.5 Star Rating -->
                                                                <input type="radio" id="star3half"
                                                                    name="rating" value="3 and a half"
                                                                    {{ $average_rating >= 3.5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="half {{ $average_rating >= 3.5 ? 'filled' : '' }}"
                                                                    for="star3half"
                                                                    title="Meh - 3.5 stars"></label>

                                                                <!-- 3 Star Rating -->
                                                                <input type="radio" id="star3"
                                                                    name="rating" value="3" {{ $average_rating >= 3 ? 'checked' : '' }} />
                                                                <label
                                                                    class="full {{ $average_rating >= 3 ? 'filled' : '' }}"
                                                                    for="star3"
                                                                    title="Meh - 3 stars"></label>

                                                                <!-- 2.5 Star Rating -->
                                                                <input type="radio" id="star2half"
                                                                    name="rating" value="2 and a half"
                                                                    {{ $average_rating >= 2.5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="half {{ $average_rating >= 2.5 ? 'filled' : '' }}"
                                                                    for="star2half"
                                                                    title="Kinda bad - 2.5 stars"></label>

                                                                <!-- 2 Star Rating -->
                                                                <input type="radio" id="star2"
                                                                    name="rating" value="2" {{ $average_rating >= 2 ? 'checked' : '' }} />
                                                                <label
                                                                    class="full {{ $average_rating >= 2 ? 'filled' : '' }}"
                                                                    for="star2"
                                                                    title="Kinda bad - 2 stars"></label>

                                                                <!-- 1.5 Star Rating -->
                                                                <input type="radio" id="star1half"
                                                                    name="rating" value="1 and a half"
                                                                    {{ $average_rating >= 1.5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="half {{ $average_rating >= 1.5 ? 'filled' : '' }}"
                                                                    for="star1half"
                                                                    title="Very poor - 1.5 stars"></label>

                                                                <!-- 1 Star Rating -->
                                                                <input type="radio" id="star1"
                                                                    name="rating" value="1" {{ $average_rating >= 1 ? 'checked' : '' }} />
                                                                <label
                                                                    class="full {{ $average_rating >= 1 ? 'filled' : '' }}"
                                                                    for="star1"
                                                                    title="Very poor - 1 star"></label>

                                                                <!-- 0.5 Star Rating -->
                                                                <input type="radio" id="star0half"
                                                                    name="rating" value="0 and a half"
                                                                    {{ $average_rating >= 0.5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="half {{ $average_rating >= 0.5 ? 'filled' : '' }}"
                                                                    for="star0half"
                                                                    title="Very poor - 0.5 stars"></label>
                                                            </fieldset>
                                                            <p class="font-size-14 grey-color">Based on
                                                                {{ $provider['additional_details']['data']['success']['total_reviews'] ?? 0 }}
                                                                ratings
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                            <hr>
                                            @if($provider['additional_details']['data']['success']['reviews'] ?? false)
                                                @foreach ($provider['additional_details']['data']['success']['reviews'] as $index => $review)
                                                                                            @if ($index < 4) <!-- Initially show only 4 reviews -->
                                                                                            <div class="review-comment-section text-start"
                                                                                                id="reviewsContainer-{{$provider['id']}}">
                                                                                                <div class="comment-header d-flex gap-8px mt-3">
                                                                                                    <div class="comment-img-col rev-user-img">
                                                                                                        <img src="{{ $review['client_profile'] ? asset($review['client_profile']) : asset('nophoto.jpg') }}"
                                                                                                            alt="user-img">
                                                                                                    </div>
                                                                                                    <div class="comment-text-col">
                                                                                                        @php
                                                                                                            // Check if client_name exists and is not empty
                                                                                                            $fullName = $review['client_name'] ?? 'Unknown';
                                                                                                            $nameParts = explode(' ', $fullName);

                                                                                                            // Get first name
                                                                                                            $firstName = $nameParts[0] ?? 'Unknown';

                                                                                                            // Get first letter of last name
                                                                                                            $lastNameInitial = isset($nameParts[1]) ?
                                                                                                                strtoupper(substr($nameParts[count($nameParts) - 1], 0, 1)) : '';
                                                                                                        @endphp

                                                                                                        <h3 class="font-size-18">{{ $firstName }}
                                                                                                            {{ $lastNameInitial }}
                                                                                                        </h3>

                                                                                                        <!-- <h4 class="font-size-14">{{ $review['category_name'] ?? 'Unknown' }}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </h4> -->
                                                                                                        <h4 class="font-size-14">
                                                                                                            {{ $review['sub_category_name'] ?? 'Unknown' }}
                                                                                                        </h4>
                                                                                                        <div
                                                                                                            class="star-rating gap-8px flex-row-reverse ">
                                                                                                            @for ($i = 5; $i >= 1; $i--)
                                                                                                                <input id="star{{ $loop->index }}{{ $i }}"
                                                                                                                    type="radio"
                                                                                                                    name="rating-{{ $loop->index }}"
                                                                                                                    value="star-{{ $i }}" {{ $review['star'] == $i ? 'checked' : '' }} />
                                                                                                                <label for="star{{ $loop->index }}{{ $i }}"
                                                                                                                    class="multi-star"
                                                                                                                    title="{{ $i }} stars">
                                                                                                                    <i class="{{ $review['star'] >= $i ? 'active' : '' }} fa fa-star"
                                                                                                                        aria-hidden="true"></i>
                                                                                                                </label>
                                                                                                            @endfor
                                                                                                            <p class="font-size-14 grey-color">
                                                                                                                {{ \Carbon\Carbon::parse($review['created_at'])->format('D, M j Y') }}
                                                                                                            </p>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="user-comment-details">
                                                                                                    <p class="paragraph">
                                                                                                        {{ $review['review'] ?? 'Unknown review' }}.
                                                                                                    </p>
                                                                                                </div>

                                                                                                <hr class="w-75">
                                                                                            </div>
                                                              @endif
                                                        @endforeach
                                                        <div id="allReviews-{{$provider['id']}}"
                                                        style="display:none;">
                                                        @foreach ($provider['additional_details']['data']['success']['reviews'] as $index => $review)
                                                                                                                @if ($index >= 4)
                                                                                                        <!-- Show the remaining reviews -->
                                                            <div class="comment-header d-flex gap-8px mt-3">
                                                                <div class="comment-img-col rev-user-img">
                                                                    <img src="{{ $review['client_profile'] ? asset($review['client_profile']) : asset('nophoto.jpg') }}"
                                                                                    alt="user-img">
                                                                            </div>
                                                                            <div class="comment-text-col">
                                                                                @php
                                                                                    // Check if client_name exists and is not empty
                                                                                    $fullName = $review['client_name'] ?? 'Unknown';
                                                                                    $nameParts = explode(' ', $fullName);

                                                                                    // Get first name
                                                                                    $firstName = $nameParts[0] ?? 'Unknown';

                                                                                    // Get first letter of last name
                                                                                    $lastNameInitial = isset($nameParts[1]) ?
                                                                                        strtoupper(substr($nameParts[count($nameParts) - 1], 0, 1)) : '';
                                                                                @endphp

                                                                                <h3 class="font-size-18">{{ $firstName }}
                                                                                    {{ $lastNameInitial }}
                                                                                </h3>

                                                                                <!-- <h4 class="font-size-14">{{ $review['category_name'] ?? 'Unknown' }}
                                                                                                                                                                                                                                                                                                                                                                                                                                    </h4> -->
                                                                                <h4 class="font-size-14">
                                                                                    {{ $review['sub_category_name'] ?? 'Unknown' }}
                                                                                </h4>

                                                                                <div
                                                                                    class="star-rating gap-8px flex-row-reverse">

                                                                                    @for ($i = 5; $i >= 1; $i--)
                                                                                        <input id="star{{ $loop->index }}{{ $i }}"
                                                                                            type="radio"
                                                                                            name="rating-{{ $loop->index }}"
                                                                                            value="star-{{ $i }}" {{ $review['star'] == $i ? 'checked' : '' }} />
                                                                                        <label for="star{{ $loop->index }}{{ $i }}"
                                                                                            class="multi-star"
                                                                                            title="{{ $i }} stars">
                                                                                            <i class="{{ $review['star'] >= $i ? 'active' : '' }} fa fa-star"
                                                                                                aria-hidden="true"></i>
                                                                                        </label>
                                                                                    @endfor
                                                                                    <p class="font-size-14 grey-color">
                                                                                        {{ \Carbon\Carbon::parse($review['created_at'])->format('D, M j Y') }}
                                                                                    </p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="user-comment-details">
                                                                            <p class="paragraph">
                                                                                {{ $review['review'] ?? 'Unknown review' }}.
                                                                            </p>
                                                                        </div>
                                                                        <hr class="w-75">
                                                                                            @endif
                                                                            @endforeach
                                                                        </div>

                                                            <!-- Load More Button -->
                                                            @if(count($provider['additional_details']['data']['success']['reviews']) > 4)

                                                                <div class="text-center mt-3">
                                                                    <button id="loadMoreBtn-{{$provider['id']}}"
                                                                        class="btn btn-primary">Load All</button>
                                                                    <button id="showLessBtn-{{$provider['id']}}"
                                                                        class="btn btn-secondary"
                                                                        style="display: none;">Show
                                                                        Less</button>
                                                                </div>
                                                            @endif
                                                        @endif
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="user-profile-modal-footer">

                                            </div>

                                        </div>
                                        <div class="modal-footer">
                                            <a type="button"
                                                href="{{ route('choose.dateAndTime', ['sp_id' => $provider['id']]) }}"
                                                class="btn btn-primary w-100">
                                                Select & Continue
                                            </a>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                                                    @endforeach
                            @else
                                <div class="user-profile" style="background:#e37676;">
                                    No Service provider found, please try with other filters !!
                                </div>
                            @endif

                        </div>

                        <div class="user-profile-row" id="businessDiv" style="display:none">
    @if($service_providers['success']['data']['providers']['business'])
        @foreach($service_providers['success']['data']['providers']['business'] as $provider)
            <div class="user-profile">
                <div class="user-basic-details ser-profile">
                    <img src="{{$provider['profile_image']}}" alt="ser-profile">
                    <div class="user-profile-inner-details">
                        <h5 class="user-name">{{$provider['business_name']}}</h5>
                        <span class="skill">
                            <p class="skill-set">
                                {{ $provider['badge'] ? $provider['badge'] : 'No Badge' }}
                            </p>
                        </span>
                        <span class="review"><img src="{{asset('webAssets/assets/images/star.svg')}}" alt="">
                            <p class="provider-reviews-para"> {{ $provider['total_stars'] }}
                                ({{ $provider['total_reviews'] }} Reviews)</p>
                        </span>
                        <p class="fees "> <span> Minimum Fee:</span> {{ $provider['hours'] }} Hours</p>
                    </div>
                    <div class="working-cost">
                        <p class="cost">$ {{$provider['rate']}}/hr</p>
                    </div>
                </div>
                
                <div class="users-completed-jobs">
                    <div class="users-job-details">
                        <span><img src="{{asset('webAssets/assets/images/job-img.svg')}}"
                                alt="job-icon"></span>
                        <div class="users-text-col">
                            <h6 class="heading">{{$provider['totalProject']}} Jobs
                                completed</h6>
                            <p class="paragraph">{{$provider['totalProject']}}
                                {{$provider['sub_category_name']}} jobs completed overall
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="users-skills">
                    <div class="users-skill-details">
                        <span>
                            <img src="{{ asset('webAssets/assets/images/skills-icon.svg') }}"
                                alt="job-icon">
                        </span>
                        <div class="users-text-col">
                            <h6 class="heading">Skills</h6>
                            <p class="paragraph">
                                @php
                                    $categories = $provider['additional_details']['categories'];
                                    $categoryNames =
                                        collect($categories)->pluck('category_name')->unique()->implode(', ');
                                @endphp
                                {{ $categoryNames }}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="user-exp-details">
                    <p class="paragraph">{{$provider['bio']}}</p>
                </div>
                
                <div class="view-profile-modal">
                    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
                        data-bs-target="#viewProfileModalBussiness{{$provider['id']}}">
                        View Profile
                    </button>

                    <div class="view-profile-action-button">
                        <a href="{{route('choose.dateAndTime', $provider['id'])}}" type="button"
                            class="btn btn-primary"> Select & Continue</a>
                    </div>
                </div>
            </div>
            
            <div class="view-profile-modal">
                <div class="modal fade" id="viewProfileModalBussiness{{$provider['id']}}"
                    data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                    aria-labelledby="viewProfileModalBussinessLabel{{$provider['id']}}" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-scrollable">
                        <div class="modal-content reviews d-flex flex-column gap-8px">
                            <div class="modal-header align-items-start">
                                <div class="modal-title fs-5 w-100"
                                    id="viewProfileModalBussinessLabel{{$provider['id']}}">
                                    <div class="user-basic-details ser-profile d-flex gap-8px">
                                        <img src="{{ $provider['profile_image'] ? asset($provider['profile_image']) : asset('nophoto.jpg') }}"
                                            alt="user-profile">
                                        <div class="user-profile-modal-inner w-100">
                                            <div class="user-profile-inner-details">
                                                <h5 class="user-name">{{$provider['business_name']}}</h5>
                                                <h6 class="user-name category-col blue-color">
                                                    {{ $provider['category_name'] ?? '' }}
                                                </h6>
                                                <h6 class="user-name category-col blue-color">
                                                    {{ $provider['sub_category_name'] ?? ''}}
                                                </h6>
                                                <span class="skill">
                                                    {{ $provider['badge'] ? $provider['badge'] : 'No Badge' }}
                                                    <p class="skill-set">
                                                        Top 5</p>
                                                </span>

                                                <div
                                                    class="star-rating d-flex  gap-8px align-items-center">

                                                    <input id="star-5" type="radio" name="rating"
                                                        value="star-5" />
                                                    <label for="star-5" class="single-star"
                                                        title="5 stars">
                                                        <i class="active fa fa-star"
                                                            aria-hidden="true"></i>
                                                    </label>
                                                    <p class="provider-reviews-para">
                                                        {{ $provider['total_stars'] }}
                                                        ({{ $provider['total_reviews'] }} Reviews)
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="provider-pricing">
                                                <h3 class="heading">$ {{$provider['rate']}}/hr</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>

                            <div class="working-details-block my-2">
                                <div class="working-details-items">
                                    <h4 class="heading">$
                                        {{ $provider['additional_details']['sp_rate'] > 0 ? $provider['additional_details']['sp_rate'] : 0 }}
                                    </h4>
                                    <p class="para">Per Hour</p>
                                </div>

                                <div class="working-details-items">
                                    <h4 class="heading">
                                        {{ $provider['hours'] > 0 ? $provider['hours'] : 0 }}
                                    </h4>
                                    <p class="para">Hour Required</p>
                                </div>
                                
                                <div class="working-details-items">
                                    <h4 class="heading">
                                        {{ $provider['additional_details']['total_job_completed'] > 0 ? $provider['additional_details']['total_job_completed'] : 0 }}
                                    </h4>
                                    <p class="para">Job completed</p>
                                </div>
                            </div>

                            <div class="modal-body user-profile-body">
                                <div class="accordion reviews d-flex flex-column gap-8px"
                                    id="reviewsAccordion">
                                    @if ($provider['additional_details']['categories'])
                                        <h6 class="">
                                            {{$provider['business_name']}}
                                            Can help
                                        </h6>
                                    @endif

                                    @foreach ($provider['additional_details']['categories'] as $cat)
                                        <div class="accordion-item border-bottom commented-reviews">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#reviews{{$cat['category_id']}}"
                                                    aria-expanded="true"
                                                    aria-controls="reviews{{$cat['category_id']}}"
                                                    style="color:  var(--blue-color);">
                                                    {{$cat['category_name']}}
                                                </button>

                                                <div class="rating-cost d-flex gap-24px">
                                                    <p class="fw-light font-size-14">$ {{$cat['rate']}}/hr
                                                    </p>
                                                    <div
                                                        class="star-rating d-flex gap-8px flex-row-reverse">
                                                        
                                                        <p class="fw-light font-size-14">
                                                            {{$cat['total_stars']}}({{$cat['total_reviews']}}
                                                            Reviews)
                                                        </p>
                                                        <input id="star-5" type="radio" name="rating"
                                                            value="star-5" />
                                                        <label for="star-5" class="single-star"
                                                            title="5 stars">
                                                            <i class="active fa fa-star"
                                                                aria-hidden="true"></i>
                                                        </label>
                                                    </div>
                                                </div>
                                                    <div class="reviews-action-btn m-2">
                                                        <a type="button" style="padding:4px 35px;"
                                                            href="{{route('choose.dateAndTime', ['sp_id' => $provider['id']]) }}"
                                                            class="btn btn-secondary">
                                                            Book Now
                                                        </a>
                                                    </div>
                                            </h2>
                                            <div id="reviews{{$cat['category_id']}}"
                                                class="accordion-collapse collapse"
                                                data-bs-parent="#reviewsAccordion">
                                                <div class="accordion-body d-flex flex-column gap-8px">
                                                    <div class="">
                                                        {{$cat['description']}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                    <div class="aboutblock">
                                        <h3 class="font-size-16">About</h3>
                                        <p class="para">{{ $provider['bio'] }}</p>
                                    </div>

                                    <hr>

                                    <div class="highlight-block d-flex flex-column gap-8px">
                                        <div
                                            class="highlight-tool-block d-flex gap-8px align-items-center">
                                            <span class="tool job-img-icon">
                                                <img src="{{asset('webAssets/assets/images/tool-img.png')}}"
                                                    alt="tool-img">
                                            </span>
                                            <p class="para">
                                                <span class="grey-color fw-bold">Tools:</span>
                                                @if(
                                                        count($provider['additional_details']['toolNames'])
                                                        > 0
                                                    )
                                                    {{ implode(', ', $provider['additional_details']['toolNames']) }}
                                                @else
                                                    No tools available
                                                @endif
                                            </p>
                                        </div>

                                        <div
                                            class="highlight-language-block d-flex gap-8px align-items-center">
                                            <span class="tool job-img-icon"><img
                                                    src="{{asset('webAssets/assets/images/tool-img.png')}}"
                                                    alt="tool-img"></span>

                                            <p class="para"><span class="grey-color fw-bold">Languages:
                                                </span>
                                                @if(
                                                        count($provider['additional_details']['language_name'])
                                                        > 0
                                                    )
                                                    {{ implode(', ', $provider['additional_details']['language_name']) }}
                                                @else
                                                    No language available
                                                @endif
                                            </p>
                                        </div>
                                        
                                        <div
                                            class="highlight-language-block d-flex gap-8px align-items-center">
                                            <span class="tool job-img-icon"><img
                                                    src="{{asset('webAssets/assets/images/tool-img.png')}}"
                                                    alt="tool-img"></span>

                                            <p class="para"><span class="grey-color fw-bold">Allergies:
                                                </span>
                                                @if(
                                                        count($provider['additional_details']['allergies'])
                                                        > 0
                                                    )
                                                    {{ implode(', ', $provider['additional_details']['allergies']) }}
                                                @else
                                                    No allergies available
                                                @endif
                                            </p>
                                        </div>
                                    </div>

                                    <hr>
                                    
                                    <div class="project-images d-flex flex-column ">
                                        <div class="project-images-text-col">
                                            <h3 class="font-size-18">Work Images</h3>
                                        </div>

                                        <div
                                            class="project-images-img-col pro-img-col d-flex newproject-images-img-col">
                                            @foreach($provider['additional_details']['all_work_images'] as $key => $image)
                                                <img src="{{ $image['img'] }}" class="workimagethumbnail"
                                                    alt="Work Images" data-index="{{ $key }}">
                                            @endforeach
                                        </div>
                                    </div>

                                    <hr>

                                    <div class="project-linking" href="">
                                        <div
                                            class="project-header-item d-flex align-items-center gap-8px justify-space-between">
                                            <h3 class=" font-size-24">Reviews</h3>
                                            <div class="project-header-item gap-8px" id="filter-btnsss">
                                                <a href="{{ route('sp.providerReviews', ['sp_id' => $provider['id']]) }}"
                                                    target="_blank">
                                                    <img src="{{ asset('webAssets/assets/images/lets-icons_filter.png') }}"
                                                        alt="Filter"> </a>
                                            </div>
                                        </div>

                                        <div class="reviews-block">
                                            <div class="reviews-rating d-flex">
                                                <div
                                                    class="reviews-rating-items d-flex flex-column gap-8px">
                                                    <!-- 5 Star Rating -->
                                                    <div
                                                        class="reviews-rating-inner d-flex align-items-center">
                                                        <div class="star-rating">
                                                            <input id="star-5" type="radio"
                                                                name="rating" value="star-5" />
                                                            <label for="star-5" class="single-star"
                                                                title="5 stars">
                                                                <i class="active fa fa-star"
                                                                    aria-hidden="true"></i>
                                                                <span class="grey-color">5</span>
                                                            </label>
                                                        </div>
                                                        <div class="progress-bar"
                                                            style="width: {{ isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews']) && $provider['additional_details']['data']['success']['total_reviews'] > 0 ? ($provider['additional_details']['data']['success']['star_counts'][5] / $provider['additional_details']['data']['success']['total_reviews']) * 100 : 0 }}%; background-color: #2446c0;height: 6px;margin-left:10px">
                                                        </div>
                                                    </div>

                                                    <!-- 4 Star Rating -->
                                                    <div
                                                        class="reviews-rating-inner d-flex align-items-center">
                                                        <div class="star-rating">
                                                            <input id="star-4" type="radio"
                                                                name="rating" value="star-4" />
                                                            <label for="star-4" class="single-star"
                                                                title="4 stars">
                                                                <i class="active fa fa-star"
                                                                    aria-hidden="true"></i>
                                                                <span class="grey-color">4</span>
                                                            </label>
                                                        </div>
                                                        <div class="progress-bar"
                                                            style="width: {{ isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews']) && $provider['additional_details']['data']['success']['total_reviews'] > 0 ? ($provider['additional_details']['data']['success']['star_counts'][4] / $provider['additional_details']['data']['success']['total_reviews']) * 100 : 0 }}%; background-color: #2446c0;height: 6px;margin-left:10px">
                                                        </div>
                                                    </div>
                                                    
                                                    <!-- 3 Star Rating -->
                                                    <div
                                                        class="reviews-rating-inner d-flex align-items-center">
                                                        <div class="star-rating">
                                                            <input id="star-3" type="radio"
                                                                name="rating" value="star-3" />
                                                            <label for="star-3" class="single-star"
                                                                title="3 stars">
                                                                <i class="active fa fa-star"
                                                                    aria-hidden="true"></i>
                                                                <span class="grey-color">3</span>
                                                            </label>
                                                        </div>
                                                        <div class="progress-bar"
                                                            style="width: {{ isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews']) && $provider['additional_details']['data']['success']['total_reviews'] > 0 ? ($provider['additional_details']['data']['success']['star_counts'][3] / $provider['additional_details']['data']['success']['total_reviews']) * 100 : 0 }}%; background-color: #2446c0;height: 6px;margin-left:10px">
                                                        </div>
                                                    </div>
                                                    
                                                    <!-- 2 Star Rating -->
                                                    <div
                                                        class="reviews-rating-inner d-flex align-items-center">
                                                        <div class="star-rating">
                                                            <input id="star-2" type="radio"
                                                                name="rating" value="star-2" />
                                                            <label for="star-2" class="single-star"
                                                                title="2 stars">
                                                                <i class="active fa fa-star"
                                                                    aria-hidden="true"></i>
                                                                <span class="grey-color">2</span>
                                                            </label>
                                                        </div>
                                                        <div class="progress-bar"
                                                            style="width: {{ isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews']) && $provider['additional_details']['data']['success']['total_reviews'] > 0 ? ($provider['additional_details']['data']['success']['star_counts'][2] / $provider['additional_details']['data']['success']['total_reviews']) * 100 : 0 }}%; background-color: #2446c0;height: 6px;margin-left:10px">
                                                        </div>
                                                    </div>

                                                    <!-- 1 Star Rating -->
                                                    <div
                                                        class="reviews-rating-inner d-flex align-items-center">
                                                        <div class="star-rating">
                                                            <input id="star-1" type="radio"
                                                                name="rating" value="star-1" />
                                                            <label for="star-1" class="single-star"
                                                                title="1 star">
                                                                <i class="active fa fa-star"
                                                                    aria-hidden="true"></i>
                                                                <span class="grey-color">1</span>
                                                            </label>
                                                        </div>
                                                        <div class="progress-bar"
                                                            style="width: {{ isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews']) && $provider['additional_details']['data']['success']['total_reviews'] > 0 ? ($provider['additional_details']['data']['success']['star_counts'][1] / $provider['additional_details']['data']['success']['total_reviews']) * 100 : 0 }}%; background-color: #2446c0;height: 6px;margin-left:10px">
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="reviews-rating-items">
                                                    <div
                                                        class="total-ratings d-flex flex-column gap-8px align-items-end">
                                                        @php 
                                                            $average_rating = 0;
                                                            if (isset($provider['additional_details']['data']['success']) && isset($provider['additional_details']['data']['success']['total_reviews'])) {
                                                                $average_rating = $provider['additional_details']['data']['success']['average_rating'];
                                                            }
                                                        @endphp
                                                        <p class="font-size-32 grey-color fw-bold">
                                                            {{ $average_rating ?? '0' }}
                                                        </p>
                                                        <div
                                                            class="rating-cost d-flex flex-column gap-8px">
                                                            <fieldset class="multi-rating">
                                                                <!-- 5 Star Rating -->
                                                                <input type="radio" id="star5"
                                                                    name="rating" value="5" {{ $average_rating >= 5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="full {{ $average_rating >= 5 ? 'filled' : '' }}"
                                                                    for="star5"
                                                                    title="Awesome - 5 stars"></label>

                                                                <!-- 4.5 Star Rating -->
                                                                <input type="radio" id="star4half"
                                                                    name="rating" value="4 and a half"
                                                                    {{ $average_rating >= 4.5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="half {{ $average_rating >= 4.5 ? 'filled' : '' }}"
                                                                    for="star4half"
                                                                    title="Pretty good - 4.5 stars"></label>

                                                                <!-- 4 Star Rating -->
                                                                <input type="radio" id="star4"
                                                                    name="rating" value="4" {{ $average_rating >= 4 ? 'checked' : '' }} />
                                                                <label
                                                                    class="full {{ $average_rating >= 4 ? 'filled' : '' }}"
                                                                    for="star4"
                                                                    title="Pretty good - 4 stars"></label>

                                                                <!-- 3.5 Star Rating -->
                                                                <input type="radio" id="star3half"
                                                                    name="rating" value="3 and a half"
                                                                    {{ $average_rating >= 3.5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="half {{ $average_rating >= 3.5 ? 'filled' : '' }}"
                                                                    for="star3half"
                                                                    title="Meh - 3.5 stars"></label>

                                                                <!-- 3 Star Rating -->
                                                                <input type="radio" id="star3"
                                                                    name="rating" value="3" {{ $average_rating >= 3 ? 'checked' : '' }} />
                                                                <label
                                                                    class="full {{ $average_rating >= 3 ? 'filled' : '' }}"
                                                                    for="star3"
                                                                    title="Meh - 3 stars"></label>

                                                                <!-- 2.5 Star Rating -->
                                                                <input type="radio" id="star2half"
                                                                    name="rating" value="2 and a half"
                                                                    {{ $average_rating >= 2.5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="half {{ $average_rating >= 2.5 ? 'filled' : '' }}"
                                                                    for="star2half"
                                                                    title="Kinda bad - 2.5 stars"></label>

                                                                <!-- 2 Star Rating -->
                                                                <input type="radio" id="star2"
                                                                    name="rating" value="2" {{ $average_rating >= 2 ? 'checked' : '' }} />
                                                                <label
                                                                    class="full {{ $average_rating >= 2 ? 'filled' : '' }}"
                                                                    for="star2"
                                                                    title="Kinda bad - 2 stars"></label>

                                                                <!-- 1.5 Star Rating -->
                                                                <input type="radio" id="star1half"
                                                                    name="rating" value="1 and a half"
                                                                    {{ $average_rating >= 1.5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="half {{ $average_rating >= 1.5 ? 'filled' : '' }}"
                                                                    for="star1half"
                                                                    title="Very poor - 1.5 stars"></label>

                                                                <!-- 1 Star Rating -->
                                                                <input type="radio" id="star1"
                                                                    name="rating" value="1" {{ $average_rating >= 1 ? 'checked' : '' }} />
                                                                <label
                                                                    class="full {{ $average_rating >= 1 ? 'filled' : '' }}"
                                                                    for="star1"
                                                                    title="Very poor - 1 star"></label>

                                                                <!-- 0.5 Star Rating -->
                                                                <input type="radio" id="star0half"
                                                                    name="rating" value="0 and a half"
                                                                    {{ $average_rating >= 0.5 ? 'checked' : '' }} />
                                                                <label
                                                                    class="half {{ $average_rating >= 0.5 ? 'filled' : '' }}"
                                                                    for="star0half"
                                                                    title="Very poor - 0.5 stars"></label>
                                                            </fieldset>
                                                            <p class="font-size-14 grey-color">Based on
                                                                {{ $provider['additional_details']['data']['success']['total_reviews'] ?? 0 }}
                                                                ratings
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <hr>
                                        @if($provider['additional_details']['data']['success']['reviews'] ?? false)
                                            @foreach ($provider['additional_details']['data']['success']['reviews'] as $index => $review)
                                                @if ($index < 4) <!-- Initially show only 4 reviews -->
                                                <div class="review-comment-section text-start"
                                                    id="reviewsContainer-{{$provider['id']}}">
                                                    <div class="comment-header d-flex gap-8px mt-3">
                                                        <div class="comment-img-col rev-user-img">
                                                            <img src="{{ $review['client_profile'] ? asset($review['client_profile']) : asset('nophoto.jpg') }}"
                                                                alt="user-img">
                                                        </div>
                                                        <div class="comment-text-col">
                                                            @php
                                                                // Check if client_name exists and is not empty
                                                                $fullName = $review['client_name'] ?? 'Unknown';
                                                                $nameParts = explode(' ', $fullName);

                                                                // Get first name
                                                                $firstName = $nameParts[0] ?? 'Unknown';

                                                                // Get first letter of last name
                                                                $lastNameInitial = isset($nameParts[1]) ?
                                                                    strtoupper(substr($nameParts[count($nameParts) - 1], 0, 1)) : '';
                                                            @endphp

                                                            <h3 class="font-size-18">{{ $firstName }}
                                                                {{ $lastNameInitial }}
                                                            </h3>

                                                            <h4 class="font-size-14">
                                                                {{ $review['sub_category_name'] ?? 'Unknown' }}
                                                            </h4>
                                                            <div class="star-rating gap-8px flex-row-reverse ">
                                                                @for ($i = 5; $i >= 1; $i--)
                                                                    <input id="star{{ $loop->index }}{{ $i }}"
                                                                        type="radio"
                                                                        name="rating-{{ $loop->index }}"
                                                                        value="star-{{ $i }}" {{ $review['star'] == $i ? 'checked' : '' }} />
                                                                    <label for="star{{ $loop->index }}{{ $i }}"
                                                                        class="multi-star"
                                                                        title="{{ $i }} stars">
                                                                        <i class="{{ $review['star'] >= $i ? 'active' : '' }} fa fa-star"
                                                                            aria-hidden="true"></i>
                                                                    </label>
                                                                @endfor
                                                                <p class="font-size-14 grey-color">
                                                                    {{ \Carbon\Carbon::parse($review['created_at'])->format('D, M j Y') }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="user-comment-details">
                                                        <p class="paragraph">
                                                            {{ $review['review'] ?? 'Unknown review' }}.
                                                        </p>
                                                    </div>

                                                    <hr class="w-75">
                                                </div>
                                                @endif
                                            @endforeach
                                            
                                            <div id="allReviews-{{$provider['id']}}" style="display:none;">
                                                @foreach ($provider['additional_details']['data']['success']['reviews'] as $index => $review)
                                                    @if ($index >= 4)
                                                        <!-- Show the remaining reviews -->
                                                        <div class="comment-header d-flex gap-8px mt-3">
                                                            <div class="comment-img-col rev-user-img">
                                                                <img src="{{ $review['client_profile'] ? asset($review['client_profile']) : asset('nophoto.jpg') }}"
                                                                    alt="user-img">
                                                            </div>
                                                            <div class="comment-text-col">
                                                                @php
                                                                    // Check if client_name exists and is not empty
                                                                    $fullName = $review['client_name'] ?? 'Unknown';
                                                                    $nameParts = explode(' ', $fullName);

                                                                    // Get first name
                                                                    $firstName = $nameParts[0] ?? 'Unknown';

                                                                    // Get first letter of last name
                                                                    $lastNameInitial = isset($nameParts[1]) ?
                                                                        strtoupper(substr($nameParts[count($nameParts) - 1], 0, 1)) : '';
                                                                @endphp

                                                                <h3 class="font-size-18">{{ $firstName }}
                                                                    {{ $lastNameInitial }}
                                                                </h3>

                                                                <h4 class="font-size-14">
                                                                    {{ $review['sub_category_name'] ?? 'Unknown' }}
                                                                </h4>

                                                                <div class="star-rating gap-8px flex-row-reverse">
                                                                    @for ($i = 5; $i >= 1; $i--)
                                                                        <input id="star{{ $loop->index }}{{ $i }}"
                                                                            type="radio"
                                                                            name="rating-{{ $loop->index }}"
                                                                            value="star-{{ $i }}" {{ $review['star'] == $i ? 'checked' : '' }} />
                                                                        <label for="star{{ $loop->index }}{{ $i }}"
                                                                            class="multi-star"
                                                                            title="{{ $i }} stars">
                                                                            <i class="{{ $review['star'] >= $i ? 'active' : '' }} fa fa-star"
                                                                                aria-hidden="true"></i>
                                                                        </label>
                                                                    @endfor
                                                                    <p class="font-size-14 grey-color">
                                                                        {{ \Carbon\Carbon::parse($review['created_at'])->format('D, M j Y') }}
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="user-comment-details">
                                                            <p class="paragraph">
                                                                {{ $review['review'] ?? 'Unknown review' }}.
                                                            </p>
                                                        </div>
                                                        <hr class="w-75">
                                                    @endif
                                                @endforeach
                                            </div>

                                            <!-- Load More Button -->
                                            @if(count($provider['additional_details']['data']['success']['reviews']) > 4)
                                                <div class="text-center mt-3">
                                                    <button id="loadMoreBtn-{{$provider['id']}}"
                                                        class="btn btn-primary">Load All</button>
                                                    <button id="showLessBtn-{{$provider['id']}}"
                                                        class="btn btn-secondary"
                                                        style="display: none;">Show
                                                        Less</button>
                                                </div>
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <a type="button"
                                    href="{{ route('choose.dateAndTime', ['sp_id' => $provider['id']]) }}"
                                    class="btn btn-primary w-100">
                                    Select & Continue
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    @else
        <div class="user-profile" style="background:#e37676;">No Service provider found, please try
            with other filters !! </div>
    @endif
</div>

                    </div>

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


<!-- The modal container for the enlarged image -->
<div id="imageModal" class="modal view_profile_image_modal d-none">
    <span class="close">&times;</span>
    <span class="prev">&#10094;</span>
    <img id="modalImage" class="modal_custom_images">
    <span class="next">&#10095;</span>
</div>


<script>
    // Get modal elements
    const modal = document.getElementById("imageModal");
    const modalImage = document.getElementById("modalImage");
    const closeBtn = document.querySelector(".close");
    const prevBtn = document.querySelector(".prev");
    const nextBtn = document.querySelector(".next");
    const thumbnails = document.querySelectorAll(".workimagethumbnail");

    // Open modal and display clicked image
    thumbnails.forEach((img, index) => {
        img.addEventListener("click", function () {
            modal.classList.remove("d-none"); // Remove d-none to show modal
            modal.classList.add("d-flex"); // Add d-flex for flex display
            modalImage.src = this.src; // Set the image source
            modalImage.dataset.index = index; // Store image index
        });
    });

    // Close the modal
    closeBtn.addEventListener("click", function () {
        modal.classList.remove("d-flex"); // Remove d-flex to hide modal
        modal.classList.add("d-none"); // Add d-none to hide modal
    });

    // Close modal when clicking outside the image
    modal.addEventListener("click", function (e) {
        if (e.target === modal) {
            modal.classList.remove("d-flex"); // Remove d-flex to hide modal
            modal.classList.add("d-none"); // Add d-none to hide modal
        }
    });

    // Navigate to previous image
    prevBtn.addEventListener("click", function () {
        const currentIndex = parseInt(modalImage.dataset.index, 10);
        const prevIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
        modalImage.src = thumbnails[prevIndex].src;
        modalImage.dataset.index = prevIndex;
    });

    // Navigate to next image
    nextBtn.addEventListener("click", function () {
        const currentIndex = parseInt(modalImage.dataset.index, 10);
        const nextIndex = (currentIndex + 1) % thumbnails.length;
        modalImage.src = thumbnails[nextIndex].src;
        modalImage.dataset.index = nextIndex;
    });


</script>


@endsection
<script>
    function showfilter() {
        // Get all accordion items
        const accordion = document.getElementById('filter-accordion');
        const accordionItems = accordion.querySelectorAll('.accordion-collapse');

        // Toggle the show class to expand/collapse the accordion
        accordionItems.forEach(item => {
            if (item.classList.contains('show')) {
                // If it's already open, collapse it
                item.classList.remove('show');
            } else {
                // Otherwise, expand it
                item.classList.add('show');
            }
        });
    }

    // Automatically show all accordion sections by default
    window.onload = function () {
        const accordionItems = document.querySelectorAll('.accordion-collapse');
        accordionItems.forEach(item => item.classList.add('show'));
    }

    document.addEventListener('DOMContentLoaded', function () {
        const availabilityInputs = document.querySelectorAll('input[name="avl_filter"]');
        const performerInputs = document.querySelectorAll('input[name="tp_filter"]');
        const minPriceInput = document.querySelector('input[name="min_price_filter"]');
        const maxPriceInput = document.querySelector('input[name="max_price_filter"]');
        const minPriceDisplay = document.getElementById('min-price-display');
        const maxPriceDisplay = document.getElementById('max-price-display');
        const clearButton = document.getElementById('clear-filters');
        const applyPriceButton = document.getElementById('apply-price');
        const sortSelect = document.querySelector('select[name="sort"]');

        let filters = new URLSearchParams(window.location.search);

        minPriceDisplay.textContent = `$${minPriceInput.value}`;
        maxPriceDisplay.textContent = `$${maxPriceInput.value}`;

        // Update displayed price when sliding
        minPriceInput.addEventListener('input', function () {
            if (parseInt(minPriceInput.value) > parseInt(maxPriceInput.value)) {
                minPriceInput.value = maxPriceInput.value;
            }
            minPriceDisplay.textContent = `$${minPriceInput.value}`;
        });

        maxPriceInput.addEventListener('input', function () {
            if (parseInt(maxPriceInput.value) < parseInt(minPriceInput.value)) {
                maxPriceInput.value = minPriceInput.value;
            }
            if (parseInt(maxPriceInput.value) <= 0) {
                maxPriceInput.value = 1;
            }
            maxPriceDisplay.textContent = `$${maxPriceInput.value}`;
        });

        availabilityInputs.forEach(input => input.addEventListener('change', function () {
            filters.set('avl_filter', input.value);
            applyFilters();
        }));

        performerInputs.forEach(input => input.addEventListener('change', function () {
            filters.set('tp_filter', input.value);
            applyFilters();
        }));

        applyPriceButton.addEventListener('click', function () {
            filters.set('min_price_filter', minPriceInput.value);
            filters.set('max_price_filter', maxPriceInput.value);
            applyFilters();
        });
        sortSelect.addEventListener('change', function () {
            const sortValue = sortSelect.value;
            if (sortValue === 'recommended') {
                filters.delete('sort');
            } else {
                filters.set('sort', sortValue);
            }
            applyFilters();
        });

        clearButton.addEventListener('click', function () {
            filters.delete('avl_filter');
            filters.delete('tp_filter');
            filters.delete('min_price_filter');
            filters.delete('max_price_filter');
            filters.delete('sort');
            window.location.href = "{{route('choose.serviceProvider.price.get')}}";
        });

        function applyFilters() {
            const queryString = filters.toString();
            window.location.href = "{{route('choose.serviceProvider.price.get')}}" + '?' + queryString;
        }
    });
</script>
<script>
    function hideIndividual() {
        $('#individualDiv').hide();
        $('#businessDiv').show();
        $('#individualbtn').removeClass('btn-primary');
        $('#individualbtn').addClass('btn-secondary');
        $('#bussinessbtn').removeClass('btn-secondary');
        $('#bussinessbtn').addClass('btn-primary');
    }

    function hideBusiness() {
        $('#individualDiv').show();
        $('#businessDiv').hide();
        $('#bussinessbtn').addClass('btn-secondary');
        $('#bussinessbtn').removeClass('btn-primary');
        $('#individualbtn').addClass('btn-primary');
        $('#individualbtn').removeClass('btn-secondary');

    }
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const images = document.querySelectorAll('.workimagethumbnail');
        const modal = document.getElementById("imageModal");
        const modalImg = document.getElementById("modalImage");
        const close = document.getElementsByClassName("close")[0];
        images.forEach(function (img) {
            img.addEventListener('click', function () {
                images.forEach(function (image) {
                    modalImg.src = '';
                });
                modal.style.display = "block";
                modalImg.src = this.src;
            });

        });
        close.onclick = function () {
            modal.style.display = "none";
        }
    });

    document.addEventListener('DOMContentLoaded', function() {
    // For each business provider
    @if($service_providers['success']['data']['providers']['business'])
        @foreach($service_providers['success']['data']['providers']['business'] as $provider)
            // Load More button functionality
            const loadMoreBtn{{$provider['id']}} = document.getElementById('loadMoreBtn-{{$provider['id']}}');
            const showLessBtn{{$provider['id']}} = document.getElementById('showLessBtn-{{$provider['id']}}');
            const allReviews{{$provider['id']}} = document.getElementById('allReviews-{{$provider['id']}}');
            
            if(loadMoreBtn{{$provider['id']}}) {
                loadMoreBtn{{$provider['id']}}.addEventListener('click', function() {
                    allReviews{{$provider['id']}}.style.display = 'block';
                    loadMoreBtn{{$provider['id']}}.style.display = 'none';
                    showLessBtn{{$provider['id']}}.style.display = 'inline-block';
                });
            }
            
            if(showLessBtn{{$provider['id']}}) {
                showLessBtn{{$provider['id']}}.addEventListener('click', function() {
                    allReviews{{$provider['id']}}.style.display = 'none';
                    loadMoreBtn{{$provider['id']}}.style.display = 'inline-block';
                    showLessBtn{{$provider['id']}}.style.display = 'none';
                });
            }
        @endforeach
    @endif
});


    // document.getElementById('loadMoreBtn').addEventListener('click', function() {
    //     const allReviews = document.getElementById('allReviews');
    //     if (allReviews) {
    //         allReviews.style.display = 'block'; // Show all reviews
    //         this.style.display = 'none'; // Hide "Load More" button
    //         document.getElementById('showLessBtn').style.display = 'inline-block'; // Show "Show Less" button
    //     }
    // });

    // document.getElementById('showLessBtn').addEventListener('click', function() {
    //     const allReviews = document.getElementById('allReviews');
    //     if (allReviews) {
    //         allReviews.style.display = 'none'; // Hide extra reviews
    //         this.style.display = 'none'; // Hide "Show Less" button
    //         document.getElementById('loadMoreBtn').style.display = 'inline-block'; // Show "Load More" button
    //     }
    // });

    // // Toggle filter dropdown
    // document.getElementById('filter-btn').addEventListener('click', function() {
    //     const dropdown = document.getElementById('filter-dropdown');
    //     dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
    // });

    // // Hide dropdown if user clicks outside
    // window.onclick = function(event) {
    //     if (!event.target.matches('#filter-btn img')) {
    //         const dropdown = document.getElementById('filter-dropdown');
    //         if (dropdown.style.display === 'block') {
    //             dropdown.style.display = 'none';
    //         }
    //     }
    // };

    document.addEventListener("DOMContentLoaded", function () {
        // Modal Elements
        const modal = document.getElementById("imageModal");
        const modalImage = document.getElementById("modalImage");
        const closeModal = document.querySelector(".close");
        const prevButton = document.querySelector(".prev");
        const nextButton = document.querySelector(".next");

        // Image Thumbnails
        const thumbnails = document.querySelectorAll(".workimagethumbnail");
        let currentIndex = 0;

        // Function to show the modal with the selected image
        const showModal = (index) => {
            currentIndex = index;
            const selectedThumbnail = thumbnails[currentIndex];
            modalImage.src = selectedThumbnail.src;
            modal.style.display = "block";
        };

        // Attach click events to thumbnails
        thumbnails.forEach((thumbnail, index) => {
            thumbnail.addEventListener("click", () => {
                showModal(index);
            });
        });

        // Close Modal
        closeModal.addEventListener("click", () => {
            modal.style.display = "none";
        });

        // Next Image
        nextButton.addEventListener("click", () => {
            currentIndex = (currentIndex + 1) % thumbnails.length; // Loop to the first image
            showModal(currentIndex);
        });

        // Previous Image
        prevButton.addEventListener("click", () => {
            currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length; // Loop to the last image
            showModal(currentIndex);
        });

        // Close Modal when clicking outside the image
        modal.addEventListener("click", (e) => {
            if (e.target === modal) {
                modal.style.display = "none";
            }
        });
    });
</script>


</script>

<!-- Range Slider -->
<script>
    const minRange = document.getElementById('minRange');
    const maxRange = document.getElementById('maxRange');
    const minValueDisplay = document.getElementById('minValue');
    const maxValueDisplay = document.getElementById('maxValue');

    minRange.addEventListener('input', () => {
        if (parseInt(minRange.value) > parseInt(maxRange.value)) {
            minRange.value = maxRange.value;
        }
        minValueDisplay.textContent = minRange.value;
        updateSliderTrack();
    });

    maxRange.addEventListener('input', () => {
        if (parseInt(maxRange.value) < parseInt(minRange.value)) {
            maxRange.value = minRange.value;
        }
        maxValueDisplay.textContent = maxRange.value;
        updateSliderTrack();
    });

    function updateSliderTrack() {
        const percentMin = (minRange.value / maxRange.max) * 100;
        const percentMax = (maxRange.value / maxRange.max) * 100;

        // Create the gradient for the slider background
        const gradient = `linear-gradient(to left, #4CAF50 ${percentMin}%, #ddd ${percentMin}%, #ddd ${percentMax}%, #4CAF50 ${percentMax}%)`;

        // Apply the gradient to both sliders
        minRange.style.background = gradient;
        maxRange.style.background = gradient;
    }

    // Initialize the track on page load
    updateSliderTrack();

</script>