<x-admin-layout>
    <x-slot name="header">
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.testimonials.index') }}" class="p-2 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 rounded-full transition-colors">
                <x-heroicon-o-arrow-left class="w-6 h-6" />
            </a>
            <h2 class="font-bold text-2xl text-gray-900 dark:text-white leading-tight">
                {{ __('Edit Testimoni') }}
            </h2>
        </div>
    </x-slot>

    <div class="max-w-4xl bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden p-8">
        <form action="{{ route('admin.testimonials.update', $testimonial) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')

            <div>
                <label for="product_id" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Produk <span class="text-red-500">*</span></label>
                <select id="product_id" name="product_id" required class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border bg-white dark:bg-slate-800">
                    <option value="">-- Pilih Produk --</option>
                    @foreach($products as $product)
                        <option value="{{ $product->id }}" {{ old('product_id', $testimonial->product_id) == $product->id ? 'selected' : '' }}>{{ $product->name }}</option>
                    @endforeach
                </select>
                @error('product_id') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Nama Reviewer <span class="text-red-500">*</span></label>
                    <input type="text" name="name" id="name" value="{{ old('name', $testimonial->name) }}" required
                        class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white dark:border-slate-600">
                    @error('name') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="rating" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Rating Bintang (1-5) <span class="text-red-500">*</span></label>
                    <select id="rating" name="rating" required class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border bg-white dark:bg-slate-800 text-yellow-500 font-bold">
                        <option value="5" {{ old('rating', $testimonial->rating) == 5 ? 'selected' : '' }}>⭐⭐⭐⭐⭐ (5 Bintang)</option>
                        <option value="4" {{ old('rating', $testimonial->rating) == 4 ? 'selected' : '' }}>⭐⭐⭐⭐ (4 Bintang)</option>
                        <option value="3" {{ old('rating', $testimonial->rating) == 3 ? 'selected' : '' }}>⭐⭐⭐ (3 Bintang)</option>
                        <option value="2" {{ old('rating', $testimonial->rating) == 2 ? 'selected' : '' }}>⭐⭐ (2 Bintang)</option>
                        <option value="1" {{ old('rating', $testimonial->rating) == 1 ? 'selected' : '' }}>⭐ (1 Bintang)</option>
                    </select>
                    @error('rating') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>

            <div>
                <label for="avatar" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Foto Profil / Avatar (Opsional)</label>
                
                @if($testimonial->avatar)
                    <div class="mb-4">
                        <img src="{{ Storage::url($testimonial->avatar) }}" alt="Current Avatar" class="w-16 h-16 rounded-full object-cover border border-gray-200">
                    </div>
                @endif

                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-slate-600 border-dashed rounded-lg bg-gray-50 dark:bg-slate-700/50">
                    <div class="space-y-1 text-center">
                        <x-heroicon-o-user-circle class="mx-auto h-12 w-12 text-gray-400" />
                        <div class="flex text-sm text-gray-600 dark:text-gray-300 justify-center">
                            <label for="avatar" class="relative cursor-pointer bg-white dark:bg-slate-800 rounded-md font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500 px-2 py-1 border border-gray-200">
                                <span>Ganti Foto (Opsional)</span>
                                <input id="avatar" name="avatar" type="file" class="sr-only" accept="image/*">
                            </label>
                        </div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Biarkan kosong jika tidak ingin mengubah.</p>
                    </div>
                </div>
                @error('avatar') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Isi Testimoni <span class="text-red-500">*</span></label>
                <textarea id="content" name="content" rows="4" required
                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white dark:border-slate-600" 
                    placeholder="Tulis pendapat mengenai produk ini...">{{ old('content', $testimonial->content) }}</textarea>
                @error('content') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="pt-4 border-t border-gray-100 dark:border-slate-700 flex justify-end gap-3">
                <a href="{{ route('admin.testimonials.index') }}" class="px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50">
                    Batal
                </a>
                <button type="submit" class="px-4 py-2.5 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-lg shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</x-admin-layout>
