@{
    ViewData["Title"] = "Tentang BPS-RW";
}

<!-- Toast Notification -->
<div id="successToast" class="fixed top-20 right-6 z-[9999] hidden">
    <div class="alert bg-green-50 border border-green-200 shadow-lg flex items-start gap-3 pr-12 min-w-[320px]">
        <div class="flex-shrink-0">
            <div class="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
                <span class="icon text-white text-xs">check</span>
            </div>
        </div>
        <div class="flex-1">
            <h3 class="font-semibold text-gray-900">Konten berhasil diubah!</h3>
            <p class="text-sm text-gray-600">Berhasil! Konten telah berhasil diubah.</p>
        </div>
        <button onclick="closeToast()" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600">
            <span class="icon text-lg">close</span>
        </button>
    </div>
</div>

<div class="breadcrumbs text-sm mb-6">
    <ul>
        <li class="text-gray-500"><a>CMS</a></li>
        <li>Tentang BPS-RW</li>
    </ul>
</div>

<!-- Header -->
<h2 class="text-2xl font-semibold mb-6">Tentang BPS-RW</h2>

<div class="bg-white rounded-xl p-8 shadow-sm">

    <!-- Images & Input Column -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
        <div class="relative">
            <img src="/images/truck.png"
                 class="rounded-xl shadow w-full h-[430px] object-cover" />
            <label class="absolute inset-0 flex items-center justify-center cursor-pointer">
                <input type="file" class="hidden" />
                <div class="btn btn-sm bg-white shadow rounded-full px-4 flex items-center gap-1">
                    <span class="icon icon-fill text-gray-600 text-base">image</span>
                    Ganti Gambar
                </div>
            </label>
        </div>
        <div class="flex flex-col h-[430px]">
            <div class="flex flex-col gap-5 flex-1">
                <div>
                    <label class="font-medium">Judul</label>
                    <input type="text"
                           class="input input-bordered w-full mt-1 h-11"
                           placeholder="Masukkan judul"
                           value="Tentang BPS-RW">
                </div>
                <div class="flex-1 flex flex-col">
                    <label class="font-medium">Deskripsi</label>
                    <textarea class="textarea textarea-bordered w-full mt-1 flex-1 resize-none"
                              placeholder="Masukkan deskripsi">BPS-RW (Bidang Pengelolaan Sampah Lingkup Rukun Warga) adalah Program dari Dinas Lingkungan Hidup Provinsi DKI Jakarta yang bertujuan untuk mengoptimalkan pengelolaan sampah berbasis komunitas di tingkat RW. Program ini hadir untuk meningkatkan kesadaran masyarakat dalam memilah, mengelola, serta mendaur ulang sampah guna menciptakan lingkungan yang lebih bersih dan sehat.</textarea>
                </div>
            </div>
            <button onclick="showSuccessToast()" class="btn btn-primary w-full rounded-full mt-5">
                Simpan
            </button>
        </div>
    </div>
</div>

<script>
    function showSuccessToast() {
        const toast = document.getElementById('successToast');
        toast.classList.remove('hidden');
        setTimeout(() => {
            closeToast();
        }, 5000);
    }
    
    function closeToast() {
        const toast = document.getElementById('successToast');
        toast.classList.add('hidden');
    }
</script>