@props([
    'currentPage' => 1,
    'totalPages' => 1,
    'per_page' => 1,
    'pages' => [],
    'slug_id' => '',
    'opt' => [],
    'total_items' => 1,
    'type' => '',
    'paginator' => null,
    'reviews' => [],
    'showSliderWhenSinglePage' => true,
    'color' => 'pink',
])

@if ($totalPages > 1)
    <nav class="mt-8 flex flex-wrap items-center justify-center gap-2" aria-label="การแบ่งหน้ารีวิว">
        @if ($currentPage <= 1)
            <span
                class="inline-flex items-center gap-1 px-4 py-2 rounded-lg border border-gray-200 text-gray-400 cursor-not-allowed"
                aria-disabled="true">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                ก่อนหน้า
            </span>
        @else
            <a 
                href="{{ $paginator ? $paginator->previousPageUrl() : (\Illuminate\Support\Arr::get($pages, $currentPage - 1, '#')) }}"
                class="inline-flex items-center gap-1 px-4 py-2 rounded-lg border border-gray-200 text-kru-dark hover:bg-kru-{{ $color }}/10 hover:border-kru-{{ $color }} transition-colors"
                aria-label="หน้าก่อนหน้า">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                ก่อนหน้า
            </a>
        @endif

        <div class="flex items-center gap-1">
            @foreach ($pages as $page => $url)
                @if ($page == $currentPage)
                    <span
                        class="inline-flex w-10 h-10 items-center justify-center rounded-lg bg-kru-{{ $color }} text-white font-medium"
                        aria-current="page">{{ $page }}</span>
                @else
                    <a 
                        href="{{ $paginator ? $paginator->url($page) : $url }}"
                        class="inline-flex w-10 h-10 items-center justify-center rounded-lg border border-gray-200 text-kru-dark hover:bg-kru-{{ $color }}/10 hover:border-kru-{{ $color }} transition-colors">
                        {{ $page }}
                    </a>
                @endif
            @endforeach
        </div>

        @if ($currentPage < $totalPages)
            <a 
                href="{{ $paginator ? $paginator->nextPageUrl() : (\Illuminate\Support\Arr::get($pages, $currentPage + 1, '#')) }}"
                class="inline-flex items-center gap-1 px-4 py-2 rounded-lg border border-gray-200 text-kru-dark hover:bg-kru-{{ $color }}/10 hover:border-kru-{{ $color }} transition-colors"
                aria-label="หน้าถัดไป">
                ถัดไป
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </a>
        @else
            <span
                class="inline-flex items-center gap-1 px-4 py-2 rounded-lg border border-gray-200 text-gray-400 cursor-not-allowed"
                aria-disabled="true">
                ถัดไป
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </span>
        @endif
    </nav>
@elseif ($showSliderWhenSinglePage && count($reviews) > 0)
    @php $totalReviews = count($reviews); @endphp
    <div class="reviews-slider relative" x-data="{
        currentSlide: 0,
        total: {{ $totalReviews }},
        perView: 3,
        containerWidth: 0,
        init() {
            const update = () => {
                if (this.$refs.viewport) this.containerWidth = this.$refs.viewport.offsetWidth;
                const w = window.innerWidth;
                this.perView = w >= 1024 ? 3 : w >= 768 ? 2 : 1;
                this.currentSlide = Math.min(this.currentSlide, Math.max(0, this.total - this.perView));
            };
            this.$nextTick(update);
            window.addEventListener('resize', update);
        },
        get maxSlide() { return Math.max(0, this.total - this.perView); },
        get translateX() { return -this.currentSlide * (this.containerWidth / this.perView); },
        get pageIndices() { return Array.from({ length: Math.ceil(this.total / this.perView) }, (_, i) => i); },
        get currentPage() { return Math.min(Math.floor(this.currentSlide / this.perView), this.pageIndices.length - 1); }
    }">
        <div class="flex items-center gap-2 md:gap-4">
            <div class="flex items-center shrink-0 -ml-1 sm:ml-0 sm:-ml-2 lg:-ml-4 z-10">
                <button type="button" @click="currentSlide = Math.max(0, currentSlide - 1)"
                    :disabled="currentSlide === 0"
                    class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white shadow-lg border border-gray-100 flex items-center justify-center text-kru-dark hover:bg-kru-{{ $color }}/10 hover:border-kru-{{ $color }}/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white disabled:hover:border-gray-100"
                    aria-label="รีวิวก่อนหน้า">
                    <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15 19l-7-7 7-7" />
                    </svg>
                </button>
            </div>
            <div class="overflow-hidden flex-1 min-w-0 py-[2rem]" x-ref="viewport">
                <div class="flex transition-transform duration-400 ease-out"
                    :style="`width: ${(total / perView) * 100}%; transform: translateX(${translateX}px)`">
                    @foreach ($reviews as $review)
                        <div class="flex-none px-2 md:px-3" :style="`width: ${100/total}%`">
                            <div
                                class="p-6 md:p-7 bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 h-full flex flex-col min-h-[280px] md:min-h-[300px]">
                                <div class="flex gap-1 mb-4">
                                    @for ($j = 0; $j < ($review['rating'] ?? 0); $j++)
                                        <svg class="w-5 h-5 fill-kru-yellow text-kru-yellow" fill="currentColor"
                                            viewBox="0 0 24 24">
                                            <path
                                                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                                        </svg>
                                    @endfor
                                </div>
                                <p class="text-gray-700 mb-5 leading-relaxed flex-1">
                                    "{{ $review['content'] ?? $review['desc'] ?? '' }}"</p>
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden bg-kru-blue/20 flex items-center justify-center shrink-0 ring-2 ring-white shadow">
                                        @if (!empty($review['avatar'] ?? $review['image']))
                                            <img src="{{ asset($review['avatar'] ?? $review['image']) }}"
                                                alt="{{ $review['name'] }}" class="w-full h-full object-cover"
                                                loading="lazy"
                                                onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                                            <span
                                                class="text-kru-blue font-bold text-2xl md:text-3xl hidden w-full h-full items-center justify-center">{{ mb_substr($review['name'], 0, 1) }}</span>
                                        @else
                                            <span
                                                class="text-kru-blue font-bold text-2xl md:text-3xl">{{ mb_substr($review['name'], 0, 1) }}</span>
                                        @endif
                                    </div>
                                    <div class="min-w-0">
                                        <p class="font-semibold text-kru-dark truncate">
                                            {{ $review['name'] ?? '' }}</p>
                                        @if (!empty($review['course'] ?? ($review['courses']['local']['name'] ?? null)))
                                            <p class="text-sm text-gray-500 truncate">
                                                {{ $review['course'] ?? ($review['courses']['local']['name'] ?? '') }}</p>
                                        @endif
                                        <p class="text-sm text-gray-500">
                                            {{ $review['grade'] ?? ($review['categories'][0]['name'] ?? '') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="flex items-center shrink-0 -mr-1 sm:mr-0 sm:-mr-2 lg:-mr-4 z-10">
                <button type="button" @click="currentSlide = Math.min(maxSlide, currentSlide + 1)"
                    :disabled="currentSlide >= maxSlide"
                    class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white shadow-lg border border-gray-100 flex items-center justify-center text-kru-dark hover:bg-kru-{{ $color }}/10 hover:border-kru-{{ $color }}/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white disabled:hover:border-gray-100"
                    aria-label="รีวิวถัดไป">
                    <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            </div>
        </div>

        <div class="flex items-center justify-center mt-6 sm:mt-8">
            <div class="flex flex-wrap justify-center gap-1.5 sm:gap-2 md:gap-3 max-w-full" role="tablist"
                aria-label="เลือกหน้ารีวิว">
                <template x-for="p in pageIndices" :key="p">
                    <button type="button" @click="currentSlide = Math.min(p * perView, maxSlide)"
                        :class="currentPage === p ? 'bg-kru-{{ $color }} scale-110' : 'bg-gray-300 hover:bg-gray-400'"
                        class="w-3 h-3 sm:w-3.5 sm:h-3.5 md:w-4 md:h-4 rounded-full transition-all duration-300"
                        :aria-current="currentPage === p ? 'true' : 'false'"
                        :aria-label="'หน้ารีวิวที่ ' + (p + 1)"></button>
                </template>
            </div>
        </div>
    </div>
@endif