@{
    ViewData["Title"] = "Data Bank Sampah";
}

<div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0">
    <div class="prose">
        <span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
            Data Bank Sampah
        </span>
    </div>

    <div class="flex gap-2">
        <button type="button" class="btn btn-sm bg-bank-sampah-primary-500 rounded-full text-white">Downloads</button>
        <button class="btn btn-sm rounded-full bg-white" onclick="modal_filter.showModal()">
            <i class="ph ph-funnel-simple"></i>
            Filter
        </button>
    </div>
</div>

<!-- Modal Filter -->
<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
    <div class="modal-box w-full sm:max-w-sm">
        <h3 class="text-lg font-bold">Filter</h3>
        <form id="formFilter" onsubmit="applyFilter(event)">
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Jenis Bank Sampah</legend>
                <select id="filterJenis" class="select w-full">
                    <option value="">Semua</option>
                    <option value="BSU">BSU</option>
                </select>
            </fieldset>
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Kategori Bank Sampah</legend>
                <select id="filterKategori" class="select w-full">
                    <option value="">Semua</option>
                    <option value="Warga">Warga</option>
                    <option value="Sekolah">Sekolah</option>
                    <option value="Perusahaan">Perusahaan</option>
                </select>
            </fieldset>
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Status Bank Sampah</legend>
                <select id="filterStatus" class="select w-full">
                    <option value="">Semua</option>
                    <option value="Disetujui">Disetujui</option>
                    <option value="Belum Disetujui">Belum Disetujui</option>
                </select>
            </fieldset>
            <fieldset class="fieldset">
                    <legend class="fieldset-legend">
                        Kabupaten / Kota
                    </legend>
                    <select id="kabupaten" class="select w-full" required>
                        <option value="" disabled selected>Pilih salah satu</option>
                        <option value="Kota Adm Jakarta Timur">Kota Adm Jakarta Timur</option>
                        <option value="Kota Adm Jakarta Barat">Kota Adm Jakarta Barat</option>
                        <option value="Kota Adm Jakarta Selatan">Kota Adm Jakarta Selatan</option>
                        <option value="Kota Adm Jakarta Utara">Kota Adm Jakarta Utara</option>
                        <option value="Kota Adm Jakarta Pusat">Kota Adm Jakarta Pusat</option>
                    </select>
                </fieldset>
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Kecamatan</legend>
                <select id="filterKecamatan" class="select w-full">
                    <option value="">Pilih salah satu</option>
                </select>
            </fieldset>
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Kelurahan</legend>
                <select id="filterKelurahan" class="select w-full">
                    <option value="">Pilih salah satu</option>
                </select>
            </fieldset>
            <div class="modal-action">
                <button type="button" class="btn btn-outline rounded-full" onclick="modal_filter.close()">Tutup</button>
                <button type="submit" class="btn bg-bank-sampah-primary-500 rounded-full text-white">Terapkan</button>
            </div>
        </form>
    </div>
</dialog>
<!-- /modal filter -->

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

<div class="card bg-white">
    <div class="card-body p-2">
        <div class="w-full overflow-x-auto">
            <table class="table-zebra table w-full" id="example">
                <!-- head -->
                <thead>
                    <tr>
                        <th class="w-[5%]">No</th>
                        <th class="w-[20%]">Nama Bank Sampah</th>
                        <th class="w-[15%]">Kabupaten</th>
                        <th class="w-[15%]">Kecamatan</th>
                        <th class="w-[15%]">Kelurahan</th>
                        <th class="w-[5%]">Jenis Bank Sampah</th>
                        <th class="w-[5%]">Kategori Bank Sampah</th>
                        <th class="w-[10%]">Status</th>
                        <th class="w-[10%]">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        var table;

        $(document).ready(function () {
            table = new DataTable('#example', {
                ajax: '/Main/DataBankSampah/Table',
                scrollX: true,
                autoWidth: false,
                initComplete: function () {
                    $('div.dt-scroll-body thead').css('visibility', 'collapse');
                },
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'nama' },
                    { data: 'kabupaten' },
                    { data: 'kecamatan' },
                    { data: 'kelurahan' },
                    { data: 'jenis' },
                    { data: 'kategori' },
                    { data: 'status' },
                    { data: 'aksi' },
                ]
            });

            // Delete button handler
            $('#example').on('click', '.btn-circle.btn-error', function (e) {
                e.preventDefault();

                // Get row data
                var row = table.row($(this).parents('tr')).data();

                Swal.fire({
                    title: 'Apakah anda yakin?',
                    text: "Data yang dihapus tidak dapat dikembalikan lagi",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Hapus',
                    cancelButtonText: 'Batal',
                    buttonsStyling: false,
                    customClass: {
                        confirmButton: 'btn bg-red-500 text-white hover:bg-red-600 px-4 py-2 rounded-full mr-2',
                        cancelButton: 'btn bg-white text-gray-500 hover:bg-gray-50 px-4 py-2 rounded-full border border-gray-300',
                    },
                }).then((result) => {
                    if (result.isConfirmed) {
                        // TODO: Implement actual delete API call
                        Swal.fire({
                            title: 'Terhapus!',
                            text: 'Data berhasil dihapus.',
                            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(() => {
                            // Reload table
                            table.ajax.reload();
                        });
                    }
                });
            });

            // Edit button handler
            $('#example').on('click', '.btn-circle.btn-warning', function (e) {
                e.preventDefault();

                // Get row data
                var row = table.row($(this).parents('tr')).data();

                // Set edit mode
                $('#edit_mode').val('true');
                $('#modal_title').text('Edit Data Bank Sampah');

                // Populate form with row data
                $('#nama').val(row.nama);
                $('#kabupaten').val(row.kabupaten);
                $('#kecamatan').val(row.kecamatan);
                $('#kelurahan').val(row.kelurahan);
                $('#jenis').val(row.jenis);
                $('#kategori').val(row.kategori);

                // Extract status from HTML badge
                var statusText = $(row.status).text().trim();
                $('#status').val(statusText);

                // Open modal
                modal_tambah.showModal();
            });
        });

          $('#example').on('click', '.btn-circle.btn-success', function (e) {
            Swal.fire({
                title: 'Validasi Data Bank Sampah',
                text: 'Silakan pilih tindakan untuk data bank sampah yang sedang diperiksa.',
                icon: 'question',
                showCancelButton: true,
                showDenyButton: true,
                confirmButtonText: 'Setujui Data',
                denyButtonText: 'Tolak Data',
                cancelButtonText: 'Batal',
                buttonsStyling: false,
                customClass: {
                    confirmButton: 'btn bg-bank-sampah-primary-500 rounded-full text-white',
                    denyButton: 'btn bg-red-500 text-white hover:bg-red-600 px-4 py-2 rounded-full mr-2',
                    cancelButton: 'btn bg-white text-gray-500 hover:bg-gray-50 px-4 py-2 rounded-full border border-gray-300'
                },
            }).then((result) => {
                
                // APPROVE
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Sukses!',
                        text: 'Data berhasil di setujui.',
                        timer: 1000,
                        showConfirmButton: false
                    });
                }
                
                // REJECT → open reason form
                else if (result.isDenied) {
                    Swal.fire({
                        title: 'Alasan Penolakan',
                        input: 'textarea',
                        inputPlaceholder: 'Masukkan keterangan mengapa data ditolak...',
                        inputAttributes: {
                            'aria-label': 'Reason'
                        },
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Tolak',
                        cancelButtonText: 'Batal',
                        buttonsStyling: false,
                        customClass: {
                            confirmButton: 'btn bg-red-500 text-white hover:bg-red-600 px-4 py-2 rounded-full mr-2',
                            cancelButton: 'btn bg-white text-gray-500 hover:bg-gray-50 px-4 py-2 rounded-full border border-gray-300',
                        },
                    }).then((reasonResult) => {
                        if (reasonResult.isConfirmed) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Sukses!',
                                text: 'Data berhasil di tolak.',
                                timer: 1000,
                                showConfirmButton: false
                            });
                        }
                    });
                }
            });
          });

        function closeModal() {
            // Reset form
            $('#formTambah')[0].reset();
            $('#edit_mode').val('false');
            $('#modal_title').text('Tambah Data Bank Sampah');

            // Close modal
            modal_tambah.close();
        }

        function submitForm(e) {
            e.preventDefault();

            var isEditMode = $('#edit_mode').val() === 'true';

            // Collect form data
            var formData = {
                nama: $('#nama').val(),
                kabupaten: $('#kabupaten').val(),
                kecamatan: $('#kecamatan').val(),
                kelurahan: $('#kelurahan').val(),
                jenis: $('#jenis').val(),
                kategori: $('#kategori').val(),
                status: $('#status').val()
            };

            // TODO: Implement form submission logic (API call)
            console.log('Form data:', formData);

            Swal.fire({
                title: 'Berhasil!',
                text: isEditMode ? 'Data berhasil diperbarui' : 'Data berhasil ditambahkan',
                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(() => {
                closeModal();

                // Reload table
                table.ajax.reload();
            });
        }

        function applyFilter(e) {
            e.preventDefault();

            const jenis = $('#filterJenis').val();
            const kategori = $('#filterKategori').val();
            const status = $('#filterStatus').val();

            table.ajax.url('/Main/DataBankSampah/Table').load((json) => {
                const filtered = json.data.filter(row => {
                    return (!jenis || row.jenis === jenis)
                        && (!kategori || row.kategori === kategori)
                        && (!status || row.status === status);
                });

                table.clear();
                table.rows.add(filtered).draw();
            });

            modal_filter.close();
        }
    </script>
}