@{
    ViewData["Title"] = "Lokasi TP3SR & Parkir Pengumpulan Sampah";
}

<!-- Breadcrumb -->
<div class="breadcrumbs text-sm">
    <ul>
        <li class="text-gray-500"><a>Profil RW</a></li>
        <li id="breadcrumb-active">Lokasi TP3SR & Parkir Pengumpulan Sampah</li>
    </ul>
</div>

<!-- Header -->
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
    <div class="prose">
        <h3 class="mb-2">Profil Rw</h3>
    </div>
    <div class="justify-self-end lg:self-center">
   

    </div>
</div>

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

<!-- Tabs -->
<div class="tabs tabs-lift">
    <input type="radio" name="tab_profil_rw" checked class="tab checked:text-white [--tab-bg:green]" aria-label="Profil" />
    <div class="tab-content bg-base-100 border-base-300 p-0">
        @await Html.PartialAsync("_TabIndexProfil")
    </div>

    <input type="radio" name="tab_profil_rw" class="tab checked:text-white [--tab-bg:green]" aria-label="BPS-RW" />
    <div class="tab-content bg-base-100 border-base-300 p-0">
        @await Html.PartialAsync("_TabIndexBpsRw")
    </div>

    <input type="radio" name="tab_profil_rw" class="tab checked:text-white [--tab-bg:green]" aria-label="Surat Usulan" />
    <div class="tab-content bg-base-100 border-base-300 p-0">
        @await Html.PartialAsync("_TabIndexSuratUsulan")
    </div>

    <input type="radio" name="tab_profil_rw" class="tab checked:text-white [--tab-bg:green]" aria-label="Pengadaan Wadah" />
    <div class="tab-content bg-base-100 border-base-300 p-0"></div>

    <input type="radio" name="tab_profil_rw" class="tab checked:text-white [--tab-bg:green]" aria-label="Kebutuhan Sarpras" />
    <div class="tab-content bg-base-100 border-base-300 p-0"></div>

    <input type="radio" name="tab_profil_rw" class="tab checked:text-white [--tab-bg:green]" aria-label="Lokasi TP3SR & Parkir Pengumpulan Sampah" />
    <div class="tab-content bg-base-100 border-base-300 p-0">
        @await Html.PartialAsync("_TabIndexLokasi")
    </div>
</div>


@section Scripts {
    <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
        var tableLokasi = new DataTable('#tableLokasi', {
            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
        tableLokasi.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'
                );
            });
        });

        // Datatable Surat Usulan
        var tableSuratUsulan = new DataTable('#tableSuratUsulan', {
            ajax: '@Url.Action("TableSuratUsulan", "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: 'nama_surat' },
                { data: 'tanggal_surat' },
                { data: 'file_upload' },
                { data: 'status' },
                {
                    data: 'aksi',
                    orderable: false,
                    searchable: false
                },
            ]
        });

        // Delete Button
        tableSuratUsulan.on('click', '.btn-error', 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>
}