@extends('admin.layout')

@section('title', 'Hero Banner')
@section('page_heading', 'Kelola Hero Banner')

@section('content')
<div class="w-full space-y-6">

    <div class="flex justify-between items-center">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Kelola Hero Banner</h2>
            <p class="text-sm text-on-surface-variant mt-1">Kelola gambar slide untuk hero banner halaman utama.</p>
        </div>
        <button onclick="document.getElementById('addBannerModal').classList.remove('hidden')" class="flex items-center gap-2 px-6 py-2.5 bg-primary text-white rounded-xl font-semibold hover:bg-primary/90 transition-all shadow-sm">
            <span class="material-symbols-outlined text-[20px]">add</span>
            <span>Tambah Banner Baru</span>
        </button>
    </div>

    <!-- Add New Banner Modal -->
    <div id="addBannerModal" class="fixed inset-0 z-50 hidden bg-black/50 flex items-center justify-center p-4">
        <div class="bg-surface-container-lowest rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-outline-variant flex justify-between items-center">
                <h3 class="font-bold text-lg text-on-surface">Tambah Banner Baru</h3>
                <button onclick="document.getElementById('addBannerModal').classList.add('hidden')" class="text-on-surface-variant hover:text-on-surface">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="p-6">
                <form action="{{ route('admin.hero.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                    @csrf
        
                    <!-- Judul Hero -->
                    <div>
                        <label class="block text-xs font-bold text-on-surface mb-1">Judul Utama <span class="text-error">*</span></label>
                        <input type="text" name="title" required
                            class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary"
                            placeholder="Pijat &amp; Wellness di Rumahmu">
                    </div>
        
                    <!-- Subtitle -->
                    <div>
                        <label class="block text-xs font-bold text-on-surface mb-1">Deskripsi / Subtitle <span class="text-error">*</span></label>
                        <textarea name="subtitle" rows="3" required
                            class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary"
                            placeholder="Tidak perlu keluar rumah..."></textarea>
                    </div>
        
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-on-surface mb-1">Teks Tombol CTA <span class="text-error">*</span></label>
                            <input type="text" name="cta_text" required
                                class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary"
                                placeholder="Lihat Layanan">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-on-surface mb-1">Link Target CTA <span class="text-error">*</span></label>
                            <input type="text" name="cta_link" required value="#layanan"
                                class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary"
                                placeholder="#layanan">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-on-surface mb-1">Sort Order</label>
                            <input type="number" name="sort_order" value="0"
                                class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary">
                        </div>
                    </div>
        
                    <!-- Background Image -->
                    <div>
                        <label class="block text-xs font-bold text-on-surface mb-1">Gambar Banner</label>
                        <input type="file" name="background_image" accept="image/*"
                            class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary">
                    </div>
        
                    <div class="flex items-center gap-2">
                        <input type="checkbox" name="is_active" id="is_active" checked class="rounded border-outline-variant text-primary focus:ring-primary">
                        <label for="is_active" class="text-sm text-on-surface">Tampil di Web</label>
                    </div>
        
                    <div class="pt-4 flex justify-end gap-3">
                        <button type="button" onclick="document.getElementById('addBannerModal').classList.add('hidden')" class="px-6 py-2.5 rounded-xl bg-surface-container-high text-on-surface font-bold text-sm hover:bg-surface-container-highest transition-colors">Batal</button>
                        <button type="submit" class="px-6 py-2.5 rounded-xl bg-primary text-on-primary font-bold text-sm hover:bg-opacity-90 transition-all shadow">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- List of Banners -->
    <div class="p-6 bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-sm space-y-6">
        <div>
            <h3 class="font-headline-md text-base font-bold text-on-surface">Daftar Banner</h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            @foreach($banners as $banner)
            <div class="bg-surface border border-outline-variant rounded-2xl overflow-hidden shadow-sm flex flex-col">
                <div class="h-40 bg-surface-container-high relative">
                    @if($banner->image_url)
                    <img src="{{ $banner->image_url }}" class="w-full h-full object-cover" alt="Banner Image">
                    @else
                    <div class="w-full h-full flex items-center justify-center text-on-surface-variant">Tidak ada gambar</div>
                    @endif
                    <div class="absolute top-2 right-2 bg-surface-container/80 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-bold shadow-sm">
                        Urutan: {{ $banner->sort_order }}
                    </div>
                </div>
                <div class="p-4 flex-1 flex flex-col">
                    <h4 class="font-bold text-on-surface text-lg truncate">{{ $banner->title }}</h4>
                    <p class="text-sm text-on-surface-variant line-clamp-2 mt-1 flex-1">{{ $banner->subtitle }}</p>
                    
                    <div class="mt-4 flex items-center justify-between pt-4 border-t border-outline-variant">
                        <form action="{{ route('admin.hero.toggle', $banner->id) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="flex items-center gap-2 text-sm font-bold {{ $banner->is_active ? 'text-primary' : 'text-on-surface-variant' }}">
                                <span class="material-symbols-outlined text-[20px]">{{ $banner->is_active ? 'toggle_on' : 'toggle_off' }}</span>
                                {{ $banner->is_active ? 'Aktif' : 'Nonaktif' }}
                            </button>
                        </form>

                        <div class="flex items-center gap-2">
                            <!-- Edit Button triggers a modal for simplicity -->
                            <button onclick="document.getElementById('editBanner{{ $banner->id }}').classList.remove('hidden')" class="w-8 h-8 rounded-full bg-surface-container hover:bg-surface-container-high flex items-center justify-center text-on-surface-variant transition-colors" title="Edit">
                                <span class="material-symbols-outlined text-[18px]">edit</span>
                            </button>
                            <form action="{{ route('admin.hero.destroy', $banner->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus banner ini?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="w-8 h-8 rounded-full bg-error-container hover:bg-error text-on-error-container hover:text-on-error flex items-center justify-center transition-colors" title="Hapus">
                                    <span class="material-symbols-outlined text-[18px]">delete</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Edit Modal for this banner -->
            <div id="editBanner{{ $banner->id }}" class="fixed inset-0 z-50 hidden bg-black/50 flex items-center justify-center p-4">
                <div class="bg-surface-container-lowest rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
                    <div class="p-6 border-b border-outline-variant flex justify-between items-center">
                        <h3 class="font-bold text-lg text-on-surface">Edit Banner</h3>
                        <button onclick="document.getElementById('editBanner{{ $banner->id }}').classList.add('hidden')" class="text-on-surface-variant hover:text-on-surface">
                            <span class="material-symbols-outlined">close</span>
                        </button>
                    </div>
                    <div class="p-6">
                        <form action="{{ route('admin.hero.update', $banner->id) }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                            @csrf
                            @method('PUT')
                            <div>
                                <label class="block text-xs font-bold text-on-surface mb-1">Judul Utama <span class="text-error">*</span></label>
                                <input type="text" name="title" value="{{ $banner->title }}" required class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-on-surface mb-1">Deskripsi / Subtitle <span class="text-error">*</span></label>
                                <textarea name="subtitle" rows="3" required class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary">{{ $banner->subtitle }}</textarea>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-xs font-bold text-on-surface mb-1">CTA Text <span class="text-error">*</span></label>
                                    <input type="text" name="cta_text" value="{{ $banner->cta_text }}" required class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary">
                                </div>
                                <div>
                                    <label class="block text-xs font-bold text-on-surface mb-1">CTA Link <span class="text-error">*</span></label>
                                    <input type="text" name="cta_link" value="{{ $banner->cta_link }}" required class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary">
                                </div>
                                <div>
                                    <label class="block text-xs font-bold text-on-surface mb-1">Sort Order</label>
                                    <input type="number" name="sort_order" value="{{ $banner->sort_order }}" class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-on-surface mb-1">Upload Gambar Banner (Biarkan kosong jika tidak ingin mengubah)</label>
                                <input type="file" name="background_image" accept="image/*" class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm focus:ring-1 focus:ring-primary">
                                @if($banner->image_url)
                                <div class="mt-2 text-xs text-on-surface-variant">
                                    Gambar saat ini: <a href="{{ $banner->image_url }}" target="_blank" class="text-primary hover:underline">Lihat Gambar</a>
                                </div>
                                @endif
                            </div>
                            <div class="flex items-center gap-2">
                                <input type="checkbox" name="is_active" id="is_active_{{ $banner->id }}" {{ $banner->is_active ? 'checked' : '' }} class="rounded border-outline-variant text-primary focus:ring-primary">
                                <label for="is_active_{{ $banner->id }}" class="text-sm text-on-surface">Tampil di Web</label>
                            </div>
                            <div class="pt-4 flex justify-end gap-3">
                                <button type="button" onclick="document.getElementById('editBanner{{ $banner->id }}').classList.add('hidden')" class="px-6 py-2.5 rounded-xl bg-surface-container-high text-on-surface font-bold text-sm hover:bg-surface-container-highest transition-colors">Batal</button>
                                <button type="submit" class="px-6 py-2.5 rounded-xl bg-primary text-on-primary font-bold text-sm hover:bg-opacity-90 transition-all shadow">Simpan Perubahan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        @if($banners->isEmpty())
        <div class="text-center py-10">
            <span class="material-symbols-outlined text-6xl text-on-surface-variant mb-2">imagesmode</span>
            <p class="text-on-surface-variant font-medium">Belum ada banner. Silakan tambahkan banner baru.</p>
        </div>
        @endif
    </div>

</div>
@endsection