@extends('public.layout.app')
@section('title', 'Testimonials')

@section('body')
<section class="section pt-5">
    <div class="container">
        <div class="glass shadow-soft p-4 p-lg-5 mb-4">
            <div class="d-flex flex-wrap justify-content-between gap-3 align-items-end">
                <div>
                    <div class="badge-soft d-inline-flex align-items-center gap-2 mb-2">
                        <i class="fa-solid fa-comments"></i> Testimonials
                    </div>
                    <h1 class="fw-bold mb-2">Student and teacher voices</h1>
                    <p class="text-muted2 mb-0">Stories from learners, instructors, alumni, and partners.</p>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <a class="btn btn-outline-dark btn-sm" href="{{ route('front.testimonials.index') }}">All</a>
                    <a class="btn btn-success-soft btn-sm" href="{{ route('front.testimonials.index', ['type' => 'student']) }}">Students</a>
                    <a class="btn btn-info-soft btn-sm" href="{{ route('front.testimonials.index', ['type' => 'teacher']) }}">Teachers</a>
                </div>
            </div>
        </div>

        <div class="row g-4">
            @forelse($testimonials as $testimonial)
                <div class="col-md-6 col-xl-4">
                    <div class="card-soft shadow-soft p-4 h-100">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <div class="testimonial-avatar">
                                @if($testimonial->photo)
                                    <img src="{{ asset('storage/' . $testimonial->photo) }}" alt="{{ $testimonial->name }}">
                                @else
                                    <span>{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($testimonial->name, 0, 1)) }}</span>
                                @endif
                            </div>
                            <div>
                                <h5 class="fw-bold mb-0">{{ $testimonial->name }}</h5>
                                <div class="text-muted2 small">{{ ucfirst($testimonial->audience_type) }} @if($testimonial->role_or_program) | {{ $testimonial->role_or_program }} @endif</div>
                            </div>
                        </div>
                        <p class="text-muted2 mb-3" style="line-height:1.8;">"{{ $testimonial->quote }}"</p>
                        @if($testimonial->rating)
                            <div class="text-warning">
                                @for($i = 0; $i < $testimonial->rating; $i++)<i class="fa-solid fa-star"></i>@endfor
                            </div>
                        @endif
                    </div>
                </div>
            @empty
                <div class="col-12"><div class="alert alert-soft">Testimonials will appear after they are added.</div></div>
            @endforelse
        </div>

        @if(method_exists($testimonials, 'hasPages') && $testimonials->hasPages())
            <div class="d-flex justify-content-center mt-4">{{ $testimonials->links('pagination::bootstrap-4') }}</div>
        @endif
    </div>
</section>
@endsection

@push('styles')
<style>
    .testimonial-avatar{width:62px;height:62px;border-radius:20px;background:rgba(245,158,11,.16);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 62px}
    .testimonial-avatar img{width:100%;height:100%;object-fit:cover}.testimonial-avatar span{font-size:26px;font-weight:900;color:#7c4a03}
</style>
@endpush