@extends('layouts.app')

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

  {{-- Per‑page & Search --}}
  <div class="row mb-3 align-items-center">
    <div class="col-md-6">
      <form method="GET" class="d-flex align-items-center">
        <label class="me-2 mb-0">Show</label>
        <select name="perPage" class="form-select w-auto" onchange="this.form.submit()">
          @foreach([5,10,25,50] as $n)
            <option value="{{ $n }}" {{ request('perPage',10)==$n ? 'selected' : '' }}>
              {{ $n }}
            </option>
          @endforeach
        </select>
        <label class="ms-2 mb-0">entries</label>
        <input type="hidden" name="search" value="{{ request('search') }}">
      </form>
    </div>
    <div class="col-md-6">
      <form method="GET" class="d-flex justify-content-end">
        <input
          type="text"
          name="search"
          class="form-control w-50"
          placeholder="Search..."
          value="{{ request('search') }}"
        >
        <button type="submit" class="btn btn-primary ms-2">Search</button>
      </form>
    </div>
  </div>

  {{-- Flash --}}
  @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  {{-- Table --}}
  <div class="table-responsive">
    <table class="table table-bordered align-middle mb-0">
      <thead class="table-light">
        <tr>
          <th>FULL NAMES</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>
              {{-- Approve --}}
              <form
                action="{{ route('employees.approve', $e->id) }}"
                method="POST"
                class="d-inline"
              >
                @csrf
                <button type="submit" class="btn btn-sm btn-success">
                  Approve
                </button>
              </form>

              {{-- Remove --}}
              <form
                action="{{ route('employees.destroy', $e->id) }}"
                method="POST"
                class="d-inline"
              >
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-sm btn-danger">
                  Remove
                </button>
              </form>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="4" class="text-center text-muted py-4">
              No unapproved employees.
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{-- Pagination --}}
  <div class="d-flex justify-content-between align-items-center mt-3">
    <div>
      Showing
      <strong>{{ $emps->firstItem() ?? 0 }}</strong>
      to
      <strong>{{ $emps->lastItem() ?? 0 }}</strong>
      of
      <strong>{{ $emps->total() }}</strong>
      entries
    </div>
    <nav>
      {{ $emps->links() }}
    </nav>
  </div>
</div>
@endsection