<x-admin-layout>
    <x-slot name="header">
        {{ __('Pengaturan Tema Publik') }}
    </x-slot>

    <div class="mb-6 flex justify-between items-end">
        <div>
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Pilih Tema Website</h3>
            <p class="text-sm text-gray-500 max-w-2xl mt-1">Tema yang dipilih akan secara instan mengubah struktur tampilan frontend utama website (toko dan landing page) tanpa mengganggu data sistem dan admin.</p>
        </div>
    </div>

    <!-- Grid Tema -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($themes as $theme)
        <div class="bg-white dark:bg-slate-800 rounded-2xl border transition-all duration-300 flex flex-col overflow-hidden {{ $activeTheme === $theme['id'] ? 'border-indigo-500 shadow-lg shadow-indigo-500/20 ring-1 ring-indigo-500' : 'border-gray-200 dark:border-slate-700 hover:shadow-md' }}">
            
            <!-- Thumbnail Tema -->
            <div class="aspect-[16/10] bg-gray-100 dark:bg-slate-700 relative overflow-hidden flex items-center justify-center border-b border-gray-100 dark:border-slate-700">
                @if($theme['screenshot'] && \Illuminate\Support\Facades\File::exists(resource_path('views/themes/' . $theme['id'] . '/' . $theme['screenshot'])))
                    <!-- Idealnya gambar di-deploy ke public, tapi karena di views kita perlu cara untuk serve. Sementara pakai placeholder atau fallback jika tidak diset public -->
                    <x-heroicon-o-photo class="w-16 h-16 text-gray-300 dark:text-slate-500" />
                    <span class="absolute text-xs text-gray-400">Screenshot tidak dapat dimuat langsung dari views</span>
                @else
                    <div class="flex flex-col items-center">
                        <x-heroicon-o-paint-brush class="w-16 h-16 text-indigo-300 dark:text-slate-500 mb-2" />
                        <span class="text-sm font-medium text-gray-400 dark:text-slate-500">Preview Tidak Tersedia</span>
                    </div>
                @endif

                @if($activeTheme === $theme['id'])
                <div class="absolute top-4 right-4 bg-indigo-600 text-white text-xs font-bold px-3 py-1.5 rounded-full flex items-center shadow-md">
                    <x-heroicon-s-check-circle class="w-4 h-4 mr-1" /> Sedang Aktif
                </div>
                @endif
            </div>

            <!-- Detail Tema -->
            <div class="p-6 flex flex-col flex-1">
                <div class="flexjustify-between items-start mb-2">
                    <h4 class="text-xl font-bold text-gray-900 dark:text-white">{{ $theme['name'] }}</h4>
                </div>
                
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-6 flex-1">{{ $theme['description'] }}</p>
                
                <div class="flex items-center justify-between text-xs text-gray-400 dark:text-slate-500 mb-6 pb-4 border-b border-gray-100 dark:border-slate-700">
                    <div class="flex items-center gap-1">
                        <x-heroicon-m-user class="w-4 h-4" /> {{ $theme['author'] }}
                    </div>
                    <div class="flex items-center gap-1">
                        <x-heroicon-m-tag class="w-4 h-4" /> v{{ $theme['version'] }}
                    </div>
                </div>

                <!-- Tombol Aksi -->
                @if($activeTheme !== $theme['id'])
                <form action="{{ route('admin.themes.update') }}" method="POST">
                    @csrf
                    <input type="hidden" name="theme" value="{{ $theme['id'] }}">
                    <button type="submit" class="w-full flex items-center justify-center py-2.5 px-4 bg-gray-50 hover:bg-indigo-50 text-gray-700 hover:text-indigo-700 font-medium rounded-xl transition-colors border border-gray-200 hover:border-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/50">
                        Gunakan Tema Ini
                    </button>
                </form>
                @else
                <button disabled class="w-full flex items-center justify-center py-2.5 px-4 bg-indigo-50 text-indigo-600 font-medium rounded-xl border border-indigo-100 cursor-default">
                    Ini adalah Tema Aktif
                </button>
                @endif
            </div>
        </div>
        @endforeach
    </div>
</x-admin-layout>
