<?= view('customer/menu', ['func' => $func, 'db' => $db]) ?>

<main class="wrap">
<div class="ppob-page">
	<div class="ppob-card">
		<div class="ppob-head">
			<div class="ppob-title">Pesan ke Admin</div>
		</div>

		<div id="chatBody" style="padding:12px; max-height:60vh; overflow-y:auto;">
			<?php $currDate = null; ?>
			<?php foreach ($pesan as $r):
				$tglShort = $func->ubahTgl('d-m-Y', $r->tgl);
				if ($tglShort !== $currDate):
					$currDate = $tglShort;
			?>
					<div class="chat-date-sep" style="text-align:center;color:#888;font-size:12px;margin:10px 0;"><?= esc($func->ubahTgl('d M Y', $r->tgl)) ?></div>
			<?php endif;
				$letak = (int) $r->tujuan === 0 ? 'kanan' : 'kiri';
			?>
				<div class="chat-bubble-wrap" style="display:flex;<?= $letak === 'kanan' ? 'justify-content:flex-end;' : 'justify-content:flex-start;' ?>margin-bottom:8px;">
					<div class="chat-bubble" style="max-width:75%;padding:8px 12px;border-radius:14px;<?= $letak === 'kanan' ? 'background:#27ae60;color:#fff;' : 'background:#eee;color:#222;' ?>">
						<div style="white-space:pre-wrap;"><?= esc($r->isipesan) ?></div>
						<div style="font-size:10px;opacity:0.7;text-align:right;margin-top:2px;"><?= esc($func->ubahTgl('H:i', $r->tgl)) ?></div>
					</div>
				</div>
			<?php endforeach; ?>
			<?php if (count($pesan) === 0): ?>
				<div class="text-center text-secondary" style="padding:30px 0;">Belum ada pesan. Kirim pesan pertama Anda ke admin.</div>
			<?php endif; ?>
		</div>

		<form id="formpesan" class="mt-3" style="display:flex;gap:8px;padding:0 4px;">
			<input type="hidden" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>" style="display: none">
			<input type="text" class="form-control" id="isipesan" name="pesan" placeholder="Tulis pesan..." autocomplete="off" required style="flex:1;">
			<button type="submit" class="btn btn-success btn-rounded">Kirim</button>
		</form>
	</div>
</div>
</main>

<script type="text/javascript">
	var csfrData = {};
	csfrData['<?= csrf_token() ?>'] = '<?= csrf_hash() ?>';
	$.ajaxSetup({ data: csfrData });

	function scrollChatToBottom() {
		var el = document.getElementById('chatBody');
		el.scrollTop = el.scrollHeight;
	}
	scrollChatToBottom();

	function renderChat(list) {
		var $body = $('#chatBody');
		$body.empty();
		var currDate = null;

		if (list.length === 0) {
			$body.append($('<div class="text-center text-secondary" style="padding:30px 0;">').text('Belum ada pesan. Kirim pesan pertama Anda ke admin.'));
			return;
		}

		list.forEach(function(r) {
			if (r.tanggal !== currDate) {
				currDate = r.tanggal;
				$body.append($('<div class="chat-date-sep" style="text-align:center;color:#888;font-size:12px;margin:10px 0;">').text(currDate));
			}
			var align = r.letak === 'kanan' ? 'flex-end' : 'flex-start';
			var bg = r.letak === 'kanan' ? 'background:#27ae60;color:#fff;' : 'background:#eee;color:#222;';
			var $wrap = $('<div class="chat-bubble-wrap">').css({ display: 'flex', justifyContent: align, marginBottom: '8px' });
			var $bubble = $('<div class="chat-bubble">').attr('style', 'max-width:75%;padding:8px 12px;border-radius:14px;' + bg);
			$bubble.append($('<div style="white-space:pre-wrap;">').text(r.pesan));
			$bubble.append($('<div style="font-size:10px;opacity:0.7;text-align:right;margin-top:2px;">').text(r.jam));
			$wrap.append($bubble);
			$body.append($wrap);
		});
		scrollChatToBottom();
	}

	function pollPesan() {
		$.get("<?= site_url("assync/cekpesanbaru") ?>", function(data) {
			if (data.success == true) {
				renderChat(data.result);
			}
		});
	}

	$("#formpesan").on("submit", function(e) {
		e.preventDefault();
		var isi = $("#isipesan").val().trim();
		if (isi === "") { return; }
		$("#isipesan").val("").prop("disabled", true);
		$.post("<?= site_url("assync/kirimpesan") ?>", { "pesan": isi }, function(data) {
			$("#isipesan").prop("disabled", false).focus();
			if (data.success == true) {
				pollPesan();
			} else {
				swal("Gagal", "Pesan gagal dikirim, silahkan coba lagi.", "error");
			}
		});
	});

	setInterval(pollPesan, 8000);
</script>
