220 lines
10 KiB
HTML
220 lines
10 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "New Inquiry" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-0">{% trans "New Inquiry" %}</h1>
|
|
<p class="text-muted">{% trans "Create a new patient inquiry" %}</p>
|
|
</div>
|
|
<div>
|
|
<a href="{% url 'complaints:inquiry_list' %}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> {% trans "Back to List" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="m-0 font-weight-bold">{% trans "Inquiry Information" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
|
|
<!-- Hospital Selection -->
|
|
<div class="mb-3">
|
|
<label class="form-label">{% trans "Hospital" %} <span class="text-danger">*</span></label>
|
|
<select name="hospital_id" class="form-select" required id="hospital-select">
|
|
<option value="">{% trans "Select Hospital" %}</option>
|
|
{% for hospital in hospitals %}
|
|
<option value="{{ hospital.id }}">{{ hospital.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Department Selection -->
|
|
<div class="mb-3">
|
|
<label class="form-label">{% trans "Department" %}</label>
|
|
<select name="department_id" class="form-select" id="department-select">
|
|
<option value="">{% trans "Select Department" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Patient Search -->
|
|
<div class="mb-3">
|
|
<label class="form-label">{% trans "Patient" %} ({% trans "Optional" %})</label>
|
|
<input type="text" class="form-control" id="patient-search" placeholder="{% trans 'Search by MRN or name...' %}">
|
|
<input type="hidden" name="patient_id" id="patient-id">
|
|
<div id="patient-results" class="list-group mt-2" style="display: none;"></div>
|
|
<div id="selected-patient" class="alert alert-info mt-2" style="display: none;"></div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<!-- Contact Information (if no patient) -->
|
|
<h6 class="mb-3">{% trans "Contact Information" %} ({% trans "if not a registered patient" %})</h6>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">{% trans "Contact Name" %}</label>
|
|
<input type="text" name="contact_name" class="form-control">
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">{% trans "Contact Phone" %}</label>
|
|
<input type="tel" name="contact_phone" class="form-control">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">{% trans "Contact Email" %}</label>
|
|
<input type="email" name="contact_email" class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<!-- Inquiry Details -->
|
|
<h6 class="mb-3">{% trans "Inquiry Details" %}</h6>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">{% trans "Category" %} <span class="text-danger">*</span></label>
|
|
<select name="category" class="form-select" required>
|
|
<option value="">{% trans "Select Category" %}</option>
|
|
<option value="appointment">{% trans "Appointment" %}</option>
|
|
<option value="billing">{% trans "Billing" %}</option>
|
|
<option value="medical_records">{% trans "Medical Records" %}</option>
|
|
<option value="general">{% trans "General Information" %}</option>
|
|
<option value="other">{% trans "Other" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">{% trans "Subject" %} <span class="text-danger">*</span></label>
|
|
<input type="text" name="subject" class="form-control" required maxlength="500">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">{% trans "Message" %} <span class="text-danger">*</span></label>
|
|
<textarea name="message" class="form-control" rows="6" required></textarea>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end">
|
|
<a href="{% url 'complaints:inquiry_list' %}" class="btn btn-secondary me-2">{% trans "Cancel" %}</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> {% trans "Create Inquiry" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="m-0 font-weight-bold">{% trans "Help" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="small">{% trans "Use this form to create a new inquiry from a patient or visitor." %}</p>
|
|
<p class="small">{% trans "If the inquiry is from a registered patient, search and select them. Otherwise, provide contact information." %}</p>
|
|
<p class="small text-muted">{% trans "Fields marked with * are required." %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Department loading
|
|
document.getElementById('hospital-select').addEventListener('change', function() {
|
|
const hospitalId = this.value;
|
|
const departmentSelect = document.getElementById('department-select');
|
|
|
|
if (!hospitalId) {
|
|
departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
|
|
return;
|
|
}
|
|
|
|
fetch(`/complaints/ajax/departments/?hospital_id=${hospitalId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
|
|
data.departments.forEach(dept => {
|
|
const option = document.createElement('option');
|
|
option.value = dept.id;
|
|
option.textContent = dept.name;
|
|
departmentSelect.appendChild(option);
|
|
});
|
|
});
|
|
});
|
|
|
|
// Patient search
|
|
let searchTimeout;
|
|
document.getElementById('patient-search').addEventListener('input', function() {
|
|
const query = this.value;
|
|
const resultsDiv = document.getElementById('patient-results');
|
|
|
|
clearTimeout(searchTimeout);
|
|
|
|
if (query.length < 2) {
|
|
resultsDiv.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
searchTimeout = setTimeout(() => {
|
|
fetch(`/complaints/ajax/search-patients/?q=${encodeURIComponent(query)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.patients.length === 0) {
|
|
resultsDiv.innerHTML = '<div class="list-group-item">{% trans "No patients found" %}</div>';
|
|
resultsDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
resultsDiv.innerHTML = '';
|
|
data.patients.forEach(patient => {
|
|
const item = document.createElement('a');
|
|
item.href = '#';
|
|
item.className = 'list-group-item list-group-item-action';
|
|
item.innerHTML = `
|
|
<strong>${patient.name}</strong><br>
|
|
<small>MRN: ${patient.mrn} | ${patient.phone || ''} | ${patient.email || ''}</small>
|
|
`;
|
|
item.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
selectPatient(patient);
|
|
});
|
|
resultsDiv.appendChild(item);
|
|
});
|
|
resultsDiv.style.display = 'block';
|
|
});
|
|
}, 300);
|
|
});
|
|
|
|
function selectPatient(patient) {
|
|
document.getElementById('patient-id').value = patient.id;
|
|
document.getElementById('patient-search').value = '';
|
|
document.getElementById('patient-results').style.display = 'none';
|
|
|
|
const selectedDiv = document.getElementById('selected-patient');
|
|
selectedDiv.innerHTML = `
|
|
<strong>{% trans "Selected Patient" %}:</strong> ${patient.name}<br>
|
|
<small>MRN: ${patient.mrn}</small>
|
|
<button type="button" class="btn btn-sm btn-link" onclick="clearPatient()">{% trans "Clear" %}</button>
|
|
`;
|
|
selectedDiv.style.display = 'block';
|
|
}
|
|
|
|
function clearPatient() {
|
|
document.getElementById('patient-id').value = '';
|
|
document.getElementById('selected-patient').style.display = 'none';
|
|
}
|
|
</script>
|
|
{% endblock %}
|