@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">
                                    <div class="listing-rating-box">

                                        <div class="listing-review">
                                            <h5>{{ $comments->count() }} نظر</h5>

                                            @forelse($comments as $comment)
                                                <div class="listing-review-item">
                                                    <div class="listing-review-author">
                                                        <img src="{{ asset('assets/img/account/01.jpg') }}" alt>
                                                        <div class="listing-review-author-info">
                                                            <div>
                                                                <h6>{{ $comment->user->first_name ?? $comment->guest_name }}</h6>
                                                                <span><i class="far fa-clock"></i> {{ $comment->created_at->diffForHumans() }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p>{{ $comment->body }}</p>
                                                </div>
                                            @empty
                                                <p>هنوز نظری ثبت نشده. اولین نفر باش!</p>
                                            @endforelse
                                        </div>                                        <div class="listing-review-form">
                                            <h4>نظر بدهید</h4>

                                            @if(session('success'))
                                                <div class="alert alert-success">{{ session('success') }}</div>
                                            @endif

                                            <form action="{{ route('comment.store') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="commentable_id" value="{{ $tour->id }}">
                                                <input type="hidden" name="commentable_type" value="tour">

                                                @guest
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <input type="text" name="guest_name"
                                                                       class="form-control" placeholder="اسم شما*"
                                                                       value="{{ old('guest_name') }}">
                                                                @error('guest_name')
                                                                <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endguest

                                                <div class="form-group">
                                                    <textarea name="body" class="form-control" cols="30" rows="5"
                                                              placeholder="نظر خود را بنویسید*">{{ old('body') }}</textarea>
                                                    @error('body')
                                                    <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>

                                                <button class="theme-btn" type="submit">نظر بدهید</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>
                                                            @if($isFavorite)
                                                                <a href="{{ route('favorites.toggle', ['type' => 'tour', 'id' => $tour->id]) }}"
                                                                   class="border-btn">
                                                                    <i class="far fa-heart"></i>
                                                                    حذف از علاقه مندی ها
                                                                </a>
                                                            @else
                                                                <a href="{{ route('favorites.toggle', ['type' => 'tour', 'id' => $tour->id]) }}"
                                                                   class="border-btn"><i class="far fa-heart"></i>
                                                                    افزودن به علاقه مندی ها
                                                                </a>
                                                            @endif

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

@endsection