<div>
<section class="breadcumb-section mt-10">
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-10">
<div class="breadcumb-style1 mb10-xs">
<div class="breadcumb-list">
<a href="/">Home</a>
<a href="{{ route('services.page')}}">Services</a>
<span>{{$gig['title']}}</span>
</div>
</div>
</div>
<div hidden class="col-sm-4 col-lg-2">
<div class="d-flex align-items-center justify-content-sm-end">
<div class="share-save-widget d-flex align-items-center">
<span class="icon flaticon-share dark-color fz12 mr10"></span>
<div class="h6 mb-0">Share</div>
</div>
<div class="share-save-widget d-flex align-items-center ml15">
<span class="icon flaticon-like dark-color fz12 mr10"></span>
<a href="{{route('add.favorite', $gig['slug'])}}">
<div class="h6 mb-0">Save</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Breadcumb Sections -->
<section class="breadcumb-section pt-0">
<div
class="cta-service-v1 freelancer-single-style mx-auto maxw1700 pt120 pt60-sm pb120 pb60-sm bdrs16 position-relative overflow-hidden d-flex align-items-center mx20-lg px30-lg">
<img class="left-top-img wow zoomIn" src="{{ asset('images/vector-img/left-top.png') }}">
<img class="right-bottom-img wow zoomIn" src="{{ $gig['image_urls'][0] ?? '' }}">
<div class="container">
<div class="row wow fadeInUp">
<div class="col-xl-7">
<div class="position-relative">
<h2>{{ $gig['title'] }} </h2>
<div class="list-meta mt20">
<p class="mb-0 dark-color fz25 fw800 list-inline-item mb5-sm">
</p>
<img style="border: 2px solid #4CAF50; width: 70px; height: 70px; border-radius: 50%; object-fit: cover;"
src="{{ $gig['shop']['profile_photo_url'] }}" alt="{{ $gig['shop']['name'] }}">
<p class="mb-0 dark-color fz15 fw800 list-inline-item ml15 mb5-sm ml0-xs">
{{ $gig['shop']['name'] }} <span class="fav-icon flaticon-star"></span> Verified</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Service Details -->
<section class="pt30">
<div class="container">
<div class="row wrap">
<div class="col-lg-8">
<div class="column">
<div class="service-about">
<h4>Description</h4>
<p class="text mb30">{{ $gig['description'] }}</p>
<hr class="opacity-100 mb60 mt60">
<h4 class="mb30">Workshop Gallery</h4>
<div class="row">
@foreach ($gig['image_urls'] as $index => $gallery)
<div class="col-6 col-lg-3">
<div class="project-attach"
style="background-color: #f5f5f5; border-radius: 8px; overflow: hidden; width: 100%; height: 180px;">
<img src="{{ $gallery }}" class="rounded"
style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;"
data-bs-toggle="modal" data-bs-target="#imageModal{{ $index }}" />
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="imageModal{{ $index }}" tabindex="-1"
aria-labelledby="imageModalLabel{{ $index }}" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="imageModalLabel{{ $index }}">Workshop
Gallery</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body text-center">
<img src="{{ $gallery }}"
style="max-width: 100%; max-height: 100%; object-fit: contain;" />
</div>
</div>
</div>
</div>
@endforeach
</div>
@if ($gig['user']['certificate'])
<hr class="opacity-100 mb60 mt30">
<h4 class="mb30">Certifications</h4>
<div class="mb60">
@foreach ($gig['user']['certificate'] as $cert )
Preview -
<a href="{{ $cert['document'] }}" target="_blank"
class="tag list-inline-item mb-2 mb-xl-0 mr10">
{{ $cert['title'] }}</a>
@endforeach
</div>
@endif
@if ($gig['reviews'])
<hr class="opacity-100 mb60">
<h4 class="mb30">Customers Reviews ({{ count($gig['reviews']) }})</h4>
<div class="row">
@foreach (array_slice($gig['reviews'], 0, 5) as $review)
<div class="col-md-6 col-lg-12">
<div class="freelancer-style1 bdr1 hover-box-shadow row ms-0 align-items-start">
<div class="col-xl-10 px-0">
<div class="d-lg-flex">
<div class="thumb w40 position-relative rounded-circle mb15-md">
<img class="rounded-circle mx-auto" style="width: 30px; height:30px"
src="{{ $review['user']['profile_photo_url'] }}"
alt="{{ $review['user']['name'] }}">
</div>
<div class="details ml20 ml0-md mb15-md">
<h5 class="title mb-1">{{ $review['user']['name'] }}</h5>
<div class="review mb20">
<p class="mb-0 fz14 list-inline-item mb5-sm pe-1">
@for ($i = 1; $i <= $review['star_rating']; $i++) <i
class="fas fa-star fz10 review-color pr10"></i>
@endfor
<span
class="dark-color">{{ $review['star_rating'] }}.0</span>
</p>
<p class="mb-0 fz14 list-inline-item mb5-sm pe-1">
<i
class="flaticon-30-days fz16 vam text-thm2 me-1 bdrl1 bdrn-md pl15 pl0-md bdrn-xs"></i>
{{ \Carbon\Carbon::parse($review['created_at'])->diffForHumans() }}
</p>
@if ($review['photo_url'])
<p class="mb-0 fz14 list-inline-item mb5-sm">
<i
class="flaticon-contract fz16 vam text-thm2 me-1 bdrl1 bdrn-md pl15 pl0-md bdrn-xs"></i>
<a target="_blank"
href="{{ $review['photo_url'] }}">Attachment</a>
</p>
@endif
</div>
<p class="text mb-0">{{ $review['comment'] }}</p>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
@if (count($gig['reviews']) > 5)
<button class="ud-btn btn-thm mt-3" id="load-more" data-offset="5">
Load More
</button>
@endif
@endif
@if ($faqs)
<hr class="opacity-100 mb60">
<h4 class="mb30">Frequently Asked Questions</h4>
<div class="mb60">
<div class="row wow fadeInUp" data-wow-delay="300ms">
<div class="col-lg-12">
<div class="ui-content">
<div class="accordion-style1 faq-page mb-4 mb-lg-5">
<div class="accordion" id="accordionExample">
@foreach ($faqs as $index => $faq)
<div class="accordion-item {{ $index === 0 ? 'active' : '' }}">
<h2 class="accordion-header" id="heading{{ $index }}">
<button
class="accordion-button {{ $index === 0 ? '' : 'collapsed' }}"
type="button" data-bs-toggle="collapse"
data-bs-target="#collapse{{ $index }}"
aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
aria-controls="collapse{{ $index }}">
{{ $faq['question'] }}
</button>
</h2>
<div id="collapse{{ $index }}"
class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}"
aria-labelledby="heading{{ $index }}"
data-parent="#accordionExample">
<div class="accordion-body">
{{ $faq['answer'] }}
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
@endif
<div class="bsp_reveiw_wrt mt25">
<h4 hidden>Engagement Form</h4>
<form hidden wire:submit.prevent="makeBooking" class="comments_form mt30 mb30-md">
<div class="row">
<div class="col-md-12">
<div class="mb20">
<label class="fw500 ff-heading dark-color mb-2">Price </label>
<div class="input-group">
<!-- Read-only Currency Field -->
<span class="input-group-text"
style="width: 60px; text-align: center;">
{{ $gig['currency'] }}
</span>
<!-- Amount Input Field -->
<input type="text" autofocus wire:model.blur="budget_amount"
class="form-control" placeholder="Enter amount">
</div>
@error('budget_amount')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="mb20">
<label for="start_time" class="fw500 ff-heading dark-color mb-2">Start date</label>
<input type="datetime-local" min="{{ now()->format('Y-m-d\TH:i') }}"
id="start_time" wire:model.blur="start_time" class="form-control"
placeholder="Select date and time">
@error('start_time')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="mb20">
<label for="end_time" class="fw500 ff-heading dark-color mb-2">Delivery date</label>
<input type="datetime-local" min="{{ now()->format('Y-m-d\TH:i') }}"
id="end_time" wire:model.live="end_time" class="form-control"
placeholder="Select date and time">
@error('end_time')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
</div>
<div class="col-md-12">
<div class="mb20">
<label for="message" class="fw500 ff-heading dark-color mb-2">Message
provider</label>
<textarea maxlength="255" id="message" wire:model="message"
class="form-control"
placeholder="Hello, I am interested in booking your service. Please let me know if this proposal works for you."></textarea>
@error('message')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
</div>
@if (!session()->get('token'))
@livewire('auth.google')
@endif
<div class="col-md-12 mt-2">
<div class="d-grid">
<button
type="submit"
class="ud-btn btn-thm"
@if (!session()->get('token')) hidden @endif
title="@if (!session()->get('token')) Please log in with Google to enable this button @else '' @endif"
wire:loading.attr="disabled"
wire:loading.class="opacity-75 cursor-not-allowed"
>
<span wire:loading>
<i class="spinner-border spinner-border-sm mr-2"></i> Please wait...
</span>
<span wire:loading.remove>
Submit <i class="fal fa-arrow-right-long"></i>
</span>
</button>
</div>
</div>
</div>
</form>
<div class="log-reg-form search-modal form-style1 bgc-white p50 p30-sm default-box-shadow1 bdrs12">
<div class="mb30 text-center">
<h3>Continue on Mobile App</h3>
</div>
<div class="d-flex justify-content-center gap-3">
<!-- Android Button -->
<a href="https://play.google.com/store/apps/details?id=your.app.id" target="_blank" class="btn btn-thm d-flex align-items-center">
<i class="fab fa-google-play me-2"></i> Download for Android
</a>
<!-- iOS Button -->
<a href="https://apps.apple.com/app/your-app-id" target="_blank" class="btn btn-thm d-flex align-items-center">
<i class="fab fa-apple me-2"></i> Download for iOS
</a>
</div>
</div>
</div>
<div class="bsp_reveiw_wrt mt25">
<hr class="opacity-100 mb60">
@if ($similarGigs)
<h4 class="mb30">See other similar {{ $gig['category']['name'] }} services</h4>
<div class="row">
<div class="col-lg-12">
<div class="navi_pagi_top_right slider-4-grid owl-carousel owl-theme">
@foreach ($similarGigs as $sgig)
@php
// Get a random image from the gig's image URLs
$imageUrls = $sgig['image_urls'];
$randomImageUrl = $imageUrls[array_rand($imageUrls)];
// Calculate the average star rating
$reviews = $sgig['reviews'] ?? [];
$totalReviews = count($reviews);
$sumRatings = array_sum(array_column($reviews, 'star_rating'));
$averageRating = $totalReviews > 0 ? $sumRatings / $totalReviews : 0;
@endphp
<div class="item">
<div class="listing-style1 bdrs16">
<div class="list-thumb">
<a href="{{ route('show.service.page', $sgig['slug']) }}"> <img style="width: 100%; height: 120px; object-fit: cover;" src="{{ $randomImageUrl }}" alt="{{ $sgig['title'] }}"></a>
@guest
<a href="{{route('add.favorite', $sgig['slug'])}}" class="listing-fav fz12"><span class="far fa-heart"></span></a>
@endguest
@auth
<a href="{{route('add.favorite', $sgig['slug'])}}" class="listing-fav fz12"><span class="far fa-heart"></span></a>
@endauth
</div>
<div class="list-content">
<a href="{{route('show.category.services', $sgig['category']['slug'])}}">
<p class="list-text body-color fz14 mb-1 me-4">{{ $sgig['category']['name'] }}
@if ($averageRating > 0)
<i class="fas fa-star fz10 review-color me-0"></i> {{ number_format($averageRating, 1) }}
@endif
</p>
</a>
<h5 class="list-title line-clamp2"><a href="{{ route('show.service.page', $sgig['slug']) }}">{{ \Illuminate\Support\Str::limit($sgig['title'], 21) }}</a></h5>
<hr class="my-1">
<div class="list-meta d-flex justify-content-between align-items-center mt15">
<a class="d-flex" href="{{route('show.shop.services', $sgig['shop']['slug'])}}">
<span class="position-relative mr10">
<img style="border: 2px solid #4CAF50; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;" src="{{ $sgig['shop']['profile_photo_url'] }}" alt="{{ $sgig['shop']['name'] }}">
</span>
</a>
<div class="budget">
<p class="mb-0 body-color"><span class="fz17 fw500 dark-color ms-1">{{ $sgig['currency'] }}{{ number_format($sgig['price'],2) }}</span></p>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="column">
<div class="blog-sidebar ms-lg-auto">
<div class="price-widget pt25 bdrs8">
<h3 class="widget-title">{{ $gig['currency'] }}{{ number_format($gig['price'],2) }}</h3>
<p class="text fz14">Delivery within: {{ $gig['delivery_number'] }}
{{ $gig['delivery_unit'] }}</p>
</div>
<div class="freelancer-style1 service-single mb-0 bdrs8">
<h4>About Provider</h4>
<a href="{{ route('show.shop.services', $gig['shop']['slug']) }}">
<div class="wrapper d-flex align-items-center mt20">
<div class="thumb position-relative mb25" style="height: 100px; width: 110px; overflow: hidden; border-radius: 8px;">
<img class="rounded mx-auto" style="height:100px;width:110px; object-fit: cover;"
src="{{ $gig['shop']['profile_photo_url'] }}"
alt="{{ $gig['shop']['name'] }}">
</div>
<div class="ml20">
<h5 class="title mb-1">{{ $gig['shop']['name'] }}</h5>
<p class="mb-0">{{ $gig['category']['name'] }}</p>
<p class="mb-0"><i class="flaticon-place text-thm2 vam fz20 me-2"></i>
{{ $gig['shop']['city']['name'] }}
{{ $gig['shop']['city']['state']['name'] }}</p>
@php
$reviews = $gig['reviews'];
$totalReviews = count($reviews);
$sumRatings = array_sum(array_column($reviews, 'star_rating'));
$averageRating = $totalReviews > 0 ? $sumRatings / $totalReviews : 0;
@endphp
@if ($averageRating > 0)
<div class="review">
<p><i class="fas fa-star fz10 review-color pr10"></i><span
class="dark-color">{{ number_format($averageRating, 1) }}</span>
</p>
</div>
@endif
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const loadMoreButton = document.getElementById('load-more');
if (loadMoreButton) {
loadMoreButton.addEventListener('click', function() {
const offset = parseInt(this.getAttribute('data-offset'));
const reviews = @json($gig['reviews']); // Pass all reviews as JSON
const reviewContainer = document.getElementById('review-container');
// Get the next set of 5 reviews
const nextReviews = reviews.slice(offset, offset + 5);
// Append the reviews to the container
nextReviews.forEach(review => {
const reviewItem = document.createElement('div');
reviewItem.className = 'col-md-6 col-lg-12 review-item';
reviewItem.innerHTML = `
<div class="freelancer-style1 bdr1 hover-box-shadow row ms-0 align-items-start">
<div class="col-xl-10 px-0">
<div class="d-lg-flex">
<div class="thumb w90 position-relative rounded-circle mb15-md">
<img class="rounded-circle mx-auto" style="width: 50px; height:50px"
src="${review.user.profile_photo_url}" alt="${review.user.name}">
</div>
<div class="details ml20 ml0-md mb15-md">
<h5 class="title mb-1">${review.user.name}</h5>
<div class="review mb20">
<p class="mb-0 fz14 list-inline-item mb5-sm pe-1">
${'<i class="fas fa-star fz10 review-color pr10"></i>'.repeat(review.star_rating)}
<span class="dark-color">${review.star_rating}.0</span>
</p>
<p class="mb-0 fz14 list-inline-item mb5-sm pe-1">
<i class="flaticon-30-days fz16 vam text-thm2 me-1 bdrl1 bdrn-md pl15 pl0-md bdrn-xs"></i>
${moment(review.created_at).fromNow()}
</p>
${review.photo_url ? `
<p class="mb-0 fz14 list-inline-item mb5-sm">
<i class="flaticon-contract fz16 vam text-thm2 me-1 bdrl1 bdrn-md pl15 pl0-md bdrn-xs"></i>
<a target="_blank" href="${review.photo_url}">Attachment</a>
</p>
` : ''}
</div>
<p class="text mb-0">${review.comment}</p>
</div>
</div>
</div>
</div>
`;
reviewContainer.appendChild(reviewItem);
});
// Update the offset
this.setAttribute('data-offset', offset + 5);
// Hide the button if all reviews are loaded
if (offset + 5 >= reviews.length) {
this.style.display = 'none';
}
});
}
});
</script>
</div>
</section>
</div>