@extends('layouts.app')

@section('content')
    <div class="container py-5">

        {{--  پیام موفقیت--}}
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show d-flex align-items-center shadow-sm"
                 role="alert">
                <i class="bi bi-check-circle-fill me-2"></i>
                {{ session('success') }}
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        {{-- کارت اطلاعات تور --}}
        <div class="card shadow-lg border-0 rounded-4 mb-4">
            <div class="card-body p-4 p-md-5">
                {{-- ردیف عنوان و دکمه علاقه‌مندی --}}
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h1 class="card-title h3 fw-bold mb-0 d-flex align-items-center">
                        <span class="badge bg-info bg-opacity-10 text-info p-2 me-2 rounded">
                            <i class="bi bi-airplane"></i>
                        </span>
                        {{ $tour->title }}
                    </h1>

                    {{-- دکمه علاقه‌مندی --}}
                    @auth
                        <form action="{{ route('favorites.toggle') }}" method="POST" class="m-0">
                            @csrf
                            <input type="hidden" name="favoritable_type" value="App\Models\Tour">
                            <input type="hidden" name="favoritable_id" value="{{ $tour->id }}">

                            <button type="submit"
                                    class="btn {{ $tour->isFavoritedBy(auth()->user()) ? 'btn-outline-danger' : 'btn-outline-primary' }} rounded-pill px-4">
                                <i class="bi {{ $tour->isFavoritedBy(auth()->user()) ? 'bi-heart-fill' : 'bi-heart' }} me-1"></i>
                                {{ $tour->isFavoritedBy(auth()->user()) ? 'پسندیدم' : 'افزودن به علاقه‌مندی' }}
                            </button>
                        </form>
                    @endauth
                </div>

                <p class="card-text text-muted fs-5 mb-4 line-h-8">{{ $tour->description }}</p>
                <div
                    class="d-inline-flex align-items-center gap-2 bg-primary bg-opacity-10 text-primary fw-bold px-4 py-2 rounded-3">
                    <i class="bi bi-tag-fill"></i>
                    <span>{{ number_format($tour->price) }} تومان</span>
                </div>
            </div>
        </div>

        {{-- نظرات کاربران --}}
        <div class="card shadow-lg border-0 rounded-4 mb-4">
            <div class="card-body p-4 p-md-5">
                <div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-4">
                    <h3 class="h5 fw-bold mb-0 d-flex align-items-center">
                        <span class="bg-purple bg-opacity-10 text-purple p-2 me-2 rounded-3">
                            <i class="bi bi-people-fill"></i>
                        </span>
                        نظرات کاربران
                    </h3>
                    <span class="badge bg-purple bg-opacity-10 text-purple rounded-pill">
                        {{ $tour->comments_count ?? $tour->comments->count() }} نظر
                    </span>
                </div>

                <div class="d-flex flex-column gap-3">
                    @forelse($tour->comments as $comment)
                        <div class="p-3 rounded-4 bg-light border">
                            <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
                                <div class="d-flex align-items-center gap-2">
                                    <div
                                        class="rounded-circle bg-gradient-primary d-flex align-items-center justify-content-center text-white fw-bold"
                                        style="width:40px;height:40px;">
                                        {{ mb_strtoupper(mb_substr($comment->user?->first_name ?? 'م', 0, 1)) }}
                                    </div>
                                    <strong
                                        class="text-dark">{{ $comment->user?->first_name }} {{ $comment->user?->last_name }}</strong>
                                </div>
                                <small class="text-muted">
                                    <i class="bi bi-clock me-1"></i>{{ $comment->created_at->diffForHumans() }}
                                </small>
                            </div>
                            <p class="mb-0 text-muted">{{ $comment->body }}</p>
                        </div>
                    @empty
                        <div class="text-center py-5">
                            <div
                                class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3"
                                style="width:60px;height:60px;">
                                <i class="bi bi-chat-dots fs-2 text-muted"></i>
                            </div>
                            <p class="text-muted mb-0">هنوز نظری ثبت نشده است — اولین نفر باش! 🎉</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- فرم ثبت نظر --}}
        @auth
            <div class="card shadow-lg border-0 rounded-4 mb-4">
                <div class="card-body p-4 p-md-5">
                    <h2 class="card-title h4 fw-bold mb-4 d-flex align-items-center">
                        <span class="bg-primary bg-opacity-10 text-primary p-2 me-2 rounded-3">
                            <i class="bi bi-chat-left-text-fill"></i>
                        </span>
                        ثبت نظر شما
                    </h2>

                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('comments.tour.store', $tour->id) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <textarea name="body" class="form-control" rows="4"
                                      placeholder="نظر خود را درباره این تور بنویسید..." required></textarea>
                            @error('body')
                            <span class="text-danger small mt-1 d-block">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary px-4 rounded-pill">
                                <i class="bi bi-send-fill me-1"></i> ثبت نظر
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        @else
            <div class="alert alert-warning text-center">
                برای ثبت نظر لطفاً <a href="{{ route('auth.login.index') }}" class="alert-link">وارد شوید</a>.
            </div>
        @endauth

    </div>
@endsection