@extends('layout.app')

@section('content')
    <div class="breadcumb-wrapper " data-bg-src="assets/img/bg/breadcumb-bg.jpg">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Reviews</h1>
                <ul class="breadcumb-menu">
                    <li><a href="{{ url(app()->getLocale()) }}">Home</a></li>
                    <li>Reviews</li>
                </ul>
            </div>
        </div>
    </div>

    <section class="space">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 mb-4">
                    <h2 class="h3">Deixe a sua opinião</h2>
                </div>
            </div>
            
            <div class="row">
                <!-- Formulário de Review - Esquerda -->
                <div class="col-lg-8">
                    <livewire:review-form />
                </div>
                
                <!-- Tours Sugeridos - Direita -->
                <div class="col-lg-4">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-map-marker-alt me-2"></i>
                                Tours em Destaque
                            </h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-3">Quer deixar uma review sobre um tour específico?</p>
                            
                            @php
                                $tours = \App\Models\Tour::where('is_active', true)->take(2)->get();
                            @endphp
                            
                            @if($tours->count() > 0)
                                @foreach($tours as $tour)
                                    <div class="tour-item mb-3 pb-3 {{ !$loop->last ? 'border-bottom' : '' }}">
                                        @if($tour->image)
                                            <div class="tour-image mb-2">
                                                <img src="{{ asset('storage/' . $tour->image) }}" 
                                                     class="img-fluid rounded" 
                                                     alt="{{ $tour->name }}" 
                                                     style="height: 120px; width: 100%; object-fit: cover;">
                                            </div>
                                        @endif
                                        <h6 class="tour-title mb-2">{{ Str::limit($tour->name, 50) }}</h6>
                                        <p class="text-muted small mb-2">{{ Str::limit($tour->short_description ?? '', 60) }}</p>
                                        <a href="{{ url(app()->getLocale() . '/tours/' . $tour->slug) }}" 
                                           class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-eye me-1"></i>
                                            Ver & Avaliar
                                        </a>
                                    </div>
                                @endforeach
                                
                                <div class="text-center mt-3">
                                    <a href="{{ url(app()->getLocale() . '/tours') }}" 
                                       class="btn btn-primary">
                                        <i class="fas fa-list me-2"></i>
                                        Ver Todos os Tours
                                    </a>
                                </div>
                            @else
                                <p class="text-muted">Nenhum tour disponível no momento.</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-5">
                <div class="col-lg-12">

                    <div class="mb-4">
                        <h2 class="h3 mb-4">O que dizem os nossos clientes</h2>
                        <livewire:reviews-list />
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection