@{
    ViewData["Title"] = "Aktivitas, Fasilitas & Jenis Pengolahan Bank Sampah";
}

<div class="flex flex-col gap-2">
    <div class="prose">
        <span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
            Aktivitas, Fasilitas & Jenis Pengolahan Bank Sampah
        </span>
    </div>
</div>

<div class="h-6"></div>

<!-- View Mode -->
<div id="viewMode" class="px-5 py-6 bg-white rounded-lg flex flex-col justify-center items-start gap-3">
    <div class="self-stretch inline-flex justify-start items-start gap-6">
        <div class="flex-1 h-7 justify-start text-slate-600 text-base font-bold font-['Plus_Jakarta_Sans'] leading-6">
            Informasi Aktivitas, Fasilitas & Jenis Pengolahan
        </div>
        <button onclick="toggleEditMode()" class="px-3.5 py-2 bg-white rounded-full outline outline-1 outline-offset-[-1px] outline-gray-300 flex justify-center items-center gap-2 hover:bg-gray-50">
            <i class="ph ph-note-pencil text-lg text-zinc-800"></i>
            <div class="justify-start text-slate-800 text-sm font-semibold font-['Plus_Jakarta_Sans'] leading-5">Edit</div>
        </button>
    </div>

    <div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>

    <!-- Aktivitas Section -->
    <div class="self-stretch flex flex-col justify-start items-start gap-3">
        <div class="self-stretch flex flex-col justify-start items-start gap-8">
            <div class="self-stretch inline-flex justify-start items-start gap-4">
                <div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Aktivitas</div>
                <div id="viewAktivitas" class="w-64 self-stretch flex flex-col justify-start items-start">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>
        </div>
    </div>

    <div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>

    <!-- Fasilitas Section -->
    <div class="self-stretch flex flex-col justify-start items-start gap-3">
        <div class="self-stretch flex flex-col justify-start items-start gap-8">
            <div class="self-stretch inline-flex justify-start items-start gap-4">
                <div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Fasilitas</div>
                <div id="viewFasilitas" class="w-64 self-stretch flex flex-col justify-start items-start">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>
        </div>
    </div>

    <div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>

    <!-- Jenis Pengolahan Section -->
    <div class="self-stretch flex flex-col justify-start items-start gap-3">
        <div class="self-stretch flex flex-col justify-start items-start gap-8">
            <div class="self-stretch inline-flex justify-start items-start gap-4">
                <div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Jenis Pengolahan</div>
                <div id="viewJenisPengolahan" class="w-64 self-stretch flex flex-col justify-start items-start">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Mode -->
<div id="editMode" class="px-5 py-6 bg-white rounded-lg flex-col justify-center items-start gap-3 hidden">
    <div class="self-stretch inline-flex justify-start items-start gap-6">
        <div class="flex-1 h-7 justify-start text-slate-600 text-base font-bold font-['Plus_Jakarta_Sans'] leading-6">
            Informasi Aktivitas, Fasilitas & Jenis Pengolahan
        </div>
    </div>

    <div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>

    <!-- Aktivitas Section with Checkboxes -->
    <div class="self-stretch flex flex-col justify-start items-start gap-3">
        <div class="self-stretch flex flex-col justify-start items-start gap-8">
            <div class="self-stretch inline-flex justify-start items-start gap-4">
                <div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Aktivitas</div>
                <div class="inline-flex flex-col justify-center items-start gap-3">
                    <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="aktivitas" value="Pemilahan" class="checkbox checkbox-success checkbox-xs rounded-lg">
                        <div class="self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pemilahan</div>
                    </label>
                    <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="aktivitas" value="Pengumpulan" class="checkbox checkbox-success checkbox-xs rounded-lg">
                        <div class="self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pengumpulan</div>
                    </label>
                    <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="aktivitas" value="Penyimpanan" class="checkbox checkbox-success checkbox-xs rounded-lg">
                        <div class="self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Penyimpanan</div>
                    </label>
                    <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="aktivitas" value="Pengolahan" class="checkbox checkbox-success checkbox-xs rounded-lg">
                        <div class="self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pengolahan</div>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>

    <!-- Fasilitas Section with Checkboxes -->
    <div class="self-stretch flex flex-col justify-start items-start gap-3">
        <div class="self-stretch flex flex-col justify-start items-start gap-8">
            <div class="self-stretch inline-flex justify-start items-start gap-4">
                <div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Fasilitas</div>
                <div class="inline-flex gap-4">
                    <div class="inline-flex flex-col justify-center items-start gap-3">
                        <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="fasilitas" value="Tong Pilah" class="checkbox checkbox-success checkbox-xs rounded-lg">
                            <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Tong Pilah</div>
                        </label>
                        <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="fasilitas" value="Tong Komposter" class="checkbox checkbox-success checkbox-xs rounded-lg">
                            <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Tong Komposter</div>
                        </label>
                        <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="fasilitas" value="Mesin Pengepres" class="checkbox checkbox-success checkbox-xs rounded-lg">
                            <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Mesin Pengepres</div>
                        </label>
                        <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="fasilitas" value="Mesin Cetak Roster" class="checkbox checkbox-success checkbox-xs rounded-lg">
                            <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Mesin Cetak Roster</div>
                        </label>
                        <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="fasilitas" value="Laptop" class="checkbox checkbox-success checkbox-xs rounded-lg">
                            <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Laptop</div>
                        </label>
                    </div>
                    <div class="inline-flex flex-col justify-center items-start gap-3">
                        <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="fasilitas" value="PC" class="checkbox checkbox-success checkbox-xs rounded-lg">
                            <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">PC</div>
                        </label>
                        <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="fasilitas" value="Mobil" class="checkbox checkbox-success checkbox-xs rounded-lg">
                            <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Mobil</div>
                        </label>
                        <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="fasilitas" value="Gremor" class="checkbox checkbox-success checkbox-xs rounded-lg">
                            <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Gremor</div>
                        </label>
                        <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="fasilitas" value="Motor" class="checkbox checkbox-success checkbox-xs rounded-lg">
                            <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Motor</div>
                        </label>
                        <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="fasilitas" value="Gerobak" class="checkbox checkbox-success checkbox-xs rounded-lg">
                            <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Gerobak</div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>

    <!-- Jenis Pengolahan Section with Checkboxes -->
    <div class="self-stretch flex flex-col justify-start items-start gap-3">
        <div class="self-stretch flex flex-col justify-start items-start gap-8">
            <div class="self-stretch inline-flex justify-start items-start gap-4">
                <div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Jenis Pengolahan</div>
                <div class="inline-flex flex-col justify-center items-start gap-3">
                    <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="jenis_pengolahan" value="Pemilahan" class="checkbox checkbox-success checkbox-xs rounded-lg">
                        <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pemilahan</div>
                    </label>
                    <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="jenis_pengolahan" value="Pengumpulan" class="checkbox checkbox-success checkbox-xs rounded-lg">
                        <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pengumpulan</div>
                    </label>
                    <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="jenis_pengolahan" value="Penyimpanan" class="checkbox checkbox-success checkbox-xs rounded-lg">
                        <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Penyimpanan</div>
                    </label>
                    <label class="inline-flex justify-start items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="jenis_pengolahan" value="Pengolahan" class="checkbox checkbox-success checkbox-xs rounded-lg">
                        <div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pengolahan</div>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>

    <!-- Action Buttons -->
    <div class="inline-flex justify-start items-start gap-3">
        <button onclick="cancelEdit()" class="px-8 py-2.5 bg-white rounded-full outline outline-1 outline-offset-[-1px] outline-gray-300 flex justify-center items-center gap-2 hover:bg-gray-50">
            <div class="justify-start text-slate-800 text-sm font-semibold font-['Plus_Jakarta_Sans'] leading-5">Batal</div>
        </button>
        <button onclick="saveData()" class="px-8 py-2.5 bg-green-800 rounded-full flex justify-center items-center gap-2 hover:bg-green-900">
            <div class="justify-start text-white text-sm font-semibold font-['Plus_Jakarta_Sans'] leading-5">Simpan</div>
        </button>
    </div>
</div>


@section Scripts {
    <script type="text/javascript">
        let currentData = {
            aktivitas: [],
            fasilitas: [],
            jenis_pengolahan: []
        };
    
        $(document).ready(function () {
            loadData();
        });
    
        function loadData() {
            $.ajax({
                url: '/Data/Aktivitas/Get',
                type: 'GET',
                success: function(data) {
                    currentData = data;
                    updateViewMode();
                },
                error: function() {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Gagal memuat data',
                        icon: 'error',
                        confirmButtonText: 'OK',
                        buttonsStyling: false,
                        customClass: {
                            confirmButton: 'btn bg-green-800 text-white hover:bg-green-900 px-4 py-2 rounded-full',
                        },
                    });
                }
            });
        }
    
        function updateViewMode() {
            // Update Aktivitas - tampilkan dalam satu baris
            if (currentData.aktivitas && currentData.aktivitas.length > 0) {
                const aktivitasHtml = currentData.aktivitas.map(item =>
                    `<div class="justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">${item}</div>`
                ).join('');
                $('#viewAktivitas').html(aktivitasHtml);
            } else {
                $('#viewAktivitas').html('<div class="text-gray-400">-</div>');
            }
    
            // Update Fasilitas - tampilkan dalam satu baris
            if (currentData.fasilitas && currentData.fasilitas.length > 0) {
                const fasilitasHtml = currentData.fasilitas.map(item =>
                    `<div class="justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">${item}</div>`
                ).join('');
                $('#viewFasilitas').html(fasilitasHtml);
            } else {
                $('#viewFasilitas').html('<div class="text-gray-400">-</div>');
            }
    
            // Update Jenis Pengolahan - tampilkan dalam satu baris
            if (currentData.jenis_pengolahan && currentData.jenis_pengolahan.length > 0) {
                const jenisPengolahanHtml = currentData.jenis_pengolahan.map(item =>
                    `<div class="justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">${item}</div>`
                ).join('');
                $('#viewJenisPengolahan').html(jenisPengolahanHtml);
            } else {
                $('#viewJenisPengolahan').html('<div class="text-gray-400">-</div>');
            }
        }
    
        function toggleEditMode() {
            $('#viewMode').addClass('hidden');
            $('#editMode').removeClass('hidden').addClass('flex');
    
            // Set checkboxes based on current data
            $('input[name="aktivitas"]').each(function() {
                $(this).prop('checked', currentData.aktivitas.includes($(this).val()));
            });
            $('input[name="fasilitas"]').each(function() {
                $(this).prop('checked', currentData.fasilitas.includes($(this).val()));
            });
            $('input[name="jenis_pengolahan"]').each(function() {
                $(this).prop('checked', currentData.jenis_pengolahan.includes($(this).val()));
            });
        }
    
        function cancelEdit() {
            $('#editMode').addClass('hidden').removeClass('flex');
            $('#viewMode').removeClass('hidden');
        }
    
        function saveData() {
            // Collect checked values
            const aktivitas = [];
            $('input[name="aktivitas"]:checked').each(function() {
                aktivitas.push($(this).val());
            });
    
            const fasilitas = [];
            $('input[name="fasilitas"]:checked').each(function() {
                fasilitas.push($(this).val());
            });
    
            const jenisPengolahan = [];
            $('input[name="jenis_pengolahan"]:checked').each(function() {
                jenisPengolahan.push($(this).val());
            });
    
            // Send to server
            $.ajax({
                url: '/Data/Aktivitas/Save',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    Aktivitas: aktivitas,
                    Fasilitas: fasilitas,
                    JenisPengolahan: jenisPengolahan
                }),
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonText: 'OK',
                            buttonsStyling: false,
                            customClass: {
                                confirmButton: 'btn bg-green-800 text-white hover:bg-green-900 px-4 py-2 rounded-full',
                            },
                        }).then(() => {
                            // Update current data and switch to view mode
                            currentData = {
                                aktivitas: aktivitas,
                                fasilitas: fasilitas,
                                jenis_pengolahan: jenisPengolahan
                            };
                            updateViewMode();
                            cancelEdit();
                        });
                    }
                },
                error: function() {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Gagal menyimpan data',
                        icon: 'error',
                        confirmButtonText: 'OK',
                        buttonsStyling: false,
                        customClass: {
                            confirmButton: 'btn bg-green-800 text-white hover:bg-green-900 px-4 py-2 rounded-full',
                        },
                    });
                }
            });
        }
    </script>
}