@php $patient = $patient ?? null; @endphp
<div class="col-6 col-md-3">
    <label class="form-label">Patient Fee <span class="text-danger">*</span></label>
    <input type="number" step="0.01" min="0" name="patient_fee" id="patient_fee" value="{{ old('patient_fee', optional($patient)->patient_fee ?? 0) }}" class="form-control @error('patient_fee') is-invalid @enderror" required>
    @error('patient_fee')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="col-6 col-md-3">
    <label class="form-label">Received Fee <span class="text-danger">*</span></label>
    <input type="number" step="0.01" min="0" name="received_fee" id="received_fee" value="{{ old('received_fee', optional($patient)->received_fee ?? 0) }}" class="form-control @error('received_fee') is-invalid @enderror" required>
    @error('received_fee')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="col-12 col-md-3">
    <label class="form-label">Balance Type <span class="text-danger">*</span></label>
    <select name="balance_type" id="balance_type" class="form-select" required>
        <option value="remaining" @selected(old('balance_type', optional($patient)->balance_type ?? 'remaining')==='remaining')>Remaining Fee (pay later)</option>
        <option value="discount" @selected(old('balance_type', optional($patient)->balance_type)==='discount')>Discount Fee (waived)</option>
    </select>
</div>
<div class="col-6 col-md-3">
    <label class="form-label">Remaining Fee</label>
    <input type="text" id="remaining_fee" class="form-control bg-light" value="{{ old('remaining_fee', optional($patient)->remaining_fee ?? 0) }}" readonly>
</div>
<div class="col-6 col-md-3">
    <label class="form-label">Discount Fee</label>
    <input type="text" id="discount_fee" class="form-control bg-light" value="{{ old('discount_fee', optional($patient)->discount_fee ?? 0) }}" readonly>
</div>

<script>
(function () {
    var pf = document.getElementById('patient_fee'),
        rf = document.getElementById('received_fee'),
        bt = document.getElementById('balance_type'),
        rem = document.getElementById('remaining_fee'),
        dis = document.getElementById('discount_fee');
    function recalc() {
        var balance = (parseFloat(pf.value) || 0) - (parseFloat(rf.value) || 0);
        if (balance < 0) balance = 0;
        if (bt.value === 'discount') { dis.value = balance.toFixed(2); rem.value = '0.00'; }
        else { rem.value = balance.toFixed(2); dis.value = '0.00'; }
    }
    if (pf && rf && bt) {
        [pf, rf].forEach(function (el) { el.addEventListener('input', recalc); });
        bt.addEventListener('change', recalc);
        recalc();
    }
})();
</script>