{% 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 %}