@extends('layouts.app')

@section('content')
<div class="container py-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4>Approved Employees</h4>
    <a href="{{ route('employees.create') }}" class="btn btn-success">+ Add Employee</a>
  </div>

  {{-- ... same per‑page/search ... --}}

  <div class="table-responsive">
    <table class="table table-bordered align-middle">
      <thead class="table-light">
        <tr>
          <th>FULLNAMES</th>
          <th>DEPARTMENT</th>
          <th>DOB</th>
          <th>ACTION</th>
        </tr>
      </thead>
      <tbody>
        @forelse($emps as $e)
        <tr>
          <td>{{ $e->full_name }}</td>
          <td>{{ $e->department->name }}</td>
          <td>{{ $e->dob->format('d/m/Y') }}</td>
          <td>
            <form action="{{ route('employees.destroy',$e->id) }}" method="POST" class="d-inline">
              @csrf @method('DELETE')
              <button class="btn btn-sm btn-danger">Remove</button>
            </form>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="4" class="text-center text-muted py-4">No approved employees.</td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{-- ... same pagination ... --}}
</div>
@endsection