<link href="<?= base_url(); ?>assets/libs/select2/select2.min.css" rel="stylesheet" type="text/css" />
<script src="<?= base_url() ?>assets/libs/select2/select2.min.js"></script>



<script type="text/javascript">
	

	$(document).ready(function(){


		  $("#customer").select2({
		    dropdownParent: $("#customer").parent(),
		    allowClear: true,
		    placeholder: "Pilih pelanggan",
		    width: '100%',
		    ajax: {
		      url: baseUrl+'customer/get-all-customer-name',
		      type: 'post',
		      dataType: 'json',
		      data: function(params) {
		        return {
		          name: params.term,
		          page: params.page,
		          limit: 30,
		        };
		      },
		      processResults: function(data, params) {
		        var more = (params.page * 30) < data.total;
		        var option = [];

		        $.each(data.data, function(index, item) {
		          option.push({
		            id: item.id,
		            text: item.name,
		          });
		        });
		        return {
		          results: option,
		          more: more,
		        };
		      },
		    },
		  });



		  $("#village").select2({
		    dropdownParent: $("#village").parent(),
		    width: '100%',
		    allowClear: true,
		    placeholder: "Pilih Desa",
		    ajax: {
		      url: baseUrl+'area/village/get-all-village-name',
		      type: 'post',
		      dataType: 'json',
		      data: function(params) {
		        return {
		          name: params.term,
		          page: params.page,
		          limit: 30,
		        };
		      },
		      processResults: function(data, params) {
		        var more = (params.page * 30) < data.total;
		        var option = [];
		        console.log(data)

		        $.each(data.data, function(index, item) {
		          option.push({
		            id: item.id,
		            text: item.name,
		          });
		        });
		        return {
		          results: option,
		          more: more,
		        };
		      },
		    },
		  });


		loadData()
	})


	
	function loadData() {
		$('#datatable').DataTable({
			"pageLength": 10,
			"serverSide": true,
			"processing": true,
			"scrollX": true,
			"order": [
				[0, "desc"]
			],
			"columnDefs": [
				{
					targets: [0,1,2,3,5,7],
					className: "text-center"
				},
				{
					targets: [6],
					className: "text-end"
				},
				{
					orderable: false,
					targets: [1,2,3,4,5,7]
				},
				{
					width: '5%',
					targets: [0]
				},
				{
					width: '15%',
					targets: [1]
				},
				{
					width: '10%',
					targets: [2]
				},
				{
					width: '5%',
					targets: [3]
				},
				{
					width: '10%',
					targets: [4]
				},
				{
					width: '5%',
					targets: [5]
				},
				{
					width: '20%',
					targets: [6]
				},
				{
					width: '10%',
					targets: [7]
				},
			],
			"ajax": {
				url: baseUrl + 'payment/get-all-data',
				type: 'POST',
				data: {
					month: $('input[name="month"]').val(),
					customer: $('select[name="customer"]').val(),
					village: $('select[name="village"]').val(),
				},
			},
			"columns": [{
					data: "no"
				},
				{
					data: "created_at"
				},
				{
					data: "pic"
				},
				{
					data: "date"
				},
				{
					data: "customer_name"
				},
				{
					data: "village_name"
				},
				{
					data: "total"
				},				
				{
					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();
	        }
		})
	}


	$("#apply_filter").on('click',function(e){
		e.preventDefault()
		loadData()
	})

	$("#clear_filter").on('click',function(e){
		$('input[name="month"]').val('')
		$("select[name='customer']").select2('trigger','select', {
	          data:{id: "", text: ""}
	    });
		$("select[name='village']").select2('trigger','select', {
              data:{id: "", text: ""}
          });
		loadData()
	})


	$("#btn_add").on('click',function(e){
		e.preventDefault()
		
		$("#modal_add").modal('show')
		window.location.href = `${baseUrl}payment/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)

	})


	$("#datatable").delegate(".datatable-detail", "click", function (e) {
		  var url = $(this).attr("data-link");
		  e.preventDefault()
			
			$("#modal_detail").modal('show')
			// loading
			$("#modal_detail").find('.modal-content').html(loadingLdsRing)
			$("#modal_detail").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>