{{-- resources/views/accounting/payroll/show.blade.php --}}
@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
  <div class="container-fluid">

    {{-- Header --}}
    <div class="page-breadcrumb bg-primary text-white rounded p-3 mb-4 d-flex justify-content-between align-items-center">
      <h5 class="mb-0">
        Payroll #{{ $payroll->id }} ({{ $payroll->period_start }} → {{ $payroll->period_end }})
      </h5>
      <a href="{{ route('payroll.index') }}" class="btn btn-light">
        <i class="bx bx-chevron-left me-1"></i> Back
      </a>
    </div>

    {{-- Summary Card --}}
    <div class="card shadow-sm rounded-lg border-0 mb-4">
      <div class="card-body p-4">
        <div class="row g-4">
          <div class="col-md-4">
            <p class="mb-1 fw-bold">Total Gross</p>
            <p class="fs-5 text-primary">{{ number_format($payroll->taxable_income, 0) }}</p>
          </div>
          <div class="col-md-4">
            <p class="mb-1 fw-bold">Total Deductions</p>
            <p class="fs-5 text-danger">{{ number_format($payroll->mandatory_deductions, 0) }}</p>
          </div>
          <div class="col-md-4">
            <p class="mb-1 fw-bold">Net Pay</p>
            <p class="fs-5 text-success">{{ number_format($payroll->net_pay, 0) }}</p>
          </div>
        </div>
      </div>
    </div>

    {{-- Payroll Lines Table --}}
    <div class="card shadow-sm rounded-lg border-0">
      <div class="card-body p-4">
        <div class="table-responsive">
          <table class="table table-striped table-bordered align-middle">
            <thead class="table-dark">
              <tr>
                <th>Employee</th>
                <th class="text-end">Net Pay</th>
                <th class="text-end">Taxable Income</th>
                <th class="text-end">PAYE</th>
                <th class="text-end">NSSF 5%</th>
                <th class="text-end">NSSF 10%</th>
                <th class="text-end">Mandatory Deductions</th>
                <th class="text-end">NSSF Total</th>
              </tr>
            </thead>
            <tbody>
              @foreach($payroll->lines as $line)
              <tr>
                <td>{{ $line->account->name }}</td>
                <td class="text-end">{{ number_format($line->net_pay, 2) }}</td>
                <td class="text-end">{{ number_format($line->taxable_income, 2) }}</td>
                <td class="text-end">{{ number_format($line->paye, 2) }}</td>
                <td class="text-end">{{ number_format($line->nssf_employee, 2) }}</td>
                <td class="text-end">{{ number_format($line->nssf_employer, 2) }}</td>
                <td class="text-end">{{ number_format($line->mandatory_deductions, 2) }}</td>
                <td class="text-end">{{ number_format($line->nssf_total, 2) }}</td>
              </tr>
              @endforeach
            </tbody>
            <tfoot class="table-light fw-bold">
              <tr>
                <td class="text-end">Totals:</td>
                <td class="text-end">{{ number_format($payroll->lines->sum('net_pay'), 2) }}</td>
                <td class="text-end">{{ number_format($payroll->lines->sum('taxable_income'), 2) }}</td>
                <td class="text-end">{{ number_format($payroll->lines->sum('paye'), 2) }}</td>
                <td class="text-end">{{ number_format($payroll->lines->sum('nssf_employee'), 2) }}</td>
                <td class="text-end">{{ number_format($payroll->lines->sum('nssf_employer'), 2) }}</td>
                <td class="text-end">{{ number_format($payroll->lines->sum('mandatory_deductions'), 2) }}</td>
                <td class="text-end">{{ number_format($payroll->lines->sum('nssf_total'), 2) }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>

    {{-- Action Buttons --}}
    <div class="mt-4">
      <a href="{{ route('payroll.edit', $payroll->id) }}" class="btn btn-warning me-2">
        <i class="bx bx-edit-alt me-1"></i> Edit
      </a>
      <a href="{{ route('payroll.index') }}" class="btn btn-secondary">
        <i class="bx bx-arrow-back me-1"></i> Back
      </a>
    </div>

  </div>
</div>

@endsection