@php
    $p = $payslip ?? null;
    $val = fn($f, $d = '') => old($f, $p->$f ?? $d);
@endphp
<div class="row">
    <div class="col-lg-6">
        <div class="card mb-3"><div class="card-header pb-0"><h6 class="mb-0">Gross Earning</h6></div>
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-6"><label class="form-label text-xs">Basic Salary</label><input type="number" step="0.01" name="basic_salary" value="{{ $val('basic_salary', $staff->basic_rate ?? 0) }}" class="form-control form-control-sm calc"></div>
                    <div class="col-3"><label class="form-label text-xs">Work Days</label><input type="number" step="0.01" name="working_days" value="{{ $val('working_days') }}" class="form-control form-control-sm"></div>
                    <div class="col-3"><label class="form-label text-xs">/ Divisor</label><input type="number" name="days_divisor" value="{{ $val('days_divisor', 26) }}" class="form-control form-control-sm"></div>
                    <div class="col-3"><label class="form-label text-xs">Units</label><input type="number" step="0.01" name="working_units" value="{{ $val('working_units') }}" class="form-control form-control-sm"></div>
                    <div class="col-3"><label class="form-label text-xs">AL (RM)</label><input type="number" step="0.01" name="al_amount" value="{{ $val('al_amount') }}" class="form-control form-control-sm calc"></div>
                    <div class="col-3"><label class="form-label text-xs">UL days</label><input type="number" step="0.01" name="ul_amount" value="{{ $val('ul_amount') }}" class="form-control form-control-sm"></div>
                    <div class="col-3"></div>
                    <div class="col-4"><label class="form-label text-xs">OT Hours</label><input type="number" step="0.01" name="ot_hours" value="{{ $val('ot_hours') }}" class="form-control form-control-sm"></div>
                    <div class="col-4"><label class="form-label text-xs">OT Days</label><input type="number" step="0.01" name="ot_days" value="{{ $val('ot_days') }}" class="form-control form-control-sm"></div>
                    <div class="col-4"><label class="form-label text-xs">OT Amount</label><input type="number" step="0.01" name="ot_amount" value="{{ $val('ot_amount') }}" class="form-control form-control-sm calc"></div>
                    <div class="col-4"><label class="form-label text-xs">PH/Sun Hours</label><input type="number" step="0.01" name="ph_hours" value="{{ $val('ph_hours') }}" class="form-control form-control-sm"></div>
                    <div class="col-4"><label class="form-label text-xs">PH/Sun Days</label><input type="number" step="0.01" name="ph_days" value="{{ $val('ph_days') }}" class="form-control form-control-sm"></div>
                    <div class="col-4"><label class="form-label text-xs">PH/Sun Amount</label><input type="number" step="0.01" name="ph_amount" value="{{ $val('ph_amount') }}" class="form-control form-control-sm calc"></div>
                </div>
            </div>
        </div>

        <div class="card"><div class="card-header pb-0 d-flex justify-content-between align-items-center"><h6 class="mb-0">Allowances</h6>
            <button type="button" class="btn btn-sm btn-outline-primary mb-0 py-1" onclick="addLine('alw')"><i class="bi bi-plus"></i></button></div>
            <div class="card-body"><div id="alw-lines">
                @foreach(old('alw_label', $p ? $p->allowanceLines->pluck('label')->toArray() : []) as $i => $lbl)
                    <div class="row g-2 mb-2 line-row">
                        <div class="col-7"><input name="alw_label[]" value="{{ $lbl }}" class="form-control form-control-sm" placeholder="Label"></div>
                        <div class="col-4"><input name="alw_amount[]" value="{{ old('alw_amount.'.$i, $p?->allowanceLines[$i]->amount ?? '') }}" type="number" step="0.01" class="form-control form-control-sm calc" placeholder="0.00"></div>
                        <div class="col-1"><button type="button" class="btn btn-link text-danger p-0" onclick="this.closest('.line-row').remove();recalc()"><i class="bi bi-x-lg"></i></button></div>
                    </div>
                @endforeach
            </div></div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card mb-3"><div class="card-header pb-0"><h6 class="mb-0">Statutory & Fixed Deductions</h6></div>
            <div class="card-body"><div class="row g-2">
                @foreach(['epf_employee'=>'EPF','socso_employee'=>'SOCSO','eis_employee'=>'EIS','income_tax_pcb'=>'PCB','income_tax_cp38'=>'CP38','unpaid_leave'=>'Unpaid Leave','advance'=>'Advance','loan'=>'Loan'] as $f=>$lbl)
                    <div class="col-6"><label class="form-label text-xs">{{ $lbl }}</label><input type="number" step="0.01" name="{{ $f }}" value="{{ $val($f) }}" class="form-control form-control-sm calc"></div>
                @endforeach
            </div></div>
        </div>

        <div class="card mb-3"><div class="card-header pb-0 d-flex justify-content-between align-items-center"><h6 class="mb-0">Other Deductions</h6>
            <button type="button" class="btn btn-sm btn-outline-primary mb-0 py-1" onclick="addLine('ded')"><i class="bi bi-plus"></i></button></div>
            <div class="card-body"><div id="ded-lines">
                @foreach(old('ded_label', $p ? $p->deductionLines->pluck('label')->toArray() : []) as $i => $lbl)
                    <div class="row g-2 mb-2 line-row">
                        <div class="col-7"><input name="ded_label[]" value="{{ $lbl }}" class="form-control form-control-sm" placeholder="Label (e.g. Uniform)"></div>
                        <div class="col-4"><input name="ded_amount[]" value="{{ old('ded_amount.'.$i, $p?->deductionLines[$i]->amount ?? '') }}" type="number" step="0.01" class="form-control form-control-sm calc" placeholder="0.00"></div>
                        <div class="col-1"><button type="button" class="btn btn-link text-danger p-0" onclick="this.closest('.line-row').remove();recalc()"><i class="bi bi-x-lg"></i></button></div>
                    </div>
                @endforeach
            </div></div>
        </div>

        <div class="card bg-gray-100"><div class="card-body py-3">
            <div class="d-flex justify-content-between"><span class="text-sm">Total Earning</span><span class="font-weight-bold" id="sum-earn">0.00</span></div>
            <div class="d-flex justify-content-between"><span class="text-sm">Total Deductions</span><span class="font-weight-bold" id="sum-ded">0.00</span></div>
            <hr class="horizontal dark my-2">
            <div class="d-flex justify-content-between h6"><span>NETT PAY</span><span class="text-primary" id="sum-net">0.00</span></div>
        </div></div>
    </div>
</div>

@push('scripts')
<script>
function addLine(kind){
    const wrap = document.getElementById(kind+'-lines');
    const row = document.createElement('div');
    row.className = 'row g-2 mb-2 line-row';
    row.innerHTML = `<div class="col-7"><input name="${kind}_label[]" class="form-control form-control-sm" placeholder="Label"></div>
        <div class="col-4"><input name="${kind}_amount[]" type="number" step="0.01" class="form-control form-control-sm calc" placeholder="0.00"></div>
        <div class="col-1"><button type="button" class="btn btn-link text-danger p-0" onclick="this.closest('.line-row').remove();recalc()"><i class="bi bi-x-lg"></i></button></div>`;
    wrap.appendChild(row);
    row.querySelector('.calc').addEventListener('input', recalc);
}
function num(n){ return parseFloat(n)||0; }
function recalc(){
    const g = (name)=>num(document.querySelector(`[name="${name}"]`)?.value);
    let earn = g('basic_salary')+g('ot_amount')+g('ph_amount')+g('al_amount');
    document.querySelectorAll('[name="alw_amount[]"]').forEach(e=>earn+=num(e.value));
    let ded = g('epf_employee')+g('socso_employee')+g('eis_employee')+g('income_tax_pcb')+g('income_tax_cp38')+g('unpaid_leave')+g('advance')+g('loan');
    document.querySelectorAll('[name="ded_amount[]"]').forEach(e=>ded+=num(e.value));
    document.getElementById('sum-earn').textContent = earn.toFixed(2);
    document.getElementById('sum-ded').textContent = ded.toFixed(2);
    document.getElementById('sum-net').textContent = (earn-ded).toFixed(2);
}
document.addEventListener('input', e=>{ if(e.target.classList.contains('calc')) recalc(); });
document.addEventListener('DOMContentLoaded', recalc);
</script>
@endpush