hospital-management/templates/operating_theatre/partials/surgical_note_preview_modal.html
Marwan Alwali 610e165e17 update
2025-09-04 19:19:52 +03:00

293 lines
11 KiB
HTML

<!-- Surgical Note Preview Modal Content -->
<div class="modal-header">
<h5 class="modal-title">
<i class="fas fa-eye me-2 text-primary"></i>
Preview Surgical Note
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
<!-- Patient and Case Info -->
<div class="card mb-3">
<div class="card-header bg-primary text-white">
<h6 class="mb-0">
<i class="fas fa-user me-2"></i>
Patient & Case Information
</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<p class="mb-1"><strong>Patient:</strong> {{ surgical_case.patient.get_full_name }}</p>
<p class="mb-1"><strong>MRN:</strong> {{ surgical_case.patient.medical_record_number }}</p>
<p class="mb-1"><strong>DOB:</strong> {{ surgical_case.patient.date_of_birth|date:"M d, Y" }}</p>
</div>
<div class="col-md-6">
<p class="mb-1"><strong>Procedure:</strong> {{ surgical_case.procedure_name }}</p>
<p class="mb-1"><strong>Surgeon:</strong> {{ surgical_case.primary_surgeon.get_full_name }}</p>
<p class="mb-1"><strong>Date:</strong> {{ surgical_case.scheduled_start_time|date:"M d, Y" }}</p>
</div>
</div>
</div>
</div>
<!-- Note Content -->
{% if surgical_note.pre_operative_diagnosis %}
<div class="mb-3">
<h6 class="text-primary">
<i class="fas fa-stethoscope me-2"></i>
Pre-operative Diagnosis
</h6>
<div class="bg-light p-3 rounded">
{{ surgical_note.pre_operative_diagnosis|linebreaks }}
</div>
</div>
{% endif %}
{% if surgical_note.post_operative_diagnosis %}
<div class="mb-3">
<h6 class="text-primary">
<i class="fas fa-clipboard-check me-2"></i>
Post-operative Diagnosis
</h6>
<div class="bg-light p-3 rounded">
{{ surgical_note.post_operative_diagnosis|linebreaks }}
</div>
</div>
{% endif %}
{% if surgical_note.procedure_performed %}
<div class="mb-3">
<h6 class="text-primary">
<i class="fas fa-procedures me-2"></i>
Procedure Performed
</h6>
<div class="bg-light p-3 rounded">
{{ surgical_note.procedure_performed|linebreaks }}
</div>
</div>
{% endif %}
{% if surgical_note.operative_findings %}
<div class="mb-3">
<h6 class="text-primary">
<i class="fas fa-search me-2"></i>
Operative Findings
</h6>
<div class="bg-light p-3 rounded">
{{ surgical_note.operative_findings|linebreaks }}
</div>
</div>
{% endif %}
{% if surgical_note.technique %}
<div class="mb-3">
<h6 class="text-primary">
<i class="fas fa-tools me-2"></i>
Surgical Technique
</h6>
<div class="bg-light p-3 rounded">
{{ surgical_note.technique|linebreaks }}
</div>
</div>
{% endif %}
{% if surgical_note.complications %}
<div class="mb-3">
<h6 class="text-danger">
<i class="fas fa-exclamation-triangle me-2"></i>
Complications
</h6>
<div class="bg-light p-3 rounded border-start border-danger border-3">
{{ surgical_note.complications|linebreaks }}
</div>
</div>
{% endif %}
{% if surgical_note.post_operative_instructions %}
<div class="mb-3">
<h6 class="text-primary">
<i class="fas fa-clipboard-list me-2"></i>
Post-operative Instructions
</h6>
<div class="bg-light p-3 rounded">
{{ surgical_note.post_operative_instructions|linebreaks }}
</div>
</div>
{% endif %}
{% if surgical_note.additional_notes %}
<div class="mb-3">
<h6 class="text-primary">
<i class="fas fa-sticky-note me-2"></i>
Additional Notes
</h6>
<div class="bg-light p-3 rounded">
{{ surgical_note.additional_notes|linebreaks }}
</div>
</div>
{% endif %}
<!-- Equipment Used -->
{% if equipment_usage %}
<div class="mb-3">
<h6 class="text-primary">
<i class="fas fa-cogs me-2"></i>
Equipment Used
</h6>
<div class="row">
{% for equipment in equipment_usage %}
<div class="col-md-6 mb-2">
<div class="card card-body py-2">
<div class="d-flex justify-content-between align-items-center">
<div>
<strong>{{ equipment.equipment_name }}</strong>
{% if equipment.equipment_serial %}
<br><small class="text-muted">S/N: {{ equipment.equipment_serial }}</small>
{% endif %}
</div>
<span class="badge
{% if equipment.status == 'IN_USE' %}bg-success
{% elif equipment.status == 'COMPLETED' %}bg-primary
{% else %}bg-secondary{% endif %}">
{{ equipment.get_status_display }}
</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Signatures -->
<div class="mb-3">
<h6 class="text-primary">
<i class="fas fa-signature me-2"></i>
Electronic Signatures
</h6>
{% if signatures %}
{% for signature in signatures %}
<div class="card mb-2">
<div class="card-body py-2">
<div class="d-flex justify-content-between align-items-center">
<div>
<strong>{{ signature.signed_by.get_full_name }}</strong>
<br>
<small class="text-muted">
<i class="fas fa-check-circle text-success me-1"></i>
Signed on {{ signature.signed_at|date:"M d, Y g:i A" }}
</small>
</div>
<span class="badge bg-success">
<i class="fas fa-certificate me-1"></i>Verified
</span>
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="card">
<div class="card-body text-center py-3">
<i class="fas fa-clock text-warning fa-2x mb-2"></i>
<p class="mb-0"><strong>Awaiting Electronic Signature</strong></p>
<small class="text-muted">This surgical note requires electronic signature.</small>
</div>
</div>
{% endif %}
</div>
<!-- Note Status -->
<div class="card">
<div class="card-header">
<h6 class="mb-0">
<i class="fas fa-info me-2"></i>
Note Status
</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<p class="mb-1"><strong>Status:</strong>
<span class="badge
{% if surgical_note.status == 'DRAFT' %}bg-warning text-dark
{% elif surgical_note.status == 'SIGNED' %}bg-success
{% elif surgical_note.status == 'FINALIZED' %}bg-primary
{% else %}bg-secondary{% endif %}">
{{ surgical_note.get_status_display }}
</span>
</p>
<p class="mb-1"><strong>Created By:</strong> {{ surgical_note.created_by.get_full_name }}</p>
</div>
<div class="col-md-6">
<p class="mb-1"><strong>Created:</strong> {{ surgical_note.created_at|date:"M d, Y g:i A" }}</p>
<p class="mb-1"><strong>Modified:</strong> {{ surgical_note.updated_at|date:"M d, Y g:i A" }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="d-flex w-100 justify-content-between">
<div>
{% if can_edit %}
<a href="{% url 'operating_theatre:surgical_note_detail' surgical_note.pk %}"
class="btn btn-outline-secondary">
<i class="fas fa-edit me-1"></i>Edit Note
</a>
{% endif %}
</div>
<div>
{% if can_sign %}
<button type="button" class="btn btn-success me-2"
onclick="signNoteFromModal({{ surgical_note.pk }})">
<i class="fas fa-signature me-1"></i>Sign Note
</button>
{% endif %}
<a href="{% url 'operating_theatre:surgical_note_preview' surgical_note.pk %}"
class="btn btn-primary me-2" target="_blank">
<i class="fas fa-external-link-alt me-1"></i>Full Preview
</a>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
<i class="fas fa-times me-1"></i>Close
</button>
</div>
</div>
</div>
<script>
function signNoteFromModal(noteId) {
if (confirm('Are you sure you want to sign this surgical note? This action cannot be undone.')) {
fetch(`/operating-theatre/notes/${noteId}/sign/`, {
method: 'POST',
headers: {
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
'Content-Type': 'application/json',
},
body: JSON.stringify({
'signature_type': 'electronic'
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Close modal and refresh parent page
bootstrap.Modal.getInstance(document.querySelector('.modal')).hide();
location.reload();
} else {
alert('Error signing note: ' + (data.error || 'Unknown error'));
}
})
.catch(error => {
console.error('Error:', error);
alert('Error signing note. Please try again.');
});
}
}
</script>