bps-rw/Views/ProfilRw/_TabIndexLokasi.cshtml

<div class="flex w-full flex-col items-end p-4">
    <button onclick="modal_add_lokasi.showModal()"
            class="btn btn-primary w-32 rounded-full text-white">
        <span class="icon icon-fill me-2">add</span>
        Tambah
    </button>
</div>
<div class="overflow-x-auto">
    <table class="table-zebra table w-full text-sm" id="lokasiTable">
        <thead>
            <tr>
                <th class="w-[5%]">No</th>
                <th class="w-[10%]">Usulan</th>
                <th class="w-[20%]">Alamat Lokasi</th>
                <th class="w-[10%]">Status Lahan</th>
                <th class="w-[20%]">Pemilik Lahan</th>
                <th class="w-[10%]">Luas Lahan</th>
                <th class="w-[10%]">Status Usulan</th>
                <th class="w-[15%] text-center">Action</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>


<!--Modal Add Lokasi-->
<dialog id="modal_add_lokasi" class="modal">
    <div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg">
        <!-- Close Button -->
        <label onclick="modal_add_lokasi.close()"
               class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">
            ✕
        </label>

        <!-- Header -->
        <h3 class="mb-5 text-lg font-semibold text-gray-800">Tambah Lokasi</h3>

        <!-- Form -->
        <form id="formTambahLokasi" class="space-y-4">
            <!-- Jenis Usulan -->
            <fieldset class="fieldset">
                <legend class="fieldset-legend">
                    Jenis Usulan
                </legend>
                <select class="select w-full">
                    <option value="">Pilih jenis usulan</option>
                    <option value="TP3SR">TP3SR</option>
                    <option value="Parkir Pengumpulan">Parkir Pengumpulan</option>
                </select>
            </fieldset>

            <!-- Alamat -->
            <fieldset class="fieldset">
                <legend class="fieldset-legend">
                    Alamat
                </legend>
                <textarea class="textarea h-24 w-full" placeholder="Alamat"></textarea>
            </fieldset>

            <!-- Nama Pemilik -->
            <fieldset class="fieldset">
                <legend class="fieldset-legend">
                    Nama Pemilik Lahan
                </legend>
                <input type="text" class="input w-full" placeholder="Nama Pemilik Lahan" />
            </fieldset>

            <!-- Status & Luas Lahan -->
            <div class="grid grid-cols-2 gap-3">
                <fieldset class="fieldset">
                    <legend class="fieldset-legend">
                        Status Lahan
                    </legend>
                    <select class="select">
                        <option value="">Pilih status lahan</option>
                        <option value="Milik Pemda">Milik Pemda</option>
                        <option value="Milik Warga">Milik Warga</option>
                        <option value="Sewa">Sewa</option>
                    </select>
                </fieldset>

                <fieldset class="fieldset">
                    <legend class="fieldset-legend">
                        Luas Lahan
                    </legend>
                    <input type="number" class="input" placeholder="Luas Lahan" />
                </fieldset>
            </div>

            <!-- Keterangan -->
            <fieldset class="fieldset">
                <legend class="fieldset-legend">
                    Keterangan
                </legend>
                <textarea class="textarea h-24 w-full" placeholder="Keterangan"></textarea>
            </fieldset>

            <!-- Action Button -->
            <div class="modal-action mt-6 flex justify-end gap-3">
                <button onclick="modal_add_lokasi.close()" type="button" class="btn btn-outline btn-sm">
                    <span class="icon me-1">cancel</span>
                    Batalkan
                </button>
                <button type="submit" class="btn btn-primary btn-sm text-white">
                    <span class="icon me-1">save</span>
                    Simpan
                </button>
            </div>
        </form>
    </div>
</dialog>

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script type="text/javascript">
    $(document).ready(function () {
        // Datatable setup
        const table = new DataTable('#lokasiTable', {
            ajax: '@Url.Action("TableLokasi", "ProfilRw")',
            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: 'usulan' },
                { data: 'alamat' },
                { data: 'statusLahan' },
                { data: 'pemilikLahan' },
                { data: 'luasLahan' },
                {
                    data: 'statusUsulan',
                    render: (data) => `
                        <span class="badge rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
                            ${data}
                        </span>`
                },
                {
                    data: null,
                    className: "text-center",
                    render: (data, type, row) => `
                        <div class="flex justify-center gap-2">
                            <button class="btn btn-xs btn-outline btn-detail rounded-full border-gray-300 text-gray-700 hover:bg-gray-50" data-id="${row.id}">Detail</button>
                            <button class="btn btn-xs btn-outline btn-edit rounded-full border-gray-300 text-gray-700 hover:bg-gray-50" data-id="${row.id}">Edit</button>
                            <button class="btn btn-xs btn-outline btn-delete rounded-full border-red-300 text-red-600 hover:bg-red-50" data-id="${row.id}">Delete</button>
                        </div>
                    `,
                    orderable: false,
                    searchable: false
                }
            ]
        });

        // Delete Button
        $('#lokasiTable').on('click', '.btn-delete', function () {
            const id = $(this).data('id');

            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: "Data yang dihapus tidak dapat dikembalikan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                Swal.fire(
                    'Terhapus!',
                    'Data berhasil dihapus.',
                    'success'
                );
            });
        });
    });
</script>