324 lines
14 KiB
PHP
324 lines
14 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="min-h-screen bg-gray-50">
|
|
@include('admin.partials.top-nav')
|
|
|
|
<div class="flex">
|
|
@include('admin.partials.sidebar')
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-1 lg:ml-0">
|
|
<div class="px-4 sm:px-6 lg:px-8 py-6 md:py-8">
|
|
<!-- Header -->
|
|
<div class="mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-900 mb-2">Tambah Antrian Manual</h1>
|
|
<p class="text-gray-600">Bantu pasien yang tidak bisa antri online dengan membuat antrian manual</p>
|
|
</div>
|
|
|
|
<!-- Search User Section -->
|
|
<div class="bg-white rounded-lg shadow-sm border p-6 mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">Cari Pasien</h2>
|
|
|
|
<div class="flex space-x-4 mb-4">
|
|
<div class="flex-1">
|
|
<input type="text" id="searchInput"
|
|
placeholder="Cari berdasarkan nama, NIK, atau nomor HP..."
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
</div>
|
|
<button id="searchBtn"
|
|
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500">
|
|
Cari
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Search Results -->
|
|
<div id="searchResults" class="hidden">
|
|
<h3 class="text-md font-medium text-gray-900 mb-3">Hasil Pencarian:</h3>
|
|
<div id="userList" class="space-y-2"></div>
|
|
</div>
|
|
|
|
<!-- No Results Message -->
|
|
<div id="noResults" class="hidden text-center py-4 text-gray-500">
|
|
Tidak ada hasil yang ditemukan
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selected User & Poli Selection -->
|
|
<div id="userSelection" class="hidden bg-white rounded-lg shadow-sm border p-6 mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">Pilih Poli</h2>
|
|
|
|
<div class="mb-4">
|
|
<h3 class="text-md font-medium text-gray-700 mb-2">Pasien yang dipilih:</h3>
|
|
<div id="selectedUserInfo" class="bg-gray-50 rounded-lg p-3"></div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="poliSelect" class="block text-sm font-medium text-gray-700 mb-2">Pilih Poli:</label>
|
|
<select id="poliSelect"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
<option value="">Pilih Poli</option>
|
|
@foreach ($polis as $poli)
|
|
<option value="{{ $poli->id }}">{{ ucfirst($poli->nama_poli) }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<button id="createQueueBtn"
|
|
class="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:ring-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
disabled>
|
|
Buat Antrian
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logout Form -->
|
|
<form id="logout-form" method="POST" action="{{ route('logout') }}" class="hidden">
|
|
@csrf
|
|
</form>
|
|
|
|
<script>
|
|
let selectedUser = null;
|
|
|
|
// Search functionality
|
|
document.getElementById('searchBtn').addEventListener('click', function() {
|
|
const searchTerm = document.getElementById('searchInput').value.trim();
|
|
if (searchTerm.length < 3) {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Peringatan',
|
|
text: 'Masukkan minimal 3 karakter untuk pencarian',
|
|
confirmButtonColor: '#3B82F6'
|
|
});
|
|
return;
|
|
}
|
|
searchUsers(searchTerm);
|
|
});
|
|
|
|
document.getElementById('searchInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
document.getElementById('searchBtn').click();
|
|
}
|
|
});
|
|
|
|
function searchUsers(searchTerm) {
|
|
fetch('{{ route('admin.antrian.cari-user') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({
|
|
search: searchTerm
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.users.length > 0) {
|
|
displaySearchResults(data.users);
|
|
} else {
|
|
showNoResults();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
text: 'Terjadi kesalahan saat mencari user',
|
|
confirmButtonColor: '#EF4444'
|
|
});
|
|
});
|
|
}
|
|
|
|
function displaySearchResults(users) {
|
|
const userList = document.getElementById('userList');
|
|
const searchResults = document.getElementById('searchResults');
|
|
const noResults = document.getElementById('noResults');
|
|
|
|
userList.innerHTML = '';
|
|
|
|
users.forEach(user => {
|
|
const userDiv = document.createElement('div');
|
|
userDiv.className =
|
|
'flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer';
|
|
userDiv.innerHTML = `
|
|
<div>
|
|
<div class="font-medium text-gray-900">${user.nama}</div>
|
|
<div class="text-sm text-gray-600">NIK: ${user.no_ktp} | HP: ${user.no_hp}</div>
|
|
<div class="text-sm text-gray-500">${user.jenis_kelamin} - ${user.alamat}</div>
|
|
</div>
|
|
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm" onclick="selectUser(${JSON.stringify(user).replace(/"/g, '"')})">
|
|
Pilih
|
|
</button>
|
|
`;
|
|
userList.appendChild(userDiv);
|
|
});
|
|
|
|
searchResults.classList.remove('hidden');
|
|
noResults.classList.add('hidden');
|
|
}
|
|
|
|
function showNoResults() {
|
|
document.getElementById('searchResults').classList.add('hidden');
|
|
document.getElementById('noResults').classList.remove('hidden');
|
|
}
|
|
|
|
function selectUser(user) {
|
|
selectedUser = user;
|
|
|
|
// Display selected user info
|
|
const selectedUserInfo = document.getElementById('selectedUserInfo');
|
|
selectedUserInfo.innerHTML = `
|
|
<div class="font-medium text-gray-900">${user.nama}</div>
|
|
<div class="text-sm text-gray-600">NIK: ${user.no_ktp} | HP: ${user.no_hp}</div>
|
|
<div class="text-sm text-gray-500">${user.jenis_kelamin} - ${user.alamat}</div>
|
|
`;
|
|
|
|
// Show user selection section
|
|
document.getElementById('userSelection').classList.remove('hidden');
|
|
|
|
// Reset poli selection
|
|
document.getElementById('poliSelect').value = '';
|
|
document.getElementById('createQueueBtn').disabled = true;
|
|
|
|
// Hide search results
|
|
document.getElementById('searchResults').classList.add('hidden');
|
|
document.getElementById('searchInput').value = '';
|
|
}
|
|
|
|
// Poli selection change
|
|
document.getElementById('poliSelect').addEventListener('change', function() {
|
|
const createQueueBtn = document.getElementById('createQueueBtn');
|
|
createQueueBtn.disabled = !this.value;
|
|
});
|
|
|
|
// Create queue
|
|
document.getElementById('createQueueBtn').addEventListener('click', function() {
|
|
if (!selectedUser || !document.getElementById('poliSelect').value) {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Peringatan',
|
|
text: 'Pilih user dan poli terlebih dahulu',
|
|
confirmButtonColor: '#3B82F6'
|
|
});
|
|
return;
|
|
}
|
|
|
|
createQueue();
|
|
});
|
|
|
|
function createQueue() {
|
|
const poliId = document.getElementById('poliSelect').value;
|
|
|
|
fetch('{{ route('admin.antrian.store') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({
|
|
user_id: selectedUser.id,
|
|
poli_id: poliId
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Berhasil!',
|
|
text: data.message,
|
|
confirmButtonColor: '#10B981'
|
|
}).then(() => {
|
|
resetForm();
|
|
});
|
|
} else {
|
|
// Check if it's an existing queue error with additional details
|
|
if (data.existing_queue) {
|
|
let statusText = '';
|
|
let alertIcon = 'warning';
|
|
let titleText = 'Antrian Sudah Ada!';
|
|
|
|
switch (data.existing_queue.status) {
|
|
case 'menunggu':
|
|
statusText = 'Menunggu';
|
|
break;
|
|
case 'dipanggil':
|
|
statusText = 'Dipanggil';
|
|
alertIcon = 'info';
|
|
titleText = 'Antrian Sedang Dipanggil!';
|
|
break;
|
|
case 'sedang_diperiksa':
|
|
statusText = 'Sedang Diperiksa';
|
|
alertIcon = 'error';
|
|
titleText = 'Sedang Dalam Pemeriksaan!';
|
|
break;
|
|
}
|
|
|
|
Swal.fire({
|
|
icon: alertIcon,
|
|
title: titleText,
|
|
html: `
|
|
<div class="text-left">
|
|
<p class="mb-3">${data.message}</p>
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-3">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 text-yellow-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
<span class="font-medium text-yellow-800">Detail Antrian Aktif:</span>
|
|
</div>
|
|
<div class="mt-2 text-sm text-yellow-700">
|
|
<p><strong>No. Antrian:</strong> ${data.existing_queue.no_antrian}</p>
|
|
<p><strong>Status:</strong> ${statusText}</p>
|
|
</div>
|
|
</div>
|
|
${data.existing_queue.status === 'sedang_diperiksa'
|
|
? '<p class="text-sm text-red-600 font-medium">⚠️ User tidak dapat mengambil antrian baru di poli yang sama selama masih dalam proses pemeriksaan.</p>'
|
|
: '<p class="text-sm text-gray-600">Silakan tunggu hingga antrian selesai atau dibatalkan terlebih dahulu.</p>'
|
|
}
|
|
</div>
|
|
`,
|
|
confirmButtonColor: data.existing_queue.status === 'sedang_diperiksa' ?
|
|
'#EF4444' : '#F59E0B'
|
|
});
|
|
} else {
|
|
// Generic error
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
text: data.message,
|
|
confirmButtonColor: '#EF4444'
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
text: 'Terjadi kesalahan saat membuat antrian',
|
|
confirmButtonColor: '#EF4444'
|
|
});
|
|
});
|
|
}
|
|
|
|
function resetForm() {
|
|
selectedUser = null;
|
|
document.getElementById('userSelection').classList.add('hidden');
|
|
document.getElementById('searchResults').classList.add('hidden');
|
|
document.getElementById('noResults').classList.add('hidden');
|
|
document.getElementById('searchInput').value = '';
|
|
document.getElementById('poliSelect').value = '';
|
|
document.getElementById('createQueueBtn').disabled = true;
|
|
}
|
|
</script>
|
|
|
|
@include('admin.partials.sidebar-script')
|
|
@endsection
|