<!DOCTYPE html>
<html lang="id">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>LOKET PENDATAFTARAN - e-RM</title>
	<link rel="stylesheet" href="<?= base_url('assets/adminlte/plugins/bootstrap/css/bootstrap.min.css'); ?>">
	<link rel="stylesheet" href="<?= base_url('assets/adminlte/plugins/fontawesome-free/css/all.min.css'); ?>">
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			min-height: 100vh;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			overflow-x: hidden;
		}

		.loket-container {
			min-height: 100vh;
			padding: 0;
		}

		/* HEADER */
		.header-loket {
			background: rgba(255, 255, 255, 0.98);
			padding: 25px 40px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
			border-bottom: 5px solid #007bff;
		}

		.header-title {
			font-size: 2.5rem;
			font-weight: 800;
			color: #2c3e50;
			margin: 0;
		}

		.header-subtitle {
			font-size: 1.2rem;
			color: #7f8c8d;
			margin: 0;
		}

		.header-info {
			text-align: right;
		}

		.info-badge {
			font-size: 1.1rem;
			padding: 12px 20px;
			border-radius: 25px;
			margin-left: 15px;
		}

		/* MAIN CONTENT */
		.main-content {
			padding: 30px;
			flex: 1;
		}

		/* ACTION BUTTONS */
		.action-section {
			margin-bottom: 40px;
		}

		.btn-loket {
			height: 280px;
			font-size: 2rem;
			font-weight: 800;
			border-radius: 20px;
			margin: 15px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			border: none;
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
			position: relative;
			overflow: hidden;
		}

		.btn-loket::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
			transition: 0.5s;
		}

		.btn-loket:hover::before {
			left: 100%;
		}

		.btn-loket:hover {
			transform: translateY(-8px) scale(1.02);
			box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
		}

		.btn-loket i {
			font-size: 5rem;
			margin-bottom: 20px;
			opacity: 0.9;
		}

		.btn-loket small {
			font-size: 1.1rem;
			font-weight: 500;
			opacity: 0.9;
			margin-top: 15px;
		}

		.btn-petugas {
			background: linear-gradient(135deg, #28a745, #20c997);
			color: white;
		}

		.btn-online {
			background: linear-gradient(135deg, #007bff, #0056b3);
			color: white;
		}

		/* ANTRIAN DISPLAY */
		.antrian-display {
			background: rgba(255, 255, 255, 0.98);
			border-radius: 20px;
			padding: 40px;
			margin-bottom: 30px;
			box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
			border: 3px solid #e9ecef;
		}

		.section-title {
			font-size: 1.8rem;
			font-weight: 700;
			color: #2c3e50;
			margin-bottom: 25px;
			padding-bottom: 15px;
			border-bottom: 3px solid #007bff;
		}

		.antrian-sekarang {
			font-size: 6rem;
			font-weight: 900;
			color: #dc3545;
			text-align: center;
			margin: 30px 0;
			text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
		}

		.nama-pasien {
			font-size: 2.2rem;
			text-align: center;
			color: #2c3e50;
			margin-bottom: 15px;
			font-weight: 600;
		}

		.info-poli {
			font-size: 1.5rem;
			text-align: center;
			color: #7f8c8d;
			margin-bottom: 10px;
		}

		.waktu-panggil {
			font-size: 1.2rem;
			text-align: center;
			color: #6c757d;
		}

		/* CONTROL BUTTONS */
		.control-buttons {
			margin-top: 30px;
		}

		.btn-control {
			font-size: 1.3rem;
			font-weight: 600;
			padding: 20px 30px;
			border-radius: 15px;
			margin: 0 10px;
			border: none;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
		}

		.btn-control:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
		}

		/* ANTRIAN MENUNGGU */
		.antrian-list {
			max-height: 400px;
			overflow-y: auto;
		}

		.antrian-item {
			background: #f8f9fa;
			border-radius: 12px;
			padding: 20px;
			margin-bottom: 15px;
			border-left: 5px solid #ffc107;
			transition: all 0.3s ease;
		}

		.antrian-item:hover {
			background: #e9ecef;
			transform: translateX(5px);
		}

		.antrian-number {
			font-size: 2rem;
			font-weight: 800;
			color: #007bff;
		}

		.antrian-info {
			flex: 1;
		}

		.antrian-nama {
			font-size: 1.3rem;
			font-weight: 600;
			color: #2c3e50;
			margin-bottom: 5px;
		}

		.antrian-poli {
			font-size: 1.1rem;
			color: #6c757d;
		}

		.antrian-status {
			font-size: 1.1rem;
			font-weight: 600;
		}

		/* MODAL STYLES */
		.modal-content {
			border-radius: 20px;
			border: none;
			box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
		}

		.modal-header {
			border-radius: 20px 20px 0 0;
			padding: 25px 30px;
			border-bottom: 3px solid rgba(0, 0, 0, 0.1);
		}

		.modal-title {
			font-size: 1.5rem;
			font-weight: 700;
		}

		.modal-body {
			padding: 30px;
		}

		.modal-footer {
			border-radius: 0 0 20px 20px;
			padding: 20px 30px;
			border-top: 3px solid rgba(0, 0, 0, 0.1);
		}

		/* RESPONSIVE */
		@media (max-width: 768px) {
			.header-loket {
				padding: 20px;
				text-align: center;
			}

			.header-info {
				text-align: center;
				margin-top: 15px;
			}

			.btn-loket {
				height: 200px;
				font-size: 1.5rem;
				margin: 10px 0;
			}

			.btn-loket i {
				font-size: 3rem;
			}

			.antrian-sekarang {
				font-size: 4rem;
			}

			.nama-pasien {
				font-size: 1.5rem;
			}
		}

		/* ANIMATIONS */
		@keyframes pulse {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.05);
			}

			100% {
				transform: scale(1);
			}
		}

		.pulse {
			animation: pulse 2s infinite;
		}

		.blink {
			animation: blink 1s infinite;
		}

		@keyframes blink {

			0%,
			50% {
				opacity: 1;
			}

			51%,
			100% {
				opacity: 0.5;
			}
		}

		/* SCROLLBAR */
		::-webkit-scrollbar {
			width: 8px;
		}

		::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 10px;
		}

		::-webkit-scrollbar-thumb {
			background: #007bff;
			border-radius: 10px;
		}

		::-webkit-scrollbar-thumb:hover {
			background: #0056b3;
		}
	</style>
</head>

<body>
	<div class="loket-container">
		<!-- HEADER -->
		<div class="header-loket">
			<div class="row align-items-center">
				<div class="col-md-6">
					<h1 class="header-title">
						<i class="fas fa-hospital-alt mr-3"></i>LOKET PENDATAFTARAN
					</h1>
					<p class="header-subtitle">Sistem Antrian Rumah Sakit Terintegrasi</p>
				</div>
				<div class="col-md-6 header-info">
					<span class="badge badge-primary info-badge">
						<i class="fas fa-clock mr-2"></i>
						<span id="current-time"><?= date('H:i:s') ?></span>
					</span>
					<span class="badge badge-success info-badge">
						<i class="fas fa-calendar mr-2"></i>
						<?= date('d/m/Y') ?>
					</span>
					<span class="badge badge-info info-badge">
						<i class="fas fa-door-open mr-2"></i>
						LOKET 1
					</span>
				</div>
			</div>
			<div class="row align-items-center">
				<div class="col-3 mb-4">
					<div class="card bg-primary text-white">
						<div class="card-body">
							<h2 id="total-antrian" class="mb-0">0</h2>
							<small>Total Antrian</small>
						</div>
					</div>
				</div>

				<div class="col-3 mb-4">
					<div class="card bg-success text-white">
						<div class="card-body">
							<h2 id="antrian-selesai" class="mb-0">0</h2>
							<small>Selesai</small>
						</div>
					</div>
				</div>
				<div class="col-3 mb-4">
					<div class="card bg-warning text-white">
						<div class="card-body">
							<h2 id="antrian-menunggu" class="mb-0">0</h2>
							<small>Menunggu</small>
						</div>
					</div>
				</div>

				<div class="col-3 mb-4">
					<div class="card bg-info text-white">
						<div class="card-body">
							<h2 id="online-terkonfirmasi" class="mb-0">0</h2>
							<small>Online</small>
						</div>
					</div>
				</div>

			</div>
		</div>

		<!-- MAIN CONTENT -->
		<div class="main-content">
			<!-- ACTION BUTTONS -->
			<div class="action-section">
				<div class="row">
					<div class="col-lg-6">
						<button class="btn btn-loket btn-petugas w-100" onclick="bukaRegistrasiPetugas()">
							<i class="fas fa-ticket-alt fa-3x mb-3"></i>
							REGISTRASI PETUGAS
							<small>Buat Nomor Antrian Loket</small>
						</button>
					</div>
					<div class="col-lg-6">
						<button class="btn btn-loket btn-online w-100" onclick="bukaRegistrasiOnline()">
							<i class="fas fa-mobile-alt"></i>
							REGISTRASI ONLINE
							<small>Konfirmasi Reservasi Online</small>
						</button>
					</div>
				</div>
			</div>

			<div class="row">
				<!-- ANTRIAN SEKARANG -->
				<!-- <div class="col-lg-8">
                    <div class="antrian-display">
                        <h3 class="section-title">
                            <i class="fas fa-desktop mr-3"></i>ANTRIAN SEKARANG
                        </h3>
                        
                        <div id="antrian-loket">
                            <div class="antrian-sekarang pulse">-</div>
                            <div class="nama-pasien">Menunggu antrian...</div>
                            <div class="info-poli">Loket Pendaftaran</div>
                            <div class="waktu-panggil" id="waktu-panggil">-</div>
                        </div>

                        <div class="row control-buttons">
                            <div class="col-md-6">
                                <button class="btn btn-warning btn-control w-100" onclick="panggilAntrianLoket()">
                                    <i class="fas fa-bullhorn mr-2"></i>PANGGIL ANTRIAN
                                </button>
                            </div>
                            <div class="col-md-6">
                                <button class="btn btn-success btn-control w-100" onclick="antrianSelesai()">
                                    <i class="fas fa-check-circle mr-2"></i>SELESAI
                                </button>
                            </div>
                        </div>
                    </div>
                </div> -->

				<!-- STATISTIK -->
				<!-- <div class="row">
					<div class="antrian-display h-100">
						<h3 class="section-title">
							<i class="fas fa-chart-bar mr-3"></i>STATISTIK HARI INI
						</h3>

						<div class="text-center">
							<div class="row">
								<div class="col-6 mb-4">
									<div class="card bg-primary text-white">
										<div class="card-body">
											<h2 id="total-antrian" class="mb-0">0</h2>
											<small>Total Antrian</small>
										</div>
									</div>
								</div>
								<div class="col-6 mb-4">
									<div class="card bg-success text-white">
										<div class="card-body">
											<h2 id="antrian-selesai" class="mb-0">0</h2>
											<small>Selesai</small>
										</div>
									</div>
								</div>
								<div class="col-6 mb-4">
									<div class="card bg-warning text-white">
										<div class="card-body">
											<h2 id="antrian-menunggu" class="mb-0">0</h2>
											<small>Menunggu</small>
										</div>
									</div>
								</div>
								<div class="col-6 mb-4">
									<div class="card bg-info text-white">
										<div class="card-body">
											<h2 id="online-terkonfirmasi" class="mb-0">0</h2>
											<small>Online</small>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div> -->
			</div>

			<!-- DAFTAR ANTRIAN MENUNGGU -->
			<div class="antrian-display">
				<h3 class="section-title">
					<i class="fas fa-list-alt mr-3"></i>DAFTAR ANTRIAN MENUNGGU
					<span class="badge badge-warning ml-2" id="count-menunggu">0</span>
				</h3>

				<div class="antrian-list" id="daftar-antrian">
					<div class="text-center text-muted py-5">
						<i class="fas fa-clock fa-3x mb-3"></i>
						<h4>Tidak ada antrian menunggu</h4>
						<p>Antrian yang menunggu akan muncul di sini</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal Registrasi Petugas -->
	<div class="modal fade" id="modalRegistrasiPetugas" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-success text-white">
					<h5 class="modal-title">
						<i class="fas fa-user-md mr-2"></i>BUAT ANTRIAN LOKET
					</h5>
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="alert alert-info border-0">
						<i class="fas fa-info-circle mr-2"></i>
						<strong>Informasi:</strong> Sistem akan membuat nomor antrian loket untuk pasien yang datang langsung
					</div>

					<div class="text-center py-4">
						<div class="display-4 text-success font-weight-bold mb-3" id="display-nomor-antrian">
							-
						</div>
						<p class="text-muted lead">Nomor antrian akan muncul setelah dikonfirmasi</p>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary btn-lg" data-dismiss="modal">
						<i class="fas fa-times mr-2"></i>Batal
					</button>
					<button type="button" class="btn btn-success btn-lg" onclick="buatAntrianLoket()">
						<i class="fas fa-plus-circle mr-2"></i>Buat Antrian
					</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal Registrasi Online -->
	<div class="modal fade" id="modalRegistrasiOnline" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-primary text-white">
					<h5 class="modal-title">
						<i class="fas fa-mobile-alt mr-2"></i>KONFIRMASI REGISTRASI ONLINE
					</h5>
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label class="h6">Kode Reservasi</label>
						<div class="input-group input-group-lg">
							<input type="text" class="form-control form-control-lg" id="kode_reservasi"
								placeholder="Masukkan kode reservasi dari pendaftaran online">
							<div class="input-group-append">
								<button class="btn btn-primary" type="button" onclick="cariReservasi()">
									<i class="fas fa-search mr-2"></i>Cari
								</button>
							</div>
						</div>
					</div>

					<div id="info-reservasi" class="mt-4" style="display: none;">
						<div class="alert alert-success border-0">
							<h5 class="alert-heading">
								<i class="fas fa-check-circle mr-2"></i>Data Reservasi Ditemukan
							</h5>
							<div id="detail-reservasi" class="mt-3"></div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary btn-lg" data-dismiss="modal">
						<i class="fas fa-times mr-2"></i>Batal
					</button>
					<button type="button" class="btn btn-primary btn-lg" onclick="cariReservasi()">
						<i class="fas fa-search mr-2"></i>Cari Reservasi
					</button>
					<button type="button" class="btn btn-success btn-lg" id="btn-konfirmasi" style="display: none;"
						onclick="konfirmasiReservasi()">
						<i class="fas fa-check mr-2"></i>Konfirmasi & Buat Antrian
					</button>
				</div>
			</div>
		</div>
	</div>
	<!-- Modal Success -->
	<div class="modal fade" id="modalSuccess" tabindex="-1">
		<div class="modal-dialog modal-md">
			<div class="modal-content">
				<div class="modal-header bg-success text-white">
					<h5 class="modal-title">
						<i class="fas fa-check-circle mr-2"></i>KONFIRMASI BERHASIL
					</h5>
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body text-center">
					<div class="alert alert-success border-0">
						<i class="fas fa-check fa-3x mb-3"></i>
						<h4 class="alert-heading">Reservasi Berhasil Dikonfirmasi!</h4>
					</div>

					<div class="card bg-light mb-3">
						<div class="card-body">
							<h2 class="text-primary mb-2" id="success-nomor-antrian">-</h2>
							<p class="mb-1"><strong>Poliklinik:</strong> <span id="success-poli">-</span></p>
							<p class="mb-1"><strong>Pasien:</strong> <span id="success-pasien">-</span></p>
						</div>
					</div>

					<p class="text-muted">
						<small>Silakan menunggu dipanggil di poliklinik tujuan</small>
					</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-success btn-lg w-100" data-dismiss="modal">
						<i class="fas fa-print mr-2"></i>Kembali
					</button>
				</div>
			</div>
		</div>
	</div>

	<script src="<?= base_url('assets/adminlte/plugins/jquery/jquery.min.js'); ?>"></script>
	<script src="<?= base_url('assets/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js'); ?>"></script>

	<script>
		let currentAntrianId = null;
		let refreshInterval = null;

		// Update waktu real-time
		function updateWaktu() {
			const now = new Date();
			const timeString = now.toLocaleTimeString('id-ID', {
				hour: '2-digit',
				minute: '2-digit',
				second: '2-digit'
			});
			document.getElementById('current-time').textContent = timeString;
		}

		// Buka modal registrasi petugas
		function bukaRegistrasiPetugas() {
			$('#modalRegistrasiPetugas').modal('show');
			$('#display-nomor-antrian').text('-').removeClass('text-success text-danger blink');
		}

		// Buka modal registrasi online
		function bukaRegistrasiOnline() {
			$('#modalRegistrasiOnline').modal('show');
			$('#kode_reservasi').val('').focus();
			$('#info-reservasi').hide();
			$('#btn-konfirmasi').hide();
		}

		// Ganti function buatAntrianLoket()
		function buatAntrianLoket() {
			$('#display-nomor-antrian').text('MEMBUAT...').addClass('blink');

			$.post('<?= site_url("loket/buat_antrian_loket") ?>', function(response) {
				if (response.success) {
					$('#display-nomor-antrian').text(response.nomor_antrian)
						.removeClass('blink')
						.addClass('text-success');

					// Buka tab baru untuk print struk (TANPA auto print)
					openPrintTabAntrian(response.antrian_id);

					// Auto close modal setelah 2 detik
					setTimeout(function() {
						$('#modalRegistrasiPetugas').modal('hide');
						loadAntrianMenunggu();
						loadStatistik();
					}, 2000);
				} else {
					$('#display-nomor-antrian').text('ERROR').addClass('text-danger');
					alert('Error: ' + response.message);
				}
			}).fail(function() {
				$('#display-nomor-antrian').text('ERROR').addClass('text-danger');
				alert('Terjadi kesalahan saat membuat antrian');
			});
		}

		// Fungsi buka tab baru untuk struk antrian (tanpa auto print)
		function openPrintTabAntrian(antrian_id) {
			const printUrl = '<?= site_url("loket/print_antrian_loket/") ?>' + antrian_id;
			window.open(printUrl, '_blank', 'width=400,height=600,scrollbars=no,toolbar=no,location=no');
		}

		// Buat antrian loket
		// Ganti function buatAntrianLoket()
		function buatAntrianLoket_v2() {
			$('#display-nomor-antrian').text('MEMBUAT...').addClass('blink');

			$.post('<?= site_url("loket/buat_antrian_loket") ?>', function(response) {
				if (response.success) {
					$('#display-nomor-antrian').text(response.nomor_antrian)
						.removeClass('blink')
						.addClass('text-success');

					// Auto print struk
					printStrukAntrian(response.antrian_id);

					// Auto close modal setelah 3 detik
					setTimeout(function() {
						$('#modalRegistrasiPetugas').modal('hide');
						loadAntrianMenunggu();
						loadStatistik();
					}, 3000);
				} else {
					$('#display-nomor-antrian').text('ERROR').addClass('text-danger');
					alert('Error: ' + response.message);
				}
			}).fail(function() {
				$('#display-nomor-antrian').text('ERROR').addClass('text-danger');
				alert('Terjadi kesalahan saat membuat antrian');
			});
		}

		// Fungsi print struk antrian
		function printStrukAntrian(antrian_id) {
			const printWindow = window.open('<?= site_url("loket/print_antrian_loket/") ?>' + antrian_id, '_blank', 'width=400,height=600');

			// Fallback jika popup diblokir
			setTimeout(function() {
				if (!printWindow || printWindow.closed || typeof printWindow.closed === 'undefined') {
					window.location.href = '<?= site_url("loket/print_antrian_loket/") ?>' + antrian_id;
				}
			}, 500);
		}
		// Update function cariReservasi() - tambahkan detail lebih lengkap
		function cariReservasi() {
			const kode = $('#kode_reservasi').val().trim();
			if (!kode) {
				alert('Masukkan kode reservasi');
				return;
			}

			$('#btn-konfirmasi').hide();
			$('#info-reservasi').hide();

			$.getJSON('<?= site_url("loket/cari_reservasi/") ?>' + kode, function(response) {
				if (response.success) {
					$('#detail-reservasi').html(`
                <div class="row">
                    <div class="col-md-6">
                        <p><strong><i class="fas fa-user mr-2"></i>Nama Pasien:</strong><br>
                        ${response.data.nama_lengkap}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong><i class="fas fa-clinic-medical mr-2"></i>Poli Tujuan:</strong><br>
                        ${response.data.nama_poli}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong><i class="fas fa-user-md mr-2"></i>Dokter:</strong><br>
                        ${response.data.nama_dokter || 'Belum dipilih'}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong><i class="fas fa-money-bill-wave mr-2"></i>Pembayaran:</strong><br>
                        ${response.data.tipe_pembayaran}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong><i class="fas fa-calendar mr-2"></i>Tanggal Reservasi:</strong><br>
                        ${response.data.tanggal_registrasi}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong><i class="fas fa-clock mr-2"></i>Waktu Reservasi:</strong><br>
                        ${response.data.jam_registrasi || 'Tersedia'}</p>
                    </div>
                </div>
                <div class="alert alert-warning mt-3">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Pastikan data di atas sudah benar sebelum dikonfirmasi
                </div>
            `);
					$('#info-reservasi').show();
					$('#btn-konfirmasi').show().data('reservasi', response.data);
				} else {
					alert('Reservasi tidak ditemukan. Periksa kembali kode reservasi.');
				}
			}).fail(function() {
				alert('Terjadi kesalahan saat mencari reservasi');
			});
		}

		// Update function konfirmasiReservasi() - dengan print otomatis
		function konfirmasiReservasi_v3() {
			const reservasi = $('#btn-konfirmasi').data('reservasi');

			$.post('<?= site_url("loket/konfirmasi_reservasi") ?>', {
				registrasi_id: reservasi.registrasi_id
			}, function(response) {
				if (response.success) {
					// Tampilkan modal sukses dengan nomor antrian
					$('#modalRegistrasiOnline').modal('hide');

					// Tampilkan modal sukses
					$('#modalSuccess').modal('show');
					$('#success-nomor-antrian').text(response.nomor_antrian);
					$('#success-poli').text(reservasi.nama_poli);
					$('#success-pasien').text(reservasi.nama_lengkap);

					// Auto print struk registrasi
					printStrukRegistrasi(reservasi.registrasi_id);

					loadAntrianMenunggu();
					loadStatistik();

					// Auto close modal success setelah 5 detik
					setTimeout(function() {
						$('#modalSuccess').modal('hide');
					}, 5000);

				} else {
					alert('Error: ' + response.message);
				}
			}).fail(function() {
				alert('Terjadi kesalahan saat mengkonfirmasi reservasi');
			});
		}

		// Fungsi print struk registrasi untuk online
		function printStrukRegistrasi(registrasi_id) {
			const printWindow = window.open('<?= site_url("loket/print_registrasi_pasien/") ?>' + registrasi_id, '_blank', 'width=400,height=600');

			// Fallback jika popup diblokir
			setTimeout(function() {
				if (!printWindow || printWindow.closed || typeof printWindow.closed === 'undefined') {
					window.location.href = '<?= site_url("loket/print_registrasi_pasien/") ?>' + registrasi_id;
				}
			}, 500);
		}
		// Update function konfirmasiReservasi() - tampilkan nomor antrian
		function konfirmasiReservasi_2() {
			const reservasi = $('#btn-konfirmasi').data('reservasi');

			$.post('<?= site_url("loket/konfirmasi_reservasi") ?>', {
				registrasi_id: reservasi.registrasi_id
			}, function(response) {
				if (response.success) {
					// Tampilkan modal sukses dengan nomor antrian
					$('#modalRegistrasiOnline').modal('hide');

					// Tampilkan modal sukses
					$('#modalSuccess').modal('show');
					$('#success-nomor-antrian').text(response.nomor_antrian);
					$('#success-poli').text(reservasi.nama_poli);
					$('#success-pasien').text(reservasi.nama_lengkap);

					loadAntrianMenunggu();
					loadStatistik();
				} else {
					alert('Error: ' + response.message);
				}
			}).fail(function() {
				alert('Terjadi kesalahan saat mengkonfirmasi reservasi');
			});
		}

		// Update loadAntrianMenunggu() untuk menampilkan data poli
		function loadAntrianMenunggu() {
			$.getJSON('<?= site_url("loket/antrian_menunggu") ?>', function(response) {
				let html = '';
				if (response.length > 0) {
					response.forEach(antrian => {
						const jenis = antrian.jenis_antrian === 'POLI' ? 'POLI' : 'LOKET';
						const badgeColor = antrian.jenis_antrian === 'POLI' ? 'info' : 'primary';

						html += `
                <div class="antrian-item">
                    <div class="d-flex align-items-center">
                        <div class="antrian-number">#${antrian.nomor_antrian}</div>
                        <div class="antrian-info ml-4">
                            <div class="antrian-nama">${antrian.nama_lengkap || 'Pasien Loket'}</div>
                            <div class="antrian-poli">${antrian.nama_poli || 'Loket Pendaftaran'}</div>
                            <small class="text-muted">${antrian.nomor_reservasi ? 'Reservasi: ' + antrian.nomor_reservasi : 'Datang Langsung'}</small>
                        </div>
                        <div class="antrian-status ml-auto">
                            <span class="badge badge-${badgeColor} badge-pill p-2 mr-2">${jenis}</span>
                            <span class="badge badge-warning badge-pill p-2">MENUNGGU</span>
                        </div>
                    </div>
                </div>`;
					});
					$('#count-menunggu').text(response.length);
				} else {
					html = `
            <div class="text-center text-muted py-5">
                <i class="fas fa-clock fa-3x mb-3"></i>
                <h4>Tidak ada antrian menunggu</h4>
                <p>Antrian yang menunggu akan muncul di sini</p>
            </div>`;
					$('#count-menunggu').text('0');
				}
				$('#daftar-antrian').html(html);
			});
		}

		// Cari reservasi online
		// function cariReservasi() {
		// 	const kode = $('#kode_reservasi').val().trim();
		// 	if (!kode) {
		// 		alert('Masukkan kode reservasi');
		// 		return;
		// 	}

		// 	$('#btn-konfirmasi').hide();
		// 	$('#info-reservasi').hide();

		// 	$.getJSON('<?= site_url("loket/cari_reservasi/") ?>' + kode, function(response) {
		// 		if (response.success) {
		// 			$('#detail-reservasi').html(`
		//                 <div class="row">
		//                     <div class="col-md-6">
		//                         <p><strong><i class="fas fa-user mr-2"></i>Nama Pasien:</strong><br>
		//                         ${response.data.nama_lengkap}</p>
		//                     </div>
		//                     <div class="col-md-6">
		//                         <p><strong><i class="fas fa-clinic-medical mr-2"></i>Poli Tujuan:</strong><br>
		//                         ${response.data.nama_poli}</p>
		//                     </div>
		//                     <div class="col-md-6">
		//                         <p><strong><i class="fas fa-calendar mr-2"></i>Tanggal Reservasi:</strong><br>
		//                         ${response.data.tanggal_registrasi}</p>
		//                     </div>
		//                     <div class="col-md-6">
		//                         <p><strong><i class="fas fa-clock mr-2"></i>Waktu Reservasi:</strong><br>
		//                         ${response.data.jam_registrasi || 'Tersedia'}</p>
		//                     </div>
		//                 </div>
		//             `);
		// 			$('#info-reservasi').show();
		// 			$('#btn-konfirmasi').show().data('reservasi', response.data);
		// 		} else {
		// 			alert('Reservasi tidak ditemukan. Periksa kembali kode reservasi.');
		// 		}
		// 	});
		// }

		// // Konfirmasi reservasi online
		// function konfirmasiReservasi() {
		// 	const reservasi = $('#btn-konfirmasi').data('reservasi');

		// 	$.post('<?= site_url("loket/konfirmasi_reservasi") ?>', {
		// 		registrasi_id: reservasi.registrasi_id
		// 	}, function(response) {
		// 		if (response.success) {
		// 			alert('Reservasi berhasil dikonfirmasi! Nomor Antrian Poli: ' + response.nomor_antrian);
		// 			$('#modalRegistrasiOnline').modal('hide');
		// 			loadAntrianMenunggu();
		// 			loadStatistik();
		// 		} else {
		// 			alert('Error: ' + response.message);
		// 		}
		// 	});
		// }

		// Panggil antrian loket
		function panggilAntrianLoket() {
			$.post('<?= site_url("antrian/panggil_loket/LOKET_1") ?>', function(response) {
				if (response.success) {
					updateDisplayAntrian(response.data);
					currentAntrianId = response.data.antrian_id;
					loadAntrianMenunggu();
					loadStatistik();
				} else {
					alert(response.message);
				}
			});
		}

		// Antrian selesai
		function antrianSelesai() {
			if (!currentAntrianId) {
				alert('Tidak ada antrian aktif');
				return;
			}

			$.post('<?= site_url("antrian/selesai/") ?>' + currentAntrianId, function(response) {
				if (response.success) {
					$('#antrian-loket').html(`
                        <div class="antrian-sekarang pulse">-</div>
                        <div class="nama-pasien">Menunggu antrian...</div>
                        <div class="info-poli">Loket Pendaftaran</div>
                        <div class="waktu-panggil" id="waktu-panggil">-</div>
                    `);
					currentAntrianId = null;
					loadAntrianMenunggu();
					loadStatistik();
				} else {
					alert(response.message);
				}
			});
		}

		// Update display antrian
		function updateDisplayAntrian(data) {
			const now = new Date();
			const waktuPanggil = now.toLocaleTimeString('id-ID');

			$('#antrian-loket').html(`
                <div class="antrian-sekarang blink">${data.nomor_antrian}</div>
                <div class="nama-pasien">${data.nama_lengkap || 'Pasien Loket'}</div>
                <div class="info-poli">${data.nama_poli || 'Loket Pendaftaran'}</div>
                <div class="waktu-panggil" id="waktu-panggil">Dipanggil: ${waktuPanggil}</div>
            `);
		}

		// Load antrian menunggu
		function loadAntrianMenunggu() {
			$.getJSON('<?= site_url("loket/antrian_menunggu") ?>', function(response) {
				let html = '';
				if (response.length > 0) {
					response.forEach(antrian => {
						html += `
                        <div class="antrian-item">
                            <div class="d-flex align-items-center">
                                <div class="antrian-number">#${antrian.nomor_antrian}</div>
                                <div class="antrian-info ml-4">
                                    <div class="antrian-nama">${antrian.nama_lengkap || 'Pasien Loket'}</div>
                                    <div class="antrian-poli">${antrian.nama_poli || 'Belum memilih poli'}</div>
                                </div>
                                <div class="antrian-status ml-auto">
                                    <span class="badge badge-warning badge-pill p-2">MENUNGGU</span>
                                </div>
                            </div>
                        </div>`;
					});
					$('#count-menunggu').text(response.length);
				} else {
					html = `
                    <div class="text-center text-muted py-5">
                        <i class="fas fa-clock fa-3x mb-3"></i>
                        <h4>Tidak ada antrian menunggu</h4>
                        <p>Antrian yang menunggu akan muncul di sini</p>
                    </div>`;
					$('#count-menunggu').text('0');
				}
				$('#daftar-antrian').html(html);
			});
		}

		// Load statistik
		function loadStatistik() {
			$.getJSON('<?= site_url("loket/statistik") ?>', function(response) {
				$('#total-antrian').text(response.total_antrian || 0);
				$('#antrian-selesai').text(response.antrian_selesai || 0);
				$('#antrian-menunggu').text(response.antrian_menunggu || 0);
				$('#online-terkonfirmasi').text(response.online_terkonfirmasi || 0);
			});
		}

		// Auto refresh data
		function startAutoRefresh() {
			if (refreshInterval) clearInterval(refreshInterval);
			refreshInterval = setInterval(function() {
				loadAntrianMenunggu();
				loadStatistik();

				// Update antrian yang sedang dipanggil
				if (!currentAntrianId) {
					$.getJSON('<?= site_url("antrian/sekarang/LOKET") ?>', function(response) {
						if (response.nomor_antrian) {
							updateDisplayAntrian(response);
							currentAntrianId = response.antrian_id;
						}
					});
				}
			}, 5000); // Refresh setiap 5 detik
		}

		// Load data awal
		$(document).ready(function() {
			updateWaktu();
			setInterval(updateWaktu, 1000);

			loadAntrianMenunggu();
			loadStatistik();
			startAutoRefresh();

			// Cek antrian yang sedang dipanggil
			$.getJSON('<?= site_url("antrian/sekarang/LOKET") ?>', function(response) {
				if (response.nomor_antrian) {
					updateDisplayAntrian(response);
					currentAntrianId = response.antrian_id;
				}
			});

			// Enter key untuk kode reservasi
			$('#kode_reservasi').on('keypress', function(e) {
				if (e.which === 13) {
					cariReservasi();
				}
			});
		});
	</script>
</body>

</html>
