291 lines
15 KiB
HTML
291 lines
15 KiB
HTML
{% load i18n %}
|
|
|
|
<!-- Inquiry Form - PX360 Styled -->
|
|
<div class="inquiry-form" id="inquiryFormContainer">
|
|
<form id="inquiryForm" data-loading data-loading-text="{% trans 'Submitting...' %}">
|
|
{% csrf_token %}
|
|
|
|
<!-- Header -->
|
|
<div class="mb-8 p-6 bg-gradient-to-br from-blue-50 to-light rounded-2xl border-2 border-blue/10">
|
|
<h3 class="text-2xl font-bold text-navy mb-2 flex items-center gap-3">
|
|
<i data-lucide="help-circle" class="w-7 h-7 text-blue-600"></i>
|
|
{% trans "Inquiry Details" %}
|
|
</h3>
|
|
<p class="text-slate text-sm leading-relaxed">{% trans "Ask a question or request information. We'll get back to you within 24-48 hours." %}</p>
|
|
</div>
|
|
|
|
<!-- Contact Information -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
|
|
<div>
|
|
<label for="inquiry_name" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Name" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" id="inquiry_name" name="name" required
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition form-input"
|
|
placeholder="{% trans 'Your full name' %}">
|
|
</div>
|
|
<div>
|
|
<label for="inquiry_email" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Email Address" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="email" id="inquiry_email" name="email" required
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition form-input"
|
|
placeholder="your@email.com">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
|
|
<div>
|
|
<label for="inquiry_phone" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Phone Number" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="tel" id="inquiry_phone" name="phone" maxlength="20" required
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition form-input"
|
|
placeholder="{% trans 'Your phone number' %}">
|
|
</div>
|
|
<div>
|
|
<label for="inquiry_hospital" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Hospital" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select id="inquiry_hospital" name="hospital" required
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition bg-white form-input">
|
|
<option value="">{% trans "Select Hospital" %}</option>
|
|
{% for hospital in hospitals %}
|
|
<option value="{{ hospital.id }}">{{ hospital.get_localized_name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Type -->
|
|
<div class="mb-5">
|
|
<label for="inquiry_location_type" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Location Type" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select id="inquiry_location_type" name="location_type" required
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition bg-white form-input">
|
|
<option value="">{% trans "Select Location Type" %}</option>
|
|
<option value="OP">{% trans "Outpatient (OP)" %}</option>
|
|
<option value="IP">{% trans "Inpatient (IP)" %}</option>
|
|
<option value="ER">{% trans "Emergency (ER)" %}</option>
|
|
<option value="GENERAL">{% trans "General" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Area (cascading from hospital + location_type) -->
|
|
<div id="inquiry_area_container" style="display: none;" class="mb-5">
|
|
<label for="inquiry_area" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Area" %}
|
|
</label>
|
|
<select id="inquiry_area" name="area"
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition bg-white form-input">
|
|
<option value="">{% trans "Select Area (optional)" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Department & Section (cascading) -->
|
|
<div id="inquiry_dept_container" style="display: none;" class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
|
|
<div>
|
|
<label for="inquiry_department" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Department" %}
|
|
</label>
|
|
<select id="inquiry_department" name="department"
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition bg-white form-input">
|
|
<option value="">{% trans "Select Department" %}</option>
|
|
</select>
|
|
</div>
|
|
<div id="inquiry_section_container" style="display: none;">
|
|
<label for="inquiry_section" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Section" %}
|
|
</label>
|
|
<select id="inquiry_section" name="section"
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition bg-white form-input">
|
|
<option value="">{% trans "Select Section" %}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="mb-5">
|
|
<label for="inquiry_category" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Category" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select id="inquiry_category" name="category" required
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition bg-white form-input">
|
|
<option value="">{% trans "Select Category" %}</option>
|
|
<option value="general">{% trans "General Inquiry" %}</option>
|
|
<option value="appointment">{% trans "Appointments" %}</option>
|
|
<option value="billing">{% trans "Billing & Insurance" %}</option>
|
|
<option value="medical_records">{% trans "Medical Records" %}</option>
|
|
<option value="pharmacy">{% trans "Pharmacy" %}</option>
|
|
<option value="insurance">{% trans "Insurance" %}</option>
|
|
<option value="feedback">{% trans "Feedback" %}</option>
|
|
<option value="other">{% trans "Other" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Subject -->
|
|
<div class="mb-5">
|
|
<label for="inquiry_subject" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Subject" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" id="inquiry_subject" name="subject" maxlength="200" required
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition form-input"
|
|
placeholder="{% trans 'Brief subject of your inquiry' %}">
|
|
</div>
|
|
|
|
<!-- Message -->
|
|
<div class="mb-6">
|
|
<label for="inquiry_message" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Message" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<textarea id="inquiry_message" name="message" rows="6" required
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition resize-none form-input"
|
|
placeholder="{% trans 'Please describe your inquiry in detail...' %}"></textarea>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="text-center pt-6 border-t border-slate-100">
|
|
<button type="submit" id="inquirySubmitBtn"
|
|
class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-10 py-4 rounded-xl font-bold hover:shadow-xl transition inline-flex items-center gap-2 shadow-lg shadow-blue/30 btn-hover">
|
|
<i data-lucide="send" class="w-5 h-5"></i>
|
|
{% trans "Submit Inquiry" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
<script>
|
|
const CURRENT_LANG = '{{ LANGUAGE_CODE }}';
|
|
function localizedLabel(o) { if (!o) return ''; if (CURRENT_LANG === 'ar' && o.name_ar) return o.name_ar; return o.name_en || o.name || o.display_name || ''; }
|
|
|
|
// Hospital -> Location Type -> Area -> Department -> Section cascade for inquiry form
|
|
(function() {
|
|
var hospitalSel = document.getElementById('inquiry_hospital');
|
|
var locationTypeSel = document.getElementById('inquiry_location_type');
|
|
var areaSel = document.getElementById('inquiry_area');
|
|
var deptSel = document.getElementById('inquiry_department');
|
|
var sectionSel = document.getElementById('inquiry_section');
|
|
var areaContainer = document.getElementById('inquiry_area_container');
|
|
var deptContainer = document.getElementById('inquiry_dept_container');
|
|
var sectionContainer = document.getElementById('inquiry_section_container');
|
|
|
|
function loadAreas(hospitalId, locationType) {
|
|
areaSel.innerHTML = '<option value="">{% trans "Select Area (optional)" %}</option>';
|
|
if (!hospitalId) { areaContainer.style.display = 'none'; return; }
|
|
var url = '/organizations/dropdowns/areas/?hospital=' + encodeURIComponent(hospitalId);
|
|
if (locationType) url += '&location_type=' + encodeURIComponent(locationType);
|
|
fetch(url)
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
(data || []).forEach(function(a) {
|
|
var opt = document.createElement('option');
|
|
opt.value = a.id;
|
|
opt.textContent = localizedLabel(a);
|
|
areaSel.appendChild(opt);
|
|
});
|
|
areaContainer.style.display = (data && data.length) ? 'block' : 'none';
|
|
})
|
|
.catch(function(err) { console.error(err); });
|
|
}
|
|
|
|
locationTypeSel.addEventListener('change', function() {
|
|
loadAreas(hospitalSel.value, this.value);
|
|
});
|
|
|
|
hospitalSel.addEventListener('change', function() {
|
|
loadAreas(this.value, locationTypeSel.value);
|
|
deptSel.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
|
|
sectionSel.innerHTML = '<option value="">{% trans "Select Section" %}</option>';
|
|
sectionContainer.style.display = 'none';
|
|
if (!this.value) { deptContainer.style.display = 'none'; return; }
|
|
fetch('/organizations/dropdowns/departments-by-category/?hospital=' + encodeURIComponent(this.value))
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
(data || []).forEach(function(d) {
|
|
var opt = document.createElement('option');
|
|
opt.value = d.id;
|
|
opt.textContent = localizedLabel(d);
|
|
deptSel.appendChild(opt);
|
|
});
|
|
deptContainer.style.display = (data && data.length) ? 'grid' : 'none';
|
|
})
|
|
.catch(function(err) { console.error(err); });
|
|
});
|
|
|
|
deptSel.addEventListener('change', function() {
|
|
sectionSel.innerHTML = '<option value="">{% trans "Select Section" %}</option>';
|
|
if (!this.value) { sectionContainer.style.display = 'none'; return; }
|
|
fetch('/organizations/dropdowns/sections/' + this.value + '/')
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
(data || []).forEach(function(s) {
|
|
var opt = document.createElement('option');
|
|
opt.value = s.id;
|
|
opt.textContent = localizedLabel(s);
|
|
sectionSel.appendChild(opt);
|
|
});
|
|
sectionContainer.style.display = (data && data.length) ? 'block' : 'none';
|
|
})
|
|
.catch(function(err) { console.error(err); });
|
|
});
|
|
})();
|
|
|
|
// Inquiry form submission handler
|
|
document.getElementById('inquiryForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const submitBtn = document.getElementById('inquirySubmitBtn');
|
|
const originalHTML = submitBtn.innerHTML;
|
|
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<span class="inline-block w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>{% trans "Submitting..." %}';
|
|
|
|
const formData = new FormData(this);
|
|
|
|
fetch('{% url "inquiries:public_inquiry_submit" %}', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name="csrfmiddlewaretoken"]').value
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: '{% trans "Submitted Successfully!" %}',
|
|
html: '{% trans "Your reference number is: " %}<br><strong class="text-2xl text-navy mt-2">' + data.reference_number + '</strong>',
|
|
confirmButtonColor: '#005696'
|
|
});
|
|
}
|
|
this.reset();
|
|
} else {
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: '{% trans "Error" %}',
|
|
text: data.message || '{% trans "Failed to submit. Please try again." %}'
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: '{% trans "Error" %}',
|
|
text: '{% trans "Failed to submit. Please try again." %}'
|
|
});
|
|
}
|
|
})
|
|
.finally(() => {
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = originalHTML;
|
|
});
|
|
});
|
|
</script>
|