@extends('admin.layouts.master')
@section('title', 'Tambah Potensi')

@section('content')
<div class="max-w-2xl mx-auto">
    {{-- Back Link --}}
    <a href="{{ route('admin.potensi.index') }}" class="inline-flex items-center gap-2 text-sm font-bold text-slate-500 hover:text-slate-700 mb-6 transition-colors">
        <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
        Kembali ke Daftar
    </a>

    <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100">
        <div class="mb-8">
            <h2 class="text-2xl font-black text-slate-800">Tambah Potensi Baru</h2>
            <p class="text-slate-500 text-sm mt-1">Isi formulir berikut untuk menambahkan data potensi desa.</p>
        </div>

        @if($errors->any())
            <div class="mb-6 bg-red-50 border border-red-200 rounded-xl p-4">
                <ul class="text-sm text-red-600 space-y-1">
                    @foreach($errors->all() as $error)
                        <li class="flex items-center gap-2">
                            <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            {{ $error }}
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.potensi.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">Judul Potensi</label>
                <input type="text" name="judul" value="{{ old('judul') }}" class="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all text-sm" placeholder="Contoh: Wisata Air Terjun" required>
            </div>

            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">Upload Gambar (Opsional)</label>
                <div class="relative">
                    <input type="file" name="gambar" data-preview="preview-img" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl outline-none file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-bold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100 transition-all text-sm text-slate-500" accept="image/*">
                </div>
                <p class="text-xs text-slate-400 mt-2">Format: JPG, PNG, WEBP (Maksimal 2MB)</p>
                <img id="preview-img" src="" alt="Preview" class="hidden mt-3 h-40 rounded-xl object-cover border border-slate-200 shadow-sm">
            </div>

            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">Deskripsi</label>
                <textarea name="deskripsi" rows="5" class="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none resize-none transition-all text-sm" placeholder="Tuliskan deskripsi detail tentang potensi ini..." required>{{ old('deskripsi') }}</textarea>
            </div>

            <div class="flex gap-3 pt-4">
                <button type="submit" class="px-8 py-3.5 bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-bold rounded-xl hover:from-emerald-400 hover:to-teal-500 transition-all shadow-lg shadow-emerald-500/20 text-sm flex items-center gap-2">
                    <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"></path></svg>
                    Simpan Data
                </button>
                <a href="{{ route('admin.potensi.index') }}" class="px-8 py-3.5 bg-slate-100 text-slate-600 font-bold rounded-xl hover:bg-slate-200 transition-all text-sm">Batal</a>
            </div>
        </form>
    </div>
</div>
@endsection
