@{
    var jenis = "Komposting";
    var tableUrl = Url.Content("~/ReduksiSampah/Komposting/Table");
    ViewData["Title"] = $"Reduksi Sampah - {jenis}";
}

<div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0 items-center">
    <div class="prose">
        <span class="text-xl font-semibold text-black">
            Reduksi Sampah - @jenis
        </span>
    </div>
    <div class="flex gap-2 items-center">
        <select class="select rounded-full">
            <option disabled selected>Pilih Tahun</option>
            <option>2025</option>
            <option>2024</option>
            <option>2023</option>
            <option>2022</option>
            <option>2021</option>
            <option>2020</option>
        </select>
        <button type="button" class="btn btn-sm bg-bank-sampah-primary-500 rounded-full text-white"
            onclick="modal_tambah.showModal()"><i class="ph ph-plus"></i>Tambah</button>
    </div>
</div>

<!-- Modal History -->
<dialog id="modal_history" class="modal">
    <div class="modal-box max-w-md">
        <form method="dialog">
            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
        </form>
        <h3 class="text-lg font-bold">History Data</h3>
        <p class="py-4 text-base font-['Plus Jakarta Sans']">Terdapat 30 History perubahan data</p>
        <div class="px-3 pt-4 pb-8 bg-gray-50">
            <div class="flex flex-col gap-4 pl-4 border-l-2 border-gray-300">
                <div class="flex flex-col gap-1">
                    <div class="text-gray-500 text-xs leading-4">Admin Subandri</div>
                    <div class="text-primary-500 text-base">Current Version</div>
                </div>

                <div class="flex flex-col gap-1">
                    <div class="text-gray-500 text-xs leading-4">Admin Subandri</div>
                    <div class="text-gray-600 text-base">12:26 pm</div>
                </div>

                <div class="flex flex-col gap-1">
                    <div class="text-gray-500 text-xs leading-4">Admin Subandri</div>
                    <div class="text-gray-600 text-base">24 Nov 2025, 12:26 pm</div>
                </div>

                <div class="flex flex-col gap-1">
                    <div class="text-gray-500 text-xs leading-4">Admin Subandri</div>
                    <div class="text-gray-600 text-base">23 Nov 2025, 12:26 pm</div>
                </div>

                <div class="flex flex-col gap-1">
                    <div class="text-gray-500 text-xs leading-4">Admin Subandri</div>
                    <div class="text-gray-600 text-base">22 Nov 2025, 12:26 pm</div>
                </div>
            </div>
        </div>
    </div>
</dialog>
<!-- End Modal History -->

<!-- Modal Validasi Data -->
<dialog id="modal_validasi" class="modal modal-bottom sm:modal-middle">
    <div
        class="modal-box w-full max-w-[591px] p-6 bg-white rounded-2xl inline-flex flex-col justify-center items-end gap-6">
        <div class="self-stretch inline-flex justify-between items-center">
            <div class="flex-1 justify-start text-gray-900 text-xl font-semibold font-['Plus Jakarta Sans'] leading-8">
                Validasi Data</div>
            <button type="button" class="w-5 h-5 relative" onclick="closeValidasiModal()">
                <i class="ph ph-x text-gray-500 text-xl"></i>
            </button>
        </div>

        <div class="self-stretch flex flex-col justify-center items-center">
            <div class="self-stretch px-3 pt-3 pb-8 bg-gray-50 rounded-lg inline-flex justify-start items-start gap-4">
                <div class="flex-1 inline-flex flex-col justify-start items-start gap-1">
                    <div
                        class="self-stretch justify-start text-gray-500 text-xs font-normal font-['Plus Jakarta Sans'] leading-4">
                        Periode</div>
                    <div id="val_periode"
                        class="self-stretch justify-start text-slate-600 text-base font-normal font-['Plus Jakarta Sans'] leading-6">
                        29 Jul 2024</div>
                </div>
                <div class="flex-1 inline-flex flex-col justify-start items-start gap-1">
                    <div
                        class="self-stretch justify-start text-gray-500 text-xs font-normal font-['Plus Jakarta Sans'] leading-4">
                        Nama Lokasi</div>
                    <div id="val_nama_lokasi"
                        class="self-stretch justify-start text-slate-600 text-base font-normal font-['Plus Jakarta Sans'] leading-6">
                        Jakarta Selatan</div>
                </div>
                <div class="flex-1 inline-flex flex-col justify-start items-start gap-1">
                    <div
                        class="self-stretch justify-start text-gray-500 text-xs font-normal font-['Plus Jakarta Sans'] leading-4">
                        Jenis Lokasi</div>
                    <div id="val_jenis_lokasi"
                        class="self-stretch justify-start text-slate-600 text-base font-normal font-['Plus Jakarta Sans'] leading-6">
                        Maggot</div>
                </div>
            </div>
        </div>

        <div
            class="self-stretch justify-start text-slate-800 text-base font-semibold font-['Plus Jakarta Sans'] leading-6">
            Anda yakin ingin melakukan validasi data ?</div>

        <div class="self-stretch inline-flex justify-end items-center gap-3">
            <button type="button" class="btn btn-outline btn-sm rounded-full flex justify-center items-center gap-2"
                onclick="confirmTolakValidasi()">
                <div class="justify-start text-slate-800 text-sm font-semibold font-['Plus Jakarta Sans'] leading-5">
                    Tolak Validasi</div>
            </button>
            <button type="button" class="btn btn-success btn-sm rounded-full flex justify-center items-center gap-2"
                onclick="confirmValidasi()">
                <div class="justify-start text-white text-sm font-semibold font-['Plus Jakarta Sans'] leading-5">Ya
                </div>
            </button>
        </div>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>
<!-- /modal validasi -->

<!-- Modal Tambah/Edit Data -->
<dialog id="modal_tambah" class="modal modal-bottom sm:modal-middle">
    <div class="modal-box w-full max-w-2xl p-6 bg-white rounded-2xl">
        <h3 id="modal_title" class="text-gray-900 text-xl font-semibold font-['Plus Jakarta Sans'] leading-8 mb-8">
            Tambah Reduksi Sampah</h3>
        <form id="formTambah" onsubmit="submitForm(event)">
            <input type="hidden" id="edit_mode" value="false">
            <input type="hidden" id="reduksi_sampah_id" value="">
            <div class="flex flex-col gap-6">
                <div class="flex flex-col">
                    <fieldset class="fieldset">
                        <legend class="fieldset-legend">
                            Jenis Lokasi
                            <span class="text-red-500">*</span>
                        </legend>
                        <select id="jenis_lokasi" class="select w-full" required>
                            <option value="Komposting">Komposting</option>
                            <option value="Maggot">Maggot</option>
                        </select>
                    </fieldset>
                </div>
                <div id="formDetail" class="flex flex-col gap-6">
                    <div class="flex flex-col">
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">
                                Lokasi<span class="text-red-500">*</span>
                            </legend>
                            <select id="lokasi" class="select w-full" required>
                                <option value="" disabled selected>Pilih salah satu</option>
                            </select>
                        </fieldset>
                    </div>

                    <div class="flex flex-col">
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">
                                Alamat
                            </legend>
                            <textarea id="alamat" rows="4" readonly class="textarea w-full"></textarea>
                        </fieldset>
                    </div>

                    <div class="flex flex-col">
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">
                                Bukti Kegiatan
                                <span class="text-red-500">*</span>
                            </legend>
                            <input type="file" class="file-input file w-full" />
                            <label class="label">Ukuran Maksimal 5MB</label>
                        </fieldset>
                    </div>

                    <div class="flex flex-col">
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">
                                Keterangan Kegiatan<span class="text-red-500">*</span>
                            </legend>
                            <textarea id="keterangan_kegiatan" rows="4" required placeholder="Keterangan Kegiatan"
                                class="textarea w-full"></textarea>
                        </fieldset>
                    </div>

                    <div class="flex flex-col">
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">
                                Tanggal Pelaksanaan Kegiatan
                                <span class="text-red-500">*</span>
                            </legend>
                            <input type="date" id="tgl_pelaksanaan_kegiatan" class="input w-full" required />
                        </fieldset>
                    </div>

                    <div class="flex flex-col">
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">
                                Pelaksana Kegiatan<span class="text-red-500">*</span>
                            </legend>
                            <input type="text" id="preview" class="input w-full" placeholder="Pelaksana Kegiatan"
                                required />
                        </fieldset>
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row gap-3 justify-end">
                    <button type="button" class="btn btn-outline rounded-full w-full sm:w-auto" onclick="closeModal()">
                        Batal
                    </button>
                    <button type="submit"
                        class="btn bg-bank-sampah-primary-500 rounded-full text-white w-full sm:w-auto">
                        Simpan
                    </button>
                </div>
            </div>
        </form>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>
<!-- /modal tambah/edit -->

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

<div class="card bg-white shadow-sm">
    <div class="card-body p-2">
        <div class="w-full overflow-x-auto">
            <table class="table-zebra table w-full" id="example">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Periode</th>
                        <th>Nama Lokasi</th>
                        <th>Alamat</th>
                        <th>Jenis Lokasi</th>
                        <th>Berat Reduksi (Kg)</th>
                        <th>Berat Sampah (Kg)</th>
                        <th>Bukti Kegiatan</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>


@section Scripts {
<script type="text/javascript">
    const jenisReduksi = '@jenis';
    const tableAjaxUrl = '@tableUrl';
    var table;
    var allLokasi = [];

    $(document).ready(function () {
        $.ajax({
            url: '/ReduksiSampah/Lokasi/Table',
            method: 'GET',
            success: function (response) {
                allLokasi = (response.data || []).map(item => ({
                    jenis_lokasi: item.jenis_lokasi,
                    nama_lokasi: item.nama_lokasi,
                    kecamatan: item.kecamatan,
                    kelurahan: item.kelurahan,
                    detail_alamat: item.detail_alamat,
                    rt: item.rt,
                    rw: item.rw
                }));

                $('#jenis_lokasi').val(jenisReduksi).trigger('change');
                $('#jenis_lokasi').prop('disabled', true);
            },
            error: function () {
                console.error("Gagal mengambil data lokasi dari /ReduksiSampah/Lokasi/Table");
            }
        });

        table = new DataTable('#example', {
            ajax: tableAjaxUrl,
            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: 'periode_bulan' },
                { data: 'nama_lokasi' },
                { data: 'alamat' },
                { data: 'jenis_lokasi' },
                { data: 'berat_reduksi' },
                { data: 'berat_sampah' },
                { data: 'gambar', orderable: false, searchable: false },
                { data: 'aksi', orderable: false, searchable: false },
            ]
        });

        $('#example').on('click', '.btn-history', function (e) {
            e.preventDefault();
            modal_history.showModal();
        });

        $('#example').on('click', '.btn-validation', function (e) {
            e.preventDefault();
            const row = table.row($(this).parents('tr')).data();
            if (row) {
                $('#val_periode').text(row.periode_bulan);
                $('#val_nama_lokasi').text(row.nama_lokasi);
                $('#val_jenis_lokasi').text(row.jenis_lokasi);
            }
            modal_validasi.showModal();
        });

        $('#jenis_lokasi').on('change', function () {
            const jenisLokasi = $(this).val();

            if (jenisLokasi) {
                $('#formDetail').removeClass('hidden').hide().fadeIn(300);
                populateNamaLokasiDropdown(jenisLokasi);
            } else {
                $('#formDetail').fadeOut(300);
            }
        });

        $('#lokasi').on('change', function () {
            const nama = $(this).val();

            if (!nama) {
                $('#alamat').val('');
                return;
            }

            const lokasi = allLokasi.find(item => item.nama_lokasi === nama);

            if (lokasi) {
                const formattedAlamat = `${lokasi.kecamatan}, ${lokasi.kelurahan}, RT ${lokasi.rt}, RW ${lokasi.rw}, ${lokasi.detail_alamat}`;
                $('#alamat').val(formattedAlamat);
            }
        });

        $('#example').on('click', '.btn-edit', function (e) {
            e.preventDefault();

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

            $('#edit_mode').val('true');
            $('#reduksi_sampah_id').val(row.id);
            $('#modal_title').text('Edit Reduksi Sampah');
            modal_tambah.showModal();
        });

        $('#example').on('click', '.btn-delete', function (e) {
            e.preventDefault();
            const row = table.row($(this).parents('tr')).data();
            Swal.fire({
                title: 'Hapus data?',
                text: `Data ${row?.nama_lokasi || ''} akan dihapus secara permanen.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire('Terhapus', 'Data berhasil dihapus (simulasi).', 'success');
                    table.ajax.reload();
                }
            });
        });
    });

    function populateNamaLokasiDropdown(jenisLokasi) {
        let options = '<option value=\"\">Pilih salah satu</option>';

        if (jenisLokasi) {
            const filtered = allLokasi.filter(item => item.jenis_lokasi === jenisLokasi);

            filtered.forEach(item => {
                options += `<option value="${item.nama_lokasi}">${item.nama_lokasi}</option>`;
            });
        }

        $('#lokasi').html(options);
    }

    function closeModal() {
        $('#formTambah')[0].reset();
        $('#edit_mode').val('false');
        $('#modal_title').text('Tambah Reduksi Sampah');
        $('#jenis_lokasi').val(jenisReduksi);
        modal_tambah.close();
    }

    function closeValidasiModal() {
        modal_validasi.close();
    }

    function confirmValidasi() {
        closeValidasiModal();
        table.ajax.reload();
    }

    function confirmTolakValidasi() {
        closeValidasiModal();
        table.ajax.reload();
    }
</script>
}