@extends('layouts.app')
@section('title','New Daily Payroll')
@section('page-title','Capture Daily Labour Payroll')
@section('content')
<style>
.worker-row td{vertical-align:middle;padding:.4rem .5rem;}
.worker-row .form-control,.worker-row .form-select{font-size:.85rem;padding:.3rem .5rem;}
.rate-cell{background:#f8fff8;font-weight:600;color:#198754;}
.total-cell{background:#fff8f0;font-weight:700;color:#e07b00;}
</style>
<div class="card stat-card">
  <div class="card-header bg-white border-0 pt-3 px-3 d-flex justify-content-between align-items-center">
    <span class="fw-semibold"><i class="bi bi-people-fill me-2 text-primary"></i>Daily Labour Payroll Entry</span>
    <small class="text-muted">Inventory Officer → Supervisor → PM → CEO → Payment</small>
  </div>
  <div class="card-body">
    <form method="POST" action="{{ route('payroll.store') }}" id="payrollForm">@csrf
      <div class="row g-3 mb-4 pb-3 border-bottom">
        <div class="col-md-5"><label class="form-label">Project *</label><select name="project_id" class="form-select" required><option value="">Select Project</option>@foreach($projects as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach</select></div>
        <div class="col-md-3"><label class="form-label">Work Date *</label><input name="work_date" type="date" class="form-control" value="{{ today()->format('Y-m-d') }}" required></div>
        <div class="col-md-4"><label class="form-label">Notes</label><input name="submission_notes" class="form-control" placeholder="e.g. Foundation work..."></div>
      </div>
      <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.5px">Workers for this Day</span>
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#staffModal"><i class="bi bi-people me-1"></i>Add from Register</button>
          <button type="button" class="btn btn-sm btn-primary" onclick="addRow()"><i class="bi bi-plus-lg me-1"></i>Add Worker</button>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table table-bordered mb-2" id="workerTable">
          <thead class="table-light"><tr><th style="width:22%">Worker Name *</th><th style="width:14%">Role *</th><th style="width:14%">Attendance *</th><th style="width:12%">Daily Rate (GH&#8373;) *</th><th style="width:10%" class="text-center">Amount Due</th><th style="width:20%">Notes</th><th style="width:4%"></th></tr></thead>
          <tbody id="workerBody">
            @foreach($staff as $i => $s)
            <tr class="worker-row" id="row_{{ $i }}">
              <td><input type="hidden" name="workers[{{ $i }}][staff_id]" value="{{ $s->id }}"><input type="text" name="workers[{{ $i }}][worker_name]" class="form-control" value="{{ $s->name }}" readonly style="background:#f8f9fa"></td>
              <td><input type="text" name="workers[{{ $i }}][role]" class="form-control" value="{{ $s->role }}" readonly style="background:#f8f9fa"></td>
              <td><select name="workers[{{ $i }}][attendance]" class="form-select" onchange="recalc({{ $i }})"><option value="full_day">Full Day</option><option value="half_day">Half Day (x0.5)</option><option value="overtime">Overtime (x1.5)</option></select></td>
              <td class="rate-cell"><input type="number" name="workers[{{ $i }}][daily_rate]" class="form-control" step="0.01" value="{{ $s->daily_rate ?? '' }}" oninput="recalc({{ $i }})" required></td>
              <td class="total-cell text-center"><span id="total_{{ $i }}">{{ $s->daily_rate ? number_format($s->daily_rate,2) : '0.00' }}</span></td>
              <td><input type="text" name="workers[{{ $i }}][notes]" class="form-control" placeholder="Notes..."></td>
              <td class="text-center"><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">DAILY TOTAL:</td><td class="text-center fw-bold fs-6 text-success" id="grandTotal">0.00</td><td colspan="2"></td></tr></tfoot>
        </table>
      </div>
      <div class="d-flex gap-2 mt-3">
        <button type="submit" class="btn btn-outline-secondary"><i class="bi bi-save me-1"></i>Save as Draft</button>
        <button type="button" class="btn btn-primary" onclick="submitAndForward()"><i class="bi bi-send me-1"></i>Save & Submit to Supervisor</button>
        <a href="{{ route('payroll.index') }}" class="btn btn-outline-secondary ms-auto">Cancel</a>
      </div>
      <input type="hidden" name="submit_action" id="submitAction" value="draft">
    </form>
  </div>
</div>
<div class="modal fade" id="staffModal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content">
  <div class="modal-header"><h5 class="modal-title">Add from Staff Register</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
  <div class="modal-body">
    <input class="form-control form-control-sm mb-2" placeholder="Search..." oninput="filterStaff(this.value)">
    <div style="max-height:350px;overflow-y:auto"><table class="table table-sm table-hover" id="sTbl"><thead><tr><th>Name</th><th>Role</th><th>Rate</th><th></th></tr></thead><tbody>
      @foreach($staff as $s)
      <tr data-n="{{ strtolower($s->name) }}" data-r="{{ strtolower($s->role) }}">
        <td class="small fw-semibold">{{ $s->name }}</td><td class="small">{{ $s->role }}</td><td class="small">GH&#8373; {{ number_format($s->daily_rate??0,2) }}</td>
        <td><button type="button" class="btn btn-xs btn-primary" onclick="addStaffRow({{ $s->id }},'{{ addslashes($s->name) }}','{{ addslashes($s->role) }}',{{ (float)($s->daily_rate??0) }})" style="font-size:.7rem;padding:.15rem .4rem">Add</button></td>
      </tr>
      @endforeach
    </tbody></table></div>
  </div>
</div></div></div>
@endsection
@push('scripts')
<script>
let rowIdx={{ $staff->count() }};
const multipliers={full_day:1,half_day:0.5,overtime:1.5};
function recalc(i){
  const rate=parseFloat(document.querySelector(`[name="workers[${i}][daily_rate]"]`)?.value)||0;
  const att=document.querySelector(`[name="workers[${i}][attendance]"]`)?.value||'full_day';
  const el=document.getElementById(`total_${i}`);
  if(el) el.textContent=(rate*(multipliers[att]||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 makeRow(i,sid,name,role,rate){
  return `<tr class="worker-row" id="row_${i}">
    <td><input type="hidden" name="workers[${i}][staff_id]" value="${sid}"><input type="text" name="workers[${i}][worker_name]" class="form-control" value="${name}" ${sid?'readonly style="background:#f8f9fa"':'placeholder="Worker name"'} required></td>
    <td><input type="text" name="workers[${i}][role]" class="form-control" list="roleList" value="${role}" ${sid?'readonly style="background:#f8f9fa"':'placeholder="Role"'} required></td>
    <td><select name="workers[${i}][attendance]" class="form-select" onchange="recalc(${i})"><option value="full_day">Full Day</option><option value="half_day">Half Day (x0.5)</option><option value="overtime">Overtime (x1.5)</option></select></td>
    <td class="rate-cell"><input type="number" name="workers[${i}][daily_rate]" class="form-control" step="0.01" value="${rate||''}" oninput="recalc(${i})" required></td>
    <td class="total-cell text-center"><span id="total_${i}">${rate?(rate).toFixed(2):'0.00'}</span></td>
    <td><input type="text" name="workers[${i}][notes]" class="form-control" placeholder="Notes..."></td>
    <td class="text-center"><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 addRow(){document.getElementById('workerBody').insertAdjacentHTML('beforeend',makeRow(rowIdx++,'','','',0));}
function addStaffRow(id,name,role,rate){
  document.getElementById('workerBody').insertAdjacentHTML('beforeend',makeRow(rowIdx++,id,name,role,rate));
  bootstrap.Modal.getInstance(document.getElementById('staffModal'))?.hide();
  recalc(rowIdx-1);
}
function removeRow(id){document.getElementById(id)?.remove();updateGrand();}
function filterStaff(q){document.querySelectorAll('#sTbl tbody tr').forEach(r=>{r.style.display=(r.dataset.n.includes(q.toLowerCase())||r.dataset.r.includes(q.toLowerCase()))?'':'none';});}
function submitAndForward(){document.getElementById('submitAction').value='submit';document.getElementById('payrollForm').submit();}
document.addEventListener('DOMContentLoaded',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>POP Applicator</option><option>General Worker</option></datalist>
@endpush