@extends('admin.layouts.app')

@section('page-title', 'Account Dashboard')

@section('content')
<style>
  .top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
  .card { background:#fff; border:1px solid #e4e4e4; border-radius:6px; padding:1rem; box-shadow:0 1px 3px rgba(0,0,0,.03); }
  table { width:100%; border-collapse:collapse; }
  th, td { padding:.6rem .75rem; border-bottom:1px solid #f1f1f1; text-align:left; }
  .btn { padding:.45rem .75rem; border-radius:4px; border:1px solid #ccc; background:#f7f7f7; cursor:pointer; }
  .btn.primary { background:#0b74de; color:#fff; border-color:#0b74de; }
  .actions a { margin-right:.5rem; color:#0b74de; text-decoration:none; }
  .muted { color:#666; font-size:.95rem; }
</style>

<div class="top-bar">
  <h2>Staff</h2>
  <a href="{{ route('admin.staff.create') }}" class="btn primary">Add Staff</a>
</div>

<div class="card">
  @if(session('success'))
    <div style="padding:.5rem; background:#e6ffed; border:1px solid #b6f0c6; margin-bottom:1rem;">{{ session('success') }}</div>
  @endif

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Employee ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Role</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      @forelse($staff as $s)
        <tr>
          <td>{{ $s->id }}</td>
          <td class="muted">{{ $s->employee_id }}</td>
          <td>{{ $s->name }}</td>
          <td>{{ $s->email }}</td>
          <td>{{ $s->phone }}</td>
          <td>{{ $s->role ?? '-' }}</td>
          <td>{{ ucfirst($s->status) }}</td>
          <td class="actions">
            <a href="{{ route('admin.staff.edit', $s->id) }}">Edit</a>
            <form action="{{ route('admin.staff.destroy', $s->id) }}" method="POST" style="display:inline" onsubmit="return confirm('Delete this staff?')">
              @csrf
              @method('DELETE')
              <button class="btn" type="submit">Delete</button>
            </form>
          </td>
        </tr>
      @empty
        <tr><td colspan="8" class="muted">No staff found.</td></tr>
      @endforelse
    </tbody>
  </table>
</div>
@endsection