@extends('layouts.app')

@section('title', 'Salary')
@section('page', 'payroll')
@section('payrollNav', 'salaries')

@php
  $statusVariant = fn ($s) => match ($s) {
    'Paid' => 'success',
    'Pending' => 'warning',
    default => 'danger',
  };
  $showEpf = $payrollRates['epf_enabled'] ?? true;
  $showEtf = $payrollRates['etf_enabled'] ?? true;
  $showTax = $payrollRates['tax_enabled'] ?? true;
  $tableCols = 9 + ($showEpf ? 1 : 0) + ($showEtf ? 1 : 0) + ($showTax ? 1 : 0);
@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="salaries-table"
    class="catalog-table"
    title="Salary"
    subtitle="Prepare monthly salaries, then pay to post cash/bank Out and print slip. Period: {{ $periodLabel }}."
    search-placeholder="Search salaries..."
    :selectable="false"
    :page-size="15"
  >
    <x-slot:toolbarActions>
      @if ($canManage ?? false)
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#salaryModal" data-salary-add @disabled($staff->isEmpty())>
          <i class="bi bi-plus-lg"></i> Add Salary
        </button>
      @endif
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Pending</option>
        <option>Paid</option>
        <option>Cancel</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-cash-stack"></i></span></span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Paid</p>
                <p class="product-kpi__value">{{ money($totalPaid) }}</p>
                <p class="product-kpi__meta">Paid net salaries</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="Pay Date" col="pay_date" />
      <x-data-table-th label="Staff" col="staff" />
      <x-data-table-th label="Basic" col="basic" sort-type="number" />
      <x-data-table-th label="Allow." col="allow" sort-type="number" />
      <x-data-table-th label="Deduct" col="deduct" sort-type="number" />
      <x-data-table-th label="Adv. Ded." col="adv" sort-type="number" />
      @if ($showEpf)
        <x-data-table-th label="EPF Staff" col="epf_staff" sort-type="number" />
      @endif
      @if ($showEtf)
        <x-data-table-th label="ETF Staff" col="etf_staff" sort-type="number" />
      @endif
      @if ($showTax)
        <x-data-table-th label="Tax" col="tax" sort-type="number" />
      @endif
      <x-data-table-th label="Net" col="net" sort-type="number" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($salaries as $row)
        @php
          $rowStatus = $row->displayStatus();
        @endphp
        <tr data-id="{{ $row->id }}">
          <td data-col="month">{{ $row->salary_month?->format('Y-m') ?? '—' }}</td>
          <td data-col="pay_date">{{ $row->isPaid() ? ($row->pay_date?->format('Y-m-d') ?? '—') : '—' }}</td>
          <td data-col="staff" class="cell-primary">{{ $row->staff?->name ?? '—' }}</td>
          <td data-col="basic" data-sort-value="{{ $row->basic_amount }}">{{ money((float) $row->basic_amount) }}</td>
          <td data-col="allow" data-sort-value="{{ $row->allowances }}">{{ money((float) $row->allowances) }}</td>
          <td data-col="deduct" data-sort-value="{{ $row->deductions }}">{{ money((float) $row->deductions) }}</td>
          <td data-col="adv" data-sort-value="{{ $row->advance_deduction }}">{{ money((float) $row->advance_deduction) }}</td>
          @if ($showEpf)
            <td data-col="epf_staff" data-sort-value="{{ $row->epf_staff_amount }}">{{ money((float) $row->epf_staff_amount) }}</td>
          @endif
          @if ($showEtf)
            <td data-col="etf_staff" data-sort-value="{{ $row->etf_staff_amount }}">{{ money((float) $row->etf_staff_amount) }}</td>
          @endif
          @if ($showTax)
            <td data-col="tax" data-sort-value="{{ $row->tax_amount }}">{{ money((float) $row->tax_amount) }}</td>
          @endif
          <td data-col="net" data-sort-value="{{ $row->net_amount }}" class="fw-semibold">{{ money((float) $row->net_amount) }}</td>
          <td data-col="status"><x-badge :variant="$statusVariant($rowStatus)">{{ $rowStatus }}</x-badge></td>
          <td data-edt-actions>
            @if ($canManage ?? false)
              <div class="edt-row-actions product-actions">
                @if ($row->isPending())
                  <button
                    type="button"
                    class="btn btn-sm btn-icon product-action product-action--edit"
                    title="Edit"
                    data-salary-edit
                    data-id="{{ $row->id }}"
                    data-staff-id="{{ $row->staff_id }}"
                    data-salary-month="{{ $row->salary_month?->format('Y-m') }}"
                    data-basic-amount="{{ number_format((float) $row->basic_amount, 2, '.', '') }}"
                    data-allowances="{{ number_format((float) $row->allowances, 2, '.', '') }}"
                    data-deductions="{{ number_format((float) $row->deductions, 2, '.', '') }}"
                    data-advance-deduction="{{ number_format((float) $row->advance_deduction, 2, '.', '') }}"
                    data-notes="{{ $row->notes }}"
                    data-update-url="{{ route('account.salaries.update', $row) }}"
                  >
                    <i class="bi bi-pencil" aria-hidden="true"></i>
                  </button>
                  <button
                    type="button"
                    class="btn btn-sm btn-icon product-action product-action--pay"
                    title="Pay salary"
                    data-salary-pay
                    data-id="{{ $row->id }}"
                    data-staff-name="{{ $row->staff?->name ?? 'Staff' }}"
                    data-salary-month="{{ $row->salary_month?->format('Y-m') }}"
                    data-net-amount="{{ number_format((float) $row->net_amount, 2, '.', '') }}"
                    data-pay-url="{{ route('account.salaries.pay', $row) }}"
                  >
                    <i class="bi bi-cash-coin" aria-hidden="true"></i>
                  </button>
                  <button
                    type="button"
                    class="btn btn-sm btn-icon product-action product-action--delete"
                    title="Delete"
                    data-delete-open
                    data-delete-url="{{ route('account.salaries.destroy', $row) }}"
                    data-delete-label="{{ ($row->staff?->name ?? 'Salary').' · '.($row->salary_month?->format('Y-m') ?? '') }}"
                    data-delete-type="salary"
                  >
                    <i class="bi bi-trash" aria-hidden="true"></i>
                  </button>
                @elseif ($row->isPaid())
                  <button
                    type="button"
                    class="btn btn-sm btn-icon product-action product-action--print"
                    title="Print salary slip"
                    data-salary-print
                    data-slip-url="{{ route('account.salaries.slip', $row) }}"
                  >
                    <i class="bi bi-printer" aria-hidden="true"></i>
                  </button>
                @endif
              </div>
            @elseif ($row->isPaid())
              <div class="edt-row-actions product-actions">
                <button
                  type="button"
                  class="btn btn-sm btn-icon product-action product-action--print"
                  title="Print salary slip"
                  data-salary-print
                  data-slip-url="{{ route('account.salaries.slip', $row) }}"
                >
                  <i class="bi bi-printer" aria-hidden="true"></i>
                </button>
              </div>
            @endif
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="{{ $tableCols }}" class="text-center text-muted py-4">No salary payments yet.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  @if ($canManage ?? false)
    <div class="modal fade" id="salaryModal" tabindex="-1" aria-labelledby="salaryModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content edt-modal">
          <form id="salary-form" method="post" action="{{ route('account.salaries.store') }}" data-store-url="{{ route('account.salaries.store') }}" data-period-url="{{ route('account.salaries.period-advance') }}">
            @csrf
            <input type="hidden" name="_method" value="POST">
            <div class="modal-header">
              <h2 class="modal-title fs-5" id="salaryModalLabel">Add salary</h2>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label" for="salary_staff_id">Staff</label>
                  <select class="form-select" id="salary_staff_id" name="staff_id" required>
                    <option value="">Select staff</option>
                    @foreach ($staff as $member)
                      <option
                        value="{{ $member->id }}"
                        data-basic="{{ number_format((float) $member->basic_salary, 2, '.', '') }}"
                        data-advance="{{ number_format((float) $member->advance_balance, 2, '.', '') }}"
                      >{{ $member->name }}{{ $member->designation ? ' · '.$member->designation : '' }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-md-4">
                  <label class="form-label" for="salary_month">Salary month</label>
                  <input type="month" class="form-control" id="salary_month" name="salary_month" required value="{{ now()->format('Y-m') }}">
                  <div class="form-text" id="salary-period-hint">{{ $periodLabel }}</div>
                </div>
                <div class="col-md-3">
                  <label class="form-label" for="salary_basic_amount">Basic</label>
                  <input type="number" class="form-control" id="salary_basic_amount" name="basic_amount" min="0" step="0.01" required value="0">
                </div>
                <div class="col-md-3">
                  <label class="form-label" for="salary_allowances">Allowances</label>
                  <input type="number" class="form-control" id="salary_allowances" name="allowances" min="0" step="0.01" value="0">
                </div>
                <div class="col-md-3">
                  <label class="form-label" for="salary_deductions">Deductions</label>
                  <input type="number" class="form-control" id="salary_deductions" name="deductions" min="0" step="0.01" value="0">
                </div>
                <div class="col-md-3">
                  <label class="form-label" for="salary_advance_deduction">Advance deduct</label>
                  <input type="number" class="form-control" id="salary_advance_deduction" name="advance_deduction" min="0" step="0.01" value="0">
                  <div class="form-text" id="salary-advance-hint">Period advances auto-fill here</div>
                </div>
                <div class="col-12">
                  <div
                    class="salary-statutory"
                    id="salary-statutory-preview"
                    data-epf-enabled="{{ $showEpf ? '1' : '0' }}"
                    data-etf-enabled="{{ $showEtf ? '1' : '0' }}"
                    data-tax-enabled="{{ $showTax ? '1' : '0' }}"
                    data-epf-company="{{ $payrollRates['epf_company_percent'] }}"
                    data-epf-staff="{{ $payrollRates['epf_staff_percent'] }}"
                    data-etf-company="{{ $payrollRates['etf_company_percent'] }}"
                    data-etf-staff="{{ $payrollRates['etf_staff_percent'] }}"
                    data-tax="{{ $payrollRates['tax_percent'] }}"
                  >
                    <div class="salary-statutory__head">
                      <div>
                        <h3 class="salary-statutory__title">Statutory preview</h3>
                        <p class="salary-statutory__subtitle mb-0">EPF / ETF on basic only · Tax on basic + allowances</p>
                      </div>
                      <div class="salary-statutory__links">
                        <a href="{{ route('settings.payroll-rates') }}">Rates</a>
                        @if ($showEpf)<a href="{{ route('account.epf') }}">EPF</a>@endif
                        @if ($showEtf)<a href="{{ route('account.etf') }}">ETF</a>@endif
                        @if ($showTax)<a href="{{ route('account.tax') }}">Tax</a>@endif
                      </div>
                    </div>

                    @if ($showEpf || $showEtf || $showTax)
                      <div class="salary-statutory__grid">
                        @if ($showEpf)
                          <div class="salary-stat-card salary-stat-card--violet" data-statutory-epf>
                            <div class="salary-stat-card__icon" aria-hidden="true"><i class="bi bi-shield-check"></i></div>
                            <div class="salary-stat-card__body">
                              <span class="salary-stat-card__label">EPF Staff <em>{{ number_format($payrollRates['epf_staff_percent'], 2) }}%</em></span>
                              <strong class="salary-stat-card__value" id="preview-epf-staff">0.00</strong>
                              <span class="salary-stat-card__hint">Deducted from staff</span>
                            </div>
                          </div>
                          <div class="salary-stat-card salary-stat-card--violet-soft" data-statutory-epf>
                            <div class="salary-stat-card__icon" aria-hidden="true"><i class="bi bi-building"></i></div>
                            <div class="salary-stat-card__body">
                              <span class="salary-stat-card__label">EPF Company <em>{{ number_format($payrollRates['epf_company_percent'], 2) }}%</em></span>
                              <strong class="salary-stat-card__value" id="preview-epf-company">0.00</strong>
                              <span class="salary-stat-card__hint">Employer cost · not deducted</span>
                            </div>
                          </div>
                        @endif

                        @if ($showEtf)
                          <div class="salary-stat-card salary-stat-card--green" data-statutory-etf>
                            <div class="salary-stat-card__icon" aria-hidden="true"><i class="bi bi-person"></i></div>
                            <div class="salary-stat-card__body">
                              <span class="salary-stat-card__label">ETF Staff <em>{{ number_format($payrollRates['etf_staff_percent'], 2) }}%</em></span>
                              <strong class="salary-stat-card__value" id="preview-etf-staff">0.00</strong>
                              <span class="salary-stat-card__hint">Deducted from staff</span>
                            </div>
                          </div>
                          <div class="salary-stat-card salary-stat-card--green-soft" data-statutory-etf>
                            <div class="salary-stat-card__icon" aria-hidden="true"><i class="bi bi-bank"></i></div>
                            <div class="salary-stat-card__body">
                              <span class="salary-stat-card__label">ETF Company <em>{{ number_format($payrollRates['etf_company_percent'], 2) }}%</em></span>
                              <strong class="salary-stat-card__value" id="preview-etf-company">0.00</strong>
                              <span class="salary-stat-card__hint">Employer cost · not deducted</span>
                            </div>
                          </div>
                        @endif

                        @if ($showTax)
                          <div class="salary-stat-card salary-stat-card--orange" data-statutory-tax>
                            <div class="salary-stat-card__icon" aria-hidden="true"><i class="bi bi-file-earmark-text"></i></div>
                            <div class="salary-stat-card__body">
                              <span class="salary-stat-card__label">Tax <em>{{ number_format($payrollRates['tax_percent'], 2) }}%</em></span>
                              <strong class="salary-stat-card__value" id="preview-tax">0.00</strong>
                              <span class="salary-stat-card__hint">Deducted from staff</span>
                            </div>
                          </div>
                        @endif
                      </div>

                      <div class="salary-statutory__totals">
                        <div class="salary-net-card">
                          <div>
                            <span class="salary-net-card__label">Net pay</span>
                            <span class="salary-net-card__formula">Basic − staff EPF/ETF/Tax + Allowances</span>
                          </div>
                          <strong class="salary-net-card__value" id="preview-net">0.00</strong>
                        </div>
                        <div class="salary-net-card salary-net-card--final">
                          <div>
                            <span class="salary-net-card__label">Final take-home</span>
                            <span class="salary-net-card__formula">Net − deductions − advance</span>
                          </div>
                          <strong class="salary-net-card__value" id="preview-final-net">0.00</strong>
                        </div>
                      </div>
                    @else
                      <p class="salary-statutory__empty mb-0">EPF, ETF, and Tax are disabled in Company Settings.</p>
                    @endif
                  </div>
                </div>
                <div class="col-12">
                  <label class="form-label" for="salary_notes">Notes</label>
                  <input type="text" class="form-control" id="salary_notes" name="notes" maxlength="1000" placeholder="Optional">
                </div>
                <div class="col-12">
                  <p class="form-text mb-0">Salary is saved as <strong>Pending</strong>. Use the Pay action to release payment and print the slip.</p>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-primary">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="modal fade" id="salaryPayModal" tabindex="-1" aria-labelledby="salaryPayModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content edt-modal">
          <form id="salary-pay-form" method="post" action="#">
            @csrf
            <div class="modal-header">
              <h2 class="modal-title fs-5" id="salaryPayModalLabel">Pay salary</h2>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p class="mb-3 text-muted" id="salary-pay-summary">—</p>
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label" for="salary_pay_date">Pay date</label>
                  <input type="date" class="form-control" id="salary_pay_date" name="pay_date" required value="{{ now()->toDateString() }}">
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="salary_pay_from">Pay from</label>
                  <select class="form-select" id="salary_pay_from" name="pay_from" required>
                    <option value="cash_book">Cash Book</option>
                    <option value="bank_account">Bank Account</option>
                  </select>
                </div>
                <div class="col-12" data-pay-source="cash_book">
                  <label class="form-label" for="salary_pay_cash_book_id">Cash book</label>
                  <select class="form-select" id="salary_pay_cash_book_id" name="cash_book_id">
                    <option value="">Select cash book</option>
                    @foreach ($cashBooks as $book)
                      <option value="{{ $book->id }}">{{ $book->name }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-12 d-none" data-pay-source="bank_account">
                  <label class="form-label" for="salary_pay_bank_account_id">Bank account</label>
                  <select class="form-select" id="salary_pay_bank_account_id" name="bank_account_id">
                    <option value="">Select bank account</option>
                    @foreach ($bankAccounts as $account)
                      <option value="{{ $account->id }}">{{ $account->name }}{{ $account->bank?->name ? ' · '.$account->bank->name : '' }}</option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-primary"><i class="bi bi-cash-coin"></i> Pay &amp; print slip</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="modal fade" id="salarySlipModal" tabindex="-1" aria-labelledby="salarySlipModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content edt-modal">
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="salarySlipModalLabel">Salary slip</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" id="salary-slip-body">
            <div class="text-center text-muted py-4">Loading slip…</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="salary-slip-print-btn"><i class="bi bi-printer"></i> Print</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content edt-modal">
          <form id="delete-confirm-form" method="post" action="#">
            @csrf
            @method('DELETE')
            <div class="modal-header">
              <h2 class="modal-title fs-5" id="deleteConfirmModalLabel">Delete salary</h2>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p class="mb-0">Are you sure you want to delete <strong id="delete-confirm-name">this salary</strong>?</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  @endif
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
  <link href="{{ asset('assets/css/pages/salary-slip.css') }}" rel="stylesheet">
  <style>
    .salary-statutory {
      border: 1px solid #e8edf5;
      border-radius: 16px;
      padding: 1rem 1.1rem;
      background: #fff;
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    }
    .salary-statutory__head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.9rem;
    }
    .salary-statutory__title {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 700;
      color: #0f172a;
    }
    .salary-statutory__subtitle {
      margin-top: 0.2rem;
      font-size: 0.78rem;
      color: #94a3b8;
    }
    .salary-statutory__links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
    }
    .salary-statutory__links a {
      font-size: 0.78rem;
      font-weight: 600;
      text-decoration: none;
      color: #7c3aed;
      padding: 0.2rem 0.55rem;
      border-radius: 999px;
      background: #f5f3ff;
    }
    .salary-statutory__links a:hover {
      background: #ede9fe;
      color: #6d28d9;
    }
    .salary-statutory__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
    }
    .salary-stat-card {
      display: flex;
      gap: 0.65rem;
      align-items: flex-start;
      padding: 0.75rem 0.8rem;
      border-radius: 12px;
      border: 1px solid transparent;
    }
    .salary-stat-card__icon {
      width: 2rem;
      height: 2rem;
      border-radius: 10px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      font-size: 0.95rem;
    }
    .salary-stat-card__label {
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      color: #64748b;
    }
    .salary-stat-card__label em {
      font-style: normal;
      color: #94a3b8;
      font-weight: 500;
    }
    .salary-stat-card__value {
      display: block;
      margin-top: 0.15rem;
      font-size: 1.05rem;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }
    .salary-stat-card__hint {
      display: block;
      margin-top: 0.15rem;
      font-size: 0.7rem;
      color: #94a3b8;
    }
    .salary-stat-card--violet {
      background: #f5f3ff;
      border-color: #ddd6fe;
    }
    .salary-stat-card--violet .salary-stat-card__icon {
      background: #ede9fe;
      color: #7c3aed;
    }
    .salary-stat-card--violet-soft {
      background: #faf8ff;
      border-color: #e9e4ff;
    }
    .salary-stat-card--violet-soft .salary-stat-card__icon {
      background: #f3f0ff;
      color: #8b5cf6;
    }
    .salary-stat-card--green {
      background: #f0fdf4;
      border-color: #bbf7d0;
    }
    .salary-stat-card--green .salary-stat-card__icon {
      background: #dcfce7;
      color: #16a34a;
    }
    .salary-stat-card--green-soft {
      background: #f7fdf9;
      border-color: #d9f5e3;
    }
    .salary-stat-card--green-soft .salary-stat-card__icon {
      background: #e8faf0;
      color: #22c55e;
    }
    .salary-stat-card--orange {
      background: #fff7ed;
      border-color: #fed7aa;
    }
    .salary-stat-card--orange .salary-stat-card__icon {
      background: #ffedd5;
      color: #ea580c;
    }
    .salary-statutory__totals {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
      margin-top: 0.75rem;
    }
    .salary-net-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.85rem 1rem;
      border-radius: 12px;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      color: #fff;
    }
    .salary-net-card--final {
      background: linear-gradient(135deg, #0f766e, #14b8a6);
    }
    .salary-net-card__label {
      display: block;
      font-size: 0.78rem;
      font-weight: 700;
      opacity: 0.95;
    }
    .salary-net-card__formula {
      display: block;
      margin-top: 0.15rem;
      font-size: 0.68rem;
      opacity: 0.8;
    }
    .salary-net-card__value {
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }
    .salary-statutory__empty {
      font-size: 0.85rem;
      color: #94a3b8;
    }
    @media (max-width: 575.98px) {
      .salary-statutory__grid,
      .salary-statutory__totals {
        grid-template-columns: 1fr;
      }
    }
  </style>
@endpush

@push('scripts')
  <script>
    window.SALARY_SLIP_URL = @json(isset($printSalaryId) && $printSalaryId ? route('account.salaries.slip', $printSalaryId) : null);
  </script>
  <script src="{{ asset('assets/js/pages/payroll-salaries.js') }}"></script>
@endpush