<?php
	$kasRows = !empty($record) ? $record : array();
	$totalorder = 0;
	$kasRecordCount = 0;

	foreach ($kasRows as $kasTmpRow) {
		$totalorder += (float) $kasTmpRow["jumlah"];
		$kasRecordCount++;
	}

	$kasPageOffset = 0;
	if (isset($page) && is_numeric($page)) {
		$kasPageOffset = (int) $page;
	} elseif (isset($start) && is_numeric($start)) {
		$kasPageOffset = (int) $start;
	} elseif (isset($offset) && is_numeric($offset)) {
		$kasPageOffset = (int) $offset;
	}

	$kasTotalData = null;
	foreach (array('totalRows','total_rows','totalData','total_data','totalRecord','total_record','total') as $kasTotalVar) {
		if (isset($$kasTotalVar) && is_numeric($$kasTotalVar)) {
			$kasTotalData = (int) $$kasTotalVar;
			break;
		}
	}

	$kasShowingStart = $kasRecordCount > 0 ? $kasPageOffset + 1 : 0;
	$kasShowingEnd = $kasRecordCount > 0 ? $kasPageOffset + $kasRecordCount : 0;
	$kasShowingTotal = $kasTotalData !== null ? $kasTotalData : $kasShowingEnd;
?>

<style>
	/* Pastikan semua sel kolom TOTAL konsisten */
	th.total-col,
	td.total-col {
		text-align: right !important;
		padding-right: .9rem !important;
		white-space: nowrap;
	}
	/* Lebar tetap agar tidak “geser” saat angka panjang/pendek */
	th.total-col { width: 12% !important; }
	/* Angka tabular supaya kolom terlihat sejajar vertikal */
	.total-col .num,
	td.total-col,
	th.total-col {
		font-variant-numeric: tabular-nums;
	}

	.kas-mobile-list,
	.kas-mobile-summary-wrap {
		display: none;
	}

	.kas-desktop-table {
		background: #fff;
		border: 1px solid #edf1f7;
		border-radius: 12px;
		box-shadow: 0 14px 32px rgba(18, 38, 63, .08);
		padding: 1rem 1.05rem .9rem;
		margin-bottom: 1.5rem;
		overflow: hidden;
	}
	.kas-desktop-table .kas-modern-table {
		width: 100%;
		margin: 0;
		border-collapse: separate;
		border-spacing: 0;
		color: #263247;
	}
	.kas-desktop-table .kas-modern-table thead th {
		background: #f8fbff;
		border: 0;
		border-bottom: 1px solid #eef2f7;
		padding: .9rem .9rem;
		color: #263247;
		font-size: .78rem;
		font-weight: 800;
		letter-spacing: .01em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.kas-desktop-table .kas-modern-table tbody td {
		background: #fff !important;
		border: 0;
		border-bottom: 1px solid #eef2f7;
		padding: 1rem .9rem;
		color: #48536a;
		font-size: .92rem;
		vertical-align: middle;
	}
	.kas-desktop-table .kas-modern-table tbody tr:hover td {
		background: #fbfdff !important;
	}
	.kas-desktop-table .kas-modern-table tfoot td {
		background: #fff;
		border: 0;
		padding: 1rem .9rem .55rem;
		color: #1f2937;
		font-size: .92rem;
		font-weight: 800;
		vertical-align: middle;
	}
	.kas-desktop-table .kas-modern-table tfoot .total-col {
		color: #1f2937;
		font-weight: 800;
	}
	.kas-desktop-table .kas-row-no {
		color: #48536a;
		font-weight: 500;
	}
	.kas-desktop-table .kas-trx-button {
		border-radius: 4px !important;
		padding: .38rem .62rem;
		font-weight: 600;
		box-shadow: 0 7px 14px rgba(14, 165, 233, .15);
	}
	.kas-desktop-table .kas-desktop-actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: .45rem;
		flex-wrap: nowrap;
	}
	.kas-desktop-table .kas-desktop-actions .btn {
		border-radius: 5px !important;
		padding: .42rem .72rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .35rem;
		font-size: .8rem;
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
		box-shadow: none;
	}
	.kas-desktop-table .kas-desktop-actions .pull-right {
		float: none !important;
	}
	.kas-desktop-table nav {
		padding: .35rem .85rem 0 !important;
	}
	.kas-desktop-table nav .tampil {
		display: inline-block;
		color: #263247;
		font-size: .9rem;
		font-weight: 500;
	}

	@media (max-width: 768px) {
		.kas-desktop-table {
			display: none !important;
		}
		.kas-mobile-list,
		.kas-mobile-summary-wrap {
			display: block;
		}
		.kas-mobile-list,
		.kas-mobile-list * {
			box-sizing: border-box;
		}
		.kas-mobile-list {
			width: 100%;
			max-width: 100%;
			overflow-x: hidden;
		}
		.kas-mobile-card {
			width: 100%;
			max-width: 100%;
			background: #fff;
			border: 1px solid rgba(226, 232, 240, .85);
			border-radius: 17px;
			padding: 14px 14px;
			margin-bottom: 14px;
			box-shadow: 0 8px 24px rgba(15, 23, 42, .09);
			overflow: hidden;
		}
		.kas-mobile-card-main {
			display: grid;
			grid-template-columns: minmax(0, 1fr) clamp(88px, 27vw, 118px);
			gap: 10px;
			align-items: start;
			width: 100%;
			min-width: 0;
		}
		.kas-card-content {
			min-width: 0;
			width: 100%;
		}
		.kas-card-top {
			display: flex;
			align-items: center;
			gap: 10px;
			flex-wrap: wrap;
			min-width: 0;
			margin-bottom: 12px;
		}
		.kas-card-badges {
			display: inline-flex;
			align-items: center;
			gap: 9px;
			min-width: 0;
		}
		.kas-no-badge {
			width: 42px;
			height: 38px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 8px;
			background: #f0f1fb;
			color: #24418d;
			font-size: 18px;
			font-weight: 600;
			font-variant-numeric: tabular-nums;
			line-height: 1;
			flex: 0 0 auto;
		}
		.kas-trx-badge {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			max-width: 100%;
			min-height: 36px;
			border: 0;
			border-radius: 7px;
			background: linear-gradient(135deg, #3b82f6, #2563eb);
			color: #fff;
			padding: 0 11px;
			font-size: 17px;
			font-weight: 600;
			line-height: 1;
			letter-spacing: .01em;
			box-shadow: 0 8px 16px rgba(37, 99, 235, .22);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
		}
		.kas-card-date {
			display: inline-flex;
			align-items: center;
			gap: 9px;
			min-width: 0;
			color: #202638;
			font-size: 15px;
			font-weight: 500;
			line-height: 1.35;
		}
		.kas-card-date i {
			font-size: 17px;
			color: #30364a;
			flex: 0 0 auto;
		}
		.kas-card-date span {
			min-width: 0;
			word-break: break-word;
		}
		.kas-card-details {
			width: 100%;
			min-width: 0;
		}
		.kas-detail-row {
			display: grid;
			grid-template-columns: minmax(92px, 115px) 10px minmax(0, 1fr);
			align-items: start;
			gap: 6px;
			font-size: 14.5px;
			line-height: 1.45;
			color: #202638;
			margin-bottom: 2px;
			min-width: 0;
		}
		.kas-detail-label {
			font-weight: 500;
			color: #202638;
			white-space: nowrap;
		}
		.kas-detail-colon {
			text-align: center;
			color: #202638;
		}
		.kas-detail-value {
			min-width: 0;
			color: #202638;
			word-break: break-word;
			overflow-wrap: anywhere;
		}
		.kas-card-total {
			margin-top: 12px;
			padding-left: 4px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			min-width: 0;
		}
		.kas-card-total span {
			font-size: 14px;
			line-height: 1.2;
			font-weight: 500;
			color: #202638;
			margin-bottom: 6px;
		}
		.kas-card-total strong {
			display: block;
			max-width: 100%;
			font-size: 21px;
			line-height: 1.1;
			font-weight: 800;
			letter-spacing: .01em;
			color: #101624;
			font-variant-numeric: tabular-nums;
			word-break: break-word;
		}
		.kas-card-actions {
			display: flex;
			flex-direction: column;
			gap: 8px;
			width: 100%;
			min-width: 0;
			align-self: stretch;
		}
		.kas-action-btn {
			width: 100%;
			min-width: 0;
			height: 40px;
			border: 0;
			border-radius: 8px !important;
			padding: 0 8px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 7px;
			color: #fff !important;
			font-size: 13.5px;
			font-weight: 700;
			line-height: 1;
			letter-spacing: .04em;
			text-decoration: none !important;
			white-space: nowrap;
			box-shadow: 0 8px 16px rgba(15, 23, 42, .12);
			cursor: pointer;
		}
		.kas-action-btn i {
			font-size: 16px;
			line-height: 1;
			flex: 0 0 auto;
		}
		.kas-action-print {
			background: linear-gradient(135deg, #39ba4d, #24983a) !important;
		}
		.kas-action-detail {
			background: linear-gradient(135deg, #35a8f2, #1686e5) !important;
		}
		.kas-action-delete {
			background: linear-gradient(135deg, #ff463b, #ef2323) !important;
		}
		.kas-action-attach {
			height: 34px;
			font-size: 12.5px;
			letter-spacing: .02em;
			background: linear-gradient(135deg, #64748b, #475569) !important;
		}
		.kas-mobile-empty {
			background: #fff;
			border-radius: 16px;
			padding: 28px 16px;
			text-align: center;
			font-size: 15px;
			font-weight: 600;
			color: #6b7280;
			box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
		}
		.kas-mobile-summary-wrap {
			width: 100%;
			max-width: 100%;
			background: #fff;
			border: 1px solid rgba(226, 232, 240, .85);
			border-radius: 17px;
			padding: 14px 14px;
			margin: 0 0 18px;
			box-shadow: 0 8px 24px rgba(15, 23, 42, .09);
			overflow: hidden;
		}
		.kas-mobile-summary {
			display: grid;
			grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr) auto;
			gap: 10px;
			align-items: center;
			width: 100%;
		}
		.kas-summary-total-label {
			display: block;
			font-size: 12.5px;
			line-height: 1.2;
			font-weight: 700;
			letter-spacing: .03em;
			color: #6b7280;
			text-transform: uppercase;
			margin-bottom: 5px;
		}
		.kas-summary-total-value {
			display: block;
			font-size: 22px;
			line-height: 1.1;
			font-weight: 800;
			color: #111827;
			font-variant-numeric: tabular-nums;
			word-break: break-word;
		}
		.kas-summary-showing {
			min-height: 54px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 8px 12px;
			border-radius: 10px;
			background: #f2f3fb;
			color: #202638;
			font-size: 15px;
			line-height: 1.35;
			font-weight: 500;
			text-align: center;
		}
		.kas-mobile-pagination {
			min-width: 0;
		}
		.kas-mobile-pagination nav,
		.kas-mobile-pagination .pagination {
			margin: 0 !important;
		}
		.kas-mobile-pagination .pagination {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 8px;
			flex-wrap: nowrap;
		}
		.kas-mobile-pagination .page-item {
			margin: 0 !important;
		}
		.kas-mobile-pagination .page-link,
		.kas-mobile-pagination a,
		.kas-mobile-pagination strong {
			min-width: 48px;
			height: 48px;
			border-radius: 9px !important;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0 12px;
			border: 1px solid #e2e8f0 !important;
			background: #fff;
			color: #4f46e5;
			font-size: 16px;
			line-height: 1;
			font-weight: 600;
			box-shadow: none;
		}
		.kas-mobile-pagination .active .page-link,
		.kas-mobile-pagination .page-item.active a,
		.kas-mobile-pagination strong {
			border-color: #4f46e5 !important;
			background: linear-gradient(135deg, #6d5dfc, #5143d9) !important;
			color: #fff !important;
			box-shadow: 0 8px 16px rgba(79, 70, 229, .22);
		}
	}

	@media (max-width: 430px) {
		.kas-mobile-card {
			padding: 13px;
			border-radius: 16px;
		}
		.kas-mobile-card-main {
			grid-template-columns: minmax(0, 1fr) clamp(86px, 26vw, 106px);
			gap: 9px;
		}
		.kas-no-badge {
			width: 38px;
			height: 36px;
			font-size: 17px;
		}
		.kas-trx-badge {
			min-height: 35px;
			font-size: 16px;
			padding: 0 10px;
		}
		.kas-card-date {
			font-size: 14px;
			gap: 8px;
		}
		.kas-detail-row {
			grid-template-columns: minmax(88px, 105px) 8px minmax(0, 1fr);
			font-size: 14px;
			gap: 5px;
		}
		.kas-card-total strong {
			font-size: 20px;
		}
		.kas-action-btn {
			height: 39px;
			font-size: 13px;
			gap: 6px;
			padding: 0 6px;
		}
		.kas-action-btn i {
			font-size: 15px;
		}
		.kas-action-attach {
			height: 33px;
			font-size: 12px;
		}
		.kas-mobile-summary {
			grid-template-columns: 1fr;
			align-items: stretch;
		}
		.kas-summary-showing {
			justify-content: center;
		}
		.kas-mobile-pagination .pagination {
			justify-content: center;
			flex-wrap: wrap;
		}
	}

	@media (max-width: 374px) {
		.kas-mobile-card-main {
			grid-template-columns: minmax(0, 1fr) 84px;
			gap: 8px;
		}
		.kas-card-badges {
			gap: 7px;
		}
		.kas-no-badge {
			width: 34px;
			height: 34px;
			font-size: 16px;
		}
		.kas-trx-badge {
			font-size: 14px;
			padding: 0 8px;
		}
		.kas-card-date {
			font-size: 13px;
		}
		.kas-detail-row {
			grid-template-columns: 82px 8px minmax(0, 1fr);
			font-size: 13px;
		}
		.kas-card-total span {
			font-size: 13px;
		}
		.kas-card-total strong {
			font-size: 18px;
		}
		.kas-action-btn {
			height: 36px;
			font-size: 11.5px;
			letter-spacing: .02em;
		}
		.kas-action-btn i {
			font-size: 14px;
		}
	}
</style>

<input type="hidden" class="form-control form-control-sm text-right" value="<?= $totalorder; ?>" id="subtotal" readonly>

<div class="kas-desktop-table table-responsive table-responsive-sm">
	<table class="table table-sm kas-modern-table">
		<thead>
			<tr>
				<th style="width:3% !important;" class="text-center">NO</th>
				<th style="width:8% !important;">NO_TRANSAKSI</th>
				<th class="pl-0" style="width:14% !important;">TANGGAL</th>
				<th class="w-25">KETERANGAN</th>
				<th class="text-left w-15">NAMA_AKUN</th>
				<th class="total-col">TOTAL</th>
				<th class="text-right w-25">AKSI</th>
			</tr>
		</thead>

		<tbody>
			<?php if(!empty($kasRows)){ 
				$no=1;

				foreach($kasRows as $row){
					$cetak = '<a href="'.base_url().'kas_keluar/cetak/'.encrypt_url($row['id']).'" target="_blank" class="btn btn-success btn-flat btn-sm pull-right"><i class="fa fa-print"></i> Cetak</a>';
				?>
				<tr>
					<td class="text-center kas-row-no"><?= $no; ?></td>

					<td>
						<div class="btn-group btn-group-sm flat" role="group" aria-label="Basic example">
							<button class="btn btn-info btn-sm flat detail_kas kas-trx-button" data-id="<?=encrypt_url($row["id"]); ?>" data-modEdit=""><?= $row["no_transaksi"]; ?></button>
						</div>
					</td>

					<td class="pl-0"><?= dtime($row["tanggal"]); ?></td>
					<td align="left"><?= $row["keterangan"]; ?></td>
					<td align="left"><?= getAkun($row["id_akun"]); ?></td>

					<!-- Kolom TOTAL: pakai kelas total-col agar sejajar -->
					<td class="total-col"><span class="num"><?= rp($row["jumlah"]); ?></span></td>

					<td class="text-right">
						<div class="kas-desktop-actions" role="group" aria-label="Basic example">
							<?= $cetak; ?>
							<?php if(!empty($row["bukti_nota"])): ?>
								<button type="button"
									class="btn btn-secondary btn-sm flat lihat_lampiran_kas"
									data-url="<?= base_url('uploads/bukti_kas_keluar/'.$row["bukti_nota"]); ?>"
									title="Lihat Bukti Nota">
									<i class="fa fa-paperclip"></i> Lampiran
								</button>
							<?php else: ?>
								<button type="button" class="btn btn-secondary btn-sm flat" disabled title="Lampiran tidak tersedia">
									<i class="fa fa-paperclip"></i> Lampiran
								</button>
							<?php endif; ?>
							<button class="btn btn-info btn-sm flat detail_kas" data-id="<?=encrypt_url($row["id"]); ?>"><i class="fa fa-eye"></i> Detail</button>
							<button class="btn btn-danger btn-sm flat edit_kas_keluar" data-id="<?=encrypt_url($row["id"]); ?>" data-toggle="modal" data-target="#confirm-delete"><i class="fa fa-trash"></i> Hapus</button>
						</div>
					</td>
				</tr>
				<?php
					$no++; 
				} 
			?>
		</tbody>

		<tfoot>
			<tr>
				<td colspan="5">TOTAL</td>
				<td class="total-col"><span class="num"><?= rp($totalorder); ?></span></td>
				<td></td>
			</tr>
		</tfoot>

		<?php }else{ ?>
			<tr><td colspan="7">BELUM ADA DATA</td></tr>
		</tbody>
		<?php } ?>
	</table>

	<nav aria-label="Page navigation example" class="p-2">
		<?php echo $this->ajax_pagination->create_links(); ?>
	</nav>
</div><!-- /.card-body -->

<div class="kas-mobile-list">
	<?php if(!empty($kasRows)){ 
		$no=1;
		foreach($kasRows as $row){
			$kasEncryptedId = encrypt_url($row["id"]);
			$kasCetakUrl = base_url().'kas_keluar/cetak/'.encrypt_url($row['id']);
	?>
		<div class="kas-mobile-card">
			<div class="kas-mobile-card-main">
				<div class="kas-card-content">
					<div class="kas-card-top">
						<div class="kas-card-badges">
							<span class="kas-no-badge"><?= $no; ?></span>
							<button type="button" class="kas-trx-badge detail_kas" data-id="<?= $kasEncryptedId; ?>" data-modEdit=""><?= $row["no_transaksi"]; ?></button>
						</div>
						<div class="kas-card-date"><i class="fa fa-calendar-o"></i><span><?= dtime($row["tanggal"]); ?></span></div>
					</div>

					<div class="kas-card-details">
						<div class="kas-detail-row">
							<span class="kas-detail-label">Keterangan</span>
							<span class="kas-detail-colon">:</span>
							<span class="kas-detail-value"><?= $row["keterangan"]; ?></span>
						</div>
						<div class="kas-detail-row">
							<span class="kas-detail-label">Nama Akun</span>
							<span class="kas-detail-colon">:</span>
							<span class="kas-detail-value"><?= getAkun($row["id_akun"]); ?></span>
						</div>
					</div>

					<div class="kas-card-total">
						<span>Total</span>
						<strong><?= rp($row["jumlah"]); ?></strong>
					</div>
				</div>

				<div class="kas-card-actions">
					<a href="<?= $kasCetakUrl; ?>" target="_blank" class="kas-action-btn kas-action-print"><i class="fa fa-print"></i><span>CETAK</span></a>
					<button type="button" class="kas-action-btn kas-action-detail detail_kas" data-id="<?= $kasEncryptedId; ?>"><i class="fa fa-eye"></i><span>DETAIL</span></button>
					<?php if(!empty($row["bukti_nota"])): ?>
						<button type="button"
							class="kas-action-btn kas-action-attach lihat_lampiran_kas"
							data-url="<?= base_url('uploads/bukti_kas_keluar/'.$row["bukti_nota"]); ?>"
							title="Lihat Bukti Nota">
							<i class="fa fa-paperclip"></i><span>LAMPIRAN</span>
						</button>
					<?php endif; ?>
					<button type="button" class="kas-action-btn kas-action-delete edit_kas_keluar" data-id="<?= $kasEncryptedId; ?>" data-toggle="modal" data-target="#confirm-delete"><i class="fa fa-trash"></i><span>HAPUS</span></button>
				</div>
			</div>
		</div>
	<?php 
			$no++;
		}
	} else { ?>
		<div class="kas-mobile-empty">BELUM ADA DATA</div>
	<?php } ?>
</div>

<div class="kas-mobile-summary-wrap">
	<div class="kas-mobile-summary">
		<div class="kas-summary-total">
			<span class="kas-summary-total-label">TOTAL KESELURUHAN</span>
			<span class="kas-summary-total-value"><?= rp($totalorder); ?></span>
		</div>
		<div class="kas-summary-showing">
			Menampilkan <?= $kasShowingStart; ?> - <?= $kasShowingEnd; ?><br>dari <?= $kasShowingTotal; ?>
		</div>
		<nav aria-label="Page navigation mobile" class="kas-mobile-pagination">
			<?php echo $this->ajax_pagination->create_links(); ?>
		</nav>
	</div>
</div>

<script>
	$(function () {
		$('[data-toggle="tooltip"]').tooltip();
		$('[data-toggle="popover"]').popover();
	});
	
	$(document).off('click.kasDetail', '.detail_kas').on('click.kasDetail', '.detail_kas', function(e) {
		e.preventDefault();
		var id = $(this).attr('data-id');
		
		$('#OpenDetail').modal({backdrop: 'static', keyboard: false});
		$.ajax({
			url: base_url + 'kas_keluar/detail',
			data: {id:id},
			method: 'POST',
			dataType:'html',
			beforeSend: function(){
				$('body').loading();
			},
			success: function(data) {
				$(".load-detail-kas").html(data);
				$('body').loading('stop');
			},
			error: function(xhr) {
				var err = xhr.responseText;
				sweet('Server!!!', err, 'error', 'danger');
				$('body').loading('stop');
			}
		});
	});
</script>
