<div class="keranjang" id="tambah-kas-keluar">
	<form autocomplete="off" class="form-add" id="form-add-kas" enctype="multipart/form-data">
		<!-- [EDIT] Tambah enctype untuk upload bukti nota kas keluar -->
		<div class="row">
			<div class="col-sm">
				<div class="form-group">
					<label for="formGroupExampleInput">No. Transaksi</label>
					<input type="text" class="form-control form-control-sm flat" name="no_trans" id="no_trans" value="<?=$no_trans;?>" readonly>
				</div>
			</div>
			<div class="col-sm">
				<div class="form-group">
					<label for="dari_kas">Keluar dari akun</label>
					<select name="dari_kas" id="dari_kas"  class="custom-select form-control-sm flat"  data-valueKey="id" data-displayKey="name" required>
					</select>
				</div>
			</div>
			<div class="col-sm">
				<div class="form-group text-right">
					<label for="saldo_kas">Saldo Kas</label>
					<input type="text" class="form-control form-control-sm flat text-right" name="saldo_kas" id="saldo_kas" readonly>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm">			 
				<label for="tanggal_kas">Tanggal</label>
				<div class="input-group input-group-sm flat">
					<div class="input-group-prepend">
						<button class="btn btn-outline-secondary btn-date" type="button"><i class="fa fa-calendar"></i></button>
					</div>
					<input type="text" class="form-control flat" name="tanggal_kas" id="tanggal_kas" value="<?=$tanggal;?>" required>
				</div>
			</div>
			<div class="col-sm">
				<div class="form-group">
					<label for="keterangan_kas">Keterangan</label>
					<input type="text" class="form-control form-control-sm flat" name="keterangan_kas" id="keterangan_kas" required>
				</div>
			</div>
			<!-- [ADD] Upload lampiran bukti nota kas keluar (opsional) -->
			<div class="col-sm">
				<div class="form-group">
					<label for="bukti_nota">Lampiran Bukti Nota (Opsional)</label>
					<div class="kas-nota-upload" id="kas-nota-upload">
						<input type="file" name="bukti_nota" id="bukti_nota" accept=".jpg,.jpeg,.png,.webp,.pdf">
						<label class="kas-nota-dropzone" for="bukti_nota">
							<span class="kas-nota-upload-icon"><i class="fa fa-cloud-upload"></i></span>
							<span class="kas-nota-upload-copy">
								<strong>Klik atau drop file</strong>
								<small>JPG, PNG, WEBP, PDF &bull; Maks. 6MB</small>
							</span>
						</label>
						<div class="kas-nota-selected" aria-live="polite">
							<button type="button" class="kas-nota-preview-btn" title="Lihat bukti nota">
								<span class="kas-nota-thumb-wrap">
									<img class="kas-nota-thumb" alt="Preview bukti nota">
									<i class="fa fa-file-pdf-o kas-nota-pdf-icon"></i>
								</span>
								<span class="kas-nota-file-info">
									<strong class="kas-nota-file-name"></strong>
									<small>Klik untuk melihat</small>
								</span>
							</button>
							<button type="button" class="kas-nota-remove" title="Hapus file" aria-label="Hapus bukti nota"><i class="fa fa-times"></i></button>
						</div>
					</div>
				</div>
			</div>
			<!-- [END ADD] Upload lampiran bukti nota kas keluar -->
			<div class="col-sm">
				<div class="form-group text-right">
					<label for="jumlah_kas">Jumlah Kas</label>
					<input type="text" class="form-control form-control-sm flat text-right" name="jumlah_kas"  id="jumlah_kas" required readonly>
				</div>
			</div>
		</div>
		<div class='row'>
			<div class="col-md-12">
				<table class="table table-striped table-sm" id="table-kas">
					<thead>
						<tr>
							<td width="10" class="p-0 align-middle text-center"><button class="btn btn-primary flat add-more" type="button" id="add-more" readonly><i class="fa fa-plus"></i></button></td>
							<td class="w-20 pl-2">Kode Akun</td>
							<td>Keterangan Rincian</td>
							<td class="w-20 text-right">Jumlah</td>
						</tr>
					</thead>
					<tbody id="insert-form-kas">
						<tr id='rowCount' class="rowCount" >
							<td align="center">
								<button type="button" data-no=''
								class='btn btn-light bg-white btn-sm text-danger shadow-none flat' data-id="0" disabled><i class="fa fa-times"></i></button>
							</td>
							
							<td>
								<select type="text" class="form-control bootstrap-select input-sm flat" id="idAkun_0" name="idAkun[]" title="Kode Akun" data-container="body" data-live-search="true" required>
									<option value="__add_account__" data-content="<span class='add-account-cta'>+ Tambah Akun</span>">+ Tambah Akun</option>
									<?php foreach ($akun as $ak) : ?>
									<option value="<?= $ak['id_akun']; ?>"><?= $ak['kel_akun']; ?>-<?= $ak['noakun']; ?> <?= $ak['nama']; ?></option>
									<?php endforeach; ?>
								</select>
							</td>
							
							<td>
								<div class="form-group p-0 m-0">
									<input type="text" id="keterangan_0" name="keterangan[]" class="form-control input-sm flat" required />
								</div>
							</td>
							
							<td>
								<div class="form-group p-0 m-0">
									<input type="text" id="jumlah_0" name="jumlah[]" class="form-control input-sm flat text-right jumlah" onkeyup="MathKas()" required />
								</div>
							</td>
							
						</tr>
						
					</tbody>
				</table>
			</div>
		</div>
	</form>
</div>

<div class="kas-nota-viewer" id="kas-nota-viewer" aria-hidden="true">
	<div class="kas-nota-viewer-toolbar">
		<div>
			<strong>Preview Bukti Nota</strong>
			<span class="kas-nota-viewer-name"></span>
		</div>
		<button type="button" class="kas-nota-viewer-close" aria-label="Tutup preview"><i class="fa fa-times"></i></button>
	</div>
	<div class="kas-nota-viewer-content">
		<img class="kas-nota-viewer-image" alt="Bukti nota kas keluar">
		<iframe class="kas-nota-viewer-pdf" title="Bukti nota PDF"></iframe>
	</div>
</div>

<div class="modal fade" id="ModalAkunKasKeluarInline" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content flat">
			<div class="modal-header">
				<div class="akun-modal-heading">
					<span class="akun-modal-icon"><i class="fa fa-plus"></i></span>
					<div>
						<h5 class="modal-title">Tambah Akun</h5>
						<small>Lengkapi informasi akun baru</small>
					</div>
				</div>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form autocomplete="off" id="form-add-akun-kas-keluar">
					<div class="load-add-akun-kas-keluar"></div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-light akun-modal-cancel" data-dismiss="modal">Batal</button>
				<button type="button" class="btn btn-primary simpan-akun-kas-keluar"><i class="fa fa-save mr-1"></i> Simpan Akun</button>
			</div>
		</div>
	</div>
</div>

<style>
	.kas-nota-upload {
		position: relative;
		min-height: 66px;
		border: 1px dashed #4c91df;
		border-radius: 8px;
		background: #fff;
		transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
	}
	.kas-nota-upload:hover,
	.kas-nota-upload.is-dragging {
		border-color: #1e6fc7;
		background: #f2f7fd;
		box-shadow: 0 0 0 3px rgba(40, 120, 208, .1);
	}
	.kas-nota-upload > input[type="file"] {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}
	.kas-nota-dropzone {
		display: flex !important;
		align-items: center;
		gap: 10px;
		min-height: 64px;
		margin: 0 !important;
		padding: 10px 12px;
		cursor: pointer;
	}
	.kas-nota-upload-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		flex: 0 0 36px;
		border-radius: 9px;
		color: #2878d0;
		background: #eaf3fd;
		font-size: 19px;
	}
	.kas-nota-upload-copy,
	.kas-nota-file-info {
		display: flex;
		min-width: 0;
		flex-direction: column;
		line-height: 1.25;
	}
	.kas-nota-upload-copy strong {
		color: #344256;
		font-size: 12px;
		font-weight: 600;
	}
	.kas-nota-upload-copy small {
		margin-top: 3px;
		color: #748197;
		font-size: 10px;
	}
	.kas-nota-selected {
		display: none;
		align-items: center;
		gap: 6px;
		min-height: 64px;
		padding: 7px;
	}
	.kas-nota-upload.has-file .kas-nota-dropzone {
		display: none !important;
	}
	.kas-nota-upload.has-file .kas-nota-selected {
		display: flex;
	}
	.kas-nota-preview-btn {
		display: flex;
		align-items: center;
		min-width: 0;
		flex: 1 1 auto;
		gap: 9px;
		padding: 0;
		border: 0;
		color: #29374a;
		text-align: left;
		background: transparent;
	}
	.kas-nota-thumb-wrap {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		flex: 0 0 48px;
		overflow: hidden;
		border-radius: 7px;
		background: #edf3fa;
	}
	.kas-nota-thumb {
		display: none;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.kas-nota-pdf-icon {
		display: none;
		color: #dc3545;
		font-size: 25px;
	}
	.kas-nota-upload.is-image .kas-nota-thumb,
	.kas-nota-upload.is-pdf .kas-nota-pdf-icon {
		display: block;
	}
	.kas-nota-file-info strong {
		overflow: hidden;
		font-size: 11px;
		font-weight: 600;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.kas-nota-file-info small {
		color: #2878d0;
		font-size: 10px;
	}
	.kas-nota-remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		flex: 0 0 30px;
		border: 0;
		border-radius: 7px;
		color: #cf4e4e;
		background: #fff0f0;
		transition: color .2s ease, background .2s ease;
	}
	.kas-nota-remove:hover {
		color: #fff;
		background: #dc5454;
	}
	.kas-nota-viewer {
		position: fixed;
		z-index: 2200;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: none;
		flex-direction: column;
		background: rgba(5, 12, 23, .94);
		backdrop-filter: blur(4px);
	}
	.kas-nota-viewer.is-open {
		display: flex;
	}
	.kas-nota-viewer-toolbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 68px;
		padding: 12px 22px;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
		color: #fff;
	}
	.kas-nota-viewer-toolbar > div {
		display: flex;
		min-width: 0;
		flex-direction: column;
	}
	.kas-nota-viewer-toolbar strong {
		font-size: 15px;
	}
	.kas-nota-viewer-name {
		overflow: hidden;
		max-width: 70vw;
		color: rgba(255, 255, 255, .66);
		font-size: 12px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.kas-nota-viewer-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border: 1px solid rgba(255, 255, 255, .15);
		border-radius: 10px;
		color: #fff;
		background: rgba(255, 255, 255, .08);
		font-size: 20px;
		transition: background .2s ease, transform .2s ease;
	}
	.kas-nota-viewer-close:hover {
		background: rgba(255, 255, 255, .16);
		transform: rotate(90deg);
	}
	.kas-nota-viewer-content {
		display: flex;
		min-height: 0;
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		padding: 24px;
	}
	.kas-nota-viewer-image {
		display: none;
		max-width: 94vw;
		max-height: calc(100vh - 116px);
		border-radius: 4px;
		box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
		object-fit: contain;
	}
	.kas-nota-viewer-pdf {
		display: none;
		width: min(1100px, 94vw);
		height: calc(100vh - 116px);
		border: 0;
		border-radius: 6px;
		background: #fff;
	}
	.kas-nota-viewer.is-image .kas-nota-viewer-image,
	.kas-nota-viewer.is-pdf .kas-nota-viewer-pdf {
		display: block;
	}

	.add-account-cta {
		color: #fff;
		background: #0d6efd;
		border-radius: 3px;
		display: inline-block;
		font-weight: 600;
		padding: 5px 9px;
	}

	/* Overlay khusus modal akun di atas modal Kas Keluar. */
	#ModalAkunKasKeluarInline {
		z-index: 1080;
		padding-right: 0 !important;
	}

	.modal-backdrop.modal-backdrop-akun-kas-keluar {
		z-index: 1070;
		background: #10213d;
		opacity: .62 !important;
	}

	#ModalAkunKasKeluarInline .modal-dialog {
		width: calc(100% - 30px);
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}

	#ModalAkunKasKeluarInline .modal-content {
		border: 0;
		border-radius: 12px !important;
		box-shadow: 0 24px 70px rgba(9, 30, 66, .28);
		overflow: hidden;
	}

	#ModalAkunKasKeluarInline .modal-header {
		align-items: center;
		background: linear-gradient(135deg, #1556a8 0%, #2878d0 100%);
		border: 0;
		color: #fff;
		padding: 18px 20px;
	}

	#ModalAkunKasKeluarInline .akun-modal-heading {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	#ModalAkunKasKeluarInline .akun-modal-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		background: rgba(255, 255, 255, .16);
		border: 1px solid rgba(255, 255, 255, .22);
		border-radius: 10px;
	}

	#ModalAkunKasKeluarInline .modal-title {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.2;
		margin: 0 0 2px;
	}

	#ModalAkunKasKeluarInline .akun-modal-heading small {
		color: rgba(255, 255, 255, .76);
		font-size: 12px;
	}

	#ModalAkunKasKeluarInline .close {
		color: #fff;
		opacity: .75;
		text-shadow: none;
		transition: opacity .2s ease, transform .2s ease;
	}

	#ModalAkunKasKeluarInline .close:hover {
		opacity: 1;
		transform: rotate(90deg);
	}

	#ModalAkunKasKeluarInline .modal-body {
		background: #f8fafc;
		padding: 22px 24px 8px;
	}

	#ModalAkunKasKeluarInline .modal-body .col-sm {
		padding-left: 0;
		padding-right: 0;
	}

	#ModalAkunKasKeluarInline .form-group {
		margin-bottom: 14px;
	}

	#ModalAkunKasKeluarInline .form-control,
	#ModalAkunKasKeluarInline .custom-select,
	#ModalAkunKasKeluarInline .input-group-text {
		height: 42px;
		border-color: #d8e1ec;
		border-radius: 7px;
		box-shadow: none;
		transition: border-color .2s ease, box-shadow .2s ease;
	}

	#ModalAkunKasKeluarInline .input-group-text {
		align-items: center;
		background: #edf3fa;
		border-radius: 7px 0 0 7px;
		color: #1556a8;
		font-weight: 600;
	}

	#ModalAkunKasKeluarInline .input-group .form-control {
		border-radius: 0 7px 7px 0;
	}

	#ModalAkunKasKeluarInline .form-control:focus,
	#ModalAkunKasKeluarInline .custom-select:focus {
		border-color: #4c91df;
		box-shadow: 0 0 0 3px rgba(40, 120, 208, .12);
	}

	#ModalAkunKasKeluarInline .modal-body hr {
		display: none;
	}

	#ModalAkunKasKeluarInline .modal-footer {
		background: #fff;
		border-top: 1px solid #e8edf3;
		padding: 14px 20px;
	}

	#ModalAkunKasKeluarInline .modal-footer .btn {
		border-radius: 7px;
		font-weight: 600;
		min-width: 92px;
		padding: 8px 14px;
		transition: transform .15s ease, box-shadow .15s ease;
	}

	#ModalAkunKasKeluarInline .modal-footer .btn:hover {
		transform: translateY(-1px);
	}

	#ModalAkunKasKeluarInline .simpan-akun-kas-keluar {
		background: #2878d0;
		border-color: #2878d0;
		box-shadow: 0 5px 14px rgba(40, 120, 208, .22);
	}

	#ModalAkunKasKeluarInline .akun-modal-cancel {
		border: 1px solid #d8e1ec;
		color: #5b6777;
	}

	@media (max-width: 575.98px) {
		#ModalAkunKasKeluarInline .modal-body {
			padding: 18px 18px 6px;
		}

		#ModalAkunKasKeluarInline .modal-footer {
			padding: 12px 18px;
		}
	}
</style>

<script>
	
	// Menangani tambah data transakdi +
	var parent = $("#tambah-kas-keluar");
	var form = parent.find($("form"));
	var table = form.find($("table"));
	var index = 1;
	var akun = <?php echo json_encode( $akun ) ?>;
	var $modalAkunKasKeluar = $('#ModalAkunKasKeluarInline');
	var $activeAkunKasKeluarSelect = null;
	var $kasNotaUpload = $('#kas-nota-upload');
	var $kasNotaInput = $('#bukti_nota');
	var $kasNotaViewer = $('#kas-nota-viewer');
	var kasNotaPreviewUrl = '';
	var kasNotaPreviewType = '';

	// Viewer dipindahkan ke body supaya preview memenuhi layar.
	$('body > #kas-nota-viewer').not($kasNotaViewer).remove();
	if (!$kasNotaViewer.parent().is('body')) {
		$kasNotaViewer.appendTo('body');
	}

	function closeKasNotaViewer() {
		$kasNotaViewer.removeClass('is-open is-image is-pdf').attr('aria-hidden', 'true');
		$kasNotaViewer.find('.kas-nota-viewer-image').attr('src', '');
		$kasNotaViewer.find('.kas-nota-viewer-pdf').attr('src', '');
	}

	function resetKasNota() {
		closeKasNotaViewer();
		if (kasNotaPreviewUrl && window.URL && URL.revokeObjectURL) {
			URL.revokeObjectURL(kasNotaPreviewUrl);
		}
		kasNotaPreviewUrl = '';
		kasNotaPreviewType = '';
		$kasNotaInput.val('');
		$kasNotaUpload.removeClass('has-file is-image is-pdf is-dragging');
		$kasNotaUpload.find('.kas-nota-thumb').attr('src', '');
		$kasNotaUpload.find('.kas-nota-file-name').text('');
	}

	function setKasNotaFile(file) {
		if (!file) {
			resetKasNota();
			return false;
		}

		var extension = String(file.name || '').split('.').pop().toLowerCase();
		var isImage = /^(jpe?g|png|webp)$/.test(extension) && (!file.type || /^image\//i.test(file.type));
		var isPdf = extension === 'pdf' && (!file.type || file.type === 'application/pdf');
		if (!isImage && !isPdf) {
			showNotif('top-center', 'Bukti Nota', 'Format file harus JPG, PNG, WEBP, atau PDF', 'warning');
			resetKasNota();
			return false;
		}
		if (file.size > (6 * 1024 * 1024)) {
			showNotif('top-center', 'Bukti Nota', 'Ukuran file maksimal 6MB', 'warning');
			resetKasNota();
			return false;
		}

		if (kasNotaPreviewUrl && window.URL && URL.revokeObjectURL) {
			URL.revokeObjectURL(kasNotaPreviewUrl);
		}
		kasNotaPreviewUrl = URL.createObjectURL(file);
		kasNotaPreviewType = isPdf ? 'pdf' : 'image';
		$kasNotaUpload.removeClass('is-image is-pdf is-dragging').addClass('has-file is-' + kasNotaPreviewType);
		$kasNotaUpload.find('.kas-nota-file-name').text(file.name);
		if (isImage) {
			$kasNotaUpload.find('.kas-nota-thumb').attr('src', kasNotaPreviewUrl);
		}
		return true;
	}

	$kasNotaInput.off('change.kasNota').on('change.kasNota', function() {
		setKasNotaFile(this.files && this.files[0]);
	});
	$kasNotaUpload.off('.kasNota');
	$kasNotaUpload.on('dragenter.kasNota dragover.kasNota', function(e) {
		e.preventDefault();
		e.stopPropagation();
		$kasNotaUpload.addClass('is-dragging');
	});
	$kasNotaUpload.on('dragleave.kasNota drop.kasNota', function(e) {
		e.preventDefault();
		e.stopPropagation();
		$kasNotaUpload.removeClass('is-dragging');
	});
	$kasNotaUpload.on('drop.kasNota', function(e) {
		var files = e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files;
		if (!files || !files.length) {
			return;
		}
		if (setKasNotaFile(files[0])) {
			try {
				var transfer = new DataTransfer();
				transfer.items.add(files[0]);
				$kasNotaInput[0].files = transfer.files;
			} catch (dropError) {
				showNotif('top-center', 'Bukti Nota', 'Silakan pilih file melalui tombol upload', 'warning');
				resetKasNota();
			}
		}
	});
	$kasNotaUpload.on('click.kasNota', '.kas-nota-preview-btn', function() {
		if (!kasNotaPreviewUrl) {
			return;
		}
		$kasNotaViewer.find('.kas-nota-viewer-name').text($kasNotaUpload.find('.kas-nota-file-name').text());
		$kasNotaViewer.removeClass('is-image is-pdf').addClass('is-open is-' + kasNotaPreviewType).attr('aria-hidden', 'false');
		if (kasNotaPreviewType === 'image') {
			$kasNotaViewer.find('.kas-nota-viewer-image').attr('src', kasNotaPreviewUrl);
		} else {
			$kasNotaViewer.find('.kas-nota-viewer-pdf').attr('src', kasNotaPreviewUrl);
		}
	});
	$kasNotaUpload.on('click.kasNota', '.kas-nota-remove', resetKasNota);
	$kasNotaViewer.off('.kasNota').on('click.kasNota', '.kas-nota-viewer-close', closeKasNotaViewer);
	$kasNotaViewer.on('click.kasNota', function(e) {
		if (e.target === this) {
			closeKasNotaViewer();
		}
	});
	$(document).off('keydown.kasNota').on('keydown.kasNota', function(e) {
		if (e.key === 'Escape' && $kasNotaViewer.hasClass('is-open')) {
			e.preventDefault();
			closeKasNotaViewer();
		}
	});
	$('#ModalKas').off('hidden.bs.modal.kasNota').on('hidden.bs.modal.kasNota', resetKasNota);

	// Modal dipindah ke body supaya tidak mewarisi ukuran modal kas keluar.
	$('body > #ModalAkunKasKeluarInline').not($modalAkunKasKeluar).remove();
	if (!$modalAkunKasKeluar.parent().is('body')) {
		$modalAkunKasKeluar.appendTo('body');
	}

	$modalAkunKasKeluar.off('.kasKeluarOverlay');
	$modalAkunKasKeluar.on('show.bs.modal.kasKeluarOverlay', function() {
		setTimeout(function() {
			$('.modal-backdrop').last().addClass('modal-backdrop-akun-kas-keluar');
		}, 0);
	});
	$modalAkunKasKeluar.on('shown.bs.modal.kasKeluarOverlay', function() {
		$(this).find('#tipeAkun').focus();
	});
	$modalAkunKasKeluar.on('hidden.bs.modal.kasKeluarOverlay', function() {
		$('.modal-backdrop-akun-kas-keluar').remove();
		if ($('#ModalKas').hasClass('show')) {
			$('body').addClass('modal-open');
		}
	});

	function openTambahAkunKasKeluar($select) {
		$activeAkunKasKeluarSelect = $select;
		$.ajax({
			url: base_url + 'masterdata/add_akun',
			method: 'POST',
			beforeSend: function() {
				$('.load-add-akun-kas-keluar').html('<div class="text-center py-3">Loading...</div>');
			},
			success: function(data) {
				$('.load-add-akun-kas-keluar').html(data);
				$modalAkunKasKeluar.modal({backdrop: 'static', keyboard: false});
			},
			error: function(xhr, ajaxOptions, thrownError) {
				sweet('Peringatan!!!', thrownError, 'warning', 'warning');
			}
		});
	}

	$(document).off('shown.bs.select.kasKeluarAkun', '#tambah-kas-keluar select[name="idAkun[]"]');
	$(document).on('shown.bs.select.kasKeluarAkun', '#tambah-kas-keluar select[name="idAkun[]"]', function() {
		$(this).data('prev-value', $(this).val());
	});

	$(document).off('change.kasKeluarAkun', '#tambah-kas-keluar select[name="idAkun[]"]');
	$(document).on('change.kasKeluarAkun', '#tambah-kas-keluar select[name="idAkun[]"]', function() {
		if ($(this).val() === '__add_account__') {
			var $select = $(this);
			$select.val($select.data('prev-value') || '').selectpicker('refresh');
			openTambahAkunKasKeluar($select);
		}
	});

	$(document).off('click.kasKeluarAkun', '.simpan-akun-kas-keluar');
	$(document).on('click.kasKeluarAkun', '.simpan-akun-kas-keluar', function(e) {
		e.preventDefault();
		$.ajax({
			url: base_url + 'masterdata/simpan_akun',
			data: $('#form-add-akun-kas-keluar').serialize(),
			method: 'POST',
			dataType: 'json',
			beforeSend: function() {
				$modalAkunKasKeluar.find('.modal-content').loading({zIndex: 1060});
			},
			success: function(data) {
				if (data.status === true) {
					var accountId = String(data.id || '');
					var accountLabel = data.label || $.trim($('#namaAkun').val());
					if (accountId !== '') {
						akun.unshift({
							id_akun: accountId,
							kel_akun: data.kel_akun || '',
							noakun: data.noakun || '',
							nama: data.nama || accountLabel
						});
						$('#tambah-kas-keluar select[name="idAkun[]"]').each(function() {
							if ($(this).find('option[value="' + accountId + '"]').length === 0) {
								$('<option>', {value: accountId, text: accountLabel})
									.insertAfter($(this).find('option[value="__add_account__"]').first());
							}
						});
						if ($activeAkunKasKeluarSelect && $activeAkunKasKeluarSelect.length) {
							$activeAkunKasKeluarSelect.val(accountId);
						}
						$('#tambah-kas-keluar .bootstrap-select').selectpicker('refresh');
					}
					showNotif('bottom-right', 'Simpan data', data.msg, 'success');
					$modalAkunKasKeluar.modal('hide');
				} else {
					showNotif('bottom-right', 'Simpan data', data.msg, 'warning');
				}
				$modalAkunKasKeluar.find('.modal-content').loading('stop');
			},
			error: function(res, status, httpMessage) {
				$modalAkunKasKeluar.find('.modal-content').loading('stop');
				sweet('Peringatan!!!', httpMessage, 'warning', 'warning');
			}
		});
	});
	table.find($(".add-more")).click(function() {
		
		let optionAkun = '';
		let optionNamaAkun = '';
		let optionPerkiraan = '';
		$.each( akun, function( index, row ) {
			optionAkun += `
		<option value="${row.id_akun}">${row.kel_akun}-${row.noakun} ${row.nama}</option>
		`;
		});
		$.each( akun, function( index, row ) {
		optionNamaAkun += `
		<option value="${row.nama}">${row.nama}</option>
		`;
		});
		optionAkun = `<option value="__add_account__" data-content="<span class='add-account-cta'>+ Tambah Akun</span>">+ Tambah Akun</option>` + optionAkun;
		
		
		let el = `<tr id="data${index}">
			<td class="text-center">
				<button type="button"data-position="${index}"
				class='btn btn-light bg-white btn-sm text-danger shadow-none flat' id="hapus-tab-input"><i class="fa fa-times"></i></button>
			</td>
			<td>
				<select type="text" class="form-control bootstrap-select input-sm flat" id="idAkun_${index}" name="idAkun[]" title="Kode Akun" data-container="body" data-live-search="true" required>
					${optionAkun}
				</select>
			</td>
			
			<td>
				<input type="text" class="form-control input-sm flat" id="keterangan_${index}" name="keterangan[]"  autocomplete="off" required>
			</td>
			
			<td>
				<input type="text" class="form-control input-sm text-right flat jumlah" id="jumlah_${index}" name="jumlah[]" onkeyup="MathKas()" autocomplete="off" required>
			</td>
			
		</tr>`;
		table.find($("#insert-form-kas")).append(el);
		
		index++;
		$(".bootstrap-select").selectpicker();
		});
		
		// Menangani hapus row
		$(document).on("click", "#hapus-tab-input", function() {
        let id = $(this).attr("data-position");
		table.find($("tr#data"+id)).remove();
		MathKas();
		});
		// menangani otomatis nomor akun dan nama akun
		$(document).ready(function(){
		$(".bootstrap-select").selectpicker();
		
		$(document).on("keyup input", ".jumlah", function() {
		//Menangani Input otomatis Format Ribuan
		let rupiah = $(this).val();
		
		$(this).val(formatRupiah(rupiah, 'Rp. '));
		MathKas();
		
		/* Fungsi formatRupiah */
		function formatRupiah(angka, prefix){
		let number_string = angka.replace(/[^,\d]/g, '').toString(),
		split   		= number_string.split(','),
		sisa     		= split[0].length % 3,
		rupiah     		= split[0].substr(0, sisa),
		ribuan     		= split[0].substr(sisa).match(/\d{3}/gi);
		
		// tambahkan titik jika yang di input sudah menjadi angka ribuan
		if(ribuan){
		separator = sisa ? '.' : '';
		rupiah += separator + ribuan.join('.');
		}
		
		rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
		return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
		}
	    });
		});
	</script>
	<script>
		$("#dari_kas").filter(function() {
			$.ajax({
				url : base_url + "kas_keluar/akun_kas",
				type : "post",
				data : {
					type : "cari"
				},
				dataType : "json",
				success : function(response) {
					var msize = response.length;
					$(".dari_kas").attr("disabled", false);
					$("#dari_kas").append("<option value=''>Pilih</option>");
					/** @type {number} */
					var i = 0;
					for (; i < msize; i++) {
						var teg = response[i]["id"];
						var last_supr = response[i]["name"];
						$("#dari_kas").append("<option value='" + teg + "'>" + last_supr + "</option>");
					}
				}
			});
		});
		
		$("#dari_kas" ).change(function() {
			var id = $("#dari_kas").val();
			
			$("#saldo_kas").empty();
			$.ajax({
				url: base_url + "kas/load_kas",
				type: 'post',
				data: {id:id,type:'cari'},
				dataType: 'json',
				success: function (response) {
					// console.log(response)
					$('#saldo_kas').val(formatMoney(response.nilai,0,"Rp."));
				},
				error: function (xhr, ajaxOptions, thrownError) {
					sweet('Peringatan!!!',thrownError,'warning','warning');
				}
			});
			
		});
		
		var date2 = new Date();
		$('#tanggal_kas').datepicker({        
			format: 'dd/mm/yyyy', 
			endDate: date2,
			autoclose: true,     
			todayHighlight: true,   
			todayBtn: 'linked',
		}); 
		
		$(document).on("click", ".btn-date", function() {
			$('#tanggal_kas').focus()
		});
	</script>
