445 lines
18 KiB
HTML
445 lines
18 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Send Payment Email - {{ receipt_number }} - Hospital Management{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4>Send Payment Confirmation Email</h4>
|
|
<h6>Receipt Number: {{ receipt_number }}</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<a href="{% url 'billing:payment_detail' payment.pk %}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left me-1"></i>Back to Payment
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<!-- Payment Information -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-info-circle me-2"></i>Payment Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="info-group">
|
|
<label class="form-label">Patient Name:</label>
|
|
<p class="fw-bold">{{ patient.get_full_name }}</p>
|
|
</div>
|
|
<div class="info-group">
|
|
<label class="form-label">Bill Number:</label>
|
|
<p>{{ bill.bill_number }}</p>
|
|
</div>
|
|
<div class="info-group">
|
|
<label class="form-label">Payment Date:</label>
|
|
<p>{{ payment.payment_date|date:"M d, Y H:i" }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="info-group">
|
|
<label class="form-label">Receipt Number:</label>
|
|
<p class="fw-bold">{{ receipt_number }}</p>
|
|
</div>
|
|
<div class="info-group">
|
|
<label class="form-label">Amount Paid:</label>
|
|
<p class="fw-bold text-success">${{ payment.amount|floatformat:2 }}</p>
|
|
</div>
|
|
<div class="info-group">
|
|
<label class="form-label">Payment Method:</label>
|
|
<p><span class="badge bg-info">{{ payment.get_payment_method_display }}</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Form -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-envelope me-2"></i>Email Details
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" id="emailForm">
|
|
{% csrf_token %}
|
|
|
|
<!-- Primary Recipient -->
|
|
<div class="form-group mb-3">
|
|
<label class="form-label">Primary Recipient:</label>
|
|
{% if patient.email %}
|
|
<div class="recipient-info">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-user me-2 text-primary"></i>
|
|
<div>
|
|
<strong>{{ patient.get_full_name }}</strong>
|
|
<br>
|
|
<span class="text-muted">{{ patient.email }}</span>
|
|
</div>
|
|
<span class="badge bg-success ms-auto">Primary</span>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-warning">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
Patient email not found. Please add additional email addresses below.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Additional Recipients -->
|
|
<div class="form-group mb-3">
|
|
<label for="additional_emails" class="form-label">
|
|
Additional Recipients (optional):
|
|
</label>
|
|
<textarea class="form-control" id="additional_emails" name="additional_emails"
|
|
rows="3" placeholder="Enter additional email addresses separated by commas Example: family@email.com, guardian@email.com"></textarea>
|
|
<div class="form-text">
|
|
<i class="fas fa-info-circle me-1"></i>
|
|
Separate multiple email addresses with commas
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Preview -->
|
|
<div class="form-group mb-4">
|
|
<label class="form-label">Email Preview:</label>
|
|
<div class="email-preview">
|
|
<div class="email-header">
|
|
<div class="email-field">
|
|
<strong>Subject:</strong> Payment Confirmation - Receipt #{{ receipt_number }}
|
|
</div>
|
|
<div class="email-field">
|
|
<strong>From:</strong> {{ hospital_info.name|default:"Hospital" }} <{{ hospital_info.email|default:"noreply@hospital.com" }}>
|
|
</div>
|
|
<div class="email-field">
|
|
<strong>To:</strong>
|
|
<span id="recipientPreview">
|
|
{% if patient.email %}{{ patient.email }}{% else %}No primary email{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="email-content">
|
|
<h6>Email Content Preview:</h6>
|
|
<div class="preview-content">
|
|
<p><strong>Dear {{ patient.get_full_name }},</strong></p>
|
|
<p>Thank you for your payment. This email confirms that we have received your payment of <strong>${{ payment.amount|floatformat:2 }}</strong> for bill #{{ bill.bill_number }}.</p>
|
|
<p>Your payment receipt is attached to this email and can also be viewed online.</p>
|
|
<p>If you have any questions, please contact our billing department.</p>
|
|
<p>Best regards,<br>{{ hospital_info.name|default:"Hospital" }} Billing Department</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Options -->
|
|
<div class="form-group mb-4">
|
|
<label class="form-label">Email Options:</label>
|
|
<div class="email-options">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="includeReceipt" checked disabled>
|
|
<label class="form-check-label" for="includeReceipt">
|
|
<i class="fas fa-file-pdf me-1"></i>Include receipt link
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="sendCopy">
|
|
<label class="form-check-label" for="sendCopy">
|
|
<i class="fas fa-copy me-1"></i>Send copy to billing department
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{% url 'billing:payment_detail' payment.pk %}" class="btn btn-secondary">
|
|
<i class="fas fa-times me-1"></i>Cancel
|
|
</a>
|
|
<div>
|
|
<button type="button" class="btn btn-outline-primary me-2" onclick="previewEmail()">
|
|
<i class="fas fa-eye me-1"></i>Preview Email
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" id="sendButton">
|
|
<i class="fas fa-paper-plane me-1"></i>Send Email
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Preview Modal -->
|
|
<div class="modal fade" id="emailPreviewModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-envelope me-2"></i>Email Preview
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="emailPreviewContent">
|
|
<!-- Email preview will be loaded here -->
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary" onclick="sendEmailFromPreview()">
|
|
<i class="fas fa-paper-plane me-1"></i>Send Email
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Update recipient preview when additional emails are added
|
|
$('#additional_emails').on('input', function() {
|
|
updateRecipientPreview();
|
|
});
|
|
|
|
// Form validation
|
|
$('#emailForm').on('submit', function(e) {
|
|
const primaryEmail = '{{ patient.email|default:"" }}';
|
|
const additionalEmails = $('#additional_emails').val().trim();
|
|
|
|
if (!primaryEmail && !additionalEmails) {
|
|
e.preventDefault();
|
|
alert('Please provide at least one email address.');
|
|
$('#additional_emails').focus();
|
|
return false;
|
|
}
|
|
|
|
// Validate additional email format
|
|
if (additionalEmails) {
|
|
const emails = additionalEmails.split(',').map(email => email.trim());
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
|
for (let email of emails) {
|
|
if (email && !emailRegex.test(email)) {
|
|
e.preventDefault();
|
|
alert(`Invalid email format: ${email}`);
|
|
$('#additional_emails').focus();
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Show loading state
|
|
$('#sendButton').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Sending...');
|
|
});
|
|
});
|
|
|
|
function updateRecipientPreview() {
|
|
const primaryEmail = '{{ patient.email|default:"" }}';
|
|
const additionalEmails = $('#additional_emails').val().trim();
|
|
|
|
let recipients = [];
|
|
if (primaryEmail) {
|
|
recipients.push(primaryEmail);
|
|
}
|
|
if (additionalEmails) {
|
|
const additional = additionalEmails.split(',').map(email => email.trim()).filter(email => email);
|
|
recipients = recipients.concat(additional);
|
|
}
|
|
|
|
const preview = recipients.length > 0 ? recipients.join(', ') : 'No recipients';
|
|
$('#recipientPreview').text(preview);
|
|
}
|
|
|
|
function previewEmail() {
|
|
// Load email preview in modal
|
|
const previewContent = `
|
|
<div class="email-preview-full">
|
|
<div class="email-header-full">
|
|
<table class="table table-borderless table-sm">
|
|
<tr>
|
|
<td class="fw-bold" style="width: 80px;">Subject:</td>
|
|
<td>Payment Confirmation - Receipt #{{ receipt_number }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">From:</td>
|
|
<td>{{ hospital_info.name|default:"Hospital" }} <{{ hospital_info.email|default:"noreply@hospital.com" }}></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">To:</td>
|
|
<td id="modalRecipientList">${$('#recipientPreview').text()}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Date:</td>
|
|
<td>${new Date().toLocaleString()}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<hr>
|
|
<div class="email-body-full">
|
|
<p><strong>Dear {{ patient.get_full_name }},</strong></p>
|
|
|
|
<p>Thank you for your payment. This email confirms that we have received your payment of <strong>${{ payment.amount|floatformat:2 }}</strong> for bill #{{ bill.bill_number }}.</p>
|
|
|
|
<div class="payment-summary" style="background-color: #f8f9fa; padding: 15px; border-radius: 5px; margin: 20px 0;">
|
|
<h6>Payment Summary:</h6>
|
|
<ul style="margin-bottom: 0;">
|
|
<li>Receipt Number: <strong>{{ receipt_number }}</strong></li>
|
|
<li>Payment Date: <strong>{{ payment.payment_date|date:"M d, Y H:i" }}</strong></li>
|
|
<li>Amount Paid: <strong>${{ payment.amount|floatformat:2 }}</strong></li>
|
|
<li>Payment Method: <strong>{{ payment.get_payment_method_display }}</strong></li>
|
|
<li>Remaining Balance: <strong>${{ bill.balance_amount|floatformat:2 }}</strong></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p>Your payment receipt can be viewed online at: <a href="#">View Receipt</a></p>
|
|
|
|
<p>If you have any questions about this payment or your account, please contact our billing department at {{ hospital_info.phone|default:"(555) 123-4567" }} or email {{ hospital_info.email|default:"billing@hospital.com" }}.</p>
|
|
|
|
<p>Thank you for choosing {{ hospital_info.name|default:"our hospital" }} for your healthcare needs.</p>
|
|
|
|
<p>Best regards,<br>
|
|
<strong>{{ hospital_info.name|default:"Hospital" }} Billing Department</strong></p>
|
|
|
|
<hr style="margin-top: 30px;">
|
|
<small style="color: #6c757d;">
|
|
This is an automated message. Please do not reply to this email.<br>
|
|
{{ hospital_info.name|default:"Hospital" }} | {{ hospital_info.address|default:"Hospital Address" }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
$('#emailPreviewContent').html(previewContent);
|
|
$('#emailPreviewModal').modal('show');
|
|
}
|
|
|
|
function sendEmailFromPreview() {
|
|
$('#emailPreviewModal').modal('hide');
|
|
$('#emailForm').submit();
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.info-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.info-group .form-label {
|
|
font-weight: 600;
|
|
color: #495057;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.info-group p {
|
|
margin-bottom: 0;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.recipient-info {
|
|
background-color: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.email-preview {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.email-header {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.email-field {
|
|
margin-bottom: 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.email-content {
|
|
border-top: 1px solid #e9ecef;
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.preview-content {
|
|
background-color: white;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
border: 1px solid #e9ecef;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.email-options {
|
|
background-color: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.email-options .form-check {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.email-options .form-check:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.email-preview-full {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.email-header-full {
|
|
background-color: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.email-body-full {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.payment-summary {
|
|
background-color: #e8f5e8 !important;
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 768px) {
|
|
.email-preview {
|
|
padding: 15px;
|
|
}
|
|
|
|
.preview-content {
|
|
padding: 10px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.email-field {
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|