@extends('frontend::layouts.master')


@section('content')
    @php
        /** แกลเลอรีหลักจาก DB ($detail['gallery']) — ใช้ก่อนเสมอถ้ามีรายการ */
        $detailGallery = ($detail ?? [])['gallery'] ?? [];
        if ($detailGallery !== []) {
            $lightboxGallery = array_values(array_map(static function (array $image): array {
                return [
                    'src' => $image['image'] ?? '',
                    'thumb' => $image['image'] ?? '',
                    'alt' => $image['name'] ?? '',
                ];
            }, $detailGallery));
        } else {
            $lightboxGallery = $galleryImages ?? [];
        }
        $mainImage = $detailGallery[0]['image'] ?? ($lightboxGallery[0]['src'] ?? null);
    @endphp
    <main class="pt-[80px] sm:pt-[88px] bg-gradient-to-b from-white to-kru-light min-h-screen">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <a href="javascript:history.back()"
                class="inline-flex items-center gap-2 text-kru-blue hover:underline text-sm font-medium mb-8">
                <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>
                @lang('frontend::lang.back')
            </a>

            <div class="overflow-hidden border-2 border-gray-200 rounded-xl shadow-lg bg-white"
                x-data='{
        lightboxOpen: false,
        lightboxIndex: 0,
        images: @json($lightboxGallery),
        get hasImages() { return this.images && this.images.length > 0; },
        next() {
          if (!this.hasImages) return;
          this.lightboxIndex = (this.lightboxIndex + 1) % this.images.length;
        },
        prev() {
          if (!this.hasImages) return;
          this.lightboxIndex = (this.lightboxIndex - 1 + this.images.length) % this.images.length;
        }
      }'>
                {{-- Hero / Main Image --}}
                <div class="relative h-[15rem] sm:h-[30rem] flex items-center justify-center text-white cursor-zoom-in"
                    @click="if (hasImages) { lightboxOpen = true; }">
                    @if ($mainImage)
                        <img src="{{ $mainImage }}" alt="{!! $detail['name'] ?? '' !!}"
                            class="absolute inset-0 w-full h-full object-cover" loading="lazy"
                            :src="hasImages ? images[lightboxIndex].src : '{{ $mainImage }}'"
                            :alt="hasImages && images[lightboxIndex].alt ? images[lightboxIndex].alt : '{{ $title ?? '' }}'">
                    @else
                        <div class="absolute inset-0"
                            style="background: {{ $accentColor ?? 'linear-gradient(135deg, var(--kru-blue) 0%, var(--kru-purple) 100%)' }};">
                        </div>
                    @endif
                    <button type="button"
                        class="absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-black/40 hover:bg-black/60 text-white flex items-center justify-center backdrop-blur"
                        @click.stop="prev()" x-show="hasImages && images.length > 1" aria-label="ภาพก่อนหน้า">
                        <svg class="w-5 h-5" 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>
                    <button type="button"
                        class="absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-black/40 hover:bg-black/60 text-white flex items-center justify-center backdrop-blur"
                        @click.stop="next()" x-show="hasImages && images.length > 1" aria-label="ภาพถัดไป">
                        <svg class="w-5 h-5" 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>
                    @if ($mainImage)
                        <span
                            class="absolute bottom-4 right-4 bg-black/55 text-white text-xs px-3 py-1 rounded-full flex items-center gap-1">
                            @lang('frontend::lang.click_to_enlarge_image')
                        </span>
                    @endif
                </div>
                {{-- Thumbnails --}}
                @if (!empty($detailGallery))
                    <div class="px-4 pt-4 pb-3 border-b border-gray-100 bg-gray-50">
                        <div class="flex gap-3 overflow-x-auto pb-1">
                            @foreach ($detailGallery as $index => $image)
                                <button type="button"
                                    class="relative w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent flex-shrink-0 bg-gray-100 hover:border-kru-purple focus:outline-none focus:ring-2 focus:ring-kru-purple/60"
                                    @click="if (hasImages) { lightboxIndex = {{ $index }}; }"
                                    :class="{
                                        'border-kru-purple ring-2 ring-kru-purple/60': lightboxIndex ===
                                            {{ $index }}
                                    }">
                                    <img src="{{ $image['image'] ?? '' }}"
                                        alt="{{ $image['name'] ?? "" }}" class="w-full h-full object-cover"
                                        loading="lazy">
                                </button>
                            @endforeach
                        </div>
                        <p class="mt-1 text-[11px] text-gray-500">
                            @lang('frontend::lang.click_to_enlarge')
                        </p>
                    </div>
                @endif

                <div class="p-6 sm:p-8">
                    @if (!empty($detail['categories'][0]['name']))
                        <p class="text-sm font-medium text-gray-500 mb-1">@lang('frontend::lang.level_name') {{ $detail['categories'][0]['name'] }}</p>
                    @endif
                    <h1 class="text-2xl sm:text-3xl font-bold text-kru-dark mb-4">{{ $detail['name'] ?? '' }}</h1>
                    <p class="text-gray-600 mb-6">{{ $detail['desc'] ?? '' }}</p>

                        <div class="space-y-4 mb-6">
                            @if (!empty($detail['detail']))
                                 {!! $detail['detail'] ?? '' !!}
                            @endif
                            <p class="text-gray-700">{{ $onlineDetail['description'] ?? '' }}</p>
                            <div class="flex flex-wrap gap-2">
                                <span class="text-lg font-semibold text-kru-blue">{{ $onlineDetail['price'] ?? '' }}</span>
                                @if (!empty($onlineDetail['originalPrice']))
                                    <span
                                        class="text-gray-400 line-through text-sm">{{ $onlineDetail['originalPrice'] ?? '' }}</span>
                                @endif
                            </div>
                            <ul class="space-y-2">
                                @if (!empty($detail['feature_of_course']) and count($detail['feature_of_course']) > 0)
                                    @foreach ($detail['feature_of_course'] ?? [] as $feature_of_course)
                                        <li class="flex items-center gap-2 text-sm text-gray-600">
                                            <svg class="w-4 h-4 text-kru-green flex-shrink-0" fill="none"
                                                stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            </svg>
                                            {!! $feature_of_course->local->name ?? '' !!}
                                        </li>
                                    @endforeach
                                @endif

                            </ul>
                        </div>

                    @if (!empty($detail['period']))
                        @foreach ($detail['period'] as $section)
                            @php
                                $colorClasses = !empty($section['accentColor'])
                                    ? match ($section['accentColor']) {
                                        'kru-blue' => 'border-kru-blue/40 bg-kru-blue/20',
                                        'kru-purple' => 'border-kru-purple/40 bg-kru-purple/20',
                                        'kru-green' => 'border-kru-green/40 bg-kru-green/20',
                                        'kru-orange' => 'border-kru-orange/40 bg-kru-orange/20',
                                        default => 'border-kru-blue/40 bg-kru-blue/20',
                                    }
                                    : 'border-kru-blue/40 bg-kru-blue/20';
                            @endphp
                            <section
                                class="mt-8 space-y-4 p-4 sm:p-5 rounded-xl border-2 shadow-md {{ $colorClasses ?? '' }}">
                                <h2 class="text-xl font-semibold text-kru-dark">{!! $section['name'] ?? '' !!}</h2>

                                {!! $section['detail'] ?? '' !!}
                                

                                {{-- ตารางรอบเรียน: div layout รองรับข้อความยาว + responsive --}}
                                <div class="space-y-3">
                                    @if (!empty($section['children']))
                                        @foreach ($section['children'] ?? [] as $row)
                                            <div
                                                class="rounded-lg border border-gray-200 bg-white overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                                                <div class="p-4 sm:p-5">
                                                    {{-- แถวข้อมูล: มือถือเรียงแนวตั้ง จอใหญ่เป็น grid 2-3 คอลัมน์ --}}
                                                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-4 text-sm">
                                                        @if (!empty($row['class_period_name']))
                                                            <div>
                                                                <span class="block text-xs font-bold text-kru-blue uppercase tracking-wide mb-0.5">@lang('frontend::lang.period')</span>
                                                                <span class="text-gray-700 break-words">{{ $row['class_period_name'] }}</span>
                                                            </div>
                                                        @endif

                                                        @if (!empty($row['period']))
                                                            <div>
                                                                <span
                                                                    class="block text-xs font-bold text-kru-blue uppercase tracking-wide mb-0.5">@lang('frontend::lang.day')</span>
                                                                <span
                                                                    class="text-gray-700 break-words">{{ $row['period'] }}</span>
                                                            </div>
                                                        @endif
                                                        @if (!empty($row['time']))
                                                            <div>
                                                                <span
                                                                    class="block text-xs font-bold text-kru-blue uppercase tracking-wide mb-0.5">@lang('frontend::lang.time')</span>
                                                                <span
                                                                    class="text-gray-700 break-words">{{ $row['time'] }}</span>
                                                            </div>
                                                        @endif

                                                        @if (!empty($row['count']))
                                                            <div>
                                                                <span
                                                                    class="block text-xs font-bold text-kru-blue uppercase tracking-wide mb-0.5">@lang('frontend::lang.count')</span>
                                                                <span
                                                                    class="text-gray-700">{{ $row['count'] ?? '—' }}</span>
                                                            </div>
                                                        @endif

                                                        @if (!empty($row['price']))
                                                            <div>
                                                                <span
                                                                    class="block text-xs font-bold text-kru-blue uppercase tracking-wide mb-0.5">@lang('frontend::lang.price')</span>
                                                                <span
                                                                    class="text-gray-700 font-medium">{{ $row['price'] ??  '—' }}</span>
                                                            </div>
                                                        @endif

                                                        @if (!empty($row['course_type_name']))
                                                            <div>
                                                                <span
                                                                    class="block text-xs font-bold text-kru-blue uppercase tracking-wide mb-0.5">@lang('frontend::lang.learning_format')</span>
                                                                <span
                                                                    class="text-gray-700 break-words">{{ $row['course_type_name'] ?? '—' }}</span>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    {{-- สถานะและปุ่มสมัคร แยกบรรทัดชัดเจน --}}
                                                    <div
                                                        class="mt-4 pt-4 border-t border-gray-100 flex flex-wrap items-center justify-between gap-3">
                                                        @if (($row['is_full'] ?? '') === 0)
                                                            <a href="{{ $contact_url ?? '' }}"
                                                                class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-green-100 text-green-700 hover:bg-green-200 transition-colors whitespace-nowrap">
                                                                @lang('frontend::lang.open_register')
                                                            </a>
                                                        @else
                                                            <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-700 whitespace-nowrap">@lang('frontend::lang.full')</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </section>
                        @endforeach
                    @endif
                    <div class="flex flex-wrap gap-3 pt-4">
                        <a href="{{ !empty($isOnline) ? '/online' : $contact_url ?? '' }}" class="flex-1 min-w-[140px]">
                            <span class="flex items-center justify-center w-full px-6 py-3 text-base font-medium text-white rounded-lg bg-gradient-to-r from-kru-blue to-kru-purple hover:opacity-90 transition-opacity">
                                {{ !empty($isOnline) ? __('frontend::lang.view_online') : __('frontend::lang.open_register') }}
                            </span>
                        </a>
                        <a href="{{ $detail['categories'][0]['url'] ?? '' }}" class="flex-1 min-w-[140px]">
                            <span class="flex items-center justify-center w-full px-6 py-3 text-base font-medium text-kru-dark rounded-lg border-2 border-gray-300 hover:bg-gray-50 transition-colors">
                                {{ !empty($detail['categories'][0]['url']) ? __('frontend::lang.back_to_courses')." " .($detail['categories'][0]['name'] ?? '') : __('frontend::lang.view_other_courses') }}
                            </span>
                        </a>
                    </div>
                </div>
                {{-- Lightbox --}}
                <div x-show="lightboxOpen" x-transition.opacity
                    class="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
                    @keydown.escape.window="lightboxOpen = false">
                    <div class="absolute inset-0" @click="lightboxOpen = false"></div>
                    <div class="relative z-10 max-w-4xl w-full px-4">
                        <div class="flex items-start justify-between mb-3">
                            <h2 class="text-white text-sm sm:text-base font-semibold truncate pr-8">
                                {{ $title ?? '' }}
                            </h2>
                            <button type="button"
                                class="text-white/70 hover:text-white rounded-full p-1.5 bg-white/10 hover:bg-white/20 transition-colors"
                                @click="lightboxOpen = false" aria-label="ปิดภาพ">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>
                        <div
                            class="relative bg-black rounded-xl overflow-hidden flex items-center justify-center aspect-video">
                            <template x-if="hasImages">
                                <img :src="images[lightboxIndex].src"
                                    :alt="images[lightboxIndex].alt || '{{ $title ?? '' }}'"
                                    class="max-h-[70vh] w-auto object-contain">
                            </template>
                            <template x-if="!hasImages">
                                <div class="text-gray-300 text-sm p-6">
                                    ยังไม่มีรูปภาพสำหรับคอร์สนี้
                                </div>
                            </template>

                            <button type="button"
                                class="absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-black/40 hover:bg-black/60 text-white flex items-center justify-center backdrop-blur"
                                @click.stop="prev()" x-show="hasImages && images.length > 1" aria-label="ภาพก่อนหน้า">
                                <svg class="w-5 h-5" 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>
                            <button type="button"
                                class="absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-black/40 hover:bg-black/60 text-white flex items-center justify-center backdrop-blur"
                                @click.stop="next()" x-show="hasImages && images.length > 1" aria-label="ภาพถัดไป">
                                <svg class="w-5 h-5" 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 class="flex justify-center gap-1 mt-3" x-show="hasImages && images.length > 1">
                            <template x-for="(img, idx) in images" :key="idx">
                                <button type="button" class="w-2 h-2 rounded-full"
                                    :class="lightboxIndex === idx ? 'bg-white' : 'bg-white/40'"
                                    @click="lightboxIndex = idx" :aria-label="'ไปยังภาพที่ ' + (idx + 1)"></button>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection