@extends('layouts.admin')

@section('title', 'Kelola Hero Section')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white p-8 rounded-2xl shadow-md border border-gray-200">
        <h3 class="text-xl font-bold text-gray-800 mb-6">Konfigurasi Banner Utama (Hero)</h3>
        
        <form action="{{ route('admin.hero.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')

            {{-- Input Judul (Mapping ke 'title' di Controller) --}}
            <div>
                <label for="title" class="block text-sm font-bold text-gray-700 mb-2">Judul Utama (Heading)</label>
                <input type="text" name="title" id="title" 
                       value="{{ old('title', $hero->title ?? '') }}" 
                       class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-all font-medium text-gray-800">
                @error('title') <span class="text-red-500 text-xs mt-1 block font-medium">{{ $message }}</span> @enderror
            </div>

            {{-- Input Sub Judul (Mapping ke 'subtitle' di Controller) --}}
            <div>
                <label for="subtitle" class="block text-sm font-bold text-gray-700 mb-2">Sub Judul (Subheading)</label>
                <textarea name="subtitle" id="subtitle" rows="4" 
                          class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-all font-medium text-gray-600">{{ old('subtitle', $hero->subtitle ?? '') }}</textarea>
                @error('subtitle') <span class="text-red-500 text-xs mt-1 block font-medium">{{ $message }}</span> @enderror
            </div>

            {{-- Input Teks Tombol (Mapping ke 'cta_text' di Controller) --}}
            <div>
                <label for="cta_text" class="block text-sm font-bold text-gray-700 mb-2">Teks Tombol (CTA)</label>
                <input type="text" name="cta_text" id="cta_text" 
                       value="{{ old('cta_text', $hero->cta_text ?? 'Daftar Sekarang') }}" 
                       class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-all font-medium text-gray-800">
                @error('cta_text') <span class="text-red-500 text-xs mt-1 block font-medium">{{ $message }}</span> @enderror
            </div>

            {{-- Preview Gambar --}}
            <div class="pt-4 border-t border-gray-100">
                <label class="block text-sm font-bold text-gray-700 mb-3 text-red-600 uppercase tracking-wider">Gambar Banner Saat Ini</label>
                
                @if(isset($hero->image) && $hero->image)
                    <div class="mb-6 group relative max-w-md">
                        <div class="relative overflow-hidden rounded-xl border-4 border-white shadow-lg bg-gray-100">
                             <img src="{{ asset($hero->image) }}" alt="Hero Banner" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        </div>
                        <p class="text-[10px] text-gray-400 mt-2">Lokasi File: /public/{{ $hero->image }}</p>
                    </div>
                @endif

                {{-- Input Upload Baru --}}
                <div class="flex items-center justify-center w-full">
                    <label for="image" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-xl cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors">
                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
                            <i class="fa-solid fa-cloud-arrow-up text-3xl text-gray-400 mb-2"></i>
                            <p class="text-sm text-gray-500"><span class="font-bold">Klik untuk ganti gambar</span> atau seret ke sini</p>
                            <p class="text-xs text-gray-400">JPG/PNG (Maks. 5MB)</p>
                        </div>
                        <input type="file" name="image" id="image" class="hidden">
                    </label>
                </div>
            </div>

            <div class="pt-6">
                <button type="submit" class="bg-red-600 text-white font-bold px-10 py-3 rounded-xl hover:bg-red-700 transition shadow-lg flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i> Simpan Perubahan Banner
                </button>
            </div>
        </form>
    </div>
</div>
@endsection