527 lines
24 KiB
HTML
527 lines
24 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Emergency Contact Details - Patients{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'patients:patient_list' %}">Patients</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'patients:patient_detail' object.patient.pk %}">{{ object.patient.get_full_name }}</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'patients:emergency_contact_list' %}">Emergency Contacts</a></li>
|
|
<li class="breadcrumb-item active">{{ object.name }}</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">
|
|
Emergency Contact Details
|
|
<small>{{ object.name }}</small>
|
|
</h1>
|
|
<!-- END page-header -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-8">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Contact Information</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="{% url 'patients:emergency_contact_update' object.pk %}" class="btn btn-xs btn-primary me-2">
|
|
<i class="fa fa-edit"></i> Edit
|
|
</a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="fw-bold" width="150">Full Name:</td>
|
|
<td>{{ object.name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Relationship:</td>
|
|
<td>
|
|
<span class="badge bg-primary">{{ object.get_relationship_display }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Priority:</td>
|
|
<td>
|
|
{% if object.is_primary %}
|
|
<span class="badge bg-warning">
|
|
<i class="fa fa-star me-1"></i>Primary Contact
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">Secondary Contact</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Phone Number:</td>
|
|
<td>
|
|
{% if object.phone_number %}
|
|
<a href="tel:{{ object.phone_number }}" class="text-decoration-none">
|
|
<i class="fa fa-phone me-2"></i>{{ object.phone_number }}
|
|
</a>
|
|
<button type="button" class="btn btn-xs btn-outline-primary ms-2" onclick="callContact('{{ object.phone_number }}')">
|
|
<i class="fa fa-phone"></i> Call
|
|
</button>
|
|
{% else %}
|
|
<span class="text-muted">Not provided</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Email:</td>
|
|
<td>
|
|
{% if object.email %}
|
|
<a href="mailto:{{ object.email }}" class="text-decoration-none">
|
|
<i class="fa fa-envelope me-2"></i>{{ object.email }}
|
|
</a>
|
|
{% else %}
|
|
<span class="text-muted">Not provided</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Address:</td>
|
|
<td>
|
|
{% if object.address %}
|
|
{{ object.address|linebreaks }}
|
|
{% else %}
|
|
<span class="text-muted">Not provided</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="fw-bold" width="150">Patient:</td>
|
|
<td>
|
|
<a href="{% url 'patients:patient_detail' object.patient.pk %}" class="text-decoration-none">
|
|
{{ object.patient.get_full_name }}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Patient ID:</td>
|
|
<td><code>{{ object.patient.patient_id }}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Can Make Decisions:</td>
|
|
<td>
|
|
{% if object.can_make_medical_decisions %}
|
|
<span class="badge bg-success">
|
|
<i class="fa fa-check me-1"></i>Yes
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-danger">
|
|
<i class="fa fa-times me-1"></i>No
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Emergency Only:</td>
|
|
<td>
|
|
{% if object.emergency_only %}
|
|
<span class="badge bg-warning">
|
|
<i class="fa fa-exclamation-triangle me-1"></i>Emergency Only
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-info">General Contact</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Created:</td>
|
|
<td>{{ object.created_at|date:"M d, Y H:i" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Last Updated:</td>
|
|
<td>{{ object.updated_at|date:"M d, Y H:i" }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{% if object.notes %}
|
|
<div class="mt-4">
|
|
<h6 class="border-bottom pb-2">Additional Notes</h6>
|
|
<div class="bg-light p-3 rounded">
|
|
{{ object.notes|linebreaks }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Contact History</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="contact-history">
|
|
<div class="timeline">
|
|
<!-- Contact history will be loaded here -->
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker bg-primary"></div>
|
|
<div class="timeline-content">
|
|
<h6 class="timeline-title">Contact Added</h6>
|
|
<p class="timeline-description">Emergency contact was added to patient record</p>
|
|
<small class="text-muted">{{ object.created_at|date:"M d, Y H:i" }}</small>
|
|
</div>
|
|
</div>
|
|
{% if object.updated_at != object.created_at %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker bg-info"></div>
|
|
<div class="timeline-content">
|
|
<h6 class="timeline-title">Contact Updated</h6>
|
|
<p class="timeline-description">Contact information was modified</p>
|
|
<small class="text-muted">{{ object.updated_at|date:"M d, Y H:i" }}</small>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
|
|
<div class="col-xl-4">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Quick Actions</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="d-grid gap-2">
|
|
{% if object.phone_number %}
|
|
<button type="button" class="btn btn-success" onclick="callContact('{{ object.phone_number }}')">
|
|
<i class="fa fa-phone me-2"></i>Call Contact
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if object.email %}
|
|
<a href="mailto:{{ object.email }}" class="btn btn-info">
|
|
<i class="fa fa-envelope me-2"></i>Send Email
|
|
</a>
|
|
{% endif %}
|
|
|
|
<a href="{% url 'patients:emergency_contact_update' object.pk %}" class="btn btn-primary">
|
|
<i class="fa fa-edit me-2"></i>Edit Contact
|
|
</a>
|
|
|
|
<button type="button" class="btn btn-warning" onclick="verifyContact()">
|
|
<i class="fa fa-check-circle me-2"></i>Verify Contact
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-secondary" onclick="printContact()">
|
|
<i class="fa fa-print me-2"></i>Print Details
|
|
</button>
|
|
|
|
<a href="{% url 'patients:emergency_contact_delete' object.pk %}" class="btn btn-outline-danger">
|
|
<i class="fa fa-trash me-2"></i>Delete Contact
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Patient Information</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="text-center mb-3">
|
|
<div class="w-80px h-80px bg-primary rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2">
|
|
<i class="fa fa-user fa-2x text-white"></i>
|
|
</div>
|
|
<h6 class="mb-1">{{ object.patient.get_full_name }}</h6>
|
|
<small class="text-muted">{{ object.patient.patient_id }}</small>
|
|
</div>
|
|
|
|
<table class="table table-borderless table-sm">
|
|
<tr>
|
|
<td class="fw-bold" width="80">DOB:</td>
|
|
<td>{{ object.patient.date_of_birth|date:"M d, Y" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Age:</td>
|
|
<td>{{ object.patient.age }} years</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Gender:</td>
|
|
<td>{{ object.patient.get_gender_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Phone:</td>
|
|
<td>
|
|
{% if object.patient.phone_number %}
|
|
<a href="tel:{{ object.patient.phone_number }}" class="text-decoration-none">
|
|
{{ object.patient.phone_number }}
|
|
</a>
|
|
{% else %}
|
|
<span class="text-muted">Not provided</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="d-grid">
|
|
<a href="{% url 'patients:patient_detail' object.patient.pk %}" class="btn btn-outline-primary btn-sm">
|
|
<i class="fa fa-user me-2"></i>View Patient
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Other Emergency Contacts</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="other-contacts">
|
|
{% for contact in object.patient.emergency_contacts.all %}
|
|
{% if contact.pk != object.pk %}
|
|
<div class="d-flex align-items-center mb-2 p-2 border rounded">
|
|
<div class="flex-fill">
|
|
<div class="fw-bold">{{ contact.name }}</div>
|
|
<small class="text-muted">{{ contact.get_relationship_display }}</small>
|
|
{% if contact.is_primary %}
|
|
<span class="badge bg-warning ms-1">Primary</span>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
{% if contact.phone_number %}
|
|
<a href="tel:{{ contact.phone_number }}" class="btn btn-xs btn-outline-success">
|
|
<i class="fa fa-phone"></i>
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'patients:emergency_contact_detail' contact.pk %}" class="btn btn-xs btn-outline-primary">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% empty %}
|
|
<p class="text-muted text-center">No other emergency contacts</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="d-grid mt-3">
|
|
<a href="{% url 'patients:emergency_contact_create' %}?patient={{ object.patient.pk }}" class="btn btn-outline-primary btn-sm">
|
|
<i class="fa fa-plus me-2"></i>Add Contact
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Contact Validation</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="alert alert-info">
|
|
<h6 class="alert-heading">Validation Status</h6>
|
|
<ul class="mb-0 small">
|
|
<li class="{% if object.phone_number %}text-success{% else %}text-danger{% endif %}">
|
|
<i class="fa fa-{% if object.phone_number %}check{% else %}times{% endif %} me-1"></i>
|
|
Phone Number
|
|
</li>
|
|
<li class="{% if object.email %}text-success{% else %}text-warning{% endif %}">
|
|
<i class="fa fa-{% if object.email %}check{% else %}exclamation-triangle{% endif %} me-1"></i>
|
|
Email Address
|
|
</li>
|
|
<li class="{% if object.address %}text-success{% else %}text-warning{% endif %}">
|
|
<i class="fa fa-{% if object.address %}check{% else %}exclamation-triangle{% endif %} me-1"></i>
|
|
Physical Address
|
|
</li>
|
|
<li class="{% if object.can_make_medical_decisions %}text-info{% else %}text-muted{% endif %}">
|
|
<i class="fa fa-{% if object.can_make_medical_decisions %}user-md{% else %}user{% endif %} me-1"></i>
|
|
Medical Decision Authority
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<small class="text-muted">Last verified: Never</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Call Contact Modal -->
|
|
<div class="modal fade" id="callContactModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Call Emergency Contact</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="text-center">
|
|
<i class="fa fa-phone fa-3x text-success mb-3"></i>
|
|
<h6>Calling {{ object.name }}</h6>
|
|
<p class="text-muted">{{ object.phone_number }}</p>
|
|
<p class="small">This will initiate a call through your system's phone integration.</p>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" onclick="initiateCall()">
|
|
<i class="fa fa-phone me-2"></i>Call Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verify Contact Modal -->
|
|
<div class="modal fade" id="verifyContactModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Verify Contact Information</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="verify-form">
|
|
<div class="mb-3">
|
|
<label class="form-label">Verification Method</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="verification_method" value="phone" id="verify-phone">
|
|
<label class="form-check-label" for="verify-phone">
|
|
Phone Call Verification
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="verification_method" value="email" id="verify-email">
|
|
<label class="form-check-label" for="verify-email">
|
|
Email Verification
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="verification_method" value="in_person" id="verify-person">
|
|
<label class="form-check-label" for="verify-person">
|
|
In-Person Verification
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Verification Notes</label>
|
|
<textarea class="form-control" name="verification_notes" rows="3" placeholder="Enter verification details..."></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-warning" onclick="saveVerification()">
|
|
<i class="fa fa-check-circle me-2"></i>Mark as Verified
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
function callContact(phoneNumber) {
|
|
$('#callContactModal').modal('show');
|
|
}
|
|
|
|
function initiateCall() {
|
|
// Integrate with phone system
|
|
toastr.info('Initiating call to {{ object.name }}...');
|
|
$('#callContactModal').modal('hide');
|
|
|
|
// Log the call attempt
|
|
$.ajax({
|
|
url: '{% url "patients:log_contact_attempt" object.pk %}',
|
|
method: 'POST',
|
|
data: {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}',
|
|
'contact_type': 'phone',
|
|
'phone_number': '{{ object.phone_number }}'
|
|
},
|
|
success: function(response) {
|
|
toastr.success('Call logged successfully');
|
|
}
|
|
});
|
|
}
|
|
|
|
function verifyContact() {
|
|
$('#verifyContactModal').modal('show');
|
|
}
|
|
|
|
function saveVerification() {
|
|
var method = $('input[name="verification_method"]:checked').val();
|
|
var notes = $('textarea[name="verification_notes"]').val();
|
|
|
|
if (!method) {
|
|
toastr.error('Please select a verification method');
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '{% url "patients:verify_contact" object.pk %}',
|
|
method: 'POST',
|
|
data: {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}',
|
|
'verification_method': method,
|
|
'verification_notes': notes
|
|
},
|
|
success: function(response) {
|
|
toastr.success('Contact verification saved');
|
|
$('#verifyContactModal').modal('hide');
|
|
location.reload();
|
|
},
|
|
error: function() {
|
|
toastr.error('Failed to save verification');
|
|
}
|
|
});
|
|
}
|
|
|
|
function printContact() {
|
|
window.print();
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
// Auto-refresh contact history every 30 seconds
|
|
setInterval(function() {
|
|
loadContactHistory();
|
|
}, 30000);
|
|
});
|
|
|
|
function loadContactHistory() {
|
|
$.ajax({
|
|
url: '{% url "patients:contact_history" object.pk %}',
|
|
method: 'GET',
|
|
success: function(response) {
|
|
if (response.html) {
|
|
$('#contact-history').html(response.html);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|