@{
    ViewData["Title"] = "Tentang Rumah Memilah";
}

<!-- 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 Rumah Memilah</li>
    </ul>
</div>

<!-- Header -->
<h2 class="text-2xl font-semibold mb-6">Tentang Rumah Memilah</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/memilah.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 Rumah Memilah">
                </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">Rumah Memilah adalah program dari BPS RW DKI Jakarta yang mendorong partisipasi aktif warga dalam memilah sampah rumah tangga menjadi beberapa kategori. Program ini bertujuan untuk mengurangi volume sampah yang masuk ke TPA (Tempat Pembuangan Akhir) dan meningkatkan tingkat daur ulang di Jakarta.
                              
Dengan bergabung menjadi Rumah Memilah, Anda berkontribusi langsung pada kebersihan lingkungan dan ekonomi sirkular di Jakarta, serta mendapatkan berbagai keuntungan menarik..</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>