@extends('layouts.app')

@section('content')

    <section class="container mt-5">

        <div class="card border-0 shadow rounded-4 overflow-hidden">


            <div class="position-relative">

                <img src="{{ asset($tour->image) }}"
                     alt="{{ $tour->title }}">


                <span class="badge bg-primary position-absolute top-0 end-0 m-4">
                تور
            </span>

            </div>



            <div class="card-body p-4">


                <h1 class="fw-bold mb-4">
                    {{ $tour->title }}
                </h1>



                <p class="text-muted">
                    {{ $tour->summary }}
                </p>



                <hr>



                <div class="row g-4">


                    <div class="col-md-4">

                    <span class="text-secondary">
                        نوع سفر
                    </span>

                        <h5>
                            {{ $tour->travelType?->name ?? '-' }}
                        </h5>

                    </div>



                    <div class="col-md-4">

                    <span class="text-secondary">
                        تاریخ حرکت
                    </span>

                        <h5>
                            {{ \Carbon\Carbon::parse($tour->departure_date)->format('Y/m/d') }}
                        </h5>

                    </div>



                    <div class="col-md-4">

                    <span class="text-secondary">
                        قیمت
                    </span>

                        <h5>
                            {{ number_format($tour->price) }}
                            تومان
                        </h5>

                    </div>


                </div>



                <hr>



                <h4 class="fw-bold">
                    توضیحات تور
                </h4>


                <p class="mt-3">
                    {{ $tour->description }}
                </p>
                <div class="mt-4">

                    @auth
                        <form action="{{ route('users.reservations.store') }}" method="POST">

                            @csrf

                            <input type="hidden" name="reservable_id" value="{{ $tour->id }}">

                            <input type="hidden" name="reservable_type" value="App\Models\Tour">

                            <input type="hidden" name="price" value="{{ $tour->price }}">


                            <button type="submit" class="btn btn-success">
                                رزرو تور
                            </button>

                        </form>                    @else

                        <a href="{{ route('auth.login.index') }}" class="btn btn-warning btn-lg px-5">
                            برای رزرو وارد شوید
                        </a>

                    @endauth

                </div>
                <div>
                    <span>تعداد مشاهده</span>

                    <strong>
                        {{ $tour->views ?? 0 }}
                        بازدید
                    </strong>
                </div>

            </div>
            <form action="{{ route('comments.store') }}" method="POST">

                @csrf

                <input
                    type="hidden"
                    name="tour_id"
                    value="{{ $tour->id }}"
                >

                <div class="mb-3">
                    <label>
                        امتیاز
                    </label>

                    <select name="rating" class="form-control">
                        <option value="5">★★★★★</option>
                        <option value="4">★★★★</option>
                        <option value="3">★★★</option>
                        <option value="2">★★</option>
                        <option value="1">★</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label>
                        نظر شما
                    </label>

                    <textarea
                        name="comment"
                        rows="5"
                        class="form-control"
                    ></textarea>
                </div>

                <button class="btn btn-primary">
                    ثبت نظر
                </button>

            </form>
            <div class="comments-list mt-5">

                <h3 class="mb-4">
                    نظرات کاربران
                </h3>

                @forelse($comments as $comment)

                    <div class="card p-4 mb-3 shadow-sm">

                        <div class="d-flex justify-content-between">

                            <strong>
                                {{ $comment->user?->name ?? 'کاربر مهمان' }}
                            </strong>

                            <small>
                                {{ $comment->created_at->diffForHumans() }}
                            </small>

                        </div>

                        <p class="mt-3 mb-0">
                            {{ $comment->comment }}
                        </p>

                    </div>

                @empty

                    <div class="alert alert-secondary">
                        هنوز نظری ثبت نشده است.
                    </div>

                @endforelse

            </div>

        </div>

    </section>


@endsection