@extends('layouts.app')
@section('title','Edit Payroll')
@section('page-title','Edit Payroll Batch')
@section('content')
<div class="card stat-card"><div class="card-header bg-white border-0 pt-3 px-3 d-flex justify-content-between">
  <span class="fw-semibold"><i class="bi bi-pencil me-2"></i>Edit: {{ $payroll->batch_number }} — {{ $payroll->work_date->format('d M Y') }}</span>
  <span class="badge bg-warning text-dark">{{ $payroll->status_meta['label'] }}</span>
</div><div class="card-body">
<form method="POST" action="{{ route('payroll.update',$payroll) }}">@csrf @method('PUT')
  <div class="mb-3"><label class="form-label">Notes</label><input name="submission_notes" class="form-control" value="{{ $payroll->submission_notes }}"></div>
  <div class="table-responsive"><table class="table table-bordered" id="workerTable">
    <thead class="table-light"><tr><th>Name</th><th>Role</th><th>Attendance</th><th>Daily Rate (GH&#8373;)</th><th class="text-center">Amount Due</th><th>Notes</th><th></th></tr></thead>
    <tbody id="workerBody">
      @foreach($payroll->entries as $i => $e)
      <tr class="worker-row" id="row_{{ $i }}">
        <td><input type="hidden" name="workers[{{ $i }}][staff_id]" value="{{ $e->staff_id }}"><input type="text" name="workers[{{ $i }}][worker_name]" class="form-control form-control-sm" value="{{ $e->worker_name }}" required></td>
        <td><input type="text" name="workers[{{ $i }}][role]" class="form-control form-control-sm" list="roleList" value="{{ $e->role }}" required></td>
        <td><select name="workers[{{ $i }}][attendance]" class="form-select form-select-sm" onchange="recalc({{ $i }})"><option value="full_day" {{ $e->attendance==='full_day'?'selected':'' }}>Full Day</option><option value="half_day" {{ $e->attendance==='half_day'?'selected':'' }}>Half Day</option><option value="overtime" {{ $e->attendance==='overtime'?'selected':'' }}>Overtime</option></select></td>
        <td><input type="number" name="workers[{{ $i }}][daily_rate]" class="form-control form-control-sm" step="0.01" value="{{ $e->daily_rate }}" oninput="recalc({{ $i }})" required></td>
        <td class="text-center"><span id="total_{{ $i }}">{{ number_format($e->amount_due,2) }}</span></td>
        <td><input type="text" name="workers[{{ $i }}][notes]" class="form-control form-control-sm" value="{{ $e->notes }}"></td>
        <td><button type="button" class="btn btn-xs btn-outline-danger" onclick="removeRow('row_{{ $i }}')" style="padding:.15rem .4rem"><i class="bi bi-trash"></i></button></td>
      </tr>
      @endforeach
    </tbody>
    <tfoot class="table-light"><tr><td colspan="4" class="text-end fw-bold">TOTAL:</td><td class="text-center fw-bold text-success" id="grandTotal">{{ number_format($payroll->total_amount,2) }}</td><td colspan="2"><button type="button" class="btn btn-sm btn-primary" onclick="addRow()"><i class="bi bi-plus-lg"></i></button></td></tr></tfoot>
  </table></div>
  <div class="d-flex gap-2 mt-3">
    <button type="submit" class="btn btn-primary">Save Changes</button>
    <a href="{{ route('payroll.show',$payroll) }}" class="btn btn-outline-secondary">Cancel</a>
  </div>
</form></div></div>
@endsection
@push('scripts')
<script>
let rowIdx={{ $payroll->entries->count() }};
const M={full_day:1,half_day:.5,overtime:1.5};
function recalc(i){const r=parseFloat(document.querySelector(`[name="workers[${i}][daily_rate]"]`)?.value)||0,a=document.querySelector(`[name="workers[${i}][attendance]"]`)?.value||'full_day',e=document.getElementById(`total_${i}`);if(e)e.textContent=(r*(M[a]||1)).toFixed(2);updateGrand();}
function updateGrand(){let t=0;document.querySelectorAll('[id^="total_"]').forEach(e=>t+=parseFloat(e.textContent)||0);document.getElementById('grandTotal').textContent=t.toFixed(2);}
function addRow(){const i=rowIdx++;document.getElementById('workerBody').insertAdjacentHTML('beforeend',`<tr class="worker-row" id="row_${i}"><td><input type="hidden" name="workers[${i}][staff_id]" value=""><input type="text" name="workers[${i}][worker_name]" class="form-control form-control-sm" required></td><td><input type="text" name="workers[${i}][role]" class="form-control form-control-sm" list="roleList" required></td><td><select name="workers[${i}][attendance]" class="form-select form-select-sm" onchange="recalc(${i})"><option value="full_day">Full Day</option><option value="half_day">Half Day</option><option value="overtime">Overtime</option></select></td><td><input type="number" name="workers[${i}][daily_rate]" class="form-control form-control-sm" step="0.01" oninput="recalc(${i})" required></td><td class="text-center"><span id="total_${i}">0.00</span></td><td><input type="text" name="workers[${i}][notes]" class="form-control form-control-sm"></td><td><button type="button" class="btn btn-xs btn-outline-danger" onclick="removeRow('row_${i}')" style="padding:.15rem .4rem"><i class="bi bi-trash"></i></button></td></tr>`);}
function removeRow(id){document.getElementById(id)?.remove();updateGrand();}
</script>
<datalist id="roleList"><option>Mason</option><option>Laborer</option><option>Carpenter</option><option>Foreman</option><option>Steel Bender</option><option>Plumber</option><option>Electrician</option><option>Tiler</option><option>Painter</option><option>Welder</option><option>General Worker</option></datalist>
@endpush