@extends('layouts.admin')

@section('title', isset($gallery) ? 'Edit Foto' : 'Tambah Foto')
@section('page-title', isset($gallery) ? 'Edit Foto' : 'Tambah Foto Baru')
@section('breadcrumb')
<a href="{{ route('admin.gallery.index') }}">Galeri</a>
<svg class="w-3 h-3" 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>
<span class="current">{{ isset($gallery) ? 'Edit' : 'Tambah' }}</span>
@endsection

@section('content')
<div class="max-w-xl">
    <form method="POST" action="{{ isset($gallery) ? route('admin.gallery.update', $gallery) : route('admin.gallery.store') }}" enctype="multipart/form-data" class="space-y-6">
        @csrf
        @if(isset($gallery)) @method('PUT') @endif

        <div class="admin-card">
            <div class="admin-card-body space-y-5">
                <div class="admin-section-title">
                    <svg class="admin-section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    Detail Foto
                </div>
                <div>
                    <label class="admin-label">Judul *</label>
                    <input type="text" name="title" value="{{ old('title', $gallery->title ?? '') }}" required class="admin-input">
                    @error('title') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="admin-label">Deskripsi</label>
                    <textarea name="description" rows="3" class="admin-textarea">{{ old('description', $gallery->description ?? '') }}</textarea>
                </div>

                <div class="grid grid-cols-2 gap-5">
                    <div>
                        <label class="admin-label">Kategori</label>
                        <input type="text" name="category" value="{{ old('category', $gallery->category ?? 'Umum') }}" placeholder="Contoh: Pelatihan" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">Urutan</label>
                        <input type="number" name="sort_order" value="{{ old('sort_order', $gallery->sort_order ?? 0) }}" class="admin-input">
                    </div>
                </div>

                <div>
                    <label class="admin-label">Foto {{ isset($gallery) ? '' : '*' }}</label>
                    @if(isset($gallery) && $gallery->image)
                    <img src="{{ $gallery->image_url }}" class="w-28 h-28 object-cover rounded-xl mb-2 border border-gray-200">
                    @endif
                    <input type="file" name="image" accept="image/*" {{ isset($gallery) ? '' : 'required' }} class="admin-input">
                    @error('image') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <label class="admin-toggle">
                    <input type="hidden" name="is_published" value="0">
                    <input type="checkbox" name="is_published" value="1"
                           {{ old('is_published', $gallery->is_published ?? true) ? 'checked' : '' }}>
                    <span class="text-sm font-medium text-gray-700">Publikasikan</span>
                </label>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" class="admin-btn admin-btn-primary">
                <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="M5 13l4 4L19 7"/></svg>
                {{ isset($gallery) ? 'Perbarui' : 'Simpan' }}
            </button>
            <a href="{{ route('admin.gallery.index') }}" class="admin-btn admin-btn-secondary">Batal</a>
        </div>
    </form>
</div>
@endsection