<script type="text/javascript">
	

	$(document).ready(function(){
		loadData()
	})


	
	function loadData() {
		$('#datatable').DataTable({
			"pageLength": 10,
			"serverSide": true,
			"processing": true,
			"scrollX": true,
			"order": [
				[0, "desc"]
			],
			"columnDefs": [
				{
					targets: [0,2],
					className: "text-center"
				},
				{
					orderable: false,
					targets: [1,2]
				},
				{
					width: '5%',
					targets: [0]
				},
				{
					width: '20%',
					targets: [2]
				},
				{
					width: '75%',
					targets: [1]
				}
			],
			"ajax": {
				url: baseUrl + 'area/subdistrict/get-all-data',
				type: 'POST',
				data: {
				},
			},
			"columns": [{
					data: "no"
				},
				{
					data: "name"
				},
				{
					data: "option"
				},
			],
			"destroy": true,
			"initComplete": function () {

					// if(window.innerWidth<768){

			        // 	$('.dataTables_filter')
			        //     .addClass('d-flex align-items-center')
			        //     .append(`
			        //         <button class="btn btn-sm btn-filter-sm ms-2 d-md-none d-inline-block">
			        //             <i class='bx bx-slider'></i>
			        //         </button>
			        //     `);
					// }

				    $('.dataTables_paginate').addClass('mt-3');

				    updatePaginationIcons();
		    },
		  	"drawCallback": function(settings) {
	            // Panggil fungsi ini setiap kali tabel di-redraw
	            updatePaginationIcons();
	        }
		})
	}



	$("#btn_add").on('click',function(e){
		e.preventDefault()
		
		$("#modal_add").modal('show')
		// loading
		$("#modal_add").find('.modal-content').html(loadingLdsRing)
		$("#modal_add").find('.modal-content').load(baseUrl+'area/subdistrict/add')
	})

	$("#datatable").delegate(".datatable-edit", "click", function (e) {
		  var url = $(this).attr("data-link");
		  e.preventDefault()
			
			$("#modal_edit").modal('show')
			// loading
			$("#modal_edit").find('.modal-content').html(loadingLdsRing)
			$("#modal_edit").find('.modal-content').load(url)


	})


	// Fungsi untuk mengupdate ikon pagination
	function updatePaginationIcons() {
	    $('.paginate_button.previous').empty()
	        .addClass('d-flex justify-content-center align-items-center')
	        .html("<i class='bx bx-chevron-left' style='font-size: 26px;'></i>");
	        
	    $('.paginate_button.next').empty()
	        .addClass('d-flex justify-content-center align-items-center')
	        .html("<i class='bx bx-chevron-right' style='font-size: 26px;'></i>");
	}

</script>