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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ANTRIAN POLI - 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'); ?>">
	<link rel="stylesheet" href="<?= base_url('assets/adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css'); ?>">
	<style>
		.antrian-card {
			border-radius: 15px;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
			border: none;
		}

		.status-badge {
			font-size: 0.8rem;
			padding: 8px 12px;
			border-radius: 20px;
		}

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

		.filter-section {
			background: #f8f9fa;
			border-radius: 10px;
			padding: 20px;
			margin-bottom: 20px;
		}

		.stat-card {
			text-align: center;
			padding: 15px;
			border-radius: 10px;
			color: white;
			margin-bottom: 15px;
		}

		.table-hover tbody tr:hover {
			background-color: rgba(0, 123, 255, 0.1);
		}

		.action-buttons .btn {
			margin: 2px;
		}
	</style>
</head>

<body>
	<div class="container-fluid py-4">
		<!-- Header -->
		<div class="row mb-4">
			<div class="col-12">
				<div class="card antrian-card bg-primary text-white">
					<div class="card-body">
						<div class="row align-items-center">
							<div class="col-md-6">
								<h1 class="h3 mb-0">
									<i class="fas fa-clinic-medical mr-2"></i>ANTRIAN POLI
								</h1>
								<p class="mb-0">Sistem Manajemen Antrian Poliklinik</p>
							</div>
							<div class="col-md-6 text-right">
								<div class="btn-group">
									<button class="btn btn-light" onclick="refreshData()">
										<i class="fas fa-sync-alt mr-2"></i>Refresh
									</button>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Filter Section -->
		<div class="row mb-4">
			<div class="col-12">
				<div class="filter-section">
					<div class="row">
						<div class="col-md-3">
							<div class="form-group">
								<label><strong>Poli</strong></label>
								<select class="form-control" id="filter-poli">
									<option value="all">Semua Poli</option>
								</select>
							</div>
						</div>
						<div class="col-md-3">
							<div class="form-group">
								<label><strong>Dokter</strong></label>
								<select class="form-control" id="filter-dokter">
									<option value="all">Semua Dokter</option>
								</select>
							</div>
						</div>
						<div class="col-md-2">
							<div class="form-group">
								<label><strong>Status</strong></label>
								<select class="form-control" id="filter-status">
									<option value="all">Semua Status</option>
									<option value="MENUNGGU">Menunggu</option>
									<option value="DIPANGGIL">Dipanggil</option>
									<option value="SELESAI">Selesai</option>
									<option value="BATAL">Batal</option>
								</select>
							</div>
						</div>
						<div class="col-md-2">
							<div class="form-group">
								<label><strong>Dari Tanggal</strong></label>
								<input type="date" class="form-control" id="filter-start-date" value="<?= date('Y-m-d') ?>">
							</div>
						</div>
						<div class="col-md-2">
							<div class="form-group">
								<label><strong>Sampai Tanggal</strong></label>
								<input type="date" class="form-control" id="filter-end-date" value="<?= date('Y-m-d') ?>">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-12 text-right">
							<button class="btn btn-primary" onclick="applyFilters()">
								<i class="fas fa-filter mr-2"></i>Terapkan Filter
							</button>
							<button class="btn btn-secondary" onclick="resetFilters()">
								<i class="fas fa-redo mr-2"></i>Reset
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Statistics -->
		<div class="row mb-4">
			<div class="col-md-3">
				<div class="stat-card bg-primary">
					<h3 id="stat-total">0</h3>
					<p class="mb-0">Total Antrian</p>
				</div>
			</div>
			<div class="col-md-3">
				<div class="stat-card bg-success">
					<h3 id="stat-selesai">0</h3>
					<p class="mb-0">Selesai</p>
				</div>
			</div>
			<div class="col-md-3">
				<div class="stat-card bg-warning">
					<h3 id="stat-menunggu">0</h3>
					<p class="mb-0">Menunggu</p>
				</div>
			</div>
			<div class="col-md-3">
				<div class="stat-card bg-info">
					<h3 id="stat-dipanggil">0</h3>
					<p class="mb-0">Dipanggil</p>
				</div>
			</div>
		</div>

		<!-- Antrian Table -->
		<div class="row">
			<div class="col-12">
				<div class="card antrian-card">
					<div class="card-header">
						<h5 class="card-title mb-0">
							<i class="fas fa-list-alt mr-2"></i>Daftar Antrian Poli
						</h5>
					</div>
					<div class="card-body">
						<div class="table-responsive">
							<table id="table-antrian" class="table table-hover">
								<thead>
									<tr>
										<th>No</th>
										<th>Nomor Antrian</th>
										<th>Pasien</th>
										<th>Poli</th>
										<th>Dokter</th>
										<th>Tanggal</th>
										<th>Waktu Daftar</th>
										<th>Status</th>
										<th>Aksi</th>
									</tr>
								</thead>
								<tbody id="tbody-antrian">
									<!-- Data akan diisi oleh JavaScript -->
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal Display Antrian -->
	<div class="modal fade" id="modalDisplay" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-primary text-white">
					<h5 class="modal-title">Display Antrian</h5>
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body text-center">
					<div id="display-content">
						<!-- Content akan diisi oleh JavaScript -->
					</div>
				</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 src="<?= base_url('assets/adminlte/plugins/datatables/jquery.dataTables.min.js'); ?>"></script>
	<script src="<?= base_url('assets/adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js'); ?>"></script>

	<script>
		let currentFilters = {};

		// Load data awal
		$(document).ready(function() {
			loadPoli();
			loadDokter();
			loadAntrian();
			loadStatistik();

			// Auto refresh setiap 10 detik
			setInterval(() => {
				loadAntrian();
				loadStatistik();
			}, 10000);
		});

		// Load data poli
		function loadPoli() {
			$.getJSON('<?= site_url("poli/get_poli") ?>', function(response) {
				let options = '<option value="all">Semua Poli</option>';
				response.forEach(poli => {
					options += `<option value="${poli.poli_id}">${poli.nama_poli}</option>`;
				});
				$('#filter-poli').html(options);
			});
		}

		// Load data dokter
		function loadDokter(poliId = 'all') {
			$.getJSON('<?= site_url("poli/get_dokter_by_poli") ?>/' + poliId, function(response) {
				let options = '<option value="all">Semua Dokter</option>';
				response.forEach(dokter => {
					options += `<option value="${dokter.dokter_id}">${dokter.nama_dokter} - ${dokter.spesialisasi}</option>`;
				});
				$('#filter-dokter').html(options);
			});
		}

		// Load data antrian
		function loadAntrian() {
			const params = new URLSearchParams(currentFilters);

			$.getJSON('<?= site_url("poli/get_antrian_poli") ?>?' + params, function(response) {
				let html = '';
				if (response.length > 0) {
					response.forEach((antrian, index) => {
						const statusBadge = getStatusBadge(antrian.status_antrian);
						const waktuDaftar = new Date(antrian.created_at).toLocaleTimeString('id-ID');
						const tanggal = new Date(antrian.tanggal_registrasi).toLocaleDateString('id-ID');

						html += `
                        <tr>
                            <td>${index + 1}</td>
                            <td>
                                <span class="antrian-number">${antrian.nomor_antrian}</span>
                            </td>
                            <td>
                                <strong>${antrian.nama_pasien}</strong>
                                ${antrian.nomor_reservasi ? `<br><small class="text-muted">${antrian.nomor_reservasi}</small>` : ''}
                            </td>
                            <td>${antrian.nama_poli}</td>
                            <td>${antrian.nama_dokter || '-'}</td>
                            <td>${tanggal}</td>
                            <td>${waktuDaftar}</td>
                            <td>${statusBadge}</td>
                            <td class="action-buttons">
                                ${antrian.status_antrian === 'MENUNGGU' ? `
                                <button class="btn btn-sm btn-success" onclick="panggilAntrian('${antrian.antrian_id}')" title="Panggil">
                                    <i class="fas fa-bullhorn"></i>
                                </button>
                                ` : ''}
                                
                                ${antrian.status_antrian === 'DIPANGGIL' ? `
                                <button class="btn btn-sm btn-primary" onclick="selesaiAntrian('${antrian.antrian_id}')" title="Selesai">
                                    <i class="fas fa-check"></i>
                                </button>
                                ` : ''}
                                
                                ${antrian.status_antrian === 'MENUNGGU' || antrian.status_antrian === 'DIPANGGIL' ? `
                                <button class="btn btn-sm btn-danger" onclick="batalAntrian('${antrian.antrian_id}')" title="Batal">
                                    <i class="fas fa-times"></i>
                                </button>
                                ` : ''}
                                
                          
                            </td>
                        </tr>`;
					});
				} else {
					html = `
                    <tr>
                        <td colspan="9" class="text-center py-4">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Tidak ada data antrian</h5>
                            <p class="text-muted">Data antrian akan muncul di sini</p>
                        </td>
                    </tr>`;
				}
				$('#tbody-antrian').html(html);
			});
		}

		// Load statistik
		function loadStatistik() {
			const params = new URLSearchParams(currentFilters);

			$.getJSON('<?= site_url("poli/statistik") ?>?' + params, function(response) {
				$('#stat-total').text(response.total_antrian);
				$('#stat-selesai').text(response.antrian_selesai);
				$('#stat-menunggu').text(response.antrian_menunggu);
				$('#stat-dipanggil').text(response.antrian_dipanggil);
			});
		}

		// Apply filters
		function applyFilters() {
			currentFilters = {
				poli_id: $('#filter-poli').val(),
				dokter_id: $('#filter-dokter').val(),
				status: $('#filter-status').val(),
				start_date: $('#filter-start-date').val(),
				end_date: $('#filter-end-date').val()
			};

			loadAntrian();
			loadStatistik();
		}

		// Reset filters
		function resetFilters() {
			$('#filter-poli').val('all');
			$('#filter-dokter').val('all');
			$('#filter-status').val('all');
			$('#filter-start-date').val('<?= date('Y-m-d') ?>');
			$('#filter-end-date').val('<?= date('Y-m-d') ?>');

			applyFilters();
		}

		// Refresh data
		function refreshData() {
			loadAntrian();
			loadStatistik();
		}


		// Fungsi untuk memutar suara
		function playVoice(text) {
			const utter = new SpeechSynthesisUtterance(text);
			utter.lang = "id-ID"; // Bahasa Indonesia
			utter.rate = 0.9; // Kecepatan bicara
			utter.pitch = 1; // Pitch
			speechSynthesis.speak(utter);
		}

		function panggilAntrian(antrianId) {
			if (confirm('Apakah Anda yakin ingin memanggil antrian ini?')) {
				$.post('<?= site_url("poli/panggil_antrian") ?>/' + antrianId, function(response) {
					if (response.success) {

						
						const nomor = response.data.nomor_antrian;
						const pasien = response.data.nama_pasien;
						const poli = response.data.nama_poli;

						const kalimat = `Nomor antrian ${nomor}, atas nama ${pasien}, silakan menuju ${poli}.`;

						playVoice(kalimat);

						alert('Antrian berhasil dipanggil!');
						loadAntrian();
						loadStatistik();
					} else {
						alert('Error: ' + response.message);
					}
				});
			}
		}



		// Panggil antrian
		function panggilAntrian3(antrianId) {
			if (confirm('Apakah Anda yakin ingin memanggil antrian ini?')) {
				$.post('<?= site_url("poli/panggil_antrian") ?>/' + antrianId, function(response) {
					if (response.success) {
						alert('Antrian berhasil dipanggil!');
						loadAntrian();
						loadStatistik();
					} else {
						alert('Error: ' + response.message);
					}
				});
			}
		}

		// Selesaikan antrian
		function selesaiAntrian(antrianId) {
			if (confirm('Apakah Anda yakin ingin menyelesaikan antrian ini?')) {
				$.post('<?= site_url("poli/selesai_antrian") ?>/' + antrianId, function(response) {
					if (response.success) {
						alert('Antrian berhasil diselesaikan!');
						loadAntrian();
						loadStatistik();
					} else {
						alert('Error: ' + response.message);
					}
				});
			}
		}

		// Batalkan antrian
		function batalAntrian(antrianId) {
			if (confirm('Apakah Anda yakin ingin membatalkan antrian ini?')) {
				$.post('<?= site_url("poli/batal_antrian") ?>/' + antrianId, function(response) {
					if (response.success) {
						alert('Antrian berhasil dibatalkan!');
						loadAntrian();
						loadStatistik();
					} else {
						alert('Error: ' + response.message);
					}
				});
			}
		}

		// Tampilkan display antrian
		function showDisplay(antrianId) {
			// Implementasi display antrian
			$('#modalDisplay').modal('show');
			// Isi content display dengan data antrian
		}

		// Export data
		function exportData() {
			alert('Fitur export akan segera hadir!');
		}

		// Helper function untuk status badge
		function getStatusBadge(status) {
			const badges = {
				'MENUNGGU': 'badge-warning',
				'DIPANGGIL': 'badge-primary',
				'SELESAI': 'badge-success',
				'BATAL': 'badge-danger'
			};

			const texts = {
				'MENUNGGU': 'Menunggu',
				'DIPANGGIL': 'Dipanggil',
				'SELESAI': 'Selesai',
				'BATAL': 'Batal'
			};

			return `<span class="badge status-badge ${badges[status]}">${texts[status]}</span>`;
		}

		// Event listener untuk perubahan poli
		$('#filter-poli').on('change', function() {
			loadDokter($(this).val());
		});
	</script>
</body>

</html>
