<div class="container-fluid" id="container-wrapper">
	<div class="d-sm-flex align-items-center justify-content-between mb-4 operator-desktop-head">
		<h1 class="h3 mb-0 text-gray-800">List Pekerjaan</h1>
		<div class="breadcrumb">
			<div class="input-group input-group-sm">
				<div class="input-group-prepend">
					<span class="input-group-text">Produk</span>
				</div>
				<select name="produk" id="produk" class="form-control form-control-sm custom-select" onchange="search_Operator()">
					<option value="0">SEMUA</option>
					<?php  
						foreach ($produk AS $values){
							echo '<option value="'.$values['id'].'">'.strtoupper($values['title']).'</option>';
						}
					?>
				</select>
			</div>
		</div>
		
	</div>

	<div class="operator-mobile-only operator-mobile-view">
		<header class="operator-mobile-heading">
			<h1>List Pekerjaan</h1>
			<p>Daftar pekerjaan operator</p>
		</header>

		<section class="operator-mobile-filter" aria-label="Filter daftar pekerjaan">
			<div class="operator-mobile-filter-grid">
				<div class="operator-mobile-field">
					<label for="produk_mobile">Produk</label>
					<select id="produk_mobile" class="form-control custom-select" onchange="mobileOperatorSearch()">
						<option value="0">SEMUA</option>
						<?php foreach ($produk AS $values){ ?>
							<option value="<?=$values['id'];?>"><?=strtoupper($values['title']);?></option>
						<?php } ?>
					</select>
				</div>

				<div class="operator-mobile-field">
					<label for="limits_mobile">Limit</label>
					<select id="limits_mobile" class="form-control custom-select" onchange="mobileOperatorSearch()">
						<option value="10">10</option>
						<option value="20">20</option>
						<option value="50">50</option>
						<option value="100">100</option>
						<option value="500">500</option>
					</select>
				</div>

				<div class="operator-mobile-field">
					<label for="status_mobile">Status</label>
					<select id="status_mobile" class="form-control custom-select" onchange="mobileOperatorSearch()">
						<option value="semua">SEMUA</option>
						<?php foreach (job_statuses(true) as $job_status): ?><option value="<?=(int)$job_status['code'];?>"><?=html_escape(strtoupper($job_status['label']));?></option><?php endforeach; ?>
					</select>
				</div>

				<div class="operator-mobile-field">
					<label for="user_mobile">Operator</label>
					<select id="user_mobile" class="form-control custom-select" onchange="mobileOperatorSearch()">
						<option value="0">SEMUA</option>
						<?php foreach ($pilihan AS $values){ ?>
							<option value="<?=$values['id_user'];?>"><?=strtoupper($values['nama_lengkap']);?></option>
						<?php } ?>
					</select>
				</div>

				<div class="operator-mobile-field">
					<label for="dari_mobile">Tanggal</label>
					<div id="date-operator-mobile">
						<div class="input-daterange operator-mobile-date-range">
							<div class="operator-mobile-input-icon">
								<i class="fa fa-calendar" aria-hidden="true"></i>
								<input type="text" id="dari_mobile" value="<?=$dari;?>" aria-label="Tanggal mulai">
							</div>
							<span aria-hidden="true">&ndash;</span>
							<div class="operator-mobile-input-icon">
								<i class="fa fa-calendar" aria-hidden="true"></i>
								<input type="text" id="sampai_mobile" value="<?=$sampai;?>" aria-label="Tanggal selesai">
							</div>
						</div>
					</div>
				</div>

				<div class="operator-mobile-field">
					<label for="invoice_op_mobile">No.Order</label>
					<div class="operator-mobile-input-icon">
						<i class="fa fa-search" aria-hidden="true"></i>
						<input type="text" id="invoice_op_mobile" placeholder="No.Order" onkeyup="mobileOperatorSearchDebounced()">
					</div>
				</div>
			</div>

			<div class="operator-mobile-filter-actions">
				<button type="button" class="operator-mobile-action is-clear" onclick="mobileOperatorClear()"><i class="fa fa-times" aria-hidden="true"></i> Clear</button>
				<button type="button" class="operator-mobile-action is-view" onclick="mobileOperatorSearch()"><i class="fa fa-search" aria-hidden="true"></i> Lihat</button>
				<button type="button" class="operator-mobile-action is-print" onclick="mobileOperatorPrint()"><i class="fa fa-print" aria-hidden="true"></i> Print</button>
			</div>
		</section>
	</div>
	
	<div class="row operator-results-row">
		<div class="col-md-12">
			<div class="card operator-main-card">
				
				<div class="card-header pb-2 operator-desktop-filterbar">
					
					<div class="input-group input-group-sm">
						<div class="input-group-prepend">
							<span class="input-group-text">LIMIT</span>
						</div>
						<select id="limits" name="limits" class="form-control form-control-sm custom-select w-30px" onchange="search_Operator()">
							<option value="10">10</option>
							<option value="20">20</option>
							<option value="50">50</option>
							<option value="100">100</option>
							<option value="500">500</option>
						</select>
						<div class="input-group-prepend">
							<span class="input-group-text">STATUS</span>
						</div>
						<select id="status" name="status" class="form-control form-control-sm custom-select w-30px" onchange="search_Operator()">
							<option value="semua">SEMUA</option>
							<?php foreach (job_statuses(true) as $job_status): ?><option value="<?=(int)$job_status['code'];?>"><?=html_escape(strtoupper($job_status['label']));?></option><?php endforeach; ?>
						</select>
						<div class="input-group-prepend">
							<span class="input-group-text">OPERATOR</span>
						</div>
						<select name="user" id="user" class="form-control form-control-sm custom-select w-30px" onchange="search_Operator()">
							<option value="0">SEMUA</option>
							<?php  
								foreach ($pilihan AS $values){
									echo '<option value="'.$values['id_user'].'">'.strtoupper($values['nama_lengkap']).'</option>';
								}
							?>
						</select>
						<div class="input-group-prepend">
							<span class="input-group-text">TANGGAL</span>
						</div>
						<div id="date-omset">
							<div class="input-daterange input-group">
								<input type="text" onchange="search_Operator()"  class="form-control form-control-sm w-100px" name="dari" id="dari" value="<?=$dari;?>">
								<input type="text" onchange="search_Operator()"  class="form-control form-control-sm w-100px" name="sampai" id="sampai" value="<?=$sampai;?>">
							</div>
						</div>
						<input type="text" onkeyup="search_OperatorDebounced()"  class="form-control form-control-sm w-100px" name="invoice_op" id="invoice_op" placeholder="No.Order">
						<div class="input-group-append">
							<button type="button" data-toggle="tooltip" class="btn btn-danger btn-sm clear_search" id="clearCari" data-original-title="Clear" onclick="clearSearch('<?=$dari;?>')"><i class="fa fa-times fa-1x"></i> Clear</button>
							<button type="button" data-info="harian" class="btn btn-success btn-sm" data-id="0" onclick="search_Operator()"><i class="fa fa-search"></i> Lihat</button>
							<button type="button"  class="btn btn-info btn-sm print_rincian flat" id="print_pekerjaan" data-toggle="tooltip" data-original-title="Print PDF"><i class="fa fa-file-pdf-o fa-1x"></i> Print</button>
							<!--button class="btn btn-primary url_doc" data-url="lap_rincian" type="button" data-toggle="tooltip" data-original-title="Dok Operator" data-placement="left"><i class="fa fa-info-circle"></i></button-->
						</div>
					</div>
				</div>
				
				<div class="card-body table-responsive operator-results-body">
					<div class="card-block">
						<!--div id="data_omset"></div-->
						<div class="post-list pt-0" id="dataListOmset">
						</div>
					</div><!-- /.card-body -->
				</div><!-- /.card-body -->
			</div><!-- /.card -->
		</div>
	</div>
</div>
<div class="modal fade" id="OpenModalOperator" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content flat">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabelPengguna">Update Status</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body pb-0 mt-0 pt-1">
				<div class="input-group mb-3 flat">
					<div class="input-group-prepend flat">
						<span class="input-group-text flat" id="basic-addon1">No. Order</span>
					</div>
					<input type="text" id="noorder" name="noorder" class="form-control flat" readonly>
					<input type="hidden" id="no_order" name="no_order" class="form-control" readonly>
				</div>
				<div class="form-group">
					<select name="status_baru" class="form-control custom-select flat" id="status_baru">
						<option value="0">Pilih status</option>
					</select>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button"  id="btn-baru" class="btn btn-success flat simpan_baru">Simpan</button>
				<button type="button" class="btn btn-danger flat" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal left fade" id="OpenModalWa" role="dialog" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content flat">
			<div class="modal-header pt-1 pb-1">
				<h4 class="modal-title" id="WaLabel">Kirim Invoice</h4>
				<button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
			</div>
			<div class="modal-body">
				<div class="load-data-wa"></div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-success btn-sm flat kirim_pesan" type="button"><i class="fa fa-send"></i>&nbsp;Kirim</button> 
				<button class="btn btn-danger btn-sm flat" data-dismiss="modal" type="button">Batal</button> 
			</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="Close">
						<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 simpan_surat"><i class="fa fa-print mr-1"></i>Simpan & Cetak Surat</button>
				</div>
			</form>
		</div>
	</div>
</div>
<form method="POST" action="<?=base_url();?>laporan/cetak_laporan_operator" id="target_print" target="_blank">
	<input type="hidden" name="startdate" id="startdate" readonly  />
	<input type="hidden" name="enddate" id="enddate" readonly />
	<input type="hidden" name="status" id="status_print" readonly />
	<input type="hidden" name="operator" id="idoperator" readonly />
</form>
<style>
	.custom-select {
    display: inline-block;
    width: 100%;
	height: 40px;
	padding: 5px 1.75rem 5px .75rem;
	
	}
	.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
	padding: 2px;
	
	}
	.card .table td, .card .table th {
	padding-right: 5px;
	padding-left: 5px;
	}
	.small {
	height: 30px;
	padding: 2px 10px;
	}
	button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	}

	/* Filter operator desktop mengikuti gaya halaman Kategori Produk */
	@media (min-width: 768px) {
		.operator-desktop-filterbar > .input-group {
			flex-wrap: nowrap;
			align-items: stretch;
			gap: 0;
		}

		.operator-desktop-filterbar > .input-group > .input-group-prepend {
			margin: 0;
		}

		.operator-desktop-filterbar > .input-group > .input-group-prepend .input-group-text {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			height: 36px;
			min-height: 36px;
			padding: .25rem .5rem;
			background: var(--app-theme-color, #3f51b5);
			border: 1px solid var(--app-theme-color, #3f51b5);
			border-radius: .2rem 0 0 .2rem;
			color: var(--app-theme-text-color, #fff);
			font-size: .8rem;
			font-weight: 500;
			line-height: 1.5;
			white-space: nowrap;
			box-shadow: 0 .125rem .25rem rgba(58, 59, 69, .2);
		}

		.operator-desktop-filterbar #limits,
		.operator-desktop-filterbar #status,
		.operator-desktop-filterbar #user {
			min-width: 0;
			height: 36px;
			min-height: 36px;
			margin-right: .5rem;
			padding: .25rem 1.75rem .25rem .5rem;
			border-color: #d1d3e2;
			border-left: 0;
			border-radius: 0 .2rem .2rem 0;
			color: #344054;
			font-size: .875rem;
			font-weight: 500;
			box-shadow: none;
		}

		.operator-desktop-filterbar #date-omset {
			flex: 1 1 250px;
			min-width: 220px;
			height: 36px;
			margin-right: .5rem;
		}

		.operator-desktop-filterbar #date-omset .input-daterange,
		.operator-desktop-filterbar #date-omset .form-control {
			height: 36px;
			min-height: 36px;
		}

		.operator-desktop-filterbar #date-omset .form-control {
			min-width: 0;
			padding: .25rem .5rem;
			border-color: #d1d3e2;
			border-radius: 0;
			color: #344054;
			font-size: .875rem;
			font-weight: 500;
			box-shadow: none;
		}

		.operator-desktop-filterbar #date-omset .form-control:first-child {
			border-left: 0;
		}

		.operator-desktop-filterbar #date-omset .form-control:last-child {
			border-radius: 0 .2rem .2rem 0;
		}

		.operator-desktop-filterbar #limits:focus,
		.operator-desktop-filterbar #status:focus,
		.operator-desktop-filterbar #user:focus,
		.operator-desktop-filterbar #date-omset .form-control:focus {
			position: relative;
			z-index: 2;
			border-color: var(--app-theme-color, #3f51b5);
			box-shadow: 0 0 0 .15rem rgba(63, 81, 181, .18);
		}

		.operator-desktop-filterbar .input-group-append {
			display: flex;
			gap: .5rem;
			margin-left: .5rem;
		}

		.operator-desktop-filterbar .input-group-append .btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: .35rem;
			height: 36px;
			min-height: 36px;
			margin-left: 0;
			padding: .25rem .65rem;
			border: 1px solid transparent;
			border-radius: .2rem;
			color: #fff;
			font-size: .875rem;
			font-weight: 600;
			line-height: 1.5;
			box-shadow: 0 .125rem .25rem rgba(58, 59, 69, .2);
		}

		.operator-desktop-filterbar .input-group-append .clear_search {
			background: #fc544b;
			border-color: #fc544b;
		}

		.operator-desktop-filterbar .input-group-append .btn-success,
		.operator-desktop-filterbar .input-group-append .print_rincian {
			background: #3abaf4;
			border-color: #3abaf4;
		}

		.operator-desktop-filterbar .input-group-append .btn:hover,
		.operator-desktop-filterbar .input-group-append .btn:focus {
			filter: brightness(.96);
			box-shadow: 0 .2rem .4rem rgba(58, 59, 69, .28);
		}
	}

	.operator-mobile-only {
	display: none;
	}
	@media (max-width: 767.98px) {
		#container-wrapper {
		padding-right: 14px;
		padding-left: 14px;
		}
		.operator-desktop-head,
		.operator-desktop-filterbar {
		display: none !important;
		}
		.operator-mobile-only {
		display: block;
		}
		.operator-mobile-heading {
		margin: 5px 0 14px;
		}
		.operator-mobile-heading h1 {
		margin: 0;
		color: #0f172a;
		font-size: 27px;
		font-weight: 800;
		line-height: 1.15;
		letter-spacing: -.025em;
		}
		.operator-mobile-heading p {
		margin: 5px 0 0;
		color: #94a3b8;
		font-size: 13px;
		font-weight: 500;
		}
		.operator-mobile-filter {
		margin-bottom: 14px;
		padding: 13px;
		border: 1px solid #dfe5ed;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 7px 20px rgba(15, 23, 42, .07);
		}
		.operator-mobile-filter-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 11px;
		}
		.operator-mobile-field {
		min-width: 0;
		}
		.operator-mobile-field label {
		display: block;
		margin: 0 0 4px 3px;
		color: #111827;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.2;
		}
		.operator-mobile-field .form-control,
		.operator-mobile-field .custom-select,
		.operator-mobile-field input {
		width: 100%;
		height: 42px;
		min-height: 42px;
		border: 1px solid #d8dee8;
		border-radius: 7px;
		background-color: #fff;
		color: #0f172a;
		font-size: 13px;
		box-shadow: none;
		}
		.operator-mobile-field .custom-select {
		padding: 7px 28px 7px 10px;
		}
		.operator-mobile-input-icon {
		position: relative;
		min-width: 0;
		}
		.operator-mobile-input-icon > i {
		position: absolute;
		top: 50%;
		left: 11px;
		z-index: 1;
		color: #0f172a;
		font-size: 13px;
		transform: translateY(-50%);
		pointer-events: none;
		}
		.operator-mobile-input-icon > input {
		padding: 7px 8px 7px 31px;
		}
		.operator-mobile-date-range {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr);
		align-items: center;
		gap: 2px;
		}
		.operator-mobile-date-range > span {
		color: #64748b;
		font-size: 12px;
		text-align: center;
		}
		.operator-mobile-date-range input {
		padding-right: 3px;
		padding-left: 22px;
		font-size: 9px;
		}
		.operator-mobile-date-range .operator-mobile-input-icon > i {
		left: 6px;
		font-size: 10px;
		}
		.operator-mobile-filter-actions {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin-top: 12px;
		}
		.operator-mobile-action {
		height: 42px;
		min-height: 42px;
		border: 0;
		border-radius: 7px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		box-shadow: 0 4px 10px rgba(15, 23, 42, .1);
		}
		.operator-mobile-action.is-clear { background: linear-gradient(135deg, #ff4d4f, #f4383c); }
		.operator-mobile-action.is-view { background: linear-gradient(135deg, #42bd68, #25a653); }
		.operator-mobile-action.is-print { background: linear-gradient(135deg, #2e9cf5, #1885e7); }
		.operator-results-row {
		margin-right: 0;
		margin-left: 0;
		}
		.operator-results-row > .col-md-12 {
		padding-right: 0;
		padding-left: 0;
		}
		.operator-main-card {
		border: 0;
		background: transparent;
		box-shadow: none;
		}
		.operator-results-body,
		.operator-results-body .card-block {
		padding: 0 !important;
		overflow: visible !important;
		background: transparent;
		}
	}
</style>
<script>
	$(document).on('click','.buat_surat',function(e){
		e.preventDefault();
		var dataID = $(this).attr('data-id');
		var user = $("#user").val();
		// alert(info);
		$.ajax({
			'url': base_url + 'laporan/load_modal',
			'method': 'POST',
			data :{id:dataID,user:user},
			success: function(data) {
				if(data=='error'){
					sweet('Peringatan!!!','Maaf Data telah direkap & tidak bisa di edit','warning','warning');
					}else{
					$(".load-modal").html(data);
					$("#surat_jalan").modal('show');
				}
			},
			error: function (xhr, ajaxOptions, thrownError) {
				sweet('Peringatan!!!',thrownError,'warning','warning');
			}
		})
	});

	$(document).on('shown.bs.modal', '#surat_jalan', function () {
		var tersimpan = parseInt($('#sj_saved_status').val(), 10) > 0;
		$(this).find('.edit_surat').toggle(tersimpan);
		$(this).find('.simpan_surat').toggle(!tersimpan).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('.simpan_surat').show().html('<i class="fa fa-save mr-1"></i>Simpan Perubahan & Cetak');
		$modal.find('#nama_kendaraan').focus();
	});
	
	$(document).on('click','.simpan_surat',function(e){
		e.preventDefault();
		
		if($('#tgl_kirim').val()=='')
		{
			showNotif('bottom-right','Form input','Tanggal Harus diisi','warning');
			$('#tgl_kirim').focus();
			return;
		}
		if($('#pengirim').val()=='')
		{
			showNotif('bottom-right','Form input','Pengirim Harus dipilih','warning');
			$('#pengirim').focus();
			return;
		}
		if($('#nopol').val()=='')
		{
			showNotif('bottom-right','Form input','No. Polisi Harus diisi','warning');
			$('#nopol').focus();
			return;
		}
		
		if($('#alamat').val()=='')
		{
			showNotif('bottom-right','Form input','Alamat Harus diisi','warning');
			$('#alamat').focus();
			return;
		}
		
		var formData = $("#simpan_surat").serialize();
		$.ajax({
			type: "POST",
			url: base_url+"laporan/simpan_surat",
			dataType: 'json',
			data: formData,
			beforeSend: function () {
				$('body').loading();
			},
			success: handle_sukses
			,error: function(xhr, status, error) {
				showNotif('bottom-right','Peringatan',xhr.responseText,'error');
				$('body').loading('stop');
			}
		});
	});
	
	function handle_sukses(data)
	{
		
		$('body').loading('stop');
		if(data.status==200){
			var url_pdf = base_url + 'laporan/cetak_surat/'+data.id;
			// console.log(url_pdf)
			window.open(url_pdf, '_blank');
			showNotif('bottom-right','Buat surat jalan',data.msg,'success');
			$("#surat_jalan").modal('hide');
			}else{
			showNotif('bottom-right','Buat surat jalan',data.msg,'error');
		}
		
	}
	
	$(".kirim_wa").click(function(e) {
		e.preventDefault();
		var id = $(this).attr('data-id');
		var nomor = $(this).attr('data-nomor');
		var trx = $(this).attr('data-trx');
		var tgl = $(this).attr('data-tgl');
		// console.log(id);
		$('#WaLabel').html('Kirim '+trx);  
		$('#OpenModalWa').modal({backdrop: 'static', keyboard: false})  
		$.ajax({
			url: base_url + 'whatsapp/get_form_wa',
			data: {id:id,nomor:nomor,tgl:tgl},
			method: 'POST',
			dataType:'html',
			beforeSend: function(){
				$('body').loading();
			},
			success: function(data) {
				$(".load-data-wa").html(data);
				$('body').loading('stop');
			},
			error: function(xhr, status, error) {
				var err = xhr.responseText ;
				sweet('Server!!!',err,'error','danger');
				$('body').loading('stop');
			}
		});
	});
	
	$(".kirim_pesan").click(function(e) {
		var dataform = $("#form-wa").serialize();
		$.ajax({
            type: "POST",
            url: base_url+"whatsapp/kirim_pesan",
            dataType: 'json',
            data: dataform,
			cache: false,
            beforeSend: function () {
                $('body').loading();
			},
            success: handleKirim
			,error: function(xhr, status, error) {
                showNotif('top-right','Simpan data',error,'error');
                $('body').loading('stop');
			}
		});
		
	});
	function handleKirim(data) {
		
		$('#OpenModalWa').modal('hide'); 
		if(data.status==true){
			showNotif('bottom-right','Simpan data',data.msg.detail,'success');
			}else{
			var number = data.target; 
			var message = encodeURIComponent(data.msg);
			var url_wa = getLinkWhastapp(number,message)
			window.open(url_wa, '_blank');
		}
	}
	
	function getLinkWhastapp(number, message) {
		var url = 'https://wa.me/' 
		+ number 
		+ '?text='
		+ message
		return url
	}
	function open_popup(id)
	{
		
		var w = 880;
		var h = 570;
		var l = Math.floor((screen.width-w)/2);
		var t = Math.floor((screen.height-h)/2);
		if(thermal===1){
			$.post(base_url+"operator/print_invoice_html/"+id,{id: id},
			function(data, status){
				if(status=='success'){
					// alert("Data: " + data + "\nStatus: " + status);
				}
			});
			}else{
			var url_cetak = base_url +'operator/print_invoice_html/'+id;
			window.open(url_cetak, 'Cetak Invoice', "scrollbars=1,width=" + w + ",height=" + h + ",top=" + t + ",left=" + l);
		}
	}
	
	var date2 = new Date();
	
	$('#date-omset .input-daterange').datepicker({    
		format: 'dd/mm/yyyy',        
		"endDate": date2,
        autoclose: true,     
        todayHighlight: true,   
        todayBtn: 'linked',
		onSelect: function(dateText) {
			console.log("Selected date: " + dateText + ", Current Selected Value= " + this.value);
			// $(this).change();
		}
		}).on("change", function() {
		// console.log("Change event");
		$('#print_pekerjaan').attr('disabled',false);
	});

	function syncOperatorMobileToDesktop(){
		$('#produk').val($('#produk_mobile').val());
		$('#limits').val($('#limits_mobile').val());
		$('#status').val($('#status_mobile').val());
		$('#user').val($('#user_mobile').val());
		$('#dari').val($('#dari_mobile').val());
		$('#sampai').val($('#sampai_mobile').val());
		$('#invoice_op').val($('#invoice_op_mobile').val());
	}

	function syncOperatorDesktopToMobile(){
		$('#produk_mobile').val($('#produk').val());
		$('#limits_mobile').val($('#limits').val());
		$('#status_mobile').val($('#status').val());
		$('#user_mobile').val($('#user').val());
		$('#dari_mobile').val($('#dari').val());
		$('#sampai_mobile').val($('#sampai').val());
		$('#invoice_op_mobile').val($('#invoice_op').val());
	}

	function mobileOperatorSearch(){
		syncOperatorMobileToDesktop();
		search_Operator();
	}

	function mobileOperatorSearchDebounced(){
		syncOperatorMobileToDesktop();
		search_OperatorDebounced();
	}

	function mobileOperatorClear(){
		clearSearch('<?=$dari;?>');
		syncOperatorDesktopToMobile();
	}

	function mobileOperatorPrint(){
		syncOperatorMobileToDesktop();
		$('#print_pekerjaan').attr('disabled', false).trigger('click');
	}

	$('#date-operator-mobile .input-daterange').datepicker({
		format: 'dd/mm/yyyy',
		endDate: date2,
		autoclose: true,
		todayHighlight: true,
		todayBtn: 'linked'
	}).on('change', function(){
		mobileOperatorSearch();
	});

	syncOperatorDesktopToMobile();
	
	var operatorSearchXhr = null;
	var operatorSearchTimer = null;
	var operatorCurrentPage = 0;

	function search_OperatorDebounced(page_num){
		clearTimeout(operatorSearchTimer);
		operatorSearchTimer = setTimeout(function(){
			search_Operator(page_num);
		}, 300);
	}

	search_Operator();
	function search_Operator(page_num, options){
		options = options || {};
		page_num = page_num?page_num:0;
		operatorCurrentPage = page_num;
		var user = $('#user').val();
		var dari = $('#dari').val();
		var sampai = $('#sampai').val();
		var invoice_op = $('#invoice_op').val();
		var limits = $('#limits').val();
		var status = $('#status').val();
		var produk = $('#produk').val();
		$('#startdate').val(dari);
		$('#enddate').val(sampai);
		$('#status_print').val(status);
		$('#idoperator').val(user);
		var urlnya = base_url+"laporan/ajaxoperator/"+page_num
		if (operatorSearchXhr && operatorSearchXhr.readyState !== 4) {
			operatorSearchXhr.abort();
		}
		operatorSearchXhr = $.ajax({
			type: 'POST',
			url: urlnya,
			data:{page:page_num,user:user,dari:dari,sampai:sampai,invoice_op:invoice_op,limits:limits,status:status,produk:produk},
			beforeSend: function(){
				if (!options.silent) {
					$('body').loading();
				}
			},
			success: function(html){
				$('#dataListOmset').html(html);
				if (!options.silent) {
					$('body').loading('stop');
				}
			},
			error: function (xhr, ajaxOptions, thrownError) {
				if (ajaxOptions === 'abort') return;
				sweet('Peringatan!!!',thrownError,'warning','warning');
				if (!options.silent) {
					$('body').loading('stop');
				}
			}
		});
	}
	
	var operatorJobStatuses = <?=json_encode(job_statuses(true), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);?>;
	function operatorStatusOptions(currentStatus){
		var st = parseInt(currentStatus || 0, 10);
		if (st === 4 || st === 5) return [];
		return operatorJobStatuses.filter(function(item){
			var code = parseInt(item.code, 10);
			if (code === 0 || code === st) return false;
			return st === 3 ? (code === 4 || code === 5) : (code !== 4 && code !== 5);
		}).map(function(item){ return {v:item.code,t:item.label}; });
	}

	function openOperatorStatusModal(data){
		var opts = operatorStatusOptions(data.status);
		$('#noorder').val(data.nomor_order || '');
		$('#no_order').val(data.idorder || '');
		$("#status_baru").empty();
		if (!opts.length) {
			showNotif('bottom-right','Update','Status pekerjaan sudah selesai.','warning');
			return;
		}
		$.each(opts, function(_, opt){
			$("#status_baru").append("<option value='"+opt.v+"'>"+opt.t+"</option>");
		});
		$('#OpenModalOperator').modal('show');
	}

	$(document).on('click','.edit_baru',function(e){
		e.preventDefault();
		var $btn = $(this);
		var id = $btn.attr('data-id');
		var status = parseInt($btn.attr('data-status') || '0', 10);
		if (status === 4 || status === 5) {
			showNotif('bottom-right','Update','Status pekerjaan sudah selesai.','warning');
			return;
		}
		var inlineCekBahan = $btn.attr('data-cek-bahan');
		var inlineNoOrder = $btn.attr('data-no-order');
		if (inlineCekBahan !== undefined && inlineCekBahan !== null && inlineCekBahan !== '' && inlineNoOrder !== undefined) {
			openOperatorStatusModal({
				idorder: id,
				nomor_order: inlineNoOrder,
				status: status,
				cek_bahan: inlineCekBahan
			});
			return;
		}

		$.ajax({
			url: base_url + 'laporan/get_laporan',
			data: {id:id},
			method: 'POST',
			dataType:'json',
			beforeSend: function () {
                $('body').loading();
				$("#status_baru").empty().append("<option value='loading'>loading</option>");
			},
			success: function(data) {
				if (data && data.msg) {
					showNotif('bottom-right','Update',data.msg,'warning');
					$('body').loading('stop');
					return;
				}
				openOperatorStatusModal(data);
				$('body').loading('stop');
				},error: function(xhr, status, error) {
                showNotif('bottom-right','Update',error,'error');
				$('body').loading('stop');
			}
			});
		});

		function operatorStatusMeta(status){
			var code=parseInt(status || 0,10), found=operatorJobStatuses.find(function(item){return parseInt(item.code,10)===code;});
			return found || {code:code,label:'Status '+code,color:'#64748b',icon:'circle'};
		}

		function applyOperatorStatus(id, status){
			var meta = operatorStatusMeta(status);
			$('.edit_baru').filter(function(){
				return $(this).attr('data-id') === id;
			}).each(function(){
				var $btn = $(this);
				$btn
					.attr('data-status', status)
					.removeClass('btn-sb-baru btn-sb-desain btn-sb-cetak btn-sb-selesai btn-sb-diambil btn-sb-dikirim')
					.css({backgroundColor:meta.color,borderColor:meta.color,color:'#fff'});
				$btn.find('.text').text(meta.label);
				$btn.find('i').attr('class', 'fa fa-' + meta.icon);
				$btn.closest('tr[data-st]').attr('data-st', status);
			});
		}
		
		$(document).on('click','.simpan_baru',function(e){
			e.preventDefault();
			var $saveBtn = $(this);
			if ($saveBtn.prop('disabled')) {
				return;
			}
			var noorder = $('#noorder').val();
			var id = $('#no_order').val();
			var status_baru = $('#status_baru').val();
			if(status_baru === null || status_baru === '' || status_baru === '0'){
				showNotif('bottom-right','Alert','Pilih status','warning');
				$('#status_baru').focus()
				return;
			}
			// console.log(id)
			$.ajax({
				url: base_url + 'laporan/simpan_laporan',
				data: {type:'proses',id:id,status:status_baru},
				method: 'POST',
				dataType:'json',
				beforeSend: function () {
					$saveBtn.prop('disabled', true);
					$('body').loading();
					$('#OpenModalOperator').modal('show');
				},
				success: function(data) {
					if(data.status==200){
						applyOperatorStatus(id, status_baru);
						showNotif('bottom-right',data.title,data.msg,'success');
						}else{
						sweet('Peringatan!!!',data.msg,'warning','warning');
					}
					$('#OpenModalOperator').modal('hide');
					if (data.status==200 && $('#status').val() !== 'semua') {
						search_Operator(operatorCurrentPage, {silent:true});
					}
					
					$('body').loading('stop');
					},error: function(xhr, status, error) {
					showNotif('bottom-right','Update',error,'error');
					$('body').loading('stop');
				},
				complete: function() {
					$saveBtn.prop('disabled', false);
				}
			});
		});
		
		function clearSearch(tgl){
			$('#dari').val('');
			$('#sampai').val('');
			$('#status').val('semua');
			$('#user').val(0);
			$('#invoice_op').val('');
			$('#print_pekerjaan').attr('disabled',true);
			search_Operator();
		}
		
		$("#print_pekerjaan").click(function(e) {
			e.preventDefault();
			var dari = $('#dari').val();
			var sampai = $('#sampai').val();
			$('#print_pekerjaan').attr('disabled',false);
			
			if(dari=='')
			{
				$('#print_pekerjaan').attr('disabled',true);
				$('#dari').focus();
				return;
			}
			if(sampai==''){
				$('#print_pekerjaan').attr('disabled',true);
				$('#sampai').focus();
				return;
			}
			$( "#target_print" ).submit();
		});
</script>					
