@section('datatables')
    <script src="{{asset('libs/datatables-net/media/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('libs/datatables-net/media/js/dataTables.bootstrap4.min.js')}}"></script>

    <script>
		var selected = [];
		function loadDataTable(myTable1, id, columnOptions){
			selected[id] = [];
			myTable1 = $('#'+id).DataTable({
				rowReorder: {
					"update": false,
				// 	selector: ':first-child'
				},
				"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
				processing: false,
				serverSide: true,
				ajax: {
					url: $('#'+id).data("url"),
				},
				dom:
				// "<'row'<'col-sm-12'<'float-right'>>" +
					"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
					"<'row'<'col-sm-12'tr>>" +
					"<'row'<'col-sm-5'i><'col-sm-7'p>>",
				"columns": columnOptions,
				// order: [ [0, 'desc'] ]
			});

			if($('#'+id).data("reorder-url")){
				myTable1.on('row-reorder', function ( e, diff, edit ) {
					var ids = [];
					for (var i = 1; i < e.target.rows.length; i++) {
						var string = e.target.rows[i].cells[0].innerHTML;
						if(!string==""){
							var node = new DOMParser().parseFromString(string, 'text/html');
							ids.push(node.body.firstChild.getAttribute('id'));
						}
					}

					console.log(ids);

					$.ajax({
						type: 'post',
						url: $('#'+id).data("reorder-url"),
						method: 'post',
						data: {data: ids},
						headers: {
							"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content'),
							"Cache-Control": "no-cache"
						},
						error: function(error) {
							if (!$.isEmptyObject(error.responseJSON)) {
								printErrorMsg(error.responseJSON);
							}
						},
						success: function(data) {
							myTable1
								.row()
								.invalidate()
								.draw(false);

							$.notify({
								title: 'Activated!',
								message: 'The record has been reordered successfully'
							},{
								type: 'success-active'
							});
						}
					});
				});
			}

			$.fn.dataTable.ext.errMode = 'throw';

			// Setup - add a text input to each footer cell
			$('#'+id+' tfoot th.search').each( function () {
				// var title = $(this).text();
				var title = $(this).attr('title');
				$(this).html( '<input type="text" style="padding: 5px;border: solid thin #ccc;" title="'+title+'" placeholder="'+title+'" />' );
			} );

			/* Apply the search for individual columns*/
			myTable1.columns().every( function () {
				var that = this;
				$( 'input', this.footer() ).on( 'keydown', function (ev) {
					if (ev.keyCode == 13) { //only on enter keypress (code 13)
						that
							.search( this.value )
							.draw();
					}
				} );
			} );

			//deactivate record
			$('#'+id).on( 'click', '.deactivateRecord', function () {
				console.log("hello");
				$.ajax({
					type: 'post',
					url: $(this).data('href'),
					method: 'post',
					data: '',
					headers: {
						"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content'),
						"Cache-Control": "no-cache"
					},
					error: function(error) {
						if (!$.isEmptyObject(error.responseJSON)) {
							printErrorMsg(error.responseJSON);
						}
					},
					success: function(data) {
						myTable1
							.row()
							.invalidate()
							.draw(false);

						$.notify({
							title: 'Deactivated!',
							message: 'The record has been deactivated successfully'
						},{
							type: 'warning-active'
						});
					}
				});
			});

			//activate record
			$('#'+id).on( 'click', '.activateRecord', function () {
				$.ajax({
					type: 'post',
					url: $(this).data('href'),
					method: 'post',
					data: '',
					headers: {
						"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content'),
						"Cache-Control": "no-cache"
					},
					error: function(error) {
						if (!$.isEmptyObject(error.responseJSON)) {
							printErrorMsg(error.responseJSON);
						}
					},
					success: function(data) {
						myTable1
							.row()
							.invalidate()
							.draw(false);

						$.notify({
							title: 'Activated!',
							message: 'The record has been activated successfully'
						},{
							type: 'success-active'
						});
					}
				});
			});

			//delete record
			$('#'+id).on( 'click', '.deleteRecord', function () {
				let csrf_token = $('meta[name="csrf-token"]').attr('content');
				let url = $(this).data('href');
				swal({
					title: "Are you sure you want to delete this record?",
					icon: "warning",
					buttons: true,
					dangerMode: true,
				})
					.then(function (willDelete) {
						if (willDelete!=null) {
							$.ajax({
								type: 'post',
								url: url,
								method: 'delete',
								data: '',
								headers: {
									"X-CSRF-TOKEN": csrf_token,
									"Cache-Control": "no-cache"
								},
								error: function(error) {
									if (!$.isEmptyObject(error.responseJSON)) {
										printErrorMsg(error.responseJSON);
									}
								},
								success: function(){
									myTable1
										.row()
										.invalidate()
										.draw(false);

									swal("Poof! Your record has been deleted!", {
										icon: "success",
									});

									$.notify({
										title: 'Deleted!',
										message: 'The record has been deleted successfully'
									},{
										type: 'danger-active'
									});
								}
							});
						} else {

							al("Your record is safe!");
						}
					});
			});

			//edit
			$('#'+id).on( 'click', '.editRecord', function () {
				currentDataTableId = id;
				$.LoadingOverlay("show", {
					fade: false,
					zIndex: 9999999,
					color: 'rgba(0,0,0,0.1)'
				});
				updatedRow = $(this).closest('tr').attr('id');
				$.ajax({
					type: 'post',
					url: $(this).data('href'),
					method: 'get',
					data: {},
					error: function(error) {
						$.LoadingOverlay("hide");
						if (!$.isEmptyObject(error.responseJSON)) {
							printErrorMsg(error.responseJSON);
						}
					},
					success: function(data) {
						$.LoadingOverlay("hide");
						$('#addEditModal').html(data);
						$('#addEditModal').modal('show');

						$('select.ks-select').each(function(){
							$(this).select2({
								placeholder: "Select a value",
								allowClear: true,
								width: "100%",
								dropdownParent: $('#addEditModal'),
							});
						});

						$('select.filter-select').each(function(){
							$(this).select2({
								placeholder: "Select a value",
								allowClear: true,
								width: "100%",
								dropdownParent: $('#addEditModal'),
							}).trigger('change');
						});

						$('.flatpickr').flatpickr();

						$('.selectpicker').selectpicker();

						$('.ks-daterange-single').daterangepicker({
							singleDatePicker: true,
							showDropdowns: true
						});
					}
				});
			});

			$('#'+id).on('click', 'td.details-control', function () {
				var tr = $(this).closest('tr');
				var row = table.row( tr );

				if ( row.child.isShown() ) {
					// This row is already open - close it
					row.child.hide();
					tr.removeClass('shown');
				}
				else {
					// Open this row
					row.child( template(row.data()) ).show();
					tr.addClass('shown');
				}
			});
		}
    </script>
@endsection