@php 
    $isReadOnly = !empty($order->PAYMENT_PAID_TIME) || in_array($order->ORDER_STATUS_ID, [-1, -2, -3]);
    // Add a helper class for easier JS targeting if needed
    $readOnlyClass = $isReadOnly ? 'insurance-read-only' : ''; 
@endphp
<div class="insurance-section-container {{ $readOnlyClass }}" data-read-only="{{ $isReadOnly ? 'true' : 'false' }}">
    <div class="row mb-4">
        <div class="col-12">
            <div class="card insurance-section" style="border: 1px solid #ECEDF2; border-radius: 30px; box-shadow: 0px 2px 30px 0px #0000000F; background: white;">
                <div class="card-header" style="background: #F9FAFB; border-top-left-radius: 30px; border-top-right-radius: 30px; padding: 20px 30px; border-bottom: 1px solid #ECEDF2;">
                    <h5 class="mb-0 left-actions-title">
                        <i class="fa fa-shield-alt mr-2"></i> Insurance Information
                    </h5>
                </div>
                <div class="card-body" style="padding: 30px;">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="insurance_id" class="information">Insurance Provider</label>
                                <select id="insurance_id" name="insurance_id" class="form-control select2" {{ $isReadOnly ? 'disabled' : '' }}>
                                    <option value="">Select Insurance Provider</option>
                                </select>
                                <div class="invalid-feedback">Please select an insurance provider</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="policy_number" class="information">Policy Number</label>
                                <input type="text" id="policy_number" name="policy_number" class="form-control" placeholder="Enter patient's policy number" value="{{ $order->POLICY_NUMBER ?? '' }}" {{ $isReadOnly ? 'disabled' : '' }}>
                                <div class="invalid-feedback">Please enter a policy number</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row insurance-details-section" style="display: none;">
                        <div class="col-md-12">
                            <div class="row d-flex justify-content-between mb-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-info" style="background: #F4F6F9 !important; width: 50px; height: 50px; top: 15px; left: 30px; border-radius: 11px;">
                                        <i class="fa fa-check-circle" style="color: #BA395F;"></i>
                                    </span>
                                    <div class="info-box-content">
                                        <span class="info-box-number mb-1" id="coverage-policy-name" style="font-size: 16px; font-weight: 400; line-height: 19px; color: #101828;"></span>
                                        <span class="info-box-text" style="font-size: 16px; font-weight: 400; line-height: 19px; color: #757897;">Coverage Policy</span>
                                    </div>
                                </div>
                                
                                <div class="info-box">
                                    <span class="info-box-icon bg-info" style="background: #F4F6F9 !important; width: 50px; height: 50px; top: 15px; left: 30px; border-radius: 11px;">
                                        <i class="fa fa-percentage" style="color: #BA395F;"></i>
                                    </span>
                                    <div class="info-box-content">
                                        <span class="info-box-number mb-1" style="font-size: 16px; font-weight: 400; line-height: 19px; color: #101828;"><span id="coverage-percentage"></span>%</span>
                                        <span class="info-box-text" style="font-size: 16px; font-weight: 400; line-height: 19px; color: #757897;">Coverage Percentage</span>
                                    </div>
                                </div>
                                
                                <div class="info-box">
                                    <span class="info-box-icon bg-info" style="background: #F4F6F9 !important; width: 50px; height: 50px; top: 15px; left: 30px; border-radius: 11px;">
                                        <i class="fa fa-coins" style="color: #BA395F;"></i>
                                    </span>
                                    <div class="info-box-content">
                                        <span class="info-box-number mb-1" style="font-size: 16px; font-weight: 400; line-height: 19px; color: #101828;"><span id="fixed-copay-amount"></span> SAR</span>
                                        <span class="info-box-text" style="font-size: 16px; font-weight: 400; line-height: 19px; color: #757897;">Fixed Co-Pay</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-12">
            <div class="card test-coverage-section" style="display: none; border: 1px solid #ECEDF2; border-radius: 30px; box-shadow: 0px 2px 30px 0px #0000000F; background: white;">
                <div class="card-header" style="background: #F9FAFB; border-top-left-radius: 30px; border-top-right-radius: 30px; padding: 20px 30px; border-bottom: 1px solid #ECEDF2;">
                    <h5 class="mb-0 left-actions-title">
                        <i class="fa fa-list-check mr-2"></i> Test Coverage Details
                    </h5>
                </div>
                <div class="card-body" style="padding: 30px;">
                    <div class="table-responsive">
                        <table class="table">
                            <thead style="background-color: #BA395F;">
                                <tr>
                                    <th class="text-white">Test Name</th>
                                    <th class="text-white">Original Price</th>
                                    <th class="text-white">Coverage Status</th>
                                    <th class="text-white">Approval Required</th>
                                    <th class="text-white">Approval Number</th>
                                    <th class="text-white">Document</th>
                                    <th class="text-white">Patient Portion</th>
                                    <th class="text-white">Insurance Portion</th>
                                    <th class="text-white">Exclude from Insurance</th>
                                </tr>
                            </thead>
                            <tbody id="test-coverage-list">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-12">
            <div class="card insurance-documents-section" style="display: none; border: 1px solid #ECEDF2; border-radius: 30px; box-shadow: 0px 2px 30px 0px #0000000F; background: white;">
                <div class="card-header" style="background: #F9FAFB; border-top-left-radius: 30px; border-top-right-radius: 30px; padding: 20px 30px; border-bottom: 1px solid #ECEDF2;">
                    <h5 class="mb-0 left-actions-title">
                        <i class="fas fa-folder-open mr-2"></i> Insurance Documents (Patient General)
                    </h5>
                </div>
                <div class="card-body" style="padding: 20px 30px;">
                    <div id="insurance-documents-list">
                        <div class="text-muted text-center py-3">No documents found.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-12">
            <div class="card cost-calculation-section" style="display: none; border: 1px solid #ECEDF2; border-radius: 30px; box-shadow: 0px 2px 30px 0px #0000000F; background: white;">
                <div class="card-header" style="background: #F9FAFB; border-top-left-radius: 30px; border-top-right-radius: 30px; padding: 20px 30px; border-bottom: 1px solid #ECEDF2;">
                    <h5 class="mb-0 left-actions-title">
                        <i class="fa fa-calculator mr-2"></i> Summary Insurance Calculation
                    </h5>
                </div>
                <div class="card-body" style="padding: 30px;">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="information">Total Order Amount</label>
                                <div class="currency-input">
                                    <div class="currency-prefix">SAR</div>
                                    <input type="text" id="total-order-amount" class="form-control" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="information">Total Covered Amount (without fixed co-pay)</label>
                                <div class="currency-input">
                                    <div class="currency-prefix">SAR</div>
                                    <input type="text" id="total-covered-amount" class="form-control" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="information">Total Patient Responsibility</label>
                                <div class="currency-input">
                                    <div class="currency-prefix">SAR</div>
                                    <input type="text" id="total-patient-responsibility" class="form-control" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="information">Total Insurance Coverage</label>
                                <div class="currency-input">
                                    <div class="currency-prefix">SAR</div>
                                    <input type="text" id="total-insurance-coverage" class="form-control" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12 text-right">
                            <button type="button" id="save-insurance" class="btn btn-info rounded-pill px-4 py-2" {{ $isReadOnly ? 'disabled' : '' }}>
                                <i class="fas fa-save mr-1"></i> Save Insurance Information
                            </button>
                            <button type="button" id="clear-insurance" class="btn btn-secondary ml-2 rounded-pill px-4 py-2" {{ $isReadOnly ? 'disabled' : '' }}>
                                <i class="fas fa-times mr-1"></i> Clear
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="coverage-details"></div>
</div>