@extends('layouts.app')

@section('title', 'ETF')
@section('page', 'payroll')
@section('payrollNav', 'etf')

@php
  $statusVariant = fn ($s) => match ($s) {
    'Paid' => 'success',
    'Unpaid', 'Pending' => 'warning',
    default => 'neutral',
  };
@endphp

@section('content')
  @include('partials.account-payroll-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <x-data-table
    id="etf-table"
    class="catalog-table"
    title="ETF"
    subtitle="Staff deductions and company contributions by month and staff (on basic only). Rates: Staff {{ number_format($staffPercent, 2) }}% · Company {{ number_format($companyPercent, 2) }}%."
    search-placeholder="Search staff or month..."
    :selectable="false"
    :page-size="15"
  >
    <x-slot:toolbarActions>
      <a href="{{ route('settings.payroll-rates') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-sliders"></i> Rates &amp; enable
      </a>
    </x-slot:toolbarActions>
    <x-slot:filters>
      <form method="get" action="{{ route('account.etf') }}" class="d-flex align-items-center gap-2">
        <input type="month" class="form-control form-control-sm" name="month" value="{{ $filterMonth }}" aria-label="Month">
        <button type="submit" class="btn btn-sm btn-outline-primary">Filter</button>
        @if ($filterMonth)
          <a href="{{ route('account.etf') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
        @endif
      </form>
      <select class="form-select form-select-sm" data-edt-col-filter="pay_status" aria-label="Payment">
        <option value="">All payments</option>
        <option>Unpaid</option>
        <option>Paid</option>
      </select>
    </x-slot:filters>
    <x-slot:afterToolbar>
      <div class="product-stats-panel">
        <div class="row g-3 product-stats product-stats--4 justify-content-start">
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--warning">
              <span class="product-kpi__icon" aria-hidden="true"><span class="product-kpi__glyph"><i class="bi bi-person-dash"></i></span></span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Staff deducted</p>
                <p class="product-kpi__value">{{ money($totalStaff) }}</p>
                <p class="product-kpi__meta">{{ $filterMonth ?: 'All months' }}</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--primary">
              <span class="product-kpi__icon" aria-hidden="true"><span class="product-kpi__glyph"><i class="bi bi-building"></i></span></span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Company to pay</p>
                <p class="product-kpi__value">{{ money($totalCompany) }}</p>
                <p class="product-kpi__meta">Employer contribution</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--danger">
              <span class="product-kpi__icon" aria-hidden="true"><span class="product-kpi__glyph"><i class="bi bi-hourglass-split"></i></span></span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Unpaid total</p>
                <p class="product-kpi__value">{{ money($totalUnpaid) }}</p>
                <p class="product-kpi__meta">Staff + company</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="Month" col="month" />
      <x-data-table-th label="Staff" col="staff" />
      <x-data-table-th label="Salary" col="salary_status" />
      <x-data-table-th label="ETF pay" col="pay_status" />
      <x-data-table-th label="Staff deducted" col="staff_amt" sort-type="number" />
      <x-data-table-th label="Company to pay" col="company_amt" sort-type="number" />
      <x-data-table-th label="Total" col="total" sort-type="number" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($rows as $row)
        <tr>
          <td data-col="month" data-sort-value="{{ $row->month_sort }}">{{ $row->month_label }}</td>
          <td data-col="staff" class="cell-primary">
            {{ $row->staff_name }}
            @if ($row->staff_code)
              <span class="text-muted small">· {{ $row->staff_code }}</span>
            @endif
          </td>
          <td data-col="salary_status">
            <x-badge :variant="$statusVariant($row->salary_status)">{{ $row->salary_status }}</x-badge>
          </td>
          <td data-col="pay_status">
            <x-badge :variant="$statusVariant($row->payment_status)">{{ $row->payment_status }}</x-badge>
          </td>
          <td data-col="staff_amt" data-sort-value="{{ $row->staff_amount }}">{{ money($row->staff_amount) }}</td>
          <td data-col="company_amt" data-sort-value="{{ $row->company_amount }}">{{ money($row->company_amount) }}</td>
          <td data-col="total" data-sort-value="{{ $row->total }}">
            <strong>{{ money($row->total) }}</strong>
          </td>
          <td data-edt-actions>
            @if (($canManage ?? false) && $row->can_pay)
              <div class="edt-row-actions product-actions">
                <button
                  type="button"
                  class="btn btn-sm btn-icon product-action product-action--pay"
                  title="Pay ETF"
                  data-statutory-pay
                  data-pay-url="{{ route('account.etf.pay', $row->id) }}"
                  data-staff-name="{{ $row->staff_name }}"
                  data-month="{{ $row->month }}"
                  data-total="{{ number_format($row->total, 2, '.', '') }}"
                >
                  <i class="bi bi-cash-coin" aria-hidden="true"></i>
                </button>
              </div>
            @elseif ($row->is_paid)
              <span class="text-muted small">Paid</span>
            @endif
          </td>
        </tr>
      @empty
        <tr>
          <td colspan="8" class="text-center text-muted py-4">No ETF amounts for this filter. Add salaries first.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  @include('account.partials.statutory-pay-modal')
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
@endpush