@extends('layout.mainlayout')
@section('content')	
@component('components.breadcrumb')
        @slot('title')
		Testimonials
        @endslot
        @slot('item1')
       index
        @endslot
        @slot('item3')
		Pages
        @endslot
        @slot('item2')
		Testimonials
        @endslot
       @endcomponent

 <!-- Page Wrapper -->
 <div class="content">
    <div class="container">

        <div class="row row-gap-4">
            @if(empty($testimonials ?? []) || count($testimonials ?? []) === 0)
                <div class="col-12">
                    <div class="text-center text-muted py-8">
                        <h4 class="text-muted mb-3">Testimonials Coming Soon</h4>
                        <p class="text-muted">We're working on gathering feedback from our amazing travelers. Check back soon for real testimonials!</p>
                    </div>
                </div>
            @else
                @foreach($testimonials as $testimonial)
                <div class="col-lg-4 d-flex">
                    <!-- Testimonial Item-->
                    <div class="card border-white mb-0 wow fadeInUp flex-fill" data-wow-delay="0.2s">
                        <div class="card-body">
                            <h6 class="mb-3">{{ $testimonial->title }}</h6>
                            <p class="mb-4">{{ $testimonial->content }}</p>
                            <div class="border-top pt-4 d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <a href="javascript:void(0);" class="avatar avatar-md  flex-shrink-0">
                                        <img src="{{ $testimonial->avatar }}" class="rounded-circle" alt="img">
                                    </a>
                                    <div class="ms-2">
                                        <h6 class="fs-16 fw-medium"><a href="javascript:void(0);">{{ $testimonial->name }}</a>
                                        </h6>
                                        <p>{{ $testimonial->location }}</p>
                                    </div>
                                </div>
                                <span class="badge badge-warning badge-xs text-gray-9 fs-13 fw-medium me-2">{{ $testimonial->rating }}</span>
                            </div>
                        </div>
                    </div>
                    <!-- /Testimonial Item-->
                </div>
                @endforeach
            @endif
        </div>

    </div>
</div>
<!-- /Page Wrapper -->


       @endsection