<?php
$appInfo = info();
$themeColor = !empty($appInfo['tema']) ? trim($appInfo['tema']) : '#1958ac';
if (strpos($themeColor, '#') !== 0) $themeColor = '#'.$themeColor;
if (preg_match('/^#[0-9a-f]{3}$/i', $themeColor)) $themeColor = '#'.$themeColor[1].$themeColor[1].$themeColor[2].$themeColor[2].$themeColor[3].$themeColor[3];
if (!preg_match('/^#[0-9a-f]{6}$/i', $themeColor)) $themeColor = '#1958ac';
$themeRgb = array(hexdec(substr($themeColor,1,2)), hexdec(substr($themeColor,3,2)), hexdec(substr($themeColor,5,2)));
$themeTextColor = (($themeRgb[0] * 299 + $themeRgb[1] * 587 + $themeRgb[2] * 114) / 1000) >= 150 ? '#17233C' : '#FFFFFF';
?>
<div class="container-fluid sj-page" id="container-wrapper">
	<div class="sj-page-heading">
		<div><span class="sj-eyebrow">Laporan & Dokumen</span><h1>Surat Jalan</h1><p>Kelola dan cetak kembali seluruh dokumen surat jalan pelanggan.</p></div>
		<button type="button" class="sj-create-btn" id="openCreateSurat" aria-label="Buat surat jalan"><i class="fa fa-truck"></i><span>Buat Surat Jalan</span></button>
	</div>

	<div class="sj-panel">
		<div class="sj-toolbar">
			<div class="sj-search-field"><i class="fa fa-search"></i><input type="search" id="keyword" placeholder="Cari nomor surat, transaksi, atau pelanggan" autocomplete="off"></div>
			<div class="sj-filter-field"><label for="dari">Dari</label><input type="text" id="dari" value="<?=$dari;?>" autocomplete="off"></div>
			<div class="sj-filter-field"><label for="sampai">Sampai</label><input type="text" id="sampai" value="<?=$sampai;?>" autocomplete="off"></div>
			<div class="sj-filter-field sj-filter-compact"><label for="limits">Tampil</label><select id="limits"><option value="10">10</option><option value="20">20</option><option value="50">50</option><option value="100">100</option></select></div>
			<div class="sj-filter-field sj-filter-compact"><label for="sortBy">Urutan</label><select id="sortBy"><option value="DESC">Terbaru</option><option value="ASC">Terlama</option></select></div>
			<input type="hidden" id="user" value="0">
			<button type="button" class="sj-reset-btn" id="clearCari"><i class="fa fa-refresh"></i><span>Reset</span></button>
		</div>
		<div class="sj-loading" id="sjLoading" aria-hidden="true"><span></span><span></span><span></span></div>
		<div class="post-list" id="dataListOmset"><?php $this->load->view('laporan/ajax-surat', array('posts'=>$posts, 'start'=>$start)); ?></div>
	</div>
</div>

<div class="modal fade" id="pilihTransaksiModal" tabindex="-1" aria-labelledby="pilihTransaksiTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered sj-picker-dialog"><div class="modal-content sj-picker-content">
		<div class="modal-header sj-picker-header"><div><span class="sj-picker-icon"><i class="fa fa-search"></i></span><span><strong id="pilihTransaksiTitle">Pilih Nomor Transaksi</strong><small>Pilih transaksi untuk membuat atau membuka surat jalan.</small></span></div><button type="button" class="close" data-dismiss="modal" aria-label="Tutup"><span aria-hidden="true">&times;</span></button></div>
		<div class="modal-body sj-picker-body"><div class="sj-picker-search"><i class="fa fa-search"></i><input type="search" id="transactionKeyword" placeholder="Cari nomor transaksi atau nama pelanggan" autocomplete="off"></div><div id="transactionPickerResult"><div class="sj-picker-loading"><i class="fa fa-circle-o-notch fa-spin"></i> Memuat transaksi...</div></div></div>
	</div></div>
</div>

<div class="modal fade sj-modal" id="surat_jalan" tabindex="-1" aria-labelledby="suratJalanModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered sj-modal-dialog"><div class="modal-content"><form method="post" id="simpan_surat" action="">
		<div class="modal-header"><h5 class="modal-title" id="suratJalanModalLabel"><span class="modal-title-icon"><i class="fa fa-file-text"></i></span>Pratinjau Surat Jalan</h5><button type="button" class="close" data-dismiss="modal" aria-label="Tutup"><span aria-hidden="true">&times;</span></button></div>
		<div class="modal-body"><div class="load-modal"></div></div>
		<div class="modal-footer"><button type="button" class="btn sj-action sj-action-secondary" data-dismiss="modal">Tutup</button><button type="button" class="btn sj-action sj-action-edit edit_surat" style="display:none"><i class="fa fa-pencil mr-1"></i>Edit</button><button type="button" class="btn sj-action sj-action-primary cetak_surat_preview" style="display:none"><i class="fa fa-print mr-1"></i>Cetak</button><button type="button" class="btn sj-action sj-action-primary simpan_surat"><i class="fa fa-print mr-1"></i>Simpan & Cetak Surat</button></div>
	</form></div></div>
</div>

<style>
	.sj-page { --sj-theme: <?=$themeColor;?>; --sj-theme-text:<?=$themeTextColor;?>; --sj-ink:#172033; --sj-muted:#667085; --sj-line:#e4e7ec; padding-bottom:28px; }
	#pilihTransaksiModal, #surat_jalan { --sj-theme:<?=$themeColor;?>; --sj-theme-text:<?=$themeTextColor;?>; }
	.sj-page * { box-sizing:border-box; }
	.sj-page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:4px 0 20px; padding:22px 26px; border:1px solid var(--sj-theme); border-radius:18px; background:var(--sj-theme); color:var(--sj-theme-text); box-shadow:0 10px 26px rgba(15,23,42,.13); }
	.sj-eyebrow { color:var(--sj-theme-text); opacity:.82; font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
	.sj-page-heading h1 { margin:3px 0 4px; color:var(--sj-theme-text); font-size:29px; font-weight:800; }
	.sj-page-heading p { margin:0; color:var(--sj-theme-text); opacity:.82; font-size:14px; }
	.sj-create-btn { display:flex; min-height:56px; padding:0 18px; align-items:center; justify-content:center; gap:10px; flex:0 0 auto; border:1px solid rgba(255,255,255,.45); border-radius:16px; background:rgba(255,255,255,.16); color:var(--sj-theme-text); font-size:13px; font-weight:800; box-shadow:0 8px 20px rgba(15,23,42,.12); transition:.18s ease; }
	.sj-create-btn i { font-size:21px; }
	.sj-create-btn:hover { background:rgba(255,255,255,.28); transform:translateY(-1px); }
	.sj-create-btn:focus { outline:3px solid rgba(255,255,255,.3); outline-offset:2px; }
	.sj-panel { position:relative; overflow:hidden; border:1px solid #e4e7ec; border-radius:18px; background:#fff; box-shadow:0 12px 32px rgba(15,23,42,.07); }
	.sj-toolbar { display:grid; grid-template-columns:minmax(260px,1.6fr) repeat(2,minmax(125px,.65fr)) minmax(92px,.38fr) minmax(105px,.45fr) auto; gap:10px; padding:16px; border-bottom:1px solid var(--sj-line); background:#fbfcfe; }
	.sj-search-field { position:relative; }
	.sj-search-field i { position:absolute; top:50%; left:14px; color:#98a2b3; transform:translateY(-50%); }
	.sj-search-field input, .sj-filter-field input, .sj-filter-field select { width:100%; height:42px; border:1px solid #d0d5dd; border-radius:10px; background:#fff; color:var(--sj-ink); font-size:13px; outline:none; transition:border-color .18s,box-shadow .18s; }
	.sj-search-field input { padding:0 14px 0 39px; }
	.sj-filter-field input, .sj-filter-field select { padding:0 10px; }
	.sj-search-field input:focus, .sj-filter-field input:focus, .sj-filter-field select:focus { border-color:var(--sj-theme); box-shadow:0 0 0 3px rgba(25,88,172,.12); }
	.sj-filter-field label { display:none; }
	.sj-reset-btn { height:42px; padding:0 14px; border:1px solid #d0d5dd; border-radius:10px; background:#fff; color:#475467; font-weight:700; transition:.18s ease; }
	.sj-reset-btn:hover { border-color:#f04438; color:#d92d20; transform:translateY(-1px); }
	.sj-table-wrap { overflow-x:auto; }
	.sj-table { width:100%; margin:0; border-collapse:collapse; }
	.sj-table th { padding:13px 16px; border-bottom:1px solid var(--sj-line); background:#f8fafc; color:#667085; font-size:11px; font-weight:800; letter-spacing:.45px; text-align:left; text-transform:uppercase; white-space:nowrap; }
	.sj-table td { padding:15px 16px; border-bottom:1px solid #eef1f5; color:#344054; font-size:13px; vertical-align:middle; }
	.sj-table tbody tr { transition:background .16s ease; }
	.sj-table tbody tr:hover { background:#f8fbff; }
	.sj-table tbody tr:last-child td { border-bottom:0; }
	.sj-col-no { width:66px; text-align:center !important; }
	.sj-col-action { width:160px; text-align:right !important; }
	.sj-number-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 9px; border-radius:8px; background:#eef4ff; color:var(--sj-theme); font-weight:800; white-space:nowrap; }
	.sj-customer,.sj-date { display:inline-flex; align-items:center; gap:8px; }
	.sj-customer i,.sj-date i { color:#98a2b3; }
	.sj-print-btn { display:inline-flex; min-height:36px; padding:7px 12px; align-items:center; justify-content:center; gap:7px; border:0; border-radius:9px; background:var(--sj-theme); color:#fff !important; font-size:12px; font-weight:800; text-decoration:none !important; cursor:pointer; box-shadow:0 5px 12px rgba(25,88,172,.18); transition:.18s ease; }
	.sj-print-btn:hover { transform:translateY(-1px); box-shadow:0 8px 17px rgba(25,88,172,.25); }
	.sj-pagination-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-top:1px solid var(--sj-line); background:#fbfcfe; }
	.sj-result-info { color:var(--sj-muted); font-size:12px; }
	.sj-pagination-row .pagination { margin:0; }
	.sj-pagination-row .page-link { border-color:#e4e7ec; color:#475467; }
	.sj-pagination-row .active .page-link { border-color:var(--sj-theme); background:var(--sj-theme); color:#fff; }
	.sj-empty { display:flex; min-height:260px; padding:35px; align-items:center; justify-content:center; flex-direction:column; color:var(--sj-muted); text-align:center; }
	.sj-empty-icon { display:flex; width:58px; height:58px; margin-bottom:12px; align-items:center; justify-content:center; border-radius:16px; background:#f2f4f7; color:#98a2b3; font-size:24px; }
	.sj-empty strong { color:#344054; font-size:15px; }
	.sj-empty small { margin-top:4px; }
	.sj-loading { position:absolute; z-index:5; top:74px; right:18px; display:none; gap:4px; padding:9px 12px; border-radius:20px; background:rgba(23,32,51,.9); }
	.sj-loading.is-active { display:flex; }
	.sj-loading span { width:6px; height:6px; border-radius:50%; background:#fff; animation:sjPulse .8s infinite alternate; }
	.sj-loading span:nth-child(2){animation-delay:.15s}.sj-loading span:nth-child(3){animation-delay:.3s}
	.sj-picker-dialog { width:calc(100% - 28px); max-width:680px; }
	.sj-picker-content { overflow:hidden; border:0; border-radius:18px; box-shadow:0 24px 70px rgba(15,23,42,.3); }
	.sj-picker-header { padding:16px 20px; border-bottom:1px solid #e4e7ec; }
	.sj-picker-header>div { display:flex; align-items:center; gap:11px; }
	.sj-picker-header strong,.sj-picker-header small { display:block; }
	.sj-picker-header strong { color:#172033; font-size:17px; }
	.sj-picker-header small { margin-top:2px; color:#667085; font-size:12px; }
	.sj-picker-icon { display:flex; width:38px; height:38px; align-items:center; justify-content:center; border-radius:11px; background:var(--sj-theme); color:var(--sj-theme-text); }
	.sj-picker-body { max-height:70vh; padding:18px; overflow:auto; background:#f7f9fc; }
	.sj-picker-search { position:relative; margin-bottom:13px; }
	.sj-picker-search i { position:absolute; top:50%; left:14px; color:#98a2b3; transform:translateY(-50%); }
	.sj-picker-search input { width:100%; height:44px; padding:0 14px 0 40px; border:1px solid #d0d5dd; border-radius:11px; background:#fff; outline:none; }
	.sj-picker-search input:focus { border-color:var(--sj-theme); box-shadow:0 0 0 3px rgba(25,88,172,.12); }
	.sj-transaction-list { display:flex; flex-direction:column; gap:8px; }
	.sj-transaction-item { display:grid; width:100%; grid-template-columns:40px minmax(0,1fr) auto 14px; gap:11px; padding:11px 12px; align-items:center; border:1px solid #e4e7ec; border-radius:12px; background:#fff; color:#344054; text-align:left; transition:.16s ease; }
	.sj-transaction-item:hover { border-color:var(--sj-theme); box-shadow:0 6px 16px rgba(15,23,42,.07); transform:translateY(-1px); }
	.sj-transaction-icon { display:flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; background:#eef4ff; color:var(--sj-theme); }
	.sj-transaction-copy strong,.sj-transaction-copy small { display:block; }
	.sj-transaction-copy strong { color:#172033; font-size:13px; }
	.sj-transaction-copy small { margin-top:3px; color:#667085; font-size:11px; }
	.sj-transaction-status { padding:5px 8px; border-radius:999px; background:#ecfdf3; color:#027a48; font-size:10px; font-weight:800; white-space:nowrap; }
	.sj-transaction-status.is-saved { background:#eef4ff; color:var(--sj-theme); }
	.sj-transaction-arrow { color:#98a2b3; }
	.sj-picker-loading,.sj-picker-empty { padding:40px 15px; color:#667085; text-align:center; }
	.sj-picker-empty { display:flex; align-items:center; flex-direction:column; gap:5px; }
	.sj-picker-empty i { margin-bottom:4px; color:#98a2b3; font-size:25px; }
	.sj-picker-empty strong { color:#344054; }
	@keyframes sjPulse { to { opacity:.25; transform:translateY(-3px); } }
	@media(max-width:1100px){.sj-toolbar{grid-template-columns:repeat(4,1fr)}.sj-search-field{grid-column:span 2}.sj-reset-btn{grid-column:auto}}
	@media(max-width:767px){.sj-page{padding-left:10px;padding-right:10px}.sj-page-heading{padding:18px}.sj-page-heading h1{font-size:24px}.sj-heading-icon{width:48px;height:48px;flex-basis:48px}.sj-toolbar{grid-template-columns:1fr 1fr}.sj-search-field{grid-column:1/-1}.sj-reset-btn{grid-column:1/-1}.sj-table thead{display:none}.sj-table,.sj-table tbody,.sj-table tr,.sj-table td{display:block;width:100%}.sj-table tbody{padding:10px}.sj-table tr{margin-bottom:10px;padding:7px 11px;border:1px solid var(--sj-line);border-radius:12px;background:#fff}.sj-table td{display:flex;min-height:38px;padding:8px 4px;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px dashed #eaecf0;text-align:right !important}.sj-table td:before{content:attr(data-label);color:#667085;font-size:11px;font-weight:800;text-align:left;text-transform:uppercase}.sj-table td:last-child{border-bottom:0}.sj-col-action{width:100%}.sj-print-btn{width:auto}.sj-pagination-row{align-items:flex-start;flex-direction:column}.sj-result-info{display:none}}
	@media(max-width:480px){.sj-toolbar{grid-template-columns:1fr}.sj-filter-field,.sj-search-field,.sj-reset-btn{grid-column:1}.sj-page-heading p{font-size:12px}.sj-create-btn{width:52px;min-height:52px;padding:0}.sj-create-btn span{display:none}.sj-transaction-item{grid-template-columns:38px minmax(0,1fr) 14px}.sj-transaction-status{display:none}}
</style>

<script>
(function($){
	var request = null, debounceTimer = null;
	var initialFrom = '<?=$dari;?>', initialUntil = '<?=$sampai;?>';
	$('#dari, #sampai').datepicker({format:'dd/mm/yyyy', autoclose:true, todayHighlight:true});

	window.search_surat = function(pageNum){
		pageNum = pageNum || 0;
		if(request) request.abort();
		$('#sjLoading').addClass('is-active').attr('aria-hidden','false');
		request = $.ajax({
			type:'POST', url:base_url+'laporan/ajaxSuratjalan/'+pageNum,
			data:{page:pageNum,keyword:$('#keyword').val(),user:$('#user').val(),dari:$('#dari').val(),sampai:$('#sampai').val(),sortBy:$('#sortBy').val(),limits:$('#limits').val()},
			success:function(html){$('#dataListOmset').html(html);},
			error:function(xhr,status,error){if(status!=='abort') showNotif('bottom-right','Peringatan',error,'error');},
			complete:function(){request=null;$('#sjLoading').removeClass('is-active').attr('aria-hidden','true');}
		});
	};
	$('#keyword').on('input',function(){clearTimeout(debounceTimer);debounceTimer=setTimeout(function(){search_surat(0);},350);});
	$('#dari,#sampai,#limits,#sortBy').on('change',function(){search_surat(0);});
	$('#clearCari').on('click',function(){$('#keyword').val('');$('#dari').val(initialFrom);$('#sampai').val(initialUntil);$('#limits').val('10');$('#sortBy').val('DESC');search_surat(0);});

	var pickerRequest = null, pickerTimer = null;
	function loadTransactions(){
		if(pickerRequest) pickerRequest.abort();
		$('#transactionPickerResult').html('<div class="sj-picker-loading"><i class="fa fa-circle-o-notch fa-spin"></i> Memuat transaksi...</div>');
		pickerRequest = $.ajax({type:'POST',url:base_url+'laporan/ajaxTransaksiSurat',data:{keyword:$('#transactionKeyword').val()},success:function(html){$('#transactionPickerResult').html(html);},error:function(xhr,status,error){if(status!=='abort') $('#transactionPickerResult').html('<div class="sj-picker-empty"><i class="fa fa-exclamation-circle"></i><strong>Transaksi gagal dimuat</strong><span>'+error+'</span></div>');},complete:function(){pickerRequest=null;}});
	}
	$('#openCreateSurat').on('click',function(){$('#transactionKeyword').val('');$('#pilihTransaksiModal').modal('show');});
	$('#pilihTransaksiModal').on('shown.bs.modal',function(){loadTransactions();$('#transactionKeyword').focus();});
	$('#transactionKeyword').on('input',function(){clearTimeout(pickerTimer);pickerTimer=setTimeout(loadTransactions,300);});

	function openSuratPreview(transactionId){
		$.ajax({type:'POST',url:base_url+'laporan/load_modal',data:{id:transactionId,user:$('#user').val()},beforeSend:function(){$('body').loading();},success:function(html){$('.load-modal').html(html);$('#surat_jalan').modal('show');},error:function(xhr,status,error){showNotif('bottom-right','Peringatan',error,'error');},complete:function(){$('body').loading('stop');}});
	}
	$(document).on('click','.choose-transaction',function(){
		var transactionId=$(this).data('id');
		$('#pilihTransaksiModal').one('hidden.bs.modal',function(){openSuratPreview(transactionId);}).modal('hide');
	});
	$(document).on('click','.preview-surat-from-list',function(){
		openSuratPreview($(this).data('id'));
	});
	$(document).on('shown.bs.modal','#surat_jalan',function(){
		var saved=parseInt($('#sj_saved_status').val(),10)>0;
		$(this).find('.edit_surat').toggle(saved);
		$(this).find('.cetak_surat_preview').toggle(saved);
		$(this).find('.simpan_surat').toggle(!saved).html('<i class="fa fa-print mr-1"></i>Simpan & Cetak Surat');
	});
	$(document).on('click','.edit_surat',function(){
		var $modal=$('#surat_jalan');
		$modal.find('[data-sj-editable]').removeAttr('readonly disabled').css('pointer-events','auto');
		$(this).hide();
		$modal.find('.cetak_surat_preview').hide();
		$modal.find('.simpan_surat').show().html('<i class="fa fa-save mr-1"></i>Simpan Perubahan & Cetak');
		$modal.find('#nama_kendaraan').focus();
	});
	$(document).on('click','#surat_jalan .cetak_surat_preview',function(){
		var printToken=$('#sj_print_token').val();
		if(printToken) window.open(base_url+'laporan/cetak_surat/'+printToken,'_blank');
	});
	$(document).on('click','#surat_jalan .simpan_surat',function(){
		var required=[['#tgl_kirim','Tanggal harus diisi'],['#pengirim','Pengirim harus dipilih'],['#nopol','Nomor polisi harus diisi'],['#alamat','Alamat harus diisi']];
		for(var i=0;i<required.length;i++){if(!$(required[i][0]).val()){showNotif('bottom-right','Form input',required[i][1],'warning');$(required[i][0]).focus();return;}}
		$.ajax({type:'POST',url:base_url+'laporan/simpan_surat',dataType:'json',data:$('#simpan_surat').serialize(),beforeSend:function(){$('body').loading();},success:function(data){if(data.status==200){window.open(base_url+'laporan/cetak_surat/'+data.id,'_blank');showNotif('bottom-right','Surat jalan',data.msg,'success');$('#surat_jalan').modal('hide');search_surat(0);}else{showNotif('bottom-right','Surat jalan',data.msg,'error');}},error:function(xhr){showNotif('bottom-right','Peringatan',xhr.responseText,'error');},complete:function(){$('body').loading('stop');}});
	});
})(jQuery);
</script>
