279 lines
12 KiB
HTML
279 lines
12 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{% trans "Select Hospital" %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Header -->
|
|
<div class="text-center mb-8">
|
|
<div class="mb-4">
|
|
<img src="{% static 'img/hh-logo.png' %}" alt="Al Hammadi Hospital" class="h-20 mx-auto">
|
|
</div>
|
|
<h1 class="text-3xl font-bold text-navy mb-3">
|
|
{% trans "Select Hospital" %}
|
|
</h1>
|
|
<p class="text-slate text-lg max-w-2xl mx-auto">
|
|
{% trans "As a PX Admin, you can view and manage data for any hospital. Please select the hospital you want to work with:" %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Hospital Selection Form -->
|
|
<form method="post" class="space-y-6" id="hospitalForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="next" value="{{ next }}">
|
|
|
|
{% if hospitals %}
|
|
<!-- Hospital Cards Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{% for hospital in hospitals %}
|
|
{% with hospital_id_str=hospital.id|stringformat:"s" %}
|
|
<div
|
|
class="hospital-card group relative cursor-pointer rounded-2xl border-2 transition-all duration-200
|
|
{% if hospital_id_str == selected_hospital_id %}
|
|
border-blue bg-blue-50/50 shadow-md selected
|
|
{% else %}
|
|
border-slate-200 bg-white hover:border-blue/50 hover:-translate-y-1
|
|
{% 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="hospital-radio sr-only"
|
|
>
|
|
|
|
<!-- Card Content -->
|
|
<div class="p-6">
|
|
<!-- Selection Indicator -->
|
|
<div class="absolute top-4 right-4">
|
|
<div class="selection-indicator w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all
|
|
{% if hospital_id_str == selected_hospital_id %}
|
|
border-blue bg-blue
|
|
{% else %}
|
|
border-slate-300
|
|
{% endif %}">
|
|
<i data-lucide="check" class="w-3.5 h-3.5 text-white transition-opacity
|
|
{% if hospital_id_str == selected_hospital_id %}
|
|
opacity-100
|
|
{% else %}
|
|
opacity-0
|
|
{% endif %}"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hospital Icon -->
|
|
<div class="hospital-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4 transition-all
|
|
{% if hospital_id_str == selected_hospital_id %}
|
|
bg-gradient-to-br from-blue to-navy ring-4 ring-blue/20
|
|
{% else %}
|
|
bg-slate-100 group-hover:bg-blue-50
|
|
{% endif %}">
|
|
<i data-lucide="building-2" class="w-7 h-7 transition-colors
|
|
{% if hospital_id_str == selected_hospital_id %}
|
|
text-white
|
|
{% else %}
|
|
text-slate-500 group-hover:text-blue
|
|
{% endif %}"></i>
|
|
</div>
|
|
|
|
<!-- Hospital Name -->
|
|
<h3 class="hospital-name text-lg font-bold mb-2 transition-colors pr-8
|
|
{% if hospital_id_str == selected_hospital_id %}
|
|
text-blue
|
|
{% else %}
|
|
text-navy group-hover:text-blue
|
|
{% endif %}">
|
|
{{ hospital.name }}
|
|
</h3>
|
|
|
|
<!-- Location -->
|
|
{% if hospital.city %}
|
|
<div class="flex items-center gap-2 text-slate text-sm">
|
|
<i data-lucide="map-pin" class="w-4 h-4 text-slate/70"></i>
|
|
<span>
|
|
{{ hospital.city }}
|
|
{% if hospital.country %}, {{ hospital.country }}{% endif %}
|
|
</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex items-center gap-2 text-slate/50 text-sm">
|
|
<i data-lucide="map-pin" class="w-4 h-4"></i>
|
|
<span>{% trans "Location not specified" %}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Selected Badge -->
|
|
<div class="selected-badge mt-4 pt-4 border-t transition-all
|
|
{% if hospital_id_str == selected_hospital_id %}
|
|
block border-blue/20
|
|
{% else %}
|
|
hidden border-slate-100
|
|
{% endif %}">
|
|
<span class="inline-flex items-center gap-1.5 text-sm font-semibold text-blue">
|
|
<i data-lucide="check-circle-2" class="w-4 h-4"></i>
|
|
{% trans "Currently Selected" %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<!-- Empty State -->
|
|
<div class="bg-white rounded-2xl border border-slate-200 p-12 text-center">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 bg-amber-50 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 %}
|
|
|
|
<!-- Action Buttons -->
|
|
{% if hospitals %}
|
|
<div class="bg-white rounded-2xl border border-slate-200 p-6 mt-8">
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<a href="/" class="w-full sm:w-auto px-6 py-3 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-slate-50 transition flex items-center justify-center gap-2">
|
|
<i data-lucide="arrow-left" class="w-5 h-5"></i>
|
|
{% trans "Back to Dashboard" %}
|
|
</a>
|
|
<button type="submit" class="w-full sm:w-auto px-8 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition flex items-center justify-center gap-2 shadow-lg shadow-blue/20">
|
|
<i data-lucide="check" class="w-5 h-5"></i>
|
|
{% trans "Continue" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</form>
|
|
|
|
<!-- Info Banner -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-2xl p-4 mt-6">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="info" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
|
|
<div>
|
|
<p class="text-sm font-semibold text-blue-800 mb-1">
|
|
{% trans "Tip" %}
|
|
</p>
|
|
<p class="text-xs text-blue-700">
|
|
{% trans "You can change your selected hospital at any time by clicking on the hospital name in the top navigation bar." %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
|
|
function selectHospital(hospitalId) {
|
|
// Check the radio button
|
|
const radio = document.getElementById('hospital_' + hospitalId);
|
|
if (radio) {
|
|
radio.checked = true;
|
|
}
|
|
|
|
// Update all cards visual state
|
|
document.querySelectorAll('.hospital-card').forEach(card => {
|
|
const cardHospitalId = card.dataset.hospitalId;
|
|
const isSelected = cardHospitalId === hospitalId;
|
|
|
|
// Update card border and background
|
|
if (isSelected) {
|
|
card.classList.remove('border-slate-200', 'bg-white');
|
|
card.classList.add('border-blue', 'bg-blue-50/50', 'shadow-md', 'selected');
|
|
} else {
|
|
card.classList.remove('border-blue', 'bg-blue-50/50', 'shadow-md', 'selected');
|
|
card.classList.add('border-slate-200', 'bg-white');
|
|
}
|
|
|
|
// Update selection indicator (check circle)
|
|
const indicator = card.querySelector('.selection-indicator');
|
|
if (indicator) {
|
|
if (isSelected) {
|
|
indicator.classList.remove('border-slate-300');
|
|
indicator.classList.add('border-blue', 'bg-blue');
|
|
} else {
|
|
indicator.classList.remove('border-blue', 'bg-blue');
|
|
indicator.classList.add('border-slate-300');
|
|
}
|
|
}
|
|
|
|
// Update check icon
|
|
const checkIcon = card.querySelector('.selection-indicator i');
|
|
if (checkIcon) {
|
|
if (isSelected) {
|
|
checkIcon.classList.remove('opacity-0');
|
|
checkIcon.classList.add('opacity-100');
|
|
} else {
|
|
checkIcon.classList.remove('opacity-100');
|
|
checkIcon.classList.add('opacity-0');
|
|
}
|
|
}
|
|
|
|
// Update hospital icon
|
|
const iconContainer = card.querySelector('.hospital-icon');
|
|
if (iconContainer) {
|
|
if (isSelected) {
|
|
iconContainer.classList.remove('bg-slate-100');
|
|
iconContainer.classList.add('bg-gradient-to-br', 'from-blue', 'to-navy', 'ring-4', 'ring-blue/20');
|
|
} else {
|
|
iconContainer.classList.remove('bg-gradient-to-br', 'from-blue', 'to-navy', 'ring-4', 'ring-blue/20');
|
|
iconContainer.classList.add('bg-slate-100');
|
|
}
|
|
}
|
|
|
|
// Update icon color
|
|
const icon = card.querySelector('.hospital-icon i');
|
|
if (icon) {
|
|
if (isSelected) {
|
|
icon.classList.remove('text-slate-500');
|
|
icon.classList.add('text-white');
|
|
} else {
|
|
icon.classList.remove('text-white');
|
|
icon.classList.add('text-slate-500');
|
|
}
|
|
}
|
|
|
|
// Update hospital name color
|
|
const name = card.querySelector('.hospital-name');
|
|
if (name) {
|
|
if (isSelected) {
|
|
name.classList.remove('text-navy');
|
|
name.classList.add('text-blue');
|
|
} else {
|
|
name.classList.remove('text-blue');
|
|
name.classList.add('text-navy');
|
|
}
|
|
}
|
|
|
|
// Update selected badge
|
|
const badge = card.querySelector('.selected-badge');
|
|
if (badge) {
|
|
if (isSelected) {
|
|
badge.classList.remove('hidden');
|
|
badge.classList.add('block', 'border-blue/20');
|
|
} else {
|
|
badge.classList.remove('block', 'border-blue/20');
|
|
badge.classList.add('hidden');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Re-render icons
|
|
lucide.createIcons();
|
|
}
|
|
</script>
|
|
{% endblock %}
|