<input type="hidden" class="form-control" id="id_konsumencari" name="id_konsumencari">
<input type="hidden" class="form-control" id="id_invoicecari" name="id_invoicecari" value="<?=$id;?>">
<input type="hidden" class="form-control" id="id_member" name="id_member">
<div class="form-group">
	<label>Nama/No.HP</label>
	<div class="input-group">
		<input class="form-control caritlp" id="caritlp" name="caritlp"  autofocus="autofocus" required >
		<div class="input-group-append">
			<button class="btn btn-outline-secondary" id="clearbutton" type="button" id="button-addon2" disabled>X</button>
		</div>
	</div>
	
	<p style="color:red" id="error_caritlp"></p>
</div>
<div class="form-group tampil_form">
	<label>Nama Pelanggan</label>
	<input class="form-control" id="nama_cari" name="nama_cari" readonly >
	<p style="color:red" id="error_nama_cari"></p>
</div>
<div class="form-group tampil_form">
	<label>Alamat</label>
	<input class="form-control" id="alamat_cari" name="alamat_cari" readonly>
	<p style="color:red" id="error_alamatcari"></p>
</div>
<div class="form-group tampil_form">
	<input type="hidden" class="form-control" id="perusahaan_cari" name="perusahaan_cari">
	<p style="color:red" id="error_perusahaancari"></p>
</div>

<script>
	$(function() {

		// ====== TAMBAHAN: tekan ESC untuk menutup popup/modal ======
		// - prioritas: modal terdekat yang membungkus input #caritlp
		// - fallback: tutup modal bootstrap yang sedang tampil (.modal.show)
		$(document).off('keydown.cariKonsumenEsc').on('keydown.cariKonsumenEsc', function(e){
			var key = e.key || e.keyCode || e.which;

			if (key === 'Escape' || key === 'Esc' || key === 27) {
				e.preventDefault();

				// kalau dropdown autocomplete sedang terbuka, tutup dulu (biar rapi)
				try {
					if ($("#caritlp").autocomplete("instance")) {
						$("#caritlp").autocomplete("close");
					}
				} catch(err) {}

				// tutup modal yang membungkus input ini (kalau ada)
				var $modal = $('#caritlp').closest('.modal');
				if ($modal.length) {
					$modal.modal('hide');
				} else {
					// fallback: tutup modal yang sedang tampil
					$('.modal.show').modal('hide');
				}
			}
		});
		// ====== END TAMBAHAN ======

		$('#caritlp').on('keyup', function(e){
			$('.tampil_form').hide();

			if (e.keyCode === 8) {
				$('#id_konsumencari').val('');
				$('#id_member').val('');
				$('#nama_cari').val('');
				$('#alamat_cari').val('');
				$('#perusahaan_cari').val('');
			}

			if (e.keyCode === 13) {
				$('.tampil_form').show();
			}
		});

		$("#caritlp").focus();
		$('.tampil_form').hide();
	});

	$("#clearbutton").click(function() {
		$(".caritlp").focus();
		$('.tampil_form').hide();
		$('#error_piutang').hide();
		$('#error_piutang').html('');
		$('#caritlp').val('');
		$('#id_konsumencari').val('');
		$('#id_member').val('');
		$('#nama_cari').val('');
		$('#alamat_cari').val('');
		$('#perusahaan_cari').val('');
		$('#clearbutton').prop('disabled',true);
		$('#clearbutton').removeClass('btn-danger text-white');
		$('#caritlp').prop('readonly',false);
		$('#btn-simpan').prop('disabled',true);
	});

	$('#caritlp').autocomplete({
		source: function( request, response ) {
			$.ajax({
				url : base_url+'konsumen/ajax_cari',
				dataType: "json",
				method: 'post',
				data: {
					name_startsWith: request.term,
					type: 'konsumen_cari',
					row_num : 1
				},
				success: function( data ) {
					response( $.map( data, function( item ) {
						var code = item.split("|");
						return {
							label: code[0],
							value: code[0],
							data : item
						}
					}));
				}
			});
		},

		autoFocus: true,
		minLength: 1,
		select: function( event, ui ) {
			var names = ui.item.data.split("|");
			$('#caritlp').val(names[0]);
			$('#id_konsumencari').val(names[1]);
			$('#nama_cari').val(names[2]);
			$('#alamat_cari').val(names[3]);
			$('#perusahaan_cari').val(names[4]);
			$('#id_member').val(names[5]);
			$('.tampil_form').show();
			$('#caritlp').prop('readonly',true);
			$('#clearbutton').prop('disabled',false);
			$('#clearbutton').addClass('btn-danger text-white');
			$('#btn-simpan').prop('disabled',false);
			$("#btn-simpan").focus();
		}
	});
</script>
