312 lines
17 KiB
HTML
312 lines
17 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Create Medical Bill - Billing{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="h3 mb-0">Create Medical Bill</h1>
|
|
<a href="{% url 'billing:bill_list' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left"></i> Back to Bills
|
|
</a>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Bill Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" id="billForm">
|
|
{% csrf_token %}
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="patient" class="form-label">Patient <span class="text-danger">*</span></label>
|
|
<select name="patient" id="patient" class="form-select" required>
|
|
<option value="">Select Patient</option>
|
|
<!-- Patients will be loaded via AJAX or server-side -->
|
|
</select>
|
|
<div class="form-text">Search and select the patient for this bill</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="bill_type" class="form-label">Bill Type <span class="text-danger">*</span></label>
|
|
<select name="bill_type" id="bill_type" class="form-select" required>
|
|
<option value="">Select Bill Type</option>
|
|
<option value="INPATIENT">Inpatient</option>
|
|
<option value="OUTPATIENT">Outpatient</option>
|
|
<option value="EMERGENCY">Emergency</option>
|
|
<option value="SURGERY">Surgery</option>
|
|
<option value="LABORATORY">Laboratory</option>
|
|
<option value="RADIOLOGY">Radiology</option>
|
|
<option value="PHARMACY">Pharmacy</option>
|
|
<option value="PROFESSIONAL">Professional Services</option>
|
|
<option value="FACILITY">Facility Charges</option>
|
|
<option value="ANCILLARY">Ancillary Services</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="service_date_from" class="form-label">Service Date From <span class="text-danger">*</span></label>
|
|
<input type="date" name="service_date_from" id="service_date_from" class="form-control" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="service_date_to" class="form-label">Service Date To <span class="text-danger">*</span></label>
|
|
<input type="date" name="service_date_to" id="service_date_to" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="attending_provider" class="form-label">Attending Provider</label>
|
|
<select name="attending_provider" id="attending_provider" class="form-select">
|
|
<option value="">Select Attending Provider</option>
|
|
<!-- Providers will be loaded via AJAX or server-side -->
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="billing_provider" class="form-label">Billing Provider</label>
|
|
<select name="billing_provider" id="billing_provider" class="form-select">
|
|
<option value="">Select Billing Provider</option>
|
|
<!-- Providers will be loaded via AJAX or server-side -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="encounter" class="form-label">Related Encounter</label>
|
|
<select name="encounter" id="encounter" class="form-select">
|
|
<option value="">Select Encounter (Optional)</option>
|
|
<!-- Encounters will be loaded based on patient selection -->
|
|
</select>
|
|
<div class="form-text">Select if this bill is related to a specific encounter</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="admission" class="form-label">Related Admission</label>
|
|
<select name="admission" id="admission" class="form-select">
|
|
<option value="">Select Admission (Optional)</option>
|
|
<!-- Admissions will be loaded based on patient selection -->
|
|
</select>
|
|
<div class="form-text">Select if this bill is related to an inpatient admission</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="primary_insurance" class="form-label">Primary Insurance</label>
|
|
<select name="primary_insurance" id="primary_insurance" class="form-select">
|
|
<option value="">Select Primary Insurance (Optional)</option>
|
|
<!-- Insurance info will be loaded based on patient selection -->
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="secondary_insurance" class="form-label">Secondary Insurance</label>
|
|
<select name="secondary_insurance" id="secondary_insurance" class="form-select">
|
|
<option value="">Select Secondary Insurance (Optional)</option>
|
|
<!-- Insurance info will be loaded based on patient selection -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="payment_terms" class="form-label">Payment Terms</label>
|
|
<select name="payment_terms" id="payment_terms" class="form-select">
|
|
<option value="NET_30" selected>Net 30 Days</option>
|
|
<option value="NET_60">Net 60 Days</option>
|
|
<option value="NET_90">Net 90 Days</option>
|
|
<option value="IMMEDIATE">Immediate</option>
|
|
<option value="CUSTOM">Custom Terms</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="notes" class="form-label">Notes</label>
|
|
<textarea name="notes" id="notes" class="form-control" rows="3"
|
|
placeholder="Enter any additional notes or comments about this bill..."></textarea>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<a href="{% url 'billing:bill_list' %}" class="btn btn-secondary">Cancel</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> Create Bill
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<!-- Help Information -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-info-circle text-info"></i> Bill Creation Help
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Required Information</h6>
|
|
<ul class="list-unstyled">
|
|
<li><i class="fas fa-check text-success"></i> Patient selection</li>
|
|
<li><i class="fas fa-check text-success"></i> Bill type</li>
|
|
<li><i class="fas fa-check text-success"></i> Service date range</li>
|
|
</ul>
|
|
|
|
<h6 class="mt-3">Bill Types</h6>
|
|
<ul class="list-unstyled small">
|
|
<li><strong>Inpatient:</strong> Hospital stay charges</li>
|
|
<li><strong>Outpatient:</strong> Clinic visit charges</li>
|
|
<li><strong>Emergency:</strong> Emergency department charges</li>
|
|
<li><strong>Surgery:</strong> Surgical procedure charges</li>
|
|
<li><strong>Laboratory:</strong> Lab test charges</li>
|
|
<li><strong>Radiology:</strong> Imaging study charges</li>
|
|
<li><strong>Pharmacy:</strong> Medication charges</li>
|
|
</ul>
|
|
|
|
<h6 class="mt-3">Next Steps</h6>
|
|
<p class="small text-muted">
|
|
After creating the bill, you can add line items for specific services,
|
|
submit insurance claims, and process payments.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Patient Information (will be populated when patient is selected) -->
|
|
<div class="card mt-3" id="patientInfo" style="display: none;">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-user text-primary"></i> Patient Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body" id="patientInfoContent">
|
|
<!-- Patient details will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Set default service dates
|
|
const today = new Date().toISOString().split('T')[0];
|
|
document.getElementById('service_date_from').value = today;
|
|
document.getElementById('service_date_to').value = today;
|
|
|
|
// Patient selection change handler
|
|
document.getElementById('patient').addEventListener('change', function() {
|
|
const patientId = this.value;
|
|
if (patientId) {
|
|
loadPatientInfo(patientId);
|
|
loadPatientEncounters(patientId);
|
|
loadPatientAdmissions(patientId);
|
|
loadPatientInsurance(patientId);
|
|
} else {
|
|
hidePatientInfo();
|
|
}
|
|
});
|
|
|
|
// Service date validation
|
|
document.getElementById('service_date_from').addEventListener('change', function() {
|
|
const fromDate = this.value;
|
|
const toDateField = document.getElementById('service_date_to');
|
|
if (fromDate && toDateField.value < fromDate) {
|
|
toDateField.value = fromDate;
|
|
}
|
|
});
|
|
|
|
document.getElementById('service_date_to').addEventListener('change', function() {
|
|
const toDate = this.value;
|
|
const fromDateField = document.getElementById('service_date_from');
|
|
if (toDate && fromDateField.value > toDate) {
|
|
fromDateField.value = toDate;
|
|
}
|
|
});
|
|
});
|
|
|
|
function loadPatientInfo(patientId) {
|
|
// This would typically make an AJAX call to get patient information
|
|
// For now, we'll show the patient info card
|
|
document.getElementById('patientInfo').style.display = 'block';
|
|
document.getElementById('patientInfoContent').innerHTML = `
|
|
<div class="text-center">
|
|
<div class="spinner-border spinner-border-sm" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-2 mb-0">Loading patient information...</p>
|
|
</div>
|
|
`;
|
|
|
|
// Simulate loading patient info
|
|
setTimeout(() => {
|
|
document.getElementById('patientInfoContent').innerHTML = `
|
|
<p class="mb-1"><strong>Patient ID:</strong> ${patientId}</p>
|
|
<p class="mb-1"><strong>Status:</strong> <span class="badge bg-success">Active</span></p>
|
|
<p class="mb-0"><small class="text-muted">Patient information loaded successfully</small></p>
|
|
`;
|
|
}, 1000);
|
|
}
|
|
|
|
function hidePatientInfo() {
|
|
document.getElementById('patientInfo').style.display = 'none';
|
|
// Clear dependent dropdowns
|
|
document.getElementById('encounter').innerHTML = '<option value="">Select Encounter (Optional)</option>';
|
|
document.getElementById('admission').innerHTML = '<option value="">Select Admission (Optional)</option>';
|
|
document.getElementById('primary_insurance').innerHTML = '<option value="">Select Primary Insurance (Optional)</option>';
|
|
document.getElementById('secondary_insurance').innerHTML = '<option value="">Select Secondary Insurance (Optional)</option>';
|
|
}
|
|
|
|
function loadPatientEncounters(patientId) {
|
|
// This would typically make an AJAX call to get patient encounters
|
|
// For now, we'll just add a placeholder option
|
|
const encounterSelect = document.getElementById('encounter');
|
|
encounterSelect.innerHTML = '<option value="">Loading encounters...</option>';
|
|
|
|
setTimeout(() => {
|
|
encounterSelect.innerHTML = '<option value="">Select Encounter (Optional)</option>';
|
|
// Add encounter options here
|
|
}, 500);
|
|
}
|
|
|
|
function loadPatientAdmissions(patientId) {
|
|
// This would typically make an AJAX call to get patient admissions
|
|
// For now, we'll just add a placeholder option
|
|
const admissionSelect = document.getElementById('admission');
|
|
admissionSelect.innerHTML = '<option value="">Loading admissions...</option>';
|
|
|
|
setTimeout(() => {
|
|
admissionSelect.innerHTML = '<option value="">Select Admission (Optional)</option>';
|
|
// Add admission options here
|
|
}, 500);
|
|
}
|
|
|
|
function loadPatientInsurance(patientId) {
|
|
// This would typically make an AJAX call to get patient insurance
|
|
// For now, we'll just add placeholder options
|
|
const primarySelect = document.getElementById('primary_insurance');
|
|
const secondarySelect = document.getElementById('secondary_insurance');
|
|
|
|
primarySelect.innerHTML = '<option value="">Loading insurance...</option>';
|
|
secondarySelect.innerHTML = '<option value="">Loading insurance...</option>';
|
|
|
|
setTimeout(() => {
|
|
primarySelect.innerHTML = '<option value="">Select Primary Insurance (Optional)</option>';
|
|
secondarySelect.innerHTML = '<option value="">Select Secondary Insurance (Optional)</option>';
|
|
// Add insurance options here
|
|
}, 500);
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|