519 lines
20 KiB
HTML
519 lines
20 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Payment Receipt - {{ payment_details.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>Payment Receipt</h4>
|
|
<h6>Receipt Number: {{ payment_details.receipt_number }}</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<a href="{% url 'billing:payment_detail' payment_details.payment.pk %}" class="btn btn-secondary me-2">
|
|
<i class="fas fa-arrow-left me-1"></i>Back to Payment
|
|
</a>
|
|
<button class="btn btn-primary me-2" onclick="printReceipt()">
|
|
<i class="fas fa-print me-1"></i>Print Receipt
|
|
</button>
|
|
<button class="btn btn-outline-secondary" onclick="downloadReceipt()">
|
|
<i class="fas fa-download me-1"></i>Download PDF
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Receipt Container -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="card receipt-card" id="receiptContent">
|
|
<div class="card-body">
|
|
<!-- Hospital Header -->
|
|
<div class="receipt-header text-center mb-4">
|
|
<div class="hospital-logo mb-3">
|
|
<i class="fas fa-hospital fa-3x text-primary"></i>
|
|
</div>
|
|
<h3 class="hospital-name">{{ hospital_info.name }}</h3>
|
|
{% if hospital_info.address %}
|
|
<p class="hospital-address mb-1">{{ hospital_info.address }}</p>
|
|
{% endif %}
|
|
<div class="hospital-contact">
|
|
{% if hospital_info.phone %}
|
|
<span class="me-3"><i class="fas fa-phone me-1"></i>{{ hospital_info.phone }}</span>
|
|
{% endif %}
|
|
{% if hospital_info.email %}
|
|
<span class="me-3"><i class="fas fa-envelope me-1"></i>{{ hospital_info.email }}</span>
|
|
{% endif %}
|
|
{% if hospital_info.website %}
|
|
<span><i class="fas fa-globe me-1"></i>{{ hospital_info.website }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<hr class="my-4">
|
|
<h4 class="receipt-title">PAYMENT RECEIPT</h4>
|
|
</div>
|
|
|
|
<!-- Receipt Details -->
|
|
<div class="receipt-details mb-4">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="detail-section">
|
|
<h6 class="section-title">Receipt Information</h6>
|
|
<table class="table table-borderless table-sm">
|
|
<tr>
|
|
<td class="detail-label">Receipt Number:</td>
|
|
<td class="detail-value fw-bold">{{ payment_details.receipt_number }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="detail-label">Payment Date:</td>
|
|
<td class="detail-value">{{ payment_details.payment_date|date:"M d, Y H:i" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="detail-label">Print Date:</td>
|
|
<td class="detail-value">{{ print_date|date:"M d, Y H:i" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="detail-label">Processed By:</td>
|
|
<td class="detail-value">{{ payment_details.processed_by.get_full_name|default:payment_details.processed_by.username }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="detail-section">
|
|
<h6 class="section-title">Patient Information</h6>
|
|
<table class="table table-borderless table-sm">
|
|
<tr>
|
|
<td class="detail-label">Patient Name:</td>
|
|
<td class="detail-value fw-bold">{{ payment_details.patient.get_full_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="detail-label">Patient ID:</td>
|
|
<td class="detail-value">{{ payment_details.patient.patient_id|default:payment_details.patient.pk }}</td>
|
|
</tr>
|
|
{% if payment_details.patient.phone %}
|
|
<tr>
|
|
<td class="detail-label">Phone:</td>
|
|
<td class="detail-value">{{ payment_details.patient.phone }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if payment_details.patient.email %}
|
|
<tr>
|
|
<td class="detail-label">Email:</td>
|
|
<td class="detail-value">{{ payment_details.patient.email }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bill Information -->
|
|
<div class="bill-information mb-4">
|
|
<h6 class="section-title">Bill Information</h6>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless table-sm">
|
|
<tr>
|
|
<td class="detail-label">Bill Number:</td>
|
|
<td class="detail-value fw-bold">{{ payment_details.bill.bill_number }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="detail-label">Bill Date:</td>
|
|
<td class="detail-value">{{ payment_details.bill.bill_date|date:"M d, Y" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="detail-label">Due Date:</td>
|
|
<td class="detail-value">{{ payment_details.bill.due_date|date:"M d, Y"|default:"N/A" }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless table-sm">
|
|
<tr>
|
|
<td class="detail-label">Total Bill Amount:</td>
|
|
<td class="detail-value">${{ payment_details.bill.total_amount|floatformat:2 }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="detail-label">Previous Payments:</td>
|
|
<td class="detail-value">${{ payment_details.bill.paid_amount|add:payment_details.amount_paid|floatformat:2|default:"0.00" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="detail-label">Remaining Balance:</td>
|
|
<td class="detail-value fw-bold text-primary">${{ payment_details.balance_after_payment|floatformat:2 }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Details -->
|
|
<div class="payment-details mb-4">
|
|
<h6 class="section-title">Payment Details</h6>
|
|
<div class="payment-summary">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<table class="table table-borderless table-sm">
|
|
<tr>
|
|
<td class="detail-label">Payment Method:</td>
|
|
<td class="detail-value">
|
|
<span class="badge bg-info">{{ payment_details.payment_method }}</span>
|
|
</td>
|
|
</tr>
|
|
{% if payment_details.reference_number %}
|
|
<tr>
|
|
<td class="detail-label">Reference Number:</td>
|
|
<td class="detail-value fw-bold">{{ payment_details.reference_number }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if payment_details.notes %}
|
|
<tr>
|
|
<td class="detail-label">Notes:</td>
|
|
<td class="detail-value">{{ payment_details.notes }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
</table>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="amount-paid text-center">
|
|
<div class="amount-label">Amount Paid</div>
|
|
<div class="amount-value">${{ payment_details.amount_paid|floatformat:2 }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Status -->
|
|
<div class="payment-status mb-4">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="status-card text-center">
|
|
<div class="status-icon">
|
|
<i class="fas fa-check-circle fa-3x text-success"></i>
|
|
</div>
|
|
<h5 class="status-text text-success mt-2">Payment Received Successfully</h5>
|
|
<p class="status-description text-muted">
|
|
Thank you for your payment. This receipt serves as proof of payment.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="receipt-footer">
|
|
<hr class="my-4">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="footer-section">
|
|
<h6>Important Notes:</h6>
|
|
<ul class="list-unstyled small text-muted">
|
|
<li>• Please keep this receipt for your records</li>
|
|
<li>• This is a computer-generated receipt</li>
|
|
<li>• For any queries, contact our billing department</li>
|
|
{% if payment_details.balance_after_payment > 0 %}
|
|
<li>• Outstanding balance: ${{ payment_details.balance_after_payment|floatformat:2 }}</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="footer-section text-end">
|
|
<div class="signature-section">
|
|
<div class="signature-line"></div>
|
|
<p class="signature-label small text-muted">Authorized Signature</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-4">
|
|
<small class="text-muted">
|
|
Generated on {{ print_date|date:"M d, Y \a\t H:i" }} |
|
|
Receipt ID: {{ payment_details.receipt_number }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function printReceipt() {
|
|
// Hide non-printable elements
|
|
const pageHeader = document.querySelector('.page-header');
|
|
const originalDisplay = pageHeader.style.display;
|
|
pageHeader.style.display = 'none';
|
|
|
|
// Print the page
|
|
window.print();
|
|
|
|
// Restore elements
|
|
pageHeader.style.display = originalDisplay;
|
|
}
|
|
|
|
function downloadReceipt() {
|
|
// Generate PDF download
|
|
const receiptContent = document.getElementById('receiptContent');
|
|
const receiptNumber = '{{ payment_details.receipt_number }}';
|
|
|
|
// For now, open print dialog - can be enhanced with PDF generation
|
|
alert('PDF download functionality will be implemented. For now, please use Print and save as PDF.');
|
|
printReceipt();
|
|
}
|
|
|
|
// Auto-print functionality (optional)
|
|
function autoPrint() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.get('print') === 'true') {
|
|
setTimeout(printReceipt, 1000);
|
|
}
|
|
}
|
|
|
|
// Initialize
|
|
$(document).ready(function() {
|
|
autoPrint();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.receipt-card {
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.1);
|
|
border: none;
|
|
}
|
|
|
|
.receipt-header {
|
|
border-bottom: 2px solid #e9ecef;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.hospital-name {
|
|
color: #2c3e50;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.hospital-address {
|
|
color: #6c757d;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.hospital-contact {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.receipt-title {
|
|
color: #2c3e50;
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.section-title {
|
|
color: #2c3e50;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid #e9ecef;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.detail-section {
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.detail-label {
|
|
color: #6c757d;
|
|
font-weight: 500;
|
|
width: 40%;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.detail-value {
|
|
color: #2c3e50;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.bill-information {
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
|
|
.payment-details {
|
|
background-color: #e8f5e8;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
|
|
.amount-paid {
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border: 2px solid #28a745;
|
|
}
|
|
|
|
.amount-label {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.amount-value {
|
|
color: #28a745;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.status-card {
|
|
background-color: #f8f9fa;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.status-text {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-description {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.receipt-footer {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.footer-section h6 {
|
|
color: #2c3e50;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.signature-section {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.signature-line {
|
|
border-bottom: 1px solid #6c757d;
|
|
width: 200px;
|
|
margin: 0 auto 10px auto;
|
|
}
|
|
|
|
.signature-label {
|
|
color: #6c757d;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
.page-header,
|
|
.btn,
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
.receipt-card {
|
|
box-shadow: none;
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
.content {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.container-fluid {
|
|
padding: 0;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.hospital-name {
|
|
color: #000;
|
|
}
|
|
|
|
.receipt-title {
|
|
color: #000;
|
|
}
|
|
|
|
.section-title {
|
|
color: #000;
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
|
|
.detail-label,
|
|
.detail-value {
|
|
color: #000;
|
|
}
|
|
|
|
.amount-value {
|
|
color: #000;
|
|
}
|
|
|
|
.status-text {
|
|
color: #000;
|
|
}
|
|
|
|
.badge {
|
|
border: 1px solid #000;
|
|
color: #000 !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Ensure proper page breaks */
|
|
.receipt-card {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.detail-section,
|
|
.bill-information,
|
|
.payment-details {
|
|
background-color: transparent !important;
|
|
border: 1px solid #ccc;
|
|
}
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 768px) {
|
|
.hospital-contact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.amount-paid {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.signature-section {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.signature-line {
|
|
width: 150px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|