Viewing file:  restaurantDetails.blade.php (45.29 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('multirestaurant::layouts.master')
@section('title')
{{ json_decode(get_settings('site_setting'))->name }} - {{ trans('multirestaurant::layout.multi_restaurants') }}
@endsection
@section('css')
<style>
.restaurantDetails {
margin-top: 20px;
}
.restaurantDetails-img {
position: relative;
padding: 0px 5%;
margin-left: auto;
box-sizing: border-box;
margin-right: auto;
}
.restaurantDetails-img img {
border-radius: 5px;
height: 380px;
box-shadow: 0 0 10px;
}
.restaurantDetails-content {
display: flex;
}
.restaurantDetails-content-info {
margin-top: 6px;
margin-bottom: 6px;
}
.restaurantDetails-content-info h6 {
font-weight: 700;
font-size: 1.25rem;
line-height: 1.75rem;
}
.restaurantDetails-content-info-time {
margin-top: 6px;
margin-bottom: 6px;
}
.restaurantDetails-content-info-time .open-time p {
font-size: 12px;
margin: 0;
font-weight: 600;
line-height: 1.5;
color: #475569;
}
.restaurantDetails-content-info-time .open-time span {
font-size: 16px;
margin-left: 5px;
}
.restaurantDetails-content-info-time .open-location p {
font-size: 12px;
margin: 0;
font-weight: 600;
line-height: 1.5;
color: #8490a3;
}
.restaurantDetails-content-img {
position: relative;
width: 150px;
margin-left: 2rem;
}
.restaurantDetails-content-img img {
position: absolute;
width: 130px;
height: 130px;
box-shadow: 0 0 10px;
top: -30px;
}
.restaurantDetails-overview-list {
padding: 1rem .75rem .75rem 0;
}
.restaurantDetails-overview-items {
overflow-x: scroll;
position: relative;
display: flex;
gap: 2rem;
scrollbar-width: none;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rgba(0, 0, 0, 0.88);
font-size: 14px;
line-height: 1.5714285714285714;
list-style: none;
font-family: Ubuntu, Noto Sans Bengali, sans-serif;
position: relative;
padding-inline-start: 2px;
border-bottom: 1px solid #8490a3;
}
.restaurantDetails-overview-item {
padding-block: 4px;
padding-inline: 0;
font-size: 1rem;
margin-bottom: .75rem;
}
.restaurantDetails-overview-link {
margin-block-end: 0;
overflow: hidden;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
display: block;
margin-block-end: 3px;
color: rgba(0, 0, 0, 0.88);
transition: all 0.3s;
font-size: 15px;
}
.restaurantDetails-overview-link:hover {
color: rgba(0, 0, 0, 0.88);
text-decoration: none;
}
.restaurantDetails-overview-info {
padding: .75rem 0;
}
.restaurantDetails-overview-info p {
margin: 0;
font-size: 0.875rem;
line-height: 1.43;
}
.restaurantDetails-overview-info .read-more {
font-weight: 600;
color: #563673;
cursor: pointer;
}
.restaurantDetails-overview-info-photos {
margin-top: 1.5rem;
}
.restaurantDetails-overview-info-photos span {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
}
.restaurantDetails-overview-info-photos-list {
display: flex;
gap: .5rem;
margin-top: 1rem;
}
.restaurantDetails-overview-info-photos-list img {
width: 95px;
height: 95px;
border-radius: 5px;
cursor: pointer;
}
.restaurantDetails-overview-info-photos-list .others-photos {
position: relative;
cursor: pointer;
}
.restaurantDetails-overview-info-photos-list .others-photos img {
filter: blur(1px) brightness(0.5);
}
.restaurantDetails-overview-info-photos-list .others-photos .count {
display: flex;
justify-content: center;
position: absolute;
top: 40%;
width: 100%;
color: #fff;
font-size: 30px;
font-weight: 600;
}
.restaurantDetails-overview-info-menu {
margin-top: 1.5rem;
}
.restaurantDetails-overview-info-menu span {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
}
.restaurantDetails-overview-info-menu-link.active {
color: #401b60;
background-color: transparent;
border-bottom: 2px solid #401b60;
}
.restaurantDetails-overview-info-menu-link {
padding: 10px 20px;
font-size: 15px;
color: #000;
font-weight: 600;
cursor: pointer;
}
.restaurantDetails-overview-info-menu-list {
border-bottom: 1px solid #8490a3;
display: flex;
overflow: scroll;
align-items: center;
}
.restaurantDetails-overview-info-menu-content {
display: flex;
align-items: center;
border: 1px solid #8490a3;
border-radius: 5px;
margin: 5px 0;
}
.restaurantDetails-overview-info-menu-content-img {
width: 90px;
height: 90px;
}
.restaurantDetails-overview-info-menu-content-img img {
border-radius: 5px;
}
.restaurantDetails-overview-info-menu-content-info {
margin-left: 15px;
}
.restaurantDetails-overview-info-menu-content-info p {
font-size: 13px;
}
.restaurantDetails-overview-info-menu-content-info .amount {
display: flex;
justify-content: space-between;
align-items: center;
}
.restaurantDetails-overview-info-menu-content-info i {
margin-right: 2px;
}
.restaurantDetails-overview-info-menu-content-info .amount {
font-size: 14px;
}
.restaurantDetails-overview-info-menu-content-info span {
font-size: 12px;
}
.openingHours {
display: flex;
justify-content: space-between;
align-items: center;
}
.openingHours h6 {
margin: 0;
font-weight: 500;
}
.openingHours p {
margin: 0;
font-weight: 600;
}
.restaurantDetails-overview-info-review span {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
}
.restaurantDetails-overview-info-review-box {
padding-top: 1.5rem;
padding-bottom: .75rem;
background-color: #f8fafc;
border-radius: 5px;
align-items: center;
}
.total-review p {
font-size: 3rem;
line-height: 1;
margin: 0;
}
.total-review span {
font-size: 1rem;
margin: 0;
color: #858f9c;
}
.total-star {
display: flex;
font-size: 1.5rem;
color: #faaf00;
gap: .3rem;
}
.total-review h6 {
font-size: .875rem;
line-height: 1.25rem;
font-weight: 600;
margin: 0;
margin-top: 10px;
}
.review-rate {
margin-bottom: 1rem;
}
.review-rate .review-rate-line {
align-items: center;
margin: 8px 0px;
}
.review-rate-line h6 {
font-size: .875rem;
line-height: 1.25rem;
font-weight: 600;
margin: 0;
margin-right: 10px;
}
.progress {
width: 100%;
height: .5rem !important;
}
.user-review-list {
border-bottom: 1px solid #e1e4e7;
}
.user-review-list .user-review-details h6 {
font-weight: 700;
font-size: .875rem;
line-height: 1.25rem;
margin: 0;
}
.user-review-list .user-review-details p {
font-weight: 500;
font-size: .875rem;
margin: 0;
}
.user-review-details {
display: flex;
align-items: center;
gap: 1.5rem;
}
.user-review-rate {
display: flex;
align-items: center;
gap: .5rem;
}
.user-review-rate span {
font-size: 1rem;
color: #525f72;
}
.user-review-rate .stars {
font-size: 1rem;
color: #faaf00;
}
.viewMorereviews {
text-decoration: underline;
color: #765c8d;
text-align: right;
font-weight: 600;
cursor: pointer;
}
.makereservation {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
border-radius: 5px;
}
.makereservation p {
text-align: center;
font-weight: 700;
}
.makereservation hr {
border-top-width: 2px;
}
.makereservation span {
font-weight: 700;
font-size: 0.875rem;
}
.btn-find {
color: #fff;
background-color: #334155;
}
.btn-find:hover{
color: #fff !important;
}
.makereservation-others-item {
display: flex;
gap: 1rem;
margin: 8px 0px;
}
.makereservation-others-item img {
height: 30px;
width: 30px;
}
.makereservation-others-item h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
}
.makereservation-others-item p {
margin: 0;
font-size: 12px;
color: #858f9c;
}
.all-review {
width: 500px;
position: fixed;
z-index: 1000;
transition: all 0.3s;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
box-shadow: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);
}
.all-review .header-review {
display: flex;
justify-content: center;
flex: 0;
align-items: center;
padding: 16px 24px;
font-size: 16px;
line-height: 1.5;
border-bottom: 1px solid rgba(5, 5, 5, 0.06);
}
.all-review .header-review h6 {
margin: 0;
font-weight: 700;
}
.all-review .btn {
position: absolute;
font-size: 20px;
}
.body-review {
padding: 16px 24px;
}
.moblie-scroll {
height: 200px;
overflow-y: scroll;
}
.total-review span.mobile-sm-font {
font-size: 13px;
line-height: 0
}
.all-review .total-review p {
font-size: 2rem;
}
.all-review {
opacity: 0;
transform: translateX(100%);
visibility: hidden;
}
.all-review.active {
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 1;
transform: translateX(0);
visibility: visible;
pointer-events: auto;
z-index: 10000;
}
@media (max-width: 575.98px) {
.restaurantDetails-content-img img {
width: 100px;
height: 100px !important;
}
.restaurantDetails-overview-info-photos-list {
overflow-x: scroll;
}
.all-review {
width: 100%;
}
.body-review {
padding: 16px 16px;
height: 380px;
overflow-y: scroll;
}
.restaurantDetails-img img {
height: 180px;
}
.restaurantDetails-img {
padding: 0px 0%;
}
.restaurantDetails-content-img {
width: 110px;
margin-left: 1rem;
}
.restaurantDetails-content-info h6 {
font-weight: 700;
font-size: 16px;
line-height: 0;
}
#fullscreen-view img {
max-width: 80%;
max-height: 80%;
border-radius: 8px;
object-fit: contain;
cursor: pointer;
}
}
.full-description {
height: 60px;
overflow: hidden;
}
.full-description.active {
height: 100%;
overflow: hidden;
}
#fullscreen-view {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
z-index: 9999;
}
#fullscreen-view img {
max-width: 90%;
max-height: 90%;
border-radius: 8px;
object-fit: contain;
cursor: pointer;
}
.nav-btn{
font-size: 25px;
color: #fff;
}
.btn.nav-btn:focus{
box-shadow: none !important;
}
.btn.nav-btn:hover{
color: #fff !important;
}
.star-rating {
direction: rtl;
display: inline-flex;
}
.star-rating input[type="radio"] {
display: none;
}
.star-rating label {
font-size: 1.5rem;
color: #ccc;
cursor: pointer;
padding: 0 2px;
transition: color 0.2s;
}
.restaurantDetails-overview-info-menu-list {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.restaurantDetails-overview-info-menu-list::-webkit-scrollbar {
display: none;
}
.star-rating input[type="radio"]:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
color: #ffc107;
}
html {
scroll-behavior: smooth;
}
</style>
@endsection
@section('content')
<main class="main">
<section>
<div class="restaurantDetails" id="overview">
<div class="restaurantDetails-img">
<img src="{{ asset('uploads/' . $restaurant->cover_image) }}" alt="">
<div class="restaurantDetails-content">
<div class="restaurantDetails-content-img">
<img src="{{ asset('uploads/' . $restaurant->profile_image) }}" alt="">
</div>
<div class="restaurantDetails-content-info">
<h6 class="mt-2">{{ $restaurant->name }}</h6>
<div class="restaurantDetails-content-info-time">
<div class="open-time">
<p class="text-success">
{{ trans('multirestaurant::layout.opening_time') }}
</p>
<p>
{{ $restaurant->timing }}
</p>
</div>
<div class="open-location">
<p>
{{ $restaurant->location }}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="restaurantDetails-overview mt-5">
<div class="row">
<div class="col-lg-8">
<div class="restaurantDetails-overview-list">
<div class="restaurantDetails-overview-items">
<div class="restaurantDetails-overview-item">
<a href="#overview" class="restaurantDetails-overview-link"> {{ trans('multirestaurant::layout.overview') }}</a>
</div>
<div class="restaurantDetails-overview-item">
<a href="#photos" class="restaurantDetails-overview-link"> {{ trans('multirestaurant::layout.photos') }}</a>
</div>
<div class="restaurantDetails-overview-item">
<a href="#menu" class="restaurantDetails-overview-link"> {{ trans('multirestaurant::layout.menu') }}</a>
</div>
<div class="restaurantDetails-overview-item">
<a href="#reviews" class="restaurantDetails-overview-link"> {{ trans('multirestaurant::layout.reviews') }}</a>
</div>
</div>
</div>
<div class="restaurantDetails-overview-info">
<div class="full-description">
{!! $restaurant->description !!}
</div>
<span class="read-more" id="readMore">{{ trans('multirestaurant::layout.read_more') }}</span>
<span class="read-more d-none" id="readLess">{{ trans('multirestaurant::layout.read_less') }}</span>
<div class="restaurantDetails-overview-info-photos" id="photos">
@if (isset($restaurant->photos) && $restaurant->photos)
@php
$photos = json_decode($restaurant->photos);
$totalPhotos = count($photos);
@endphp
<span>{{ trans('multirestaurant::layout.photos') }} ({{ $totalPhotos }})</span>
<div class="restaurantDetails-overview-info-photos-list">
@foreach ($photos as $index => $photo)
@if ($index < 5)
<img src="{{ asset('uploads/' . $photo) }}" alt=""
onclick="showFullScreen({{ $index }})">
@endif
@endforeach
@if ($totalPhotos > 5)
<div class="others-photos" onclick="showFullScreen(5)">
<img src="{{ asset('uploads/' . $photos[5]) }}" alt="">
<div class="count">+{{ $totalPhotos - 5 }}</div>
</div>
@endif
</div>
<div id="fullscreen-view" class="fullscreen-overlay"
>
<button class="btn nav-btn left-btn" onclick="prevImg(event)">❮</button>
<img id="fullscreen-img" src="" onclick="closeFullScreen(event)">
<button class="btn nav-btn right-btn" onclick="nextImg(event)">❯</button>
</div>
<script>
const photos = {!! json_encode($photos) !!};
</script>
@endif
</div>
<div id="menu" class="restaurantDetails-overview-info-menu">
<span>{{ trans('multirestaurant::layout.menu') }} ({{$restaurant->items->count()}})</span>
<div class="restaurantDetails-overview-info-menu-list mt-4">
<div class="restaurantDetails-overview-info-menu-item">
<div class="restaurantDetails-overview-info-menu-link active">{{trans('multirestaurant::layout.all')}}</div>
</div>
@foreach ($categories as $category)
<div class="restaurantDetails-overview-info-menu-item">
<div class="restaurantDetails-overview-info-menu-link"
data-id="{{ $category->id }}">{{ $category->name }}</div>
</div>
@endforeach
</div>
<div class="restaurantDetails-overview-info-menu-contents mt-4">
<div class="row" id="restaurant_items">
</div>
<div class=" mt-4">
<div class="row">
<div class="col-lg-6 col-md-6">
<span>{{ trans('multirestaurant::layout.opening_hours') }}</span>
<div class="pt-3 pb-3">
@if (isset($restaurant->opening_hours) && $restaurant->opening_hours)
@foreach (json_decode($restaurant->opening_hours) as $opening_hour)
<div class="openingHours mt-2 mb-2">
<h6>{{$opening_hour->opening_date}}</h6>
<p>{{$opening_hour->opening_hour}}</p>
</div>
@endforeach
@endif
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-3 mt-4 restaurantDetails-overview-info-review">
<div class="review-box-for-auth-user">
@php
$auth = auth()->user();
@endphp
<form action="{{route('multirestaurant::review.store')}}" method="POST" class="card shadow-sm p-4" style="max-width: 600px;">
@csrf
<h5 class="mb-3">Leave a Review</h5>
<input type="hidden" name="user_id" value="{{$auth->id ?? ''}}">
<input type="hidden" name="restaurant_id" value="{{$restaurant->id ?? ''}}">
<div class="mb-3">
<label class="form-label d-block">Your Rating:</label>
<div class="star-rating">
@for ($i = 5; $i >= 1; $i--)
<input type="radio" id="star{{ $i }}" name="rating" value="{{ $i }}" required />
<label for="star{{ $i }}" title="{{ $i }} stars">★</label>
@endfor
</div>
</div>
<div class="mb-3">
<label for="comment" class="form-label">Your Comment:</label>
<textarea name="comment" id="comment" rows="3" class="form-control" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit Review</button>
</form>
</div>
<span id="reviews">{{ trans('multirestaurant::layout.what_people_are_Saying') }}</span>
<div class="restaurantDetails-overview-info-review-box row">
<div class="total-review col-lg-6 col-md-6">
@php
$total = $reviewCounts->total ?: 1;
$percent = function($count) use ($total) {
return round(($count / $total) * 100);
};
$fullStars = floor($avg_reviews);
$hasDecimal = ($avg_reviews - $fullStars) > 0 ? 1 : 0;
$emptyStars = 5 - ($fullStars + $hasDecimal);
$labels = [
'Excellent' => $reviewCounts->excellent,
'Good' => $reviewCounts->good,
'Average' => $reviewCounts->average,
'Below Average' => $reviewCounts->below_average,
'Poor' => $reviewCounts->poor,
];
@endphp
<p>{{ number_format($avg_reviews, 2) }} <span>out of 5</span></p>
<div class="total-star mt-1">
@for ($i = 0; $i < $fullStars; $i++)
<i class="fa fa-star"></i>
@endfor
@if ($hasDecimal)
<i class="fa fa-star-half-o"></i>
@endif
@for ($i = 0; $i < $emptyStars; $i++)
<i class="fa fa-star-o"></i>
@endfor
</div>
<h6>Based on {{ $reviewCounts->total }} reviews</h6>
<span>Reviews can only be made by diners who have eaten at this
restaurant.</span>
</div>
<div class="review-rate col-lg-6 col-md-6">
@foreach ($labels as $label => $count)
<div class="review-rate-line row">
<div class="col-lg-3 p-0">
<h6>{{ $label }}</h6>
</div>
<div class="col-lg-9 p-0">
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: {{ $percent($count) }}%"
aria-valuenow="{{ $percent($count) }}"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
<div class="mt-4">
@if (isset($reviews) && $reviews)
@foreach ($reviews->take(2) as $user_review)
<div class="user-review-list pt-2 pb-2">
<div class="user-review-details">
<h6>{{ $user_review->user->name ?? '' }}</h6>
<p>Dine on {{ $user_review->created_at }}</p>
</div>
<div class="user-review-rate mt-1">
<div class="stars">
@php
$rating = $user_review->rating;
$fullStars = floor($rating);
$halfStars = ($rating - $fullStars) >= 0.5 ? 1 : 0;
$emptyStars = 5 - ($fullStars + $halfStars);
@endphp
@for ($i = 0; $i < $fullStars; $i++)
<i class="fa fa-star"></i>
@endfor
@if ($halfStars)
<i class="fa fa-star-half-o"></i>
@endif
@for ($i = 0; $i < $emptyStars; $i++)
<i class="fa fa-star-o"></i>
@endfor
</div>
<span>{{ $user_review->rating }} out of 5</span>
</div>
<div class="pt-1 pb-1">
<p>{{ $user_review->comment ?? '' }}</p>
</div>
</div>
@endforeach
@endif
<div id="viewMorereviews" class="viewMorereviews">{{ trans('multirestaurant::layout.view_more_reviews') }}</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<form action="{{route('multirestaurant::make.reservation')}}" method="post">
@csrf
<div class="p-3 mb-4 mt-2 makereservation">
<input type="hidden" name="restaurant_id" value="{{$restaurant->id}}">
<p>{{ trans('multirestaurant::layout.make_reservation') }}</p>
<hr>
<span>{{ trans('multirestaurant::layout.check_in') }}</span>
<input type="text" name="date" id="checkin-datepicker" class="form-control mt-2 mb-4"
autocomplete="off" placeholder="Week, Month Date Year" required>
<span>{{ trans('multirestaurant::layout.party_size') }}</span>
<input type="number" name="party_size" id="party_size" class="form-control mt-2 mb-4"
autocomplete="off" required>
<span>{{ trans('multirestaurant::layout.contact_number') }}</span>
<input type="number" name="contact_number" id="contact_number" placeholder="Enter Your Contact Number" class="form-control mt-2 mb-4"
autocomplete="off" required>
<button class="btn btn-find w-100">{{ trans('multirestaurant::layout.find_time') }}</button>
</div>
</form>
<div class="makereservation-others">
@if (isset($restaurant->others_information) && $restaurant->others_information)
@foreach (json_decode($restaurant->others_information) as $others_information)
<div class="makereservation-others-item">
<img src="{{asset('uploads/'.$others_information->other_image)}}"
alt="">
<div>
<h6>{{$others_information->title}}</h6>
<p>{{$others_information->details}}</p>
</div>
</div>
@endforeach
@endif
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<div class="all-review" id="all-review">
<button class="btn btn-sm" id="viewlessreviews">
<i class="fa fa-times"></i>
</button>
<div class="header-review">
<h6> {{ trans('multirestaurant::layout.what_people_are_Saying') }} </h6>
</div>
<div class="body-review">
<div class="restaurantDetails-overview-info-review">
<div class="restaurantDetails-overview-info-review-box row">
<div class="total-review col-lg-5">
<p>{{ number_format($avg_reviews, 2) }} <span>out of 5</span></p>
<div class="total-star mt-1">
@for ($i = 0; $i < $fullStars; $i++)
<i class="fa fa-star"></i>
@endfor
@if ($hasDecimal)
<i class="fa fa-star-half-o"></i>
@endif
@for ($i = 0; $i < $emptyStars; $i++)
<i class="fa fa-star-o"></i>
@endfor
</div>
<h6>Based on {{ $reviewCounts->total }} reviews</h6>
<span class="mobile-sm-font">Reviews can only be made by diners who have eaten at this
restaurant.</span>
</div>
<div class="review-rate col-lg-7">
@foreach ($labels as $label => $count)
<div class="review-rate-line row">
<div class="col-lg-3 p-0">
<h6>{{ $label }}</h6>
</div>
<div class="col-lg-9 p-0">
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: {{ $percent($count) }}%"
aria-valuenow="{{ $percent($count) }}"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
<div class="mt-4 moblie-scroll">
@if (isset($reviews) && $reviews)
@foreach ($reviews as $user_review)
<div class="user-review-list pt-2 pb-2">
<div class="user-review-details">
<h6>{{ $user_review->user->name ?? '' }}</h6>
<p>Dine on {{ $user_review->created_at }}</p>
</div>
<div class="user-review-rate mt-1">
<div class="stars">
@php
$rating = $user_review->rating;
$fullStars = floor($rating);
$halfStars = ($rating - $fullStars) >= 0.5 ? 1 : 0;
$emptyStars = 5 - ($fullStars + $halfStars);
@endphp
@for ($i = 0; $i < $fullStars; $i++)
<i class="fa fa-star"></i>
@endfor
@if ($halfStars)
<i class="fa fa-star-half-o"></i>
@endif
@for ($i = 0; $i < $emptyStars; $i++)
<i class="fa fa-star-o"></i>
@endfor
</div>
<span>{{ $user_review->rating }} out of 5</span>
</div>
<div class="pt-1 pb-1">
<p>{{ $user_review->comment ?? '' }}</p>
</div>
</div>
@endforeach
@endif
</div>
</div>
</div>
</div>
<input type="hidden" id="category-id">
@endsection
@section('js')
<script>
$(document).on('click', '#viewlessreviews', function(e) {
e.preventDefault();
$('#all-review').removeClass('active');
});
$(document).on('click', '#viewMorereviews', function(e) {
e.preventDefault();
$('#all-review').addClass('active');
});
$(document).on('click', '#readMore', function(e) {
e.preventDefault();
$('.full-description').addClass('active');
$(this).addClass('d-none');
$('#readLess').removeClass('d-none');
});
$(document).on('click', '#readLess', function(e) {
e.preventDefault();
$('.full-description').removeClass('active');
$(this).addClass('d-none');
$('#readMore').removeClass('d-none');
});
</script>
<script>
$(document).ready(function() {
let id = {{ $restaurant->id }}
$('.restaurantDetails-overview-info-menu-link').click(function(e) {
$('.restaurantDetails-overview-info-menu-link').removeClass('active');
$(this).addClass('active');
let cate_id = $(this).attr('data-id');
$('#category-id').val(cate_id);
ajax();
});
function ajax() {
let category_id = $('#category-id').val();
$.ajax({
url: '{{ route('multirestaurant::get.all.restaurant.items') }}',
method: "GET",
data: {
id: id,
category_id: category_id
},
success: function(res) {
if (res.data && Array.isArray(res.data)) {
var itemhtml = '';
res.data.forEach(function(items) {
let discount = '';
let tax = '';
if(items.discount > 0){
if(items.discount_type == 'percent'){
discount = ' Discount ' + items.discount + '%';
}else{
discount = 'Discount ' + items.discount + res.currency_symbol;
}
}
if (items.tax && typeof items.tax.amount !== 'undefined' && typeof items.tax.type === 'string') {
if(items.tax.type == 'percent'){
tax = ' Tax ' + items.tax.amount + '%';
}else{
tax = ' Tax ' + items.tax.amount + res.currency_symbol;
}
}
itemhtml += `
<div class="col-lg-6 col-md-6">
<div class="restaurantDetails-overview-info-menu-content p-2">
<div class="restaurantDetails-overview-info-menu-content-img">
<img src="{{ asset('uploads') }}/${items.image}" alt="">
</div>
<div class="restaurantDetails-overview-info-menu-content-info">
<p>${items.name}</p>
<div class="amount">
<div>{{ $restaurant->currency_symbol }}${items.price}</div>
</div>
<span class="mr-5">
${tax}
</span>
<span>
${discount}
</span>
</div>
</div>
</div>
`;
});
$('#restaurant_items').html(itemhtml);
}
},
error: function(err) {
console.error('Error fetching restaurants:', err);
}
});
}
ajax();
});
</script>
<script>
let currentIndex = 0;
function showFullScreen(index) {
currentIndex = index;
document.getElementById("fullscreen-img").src = "/uploads/" + photos[currentIndex];
document.getElementById("fullscreen-view").style.display = "flex";
}
function closeFullScreen(e) {
if (e.target.id === 'fullscreen-img') {
document.getElementById("fullscreen-view").style.display = "none";
}
}
function nextImg(e) {
e.stopPropagation();
currentIndex = (currentIndex + 1) % photos.length;
document.getElementById("fullscreen-img").src = "/uploads/" + photos[currentIndex];
}
function prevImg(e) {
e.stopPropagation();
currentIndex = (currentIndex - 1 + photos.length) % photos.length;
document.getElementById("fullscreen-img").src = "/uploads/" + photos[currentIndex];
}
</script>
<script>
$(document).ready(function(){
$("#checkin-datepicker").datepicker({
dateFormat: "D, M d yy",
minDate: 0,
onSelect: function (dateText) {
$("#checkin-label").text(dateText);
}
});
});
</script>
@endsection
|