@extends('layouts.admin')

@section('title', 'Pengaturan Website - JDIH Desa Gogik')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <div class="bg-white p-6 rounded-2xl shadow-md border border-slate-200 space-y-6">
        <h2 class="text-xl font-extrabold text-slate-900 border-b pb-4">⚙️ Pengaturan Profil Desa & Sistem JDIH</h2>

        <form class="space-y-4 text-xs font-semibold text-slate-700">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block mb-1">Nama Desa *</label>
                    <input type="text" value="{{ $profile->name ?? 'Desa Gogik' }}" readonly class="w-full p-2.5 bg-slate-100 border border-slate-200 rounded-xl" />
                </div>
                <div>
                    <label class="block mb-1">Kecamatan *</label>
                    <input type="text" value="{{ $profile->kecamatan ?? 'Ungaran Barat' }}" readonly class="w-full p-2.5 bg-slate-100 border border-slate-200 rounded-xl" />
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block mb-1">Kabupaten *</label>
                    <input type="text" value="{{ $profile->kabupaten ?? 'Kabupaten Semarang' }}" readonly class="w-full p-2.5 bg-slate-100 border border-slate-200 rounded-xl" />
                </div>
                <div>
                    <label class="block mb-1">Provinsi *</label>
                    <input type="text" value="{{ $profile->provinsi ?? 'Jawa Tengah' }}" readonly class="w-full p-2.5 bg-slate-100 border border-slate-200 rounded-xl" />
                </div>
            </div>

            <div>
                <label class="block mb-1">Alamat Kantor Balai Desa</label>
                <input type="text" value="{{ $profile->address ?? 'Jl. Raya Gogik - Ungaran No. 01' }}" readonly class="w-full p-2.5 bg-slate-100 border border-slate-200 rounded-xl" />
            </div>

            <div class="p-4 bg-emerald-50 rounded-xl border border-emerald-200 text-emerald-800 text-xs font-semibold">
                ✅ Pengaturan database MySQL & variabel lingkungan server tersinkronisasi 100%.
            </div>
        </form>
    </div>
</div>
@endsection