@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>

                                    </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>

                                                        @if($nights !== 0 && $nights !== null)
                                                            {{ $nights + 1 }} روز
                                                        @else
                                                            ساعتی میباشد
                                                        @endif
                                                    </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">&#9733;</label>
                                                                    <input type="radio" name="rating" value="4"
                                                                           id="star-4"> <label
                                                                        for="star-4">&#9733;</label>
                                                                    <input type="radio" name="rating" value="3"
                                                                           id="star-3"> <label
                                                                        for="star-3">&#9733;</label>
                                                                    <input type="radio" name="rating" value="2"
                                                                           id="star-2"> <label
                                                                        for="star-2">&#9733;</label>
                                                                    <input type="radio" name="rating" value="1"
                                                                           id="star-1"> <label
                                                                        for="star-1">&#9733;</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>
                                        @if($tour->tour_details->first()?->price == 0)
                                            <div class="listing-price-amount">
                                                <span>مجانی</span>
                                            </div>
                                        @else
                                            <div class="listing-price-amount">
                                                <span>{{number_format($tour->tour_details->first()?->price)}} تومان</span>


                                                @endif

                                            </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="{{ route('favorites.toggle', ['type' => 'tour', 'id' => $tour->id]) }}" 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