386 lines
16 KiB
HTML
386 lines
16 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{% trans "Send Appreciation" %} - {% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.page-header-gradient {
|
|
background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
|
|
color: white;
|
|
padding: 1.5rem 2rem;
|
|
border-radius: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
|
|
}
|
|
|
|
.form-section {
|
|
background: #fff;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.form-section:hover {
|
|
border-color: #005696;
|
|
box-shadow: 0 4px 12px rgba(0, 86, 150, 0.1);
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-control, .form-select {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 0.75rem;
|
|
font-size: 0.875rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.form-control:focus, .form-select:focus {
|
|
outline: none;
|
|
border-color: #005696;
|
|
box-shadow: 0 0 0 3px rgba(0, 86, 150, 0.1);
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: #005696;
|
|
color: white;
|
|
border-radius: 0.75rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.btn-primary:hover {
|
|
background: #007bbd;
|
|
}
|
|
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: white;
|
|
color: #64748b;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 0.75rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-secondary:hover {
|
|
background: #f1f5f9;
|
|
border-color: #005696;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="p-4">
|
|
<!-- Breadcrumb -->
|
|
<nav aria-label="breadcrumb" class="mb-4">
|
|
<ol class="flex flex-wrap items-center gap-2 text-sm">
|
|
<li><a href="{% url 'appreciation:appreciation_list' %}" class="text-blue-600 hover:text-blue-800">{% trans "Appreciation" %}</a></li>
|
|
<li class="text-gray-400"><i data-lucide="chevron-right" class="w-4 h-4"></i></li>
|
|
<li class="text-gray-600 font-medium" aria-current="page">{% trans "Send Appreciation" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<div class="page-header-gradient">
|
|
<h1 class="text-2xl font-bold flex items-center gap-3">
|
|
<i data-lucide="send" class="w-6 h-6"></i>
|
|
{% trans "Send Appreciation" %}
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Send Appreciation Form -->
|
|
<div class="lg:col-span-2">
|
|
<div class="form-section">
|
|
<form method="post" id="appreciationForm">
|
|
{% csrf_token %}
|
|
|
|
<!-- Recipient Type -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<label for="recipient_type" class="form-label">
|
|
{% trans "Recipient Type" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select class="form-select" id="recipient_type" name="recipient_type" required>
|
|
<option value="user">{% trans "User" %}</option>
|
|
<option value="physician">{% trans "Physician" %}</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<input type="hidden" name="hospital_id" value="{{ current_hospital.id }}">
|
|
<label class="form-label">{% trans "Hospital" %}</label>
|
|
<input type="text" class="form-control" value="{{ current_hospital.name }}" readonly>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recipient -->
|
|
<div class="mb-4">
|
|
<label for="recipient_id" class="form-label">
|
|
{% trans "Recipient" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select class="form-select" id="recipient_id" name="recipient_id" required disabled>
|
|
<option value="">-- {% trans "Select Recipient" %} --</option>
|
|
</select>
|
|
<p class="text-sm text-gray-500 mt-1" id="recipientHelp">{% trans "Select a hospital first" %}</p>
|
|
</div>
|
|
|
|
<!-- Department (Optional) -->
|
|
<div class="mb-4">
|
|
<label for="department_id" class="form-label">{% trans "Department" %}</label>
|
|
<select class="form-select" id="department_id" name="department_id">
|
|
<option value="">-- {% trans "Select Department" %} --</option>
|
|
</select>
|
|
<p class="text-sm text-gray-500 mt-1">{% trans "Optional: Select if related to a specific department" %}</p>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="mb-4">
|
|
<label for="category_id" class="form-label">{% trans "Category" %}</label>
|
|
<select class="form-select" id="category_id" name="category_id">
|
|
<option value="">-- {% trans "Select Category" %} --</option>
|
|
{% for category in categories %}
|
|
<option value="{{ category.id }}">
|
|
<i class="{{ category.icon }}"></i> {{ category.name_en }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Message (English) -->
|
|
<div class="mb-4">
|
|
<label for="message_en" class="form-label">
|
|
{% trans "Message (English)" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<textarea
|
|
class="form-control"
|
|
id="message_en"
|
|
name="message_en"
|
|
rows="4"
|
|
required
|
|
placeholder="{% trans 'Write your appreciation message here...' %}"
|
|
></textarea>
|
|
<p class="text-sm text-gray-500 mt-1">{% trans "Required: Appreciation message in English" %}</p>
|
|
</div>
|
|
|
|
<!-- Message (Arabic) -->
|
|
<div class="mb-4">
|
|
<label for="message_ar" class="form-label">{% trans "Message (Arabic)" %}</label>
|
|
<textarea
|
|
class="form-control"
|
|
id="message_ar"
|
|
name="message_ar"
|
|
rows="4"
|
|
dir="rtl"
|
|
placeholder="{% trans 'اكتب رسالة التقدير هنا...' %}"
|
|
></textarea>
|
|
<p class="text-sm text-gray-500 mt-1">{% trans "Optional: Appreciation message in Arabic" %}</p>
|
|
</div>
|
|
|
|
<!-- Visibility -->
|
|
<div class="mb-4">
|
|
<label for="visibility" class="form-label">{% trans "Visibility" %}</label>
|
|
<select class="form-select" id="visibility" name="visibility">
|
|
{% for choice in visibility_choices %}
|
|
<option value="{{ choice.0 }}" {% if choice.0 == 'private' %}selected{% endif %}>
|
|
{{ choice.1 }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Anonymous -->
|
|
<div class="mb-6">
|
|
<div class="flex items-start gap-3">
|
|
<input
|
|
class="mt-1 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
|
|
type="checkbox"
|
|
id="is_anonymous"
|
|
name="is_anonymous"
|
|
>
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700" for="is_anonymous">
|
|
{% trans "Send anonymously" %}
|
|
</label>
|
|
<p class="text-sm text-gray-500">{% trans "Your name will not be shown to the recipient" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="flex flex-wrap justify-end gap-3">
|
|
<a href="{% url 'appreciation:appreciation_list' %}" class="btn-secondary">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
<button type="submit" class="btn-primary">
|
|
<i data-lucide="send" class="w-4 h-4"></i>
|
|
{% trans "Send Appreciation" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="lg:col-span-1">
|
|
<!-- Tips -->
|
|
<div class="form-section">
|
|
<h6 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-yellow-500"></i>
|
|
{% trans "Tips for Writing Appreciation" %}
|
|
</h6>
|
|
<ul class="space-y-2 text-sm">
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5"></i>
|
|
{% trans "Be specific about what you appreciate" %}
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5"></i>
|
|
{% trans "Use the person's name when addressing them" %}
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5"></i>
|
|
{% trans "Mention the impact of their actions" %}
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5"></i>
|
|
{% trans "Be sincere and authentic" %}
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5"></i>
|
|
{% trans "Keep it positive and uplifting" %}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Visibility Guide -->
|
|
<div class="form-section">
|
|
<h6 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="info" class="w-4 h-4 text-blue-500"></i>
|
|
{% trans "Visibility Levels" %}
|
|
</h6>
|
|
<ul class="space-y-3 text-sm">
|
|
<li>
|
|
<strong class="text-gray-800">{% trans "Private:" %}</strong>
|
|
<p class="text-gray-500 text-xs">
|
|
{% trans "Only you and the recipient can see this appreciation" %}
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-gray-800">{% trans "Department:" %}</strong>
|
|
<p class="text-gray-500 text-xs">
|
|
{% trans "Visible to everyone in the selected department" %}
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-gray-800">{% trans "Hospital:" %}</strong>
|
|
<p class="text-gray-500 text-xs">
|
|
{% trans "Visible to everyone in the selected hospital" %}
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-gray-800">{% trans "Public:" %}</strong>
|
|
<p class="text-gray-500 text-xs">
|
|
{% trans "Visible to all PX360 users" %}
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
{{ block.super }}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const recipientTypeSelect = document.getElementById('recipient_type');
|
|
const recipientSelect = document.getElementById('recipient_id');
|
|
const departmentSelect = document.getElementById('department_id');
|
|
const recipientHelp = document.getElementById('recipientHelp');
|
|
|
|
const currentHospitalId = '{{ current_hospital.id|default:"" }}';
|
|
let recipientData = [];
|
|
|
|
// Load recipients and departments on page load
|
|
function loadRecipientsAndDepartments() {
|
|
const hospitalId = currentHospitalId;
|
|
const recipientType = recipientTypeSelect.value;
|
|
|
|
if (!hospitalId) return;
|
|
|
|
// Load recipients
|
|
recipientSelect.disabled = true;
|
|
recipientSelect.innerHTML = '<option value="">Loading...</option>';
|
|
recipientHelp.textContent = 'Loading recipients...';
|
|
|
|
const url = recipientType === 'user'
|
|
? "{% url 'appreciation:get_users_by_hospital' %}?hospital_id=" + hospitalId
|
|
: "{% url 'appreciation:get_physicians_by_hospital' %}?hospital_id=" + hospitalId;
|
|
|
|
fetch(url)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
recipientData = recipientType === 'user' ? data.users : data.physicians;
|
|
|
|
recipientSelect.innerHTML = '<option value="">-- Select Recipient --</option>';
|
|
recipientData.forEach(item => {
|
|
const option = document.createElement('option');
|
|
option.value = item.id;
|
|
option.textContent = item.name;
|
|
recipientSelect.appendChild(option);
|
|
});
|
|
|
|
recipientSelect.disabled = false;
|
|
recipientHelp.textContent = `${recipientData.length} recipients found`;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
recipientSelect.innerHTML = '<option value="">Error loading recipients</option>';
|
|
recipientHelp.textContent = 'Error loading recipients';
|
|
});
|
|
|
|
// Load departments
|
|
departmentSelect.innerHTML = '<option value="">-- Select Department --</option>';
|
|
|
|
fetch("{% url 'appreciation:get_departments_by_hospital' %}?hospital_id=" + hospitalId)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
data.departments.forEach(item => {
|
|
const option = document.createElement('option');
|
|
option.value = item.id;
|
|
option.textContent = item.name;
|
|
departmentSelect.appendChild(option);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
// Load on page load
|
|
loadRecipientsAndDepartments();
|
|
|
|
// Refresh when recipient type changes
|
|
recipientTypeSelect.addEventListener('change', loadRecipientsAndDepartments);
|
|
});
|
|
</script>
|
|
{% endblock %}
|