feat: add tour details page and update tour components
This commit is contained in:
@@ -0,0 +1,459 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<main class="main">
|
||||
<div class="site-breadcrumb" style="background: url({{asset('assets/img/breadcrumb/02.jpg')}})">
|
||||
<div class="container">
|
||||
<h2 class="breadcrumb-title">جزئیات {{$tour->title}}</h2>
|
||||
<ul class="breadcrumb-menu">
|
||||
<li><a href="{{route('index')}}">صفحه اصلی</a></li>
|
||||
<li class="active">جزئیات</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tour-single py-120">
|
||||
<div class="container">
|
||||
<div class="listing-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="listing-content">
|
||||
<div class="listing-slider owl-carousel owl-theme" dir="ltr">
|
||||
<img src="{{asset('assets/img/tour/single-1.jpg')}}" alt>
|
||||
<img src="{{asset('assets/img/tour/single-2.jpg')}}" alt>
|
||||
<img src="{{asset('assets/img/tour/single-3.jpg')}}" alt>
|
||||
</div>
|
||||
<div class="listing-header">
|
||||
<div class="listing-header-info">
|
||||
<h4 class="listing-title">{{$tour->title}}</h4>
|
||||
<p class="listing-location"><i class="far fa-location-dot"></i> تهران میدان
|
||||
آزادی ، خیابان گل ها</p>
|
||||
</div>
|
||||
<div class="listing-rate">
|
||||
<span class="badge"><i class="fal fa-star"></i> 5.0</span>
|
||||
<span class="listing-rate-type">عالی</span>
|
||||
<span class="listing-rate-review">(2 هزار بازخورد)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-item">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="listing-feature">
|
||||
<div class="listing-feature-icon">
|
||||
<i class="far fa-clock"></i>
|
||||
</div>
|
||||
<div class="listing-feature-content">
|
||||
<h6>مدت زمان</h6>
|
||||
<span>{{$tour->tour_details->first()?->days}} روز</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="listing-feature">
|
||||
<div class="listing-feature-icon">
|
||||
<i class="far fa-calendar-days"></i>
|
||||
</div>
|
||||
<div class="listing-feature-content">
|
||||
<h6>تاریخ</h6>
|
||||
<span>{{$startTime}} - {{$endTime}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="listing-feature">
|
||||
<div class="listing-feature-icon">
|
||||
<i class="far fa-users"></i>
|
||||
</div>
|
||||
<div class="listing-feature-content">
|
||||
<h6>اندازه گروه</h6>
|
||||
<span>{{$tour->tour_details->first()?->capacity}} آدم</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="listing-feature">
|
||||
<div class="listing-feature-icon">
|
||||
<i class="far fa-earth-americas"></i>
|
||||
</div>
|
||||
<div class="listing-feature-content">
|
||||
<h6>نوع تور</h6>
|
||||
<span>{{$tour->tour_type}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-item">
|
||||
<h4 class="mb-3">توضیحات</h4>
|
||||
<p>{{$tour->description}}</p>
|
||||
<p>{{$tour->description}}</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="listing-item faq-area">
|
||||
<h4 class="mb-4">سوالات متداول</h4>
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="heading1">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
|
||||
<span><i class="far fa-question"></i></span>هزینه های شارژ و خدمات برای چیست؟
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی و کنونی است.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="heading2">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
|
||||
<span><i class="far fa-question"></i></span> چگونه می توانم در اینجا عضو شوم؟
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی و کنونی است.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="heading3">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
|
||||
<span><i class="far fa-question"></i></span> آیا می توانم هر زمان برنامه خود را ارتقا دهم؟
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی و کنونی است.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-item">
|
||||
<h4 class="mb-3">بررسی ها</h4>
|
||||
<div class="listing-rating-box">
|
||||
<div class="listing-review-rating">
|
||||
<div class="listing-rating-count">
|
||||
<h2>4.5</h2>
|
||||
<div class="listing-rating-star">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
</div>
|
||||
<p>بر اساس 15 هزار بازخورد</p>
|
||||
</div>
|
||||
<div class="listing-rating-range">
|
||||
<div class="listing-rating-range-item">
|
||||
<div class="listing-rating-range-star">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="listing-rating-range-bar">
|
||||
<div class="listing-progress">
|
||||
<div class="listing-progress-width" style="width: 90%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-rating-range-percentage">
|
||||
<span>90%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-rating-range-item">
|
||||
<div class="listing-rating-range-star">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
</div>
|
||||
<div class="listing-rating-range-bar">
|
||||
<div class="listing-progress">
|
||||
<div class="listing-progress-width" style="width: 80%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-rating-range-percentage">
|
||||
<span>80%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-rating-range-item">
|
||||
<div class="listing-rating-range-star">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
</div>
|
||||
<div class="listing-rating-range-bar">
|
||||
<div class="listing-progress">
|
||||
<div class="listing-progress-width" style="width: 59%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-rating-range-percentage">
|
||||
<span>59%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-rating-range-item">
|
||||
<div class="listing-rating-range-star">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
</div>
|
||||
<div class="listing-rating-range-bar">
|
||||
<div class="listing-progress">
|
||||
<div class="listing-progress-width" style="width: 70%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-rating-range-percentage">
|
||||
<span>70%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-rating-range-item">
|
||||
<div class="listing-rating-range-star">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
</div>
|
||||
<div class="listing-rating-range-bar">
|
||||
<div class="listing-progress">
|
||||
<div class="listing-progress-width" style="width: 49%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-rating-range-percentage">
|
||||
<span>49%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-review">
|
||||
<h5>نمایش هزار بازخورد</h5>
|
||||
<div class="listing-review-item">
|
||||
<div class="listing-review-author">
|
||||
<img src="assets/img/account/01.jpg" alt>
|
||||
<div class="listing-review-author-info">
|
||||
<div>
|
||||
<h6>کانت ایوانز</h6>
|
||||
<span><i class="far fa-clock"></i> 1 روز پیش</span>
|
||||
</div>
|
||||
<div class="listing-review-author-rating">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و هدف بهبود است.
|
||||
</p>
|
||||
<div class="listing-review-reply">
|
||||
<a href="#" class="review-reply-btn"><i class="fal fa-reply"></i> پاسخ </a>
|
||||
<div class="review-reaction">
|
||||
<a href="#" class="review-like active"><i class="fal fa-thumbs-up"></i> 15</a>
|
||||
<a href="#" class="review-dislike"><i class="fal fa-thumbs-down"></i> 05</a>
|
||||
<a href="#" class="review-love"><i class="fal fa-heart"></i>
|
||||
50</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-review-item review-reply-item">
|
||||
<div class="listing-review-author">
|
||||
<img src="assets/img/account/02.jpg" alt>
|
||||
<div class="listing-review-author-info">
|
||||
<div>
|
||||
<h6>اریش تی گنائو</h6>
|
||||
<span><i class="far fa-clock"></i> 1 روز پیش</span>
|
||||
</div>
|
||||
<div class="listing-review-author-rating">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و هدف بهبود است.
|
||||
</p>
|
||||
<div class="listing-review-reply">
|
||||
<a href="#" class="review-reply-btn"><i class="fal fa-reply"></i> پاسخ </a>
|
||||
<div class="review-reaction">
|
||||
<a href="#" class="review-like"><i class="fal fa-thumbs-up"></i>
|
||||
15</a>
|
||||
<a href="#" class="review-dislike active"><i class="fal fa-thumbs-down"></i> 05</a>
|
||||
<a href="#" class="review-love"><i class="fal fa-heart"></i>
|
||||
50</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-review-item">
|
||||
<div class="listing-review-author">
|
||||
<img src="assets/img/account/03.jpg" alt>
|
||||
<div class="listing-review-author-info">
|
||||
<div>
|
||||
<h6>جسی سینکلر</h6>
|
||||
<span><i class="far fa-clock"></i> 1 روز پیش</span>
|
||||
</div>
|
||||
<div class="listing-review-author-rating">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و هدف بهبود است.
|
||||
</p>
|
||||
<div class="listing-review-reply">
|
||||
<a href="#" class="review-reply-btn"><i class="fal fa-reply"></i> پاسخ </a>
|
||||
<div class="review-reaction">
|
||||
<a href="#" class="review-like"><i class="fal fa-thumbs-up"></i>
|
||||
15</a>
|
||||
<a href="#" class="review-dislike"><i class="fal fa-thumbs-down"></i> 05</a>
|
||||
<a href="#" class="review-love active"><i class="fal fa-heart"></i> 50</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center my-4">
|
||||
<a href="#" class="theme-btn"> <span class="far fa-sync-alt"></span>
|
||||
بارگذاری بیشتر</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listing-review-form">
|
||||
<h4>نظر بدهید</h4>
|
||||
<form action="#">
|
||||
<div class="col-lg-12">
|
||||
<div class="form-group mb-3">
|
||||
<label class="star-label">امتیاز شما</label>
|
||||
<div class="listing-review-form-star">
|
||||
<div class="star-rating-wrapper">
|
||||
<div class="star-rating-box">
|
||||
<input type="radio" name="rating" value="5" id="star-5"> <label for="star-5">★</label>
|
||||
<input type="radio" name="rating" value="4" id="star-4"> <label for="star-4">★</label>
|
||||
<input type="radio" name="rating" value="3" id="star-3"> <label for="star-3">★</label>
|
||||
<input type="radio" name="rating" value="2" id="star-2"> <label for="star-2">★</label>
|
||||
<input type="radio" name="rating" value="1" id="star-1"> <label for="star-1">★</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="اسم شما*">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control" placeholder="ایمیل شما*">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" cols="30" rows="5" placeholder="نظر خود را بنویسید*"></textarea>
|
||||
</div>
|
||||
<button class="theme-btn" type="button">نظر بدهید</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="booking-sidebar listing-side-content">
|
||||
<div class="booking-item">
|
||||
<div class="listing-price">
|
||||
<h4 class="listing-price-tag">قیمت</h4>
|
||||
<div class="listing-price-amount"> <span>{{number_format($tour->tour_details->first()?->price)}} تومان</span> <del>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-form">
|
||||
<form action="#">
|
||||
<div class="tour-search-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="form-group">
|
||||
<div class="search-form-date">
|
||||
<div class="search-form-journey">
|
||||
<label>تاریخ سفر</label>
|
||||
<div class="form-group-icon">
|
||||
<p>{{$startTravel}}</p>
|
||||
<i class="fal fa-calendar-days"></i>
|
||||
</div>
|
||||
<p class="">{{$startDay}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div class="form-group">
|
||||
<div class="search-form-date">
|
||||
<div class="search-form-return">
|
||||
<label>زمان بازگشت</label>
|
||||
<div class="form-group-icon">
|
||||
<p>{{$endTravel}}</p>
|
||||
<i class="fal fa-calendar-days"></i>
|
||||
</div>
|
||||
<p class="">{{$endDay}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="listing-side-btn">
|
||||
<button type="submit" class="theme-btn"><span class="far fa-shopping-bag"></span>اکنون ثبت کن</button>
|
||||
<a href="#" class="border-btn"><i class="far fa-heart"></i> افزودن به علاقه مندی ها</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="listing-side-share">
|
||||
<a href="#"><i class="far fa-share-nodes"></i> اشتراک</a>
|
||||
<span><i class="far fa-eye"></i> 250 مشاهده</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="booking-sidebar listing-side-content mt-4">
|
||||
<h4 class="booking-title">چرا باید با ما رزرو کنید؟</h4>
|
||||
<ul class="listing-side-list">
|
||||
<li><i class="far fa-dollar-sign"></i>تضمین بهترین قیمت</li>
|
||||
<li><i class="far fa-headset"></i>24/7 مراقبت از مشتری</li>
|
||||
<li><i class="far fa-globe"></i>تورها و فعالیتهای دستچین شده</li>
|
||||
<li><i class="far fa-flag"></i>بیمه مسافرتی رایگان</li>
|
||||
<li><i class="far fa-car"></i>وسیله نقلیه راحت و بهداشتی</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
Reference in New Issue
Block a user