@extends('layouts.admin')

@section('heading', 'Staff')
@section('subheading', 'Manage staff logins and their assigned roles.')

@section('actions')
  <a href="{{ route('shop.staff.create') }}" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#C2185B;">+ Add staff</a>
@endsection

@section('content')

@include('partials.master-tabs')

@if (session('status'))
  <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#E1F5EE; color:#0F6E56;">
    {{ session('status') }}
  </div>
@endif

<div class="card p-6">

  {{-- Search + Filter bar --}}
  <form method="GET" action="{{ route('shop.staff.index') }}" class="mb-5 flex flex-wrap items-center gap-3">
    <div class="relative flex-1 min-w-[220px]">
      <input
        type="text"
        name="search"
        value="{{ request('search') }}"
        placeholder="Search by name, email or staff ID..."
        class="w-full text-sm rounded-lg px-4 py-2 border focus:outline-none"
        style="border-color:#EEEDFE;"
      >
    </div>

    <select name="role" class="text-sm rounded-lg px-3 py-2 border focus:outline-none" style="border-color:#EEEDFE;">
      <option value="">All roles</option>
      @foreach($roles as $role)
        <option value="{{ $role->id }}" @selected(request('role') == $role->id)>
          {{ $role->name }}
        </option>
      @endforeach
    </select>

    <select name="status" class="text-sm rounded-lg px-3 py-2 border focus:outline-none" style="border-color:#EEEDFE;">
      <option value="">All statuses</option>
      <option value="active" @selected(request('status') === 'active')>Active</option>
      <option value="inactive" @selected(request('status') === 'inactive')>Inactive</option>
    </select>

    <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#5E35B1;">
      Filter
    </button>

    @if(request()->hasAny(['search', 'role', 'status']))
      <a href="{{ route('shop.staff.index') }}" class="text-xs font-medium" style="color:#a19a8f;">Clear</a>
    @endif
  </form>

  <table class="w-full text-sm">
    <thead>
      <tr class="text-left" style="color:#a19a8f;">
        <th class="pb-3 font-medium text-xs">Staff ID</th>
        <th class="pb-3 font-medium text-xs">Name</th>
         
        <th class="pb-3 font-medium text-xs">Role</th>
        <th class="pb-3 font-medium text-xs">Status</th>
        <th class="pb-3 font-medium text-xs text-right">Actions</th>
      </tr>
    </thead>
    <tbody style="color:#1A1625;">
      @forelse($staff as $member)
        <tr class="border-t" style="border-color:#f2ece0;">
          <td class="py-3 text-xs font-medium" style="color:#5E35B1;">{{ $member->staff_code ?? '—' }}</td>
          <td class="py-3 font-medium">{{ $member->name }}</td>
           
          <td class="py-3">
            @if($member->role)
              <span class="text-xs px-2 py-1 rounded-full" style="background:#EEEDFE; color:#5E35B1;">{{ $member->role->name }}</span>
            @else
              <span class="text-xs" style="color:#a19a8f;">No role assigned</span>
            @endif
          </td>
          <td class="py-3">
            @if($member->is_active)
              <span class="text-xs px-2 py-1 rounded-full" style="background:#E1F5EE; color:#0F6E56;">Active</span>
            @else
              <span class="text-xs px-2 py-1 rounded-full" style="background:#FCEBEB; color:#791F1F;">Inactive</span>
            @endif
          </td>
          <td class="py-3 text-right">
            <a href="{{ route('shop.staff.edit', $member) }}" class="text-xs font-medium" style="color:#5E35B1;">Edit</a>
            <form method="POST" action="{{ route('shop.staff.destroy', $member) }}" class="inline" onsubmit="return confirm('Remove this staff member?');">
              @csrf @method('DELETE')
              <button type="submit" class="text-xs font-medium ml-3" style="color:#C2185B;">Delete</button>
            </form>
          </td>
        </tr>
      @empty
        <tr><td colspan="6" class="py-6 text-center text-sm" style="color:#a19a8f;">
          @if(request()->hasAny(['search', 'role', 'status']))
            No staff found matching your filters.
          @else
            No staff yet.
          @endif
        </td></tr>
      @endforelse
    </tbody>
  </table>

  @if(method_exists($staff, 'links'))
    <div class="mt-4">
      {{ $staff->appends(request()->query())->links() }}
    </div>
  @endif
</div>

@endsection