165 lines
8.0 KiB
HTML
165 lines
8.0 KiB
HTML
{% load i18n %}
|
|
|
|
<!-- Inquiry Form - PX360 Styled -->
|
|
<div class="inquiry-form" id="inquiryFormContainer">
|
|
<form id="inquiryForm">
|
|
{% 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.name }}</option>
|
|
{% endfor %}
|
|
</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="services">{% trans "Services Information" %}</option>
|
|
<option value="appointments">{% trans "Appointments" %}</option>
|
|
<option value="billing">{% trans "Billing & Insurance" %}</option>
|
|
<option value="medical">{% trans "Medical Records" %}</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>
|
|
|
|
<script>
|
|
// 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('/core/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>
|