@extends('frontend.layouts.app')

@section('title', 'Testimonials')

@php
    use App\Helpers\Helper;
@endphp

@section('content')
    {{-- Hero Section --}}
    @include('frontend.partials.hero', [
        'mainHeading' => Helper::contentText('pages.testimonials'),
        'subHeading' => Helper::contentText('pages.testimonials_sub_heading'),
        'breadcrumb1' => [
            'name' => __('route.home'),
            'route' => route('home'),
        ],
        'breadcrumb2' => [
            'name' => __('pages.testimonials'),
            'route' => route('testimonials'),
            'class' => 'text-gray-400',
        ],
        'breadcrumb3' => null,
        'breadcrumb4' => null,
    ])

    {{-- Testimonials Section --}}
    <section class="w-full">
        @php
            $testimonialSections = [
                [
                    'type' => 'alumni',
                    'data' => $alumniTestimonials,
                    'label' => Helper::content('pages.alumni_testimonial_label'),
                    'title' => Helper::content('pages.alumni_testimonial_title'),
                    'subtitle' => Helper::content('pages.alumni_testimonial_subtitle'),
                    'bg' => 'bg-[#F2F5FA]',
                    'bg_image' => 'assets/frontend/images/about-us/white-bg.avif',
                    'gradient' => 'bg-gradient-to-b from-white/60 to-white/40',
                ],
                [
                    'type' => 'guardian',
                    'data' => $guardianTestimonials,
                    'label' => Helper::content('pages.guardian_testimonial_label'),
                    'title' => Helper::content('pages.guardian_testimonial_title'),
                    'subtitle' => Helper::content('pages.guardian_testimonial_subtitle'),
                    'bg' => 'text-[#F2F5FA]',
                    'bg_image' => 'assets/frontend/images/about-us/hero-section.jpg',
                    'gradient' => 'bg-gradient-to-b from-black/60 to-black/40',
                ],
                [
                    'type' => 'faculty',
                    'data' => $facultyTestimonials,
                    'label' => Helper::content('pages.faculty_testimonial_label'),
                    'title' => Helper::content('pages.faculty_testimonial_title'),
                    'subtitle' => Helper::content('pages.faculty_testimonial_subtitle'),
                    'bg' => 'bg-[#F2F5FA]',
                    'bg_image' => 'assets/frontend/images/about-us/white-bg.avif',
                    'gradient' => 'bg-gradient-to-b from-white/60 to-white/40',
                ],
            ];

        // Every testimonial in one list, tagged with its group, so the page shows them all at once
        $groups = [
            'alumni' => [$alumniTestimonials, __('pages.alumni')],
            'guardian' => [$guardianTestimonials, __('pages.guardian')],
            'faculty' => [$facultyTestimonials, __('pages.faculty')],
        ];
        $items = collect();
        foreach ($groups as $key => [$list, $label]) {
            foreach ($list as $item) {
                $items->push(['key' => $key, 'label' => $label, 'model' => $item]);
            }
        }
        $counts = $items->groupBy('key')->map->count();

        use App\Enum\PerspectiveFromEnum;
    @endphp

    <section class="container-page section-y">
        <x-section-heading align="center" :eyebrow="Helper::contentText('pages.testimonials')" :title="Helper::content('homepage.hear_it_from_our_family')"
            :description="Helper::contentText('pages.testimonials_sub_heading')" />

        @if ($items->isEmpty())
            <p class="text-center text-gray-600 py-16">{{ __('pages.no_details') }}</p>
        @else
            {{-- Filter --}}
            <div role="tablist" aria-label="{{ Helper::contentText('pages.testimonials') }}" id="testimonial-filters"
                class="flex flex-wrap justify-center gap-2 mb-8 md:mb-10">
                <button type="button" role="tab" aria-selected="true" data-filter="all"
                    class="testimonial-filter btn !min-h-[2.5rem] !px-4 text-sm rounded-full border border-primary bg-primary text-white">
                    All <span class="opacity-80 font-normal">({{ $items->count() }})</span>
                </button>
                @foreach ($groups as $key => [$list, $label])
                    @continue(!($counts[$key] ?? 0))
                    <button type="button" role="tab" aria-selected="false" data-filter="{{ $key }}"
                        class="testimonial-filter btn !min-h-[2.5rem] !px-4 text-sm rounded-full border border-gray-300 bg-white text-gray-700 hover:border-primary hover:text-primary">
                        {{ $label }} <span class="opacity-70 font-normal">({{ $counts[$key] }})</span>
                    </button>
                @endforeach
            </div>

            {{-- All testimonials, no sliding --}}
            <div id="testimonial-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 grid-gap items-stretch">
                @foreach ($items as $row)
                    @php
                        $testimonial = $row['model'];
                        $role = $row['key'] === 'alumni'
                            ? trim(__('pages.batch_of') . ' ' . optional($testimonial->alumni)->batch)
                            : PerspectiveFromEnum::map($testimonial->perspective_from);
                    @endphp
                    <article data-testimonial data-group="{{ $row['key'] }}"
                        class="testimonial-card card-ui flex flex-col p-6 md:p-7">
                        <i class="fa-solid fa-quote-left text-3xl text-secondary/60 mb-4" aria-hidden="true"></i>

                        <div class="testimonial-text text-gray-700 text-[0.95rem] leading-7 line-clamp-6">
                            {!! Helper::stripInlineStyle($testimonial->testimonial_text) !!}
                        </div>

                        <button type="button"
                            class="testimonial-zoom self-start mt-3 text-sm font-semibold text-primary hover:underline"
                            data-src="{{ asset($testimonial->image) }}" data-name="{{ $testimonial->full_name }}"
                            data-role="{{ $role }}">
                            {{ __('pages.read_more') }}
                        </button>

                        <div class="mt-auto pt-6 flex items-center gap-4 border-t border-gray-100 mt-6">
                            <button type="button"
                                class="testimonial-zoom shrink-0 w-14 h-14 rounded-full overflow-hidden ring-2 ring-primary/20 cursor-zoom-in"
                                data-src="{{ asset($testimonial->image) }}" data-name="{{ $testimonial->full_name }}"
                                data-role="{{ $role }}" aria-label="View {{ $testimonial->full_name }}">
                                <img loading="lazy" decoding="async" src="{{ asset($testimonial->image) }}"
                                    alt="{{ $testimonial->full_name }}" class="w-full h-full object-cover">
                            </button>
                            <div class="min-w-0">
                                <p class="font-bold text-gray-900 truncate">{{ $testimonial->full_name }}</p>
                                <p class="text-sm text-primary font-medium">{{ $role }}</p>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
        @endif
    </section>

    <x-testimonial-modal />
@endsection

@push('scripts')
    <script>
        (function() {
            const buttons = document.querySelectorAll('.testimonial-filter');
            const cards = document.querySelectorAll('.testimonial-card');
            buttons.forEach((btn) => btn.addEventListener('click', () => {
                const f = btn.dataset.filter;
                buttons.forEach((b) => {
                    const on = b === btn;
                    b.setAttribute('aria-selected', on);
                    b.classList.toggle('bg-primary', on);
                    b.classList.toggle('text-white', on);
                    b.classList.toggle('border-primary', on);
                    b.classList.toggle('bg-white', !on);
                    b.classList.toggle('text-gray-700', !on);
                    b.classList.toggle('border-gray-300', !on);
                });
                cards.forEach((c) => c.classList.toggle('hidden', f !== 'all' && c.dataset.group !== f));
            }));
        })();
    </script>
@endpush