247 lines
12 KiB
HTML
247 lines
12 KiB
HTML
{% load i18n static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% trans "Select Hospital" %} - PX360</title>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
navy: '#005696',
|
|
blue: '#007bbd',
|
|
light: '#eef6fb',
|
|
slate: '#64748b',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.hospital-card {
|
|
transition: all 0.2s ease;
|
|
}
|
|
.hospital-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
.hospital-card.selected {
|
|
border-color: #007bbd;
|
|
background-color: rgba(0, 123, 189, 0.05);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gradient-to-br from-navy via-blue to-light min-h-screen flex items-center justify-center p-4">
|
|
<div class="w-full max-w-4xl">
|
|
<!-- Card -->
|
|
<div class="bg-white rounded-[2rem] shadow-2xl overflow-hidden">
|
|
<!-- Header -->
|
|
<div class="bg-gradient-to-br from-navy to-blue text-white p-8 text-center">
|
|
<div class="mb-4">
|
|
<img src="{% static 'img/hh-logo.png' %}" alt="Al Hammadi Hospital" class="h-20 w-auto mx-auto bg-white/90 backdrop-blur-sm p-2 rounded-2xl inline-block">
|
|
</div>
|
|
<h1 class="text-2xl font-bold mb-2">{% trans "Select Hospital" %}</h1>
|
|
<p class="text-white/90 text-sm max-w-lg mx-auto">
|
|
{% trans "As a PX Admin, you must select a hospital to continue. You can change your selection later from the sidebar." %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="p-8">
|
|
{% if messages %}
|
|
<div class="mb-6 space-y-3">
|
|
{% for message in messages %}
|
|
<div class="{% if message.tags == 'error' or message.tags == 'danger' %}bg-red-50 border-red-200 text-red-700{% elif message.tags == 'warning' %}bg-amber-50 border-amber-200 text-amber-700{% elif message.tags == 'success' %}bg-green-50 border-green-200 text-green-700{% else %}bg-blue-50 border-blue-200 text-blue-700{% endif %} border rounded-xl px-4 py-3 flex items-start gap-3" role="alert">
|
|
{% if message.tags == 'error' or message.tags == 'danger' %}
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
|
|
{% elif message.tags == 'warning' %}
|
|
<i data-lucide="alert-circle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
|
|
{% elif message.tags == 'success' %}
|
|
<i data-lucide="check-circle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
|
|
{% else %}
|
|
<i data-lucide="info" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
|
|
{% endif %}
|
|
<p class="text-sm flex-1">{{ message }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" id="hospitalForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="next" value="{{ next }}">
|
|
|
|
{% if hospitals %}
|
|
<!-- Hospital Selection Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
|
{% for hospital in hospitals %}
|
|
{% with hospital_id_str=hospital.id|stringformat:"s" %}
|
|
<div
|
|
class="hospital-card cursor-pointer rounded-xl border-2 p-4
|
|
{% if hospital_id_str == selected_hospital_id %}
|
|
border-blue selected bg-blue-50/50
|
|
{% else %}
|
|
border-gray-200 hover:border-blue/50 hover:shadow-md
|
|
{% endif %}"
|
|
onclick="selectHospital('{{ hospital_id_str }}')"
|
|
data-hospital-id="{{ hospital_id_str }}"
|
|
>
|
|
<input
|
|
type="radio"
|
|
id="hospital_{{ hospital.id }}"
|
|
name="hospital_id"
|
|
value="{{ hospital.id }}"
|
|
{% if hospital_id_str == selected_hospital_id %}checked{% endif %}
|
|
class="sr-only"
|
|
>
|
|
|
|
<div class="flex items-start gap-3">
|
|
<!-- Icon -->
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0
|
|
{% if hospital_id_str == selected_hospital_id %}
|
|
bg-gradient-to-br from-blue to-navy
|
|
{% else %}
|
|
bg-gray-100
|
|
{% endif %}">
|
|
<i data-lucide="building-2" class="w-6 h-6
|
|
{% if hospital_id_str == selected_hospital_id %}
|
|
text-white
|
|
{% else %}
|
|
text-gray-500
|
|
{% endif %}"></i>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="font-bold text-navy truncate
|
|
{% if hospital_id_str == selected_hospital_id %}text-blue{% endif %}">
|
|
{{ hospital.name }}
|
|
</h3>
|
|
{% if hospital_id_str == selected_hospital_id %}
|
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-blue flex-shrink-0"></i>
|
|
{% endif %}
|
|
</div>
|
|
{% if hospital.city %}
|
|
<p class="text-sm text-slate mt-1 flex items-center gap-1">
|
|
<i data-lucide="map-pin" class="w-3.5 h-3.5"></i>
|
|
{{ hospital.city }}{% if hospital.country %}, {{ hospital.country }}{% endif %}
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<!-- Empty State -->
|
|
<div class="bg-amber-50 border border-amber-200 rounded-xl p-8 text-center mb-6">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 bg-amber-100 rounded-full mb-4">
|
|
<i data-lucide="alert-triangle" class="w-8 h-8 text-amber-500"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-navy mb-2">
|
|
{% trans "No Hospitals Available" %}
|
|
</h3>
|
|
<p class="text-slate text-sm">
|
|
{% trans "No hospitals found in the system. Please contact your administrator." %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Submit Button -->
|
|
{% if hospitals %}
|
|
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3.5 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center gap-2">
|
|
<i data-lucide="check" class="w-5 h-5"></i>
|
|
{% trans "Continue to Dashboard" %}
|
|
</button>
|
|
{% endif %}
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="bg-gray-50 px-8 py-4 text-center border-t border-gray-100">
|
|
<p class="text-xs text-gray-500">
|
|
{% trans "You must select a hospital to access the system" %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
function selectHospital(hospitalId) {
|
|
// Check the radio button
|
|
const radio = document.getElementById('hospital_' + hospitalId);
|
|
if (radio) {
|
|
radio.checked = true;
|
|
}
|
|
|
|
// Update all cards
|
|
document.querySelectorAll('.hospital-card').forEach(card => {
|
|
const cardId = card.dataset.hospitalId;
|
|
const isSelected = cardId === hospitalId;
|
|
|
|
// Update card styling
|
|
if (isSelected) {
|
|
card.classList.add('border-blue', 'selected', 'bg-blue-50/50');
|
|
card.classList.remove('border-gray-200');
|
|
} else {
|
|
card.classList.remove('border-blue', 'selected', 'bg-blue-50/50');
|
|
card.classList.add('border-gray-200');
|
|
}
|
|
|
|
// Update icon container
|
|
const iconContainer = card.querySelector('.w-12');
|
|
const icon = iconContainer?.querySelector('i');
|
|
if (iconContainer && icon) {
|
|
if (isSelected) {
|
|
iconContainer.classList.add('bg-gradient-to-br', 'from-blue', 'to-navy');
|
|
iconContainer.classList.remove('bg-gray-100');
|
|
icon.classList.add('text-white');
|
|
icon.classList.remove('text-gray-500');
|
|
} else {
|
|
iconContainer.classList.remove('bg-gradient-to-br', 'from-blue', 'to-navy');
|
|
iconContainer.classList.add('bg-gray-100');
|
|
icon.classList.remove('text-white');
|
|
icon.classList.add('text-gray-500');
|
|
}
|
|
}
|
|
|
|
// Update title
|
|
const title = card.querySelector('h3');
|
|
if (title) {
|
|
if (isSelected) {
|
|
title.classList.add('text-blue');
|
|
} else {
|
|
title.classList.remove('text-blue');
|
|
}
|
|
}
|
|
|
|
// Update check icon
|
|
const checkWrapper = card.querySelector('.flex.items-center.gap-2');
|
|
if (checkWrapper) {
|
|
let checkIcon = checkWrapper.querySelector('i[data-lucide="check-circle-2"]');
|
|
if (isSelected && !checkIcon) {
|
|
const newIcon = document.createElement('i');
|
|
newIcon.setAttribute('data-lucide', 'check-circle-2');
|
|
newIcon.className = 'w-5 h-5 text-blue flex-shrink-0';
|
|
checkWrapper.appendChild(newIcon);
|
|
lucide.createIcons();
|
|
} else if (!isSelected && checkIcon) {
|
|
checkIcon.remove();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|