@extends('layouts.app')
@section('title', __('Accounts'))
@section('content')
<div class="mb-6 flex flex-wrap items-end justify-between gap-4">
  <div><p class="text-sm text-slate-500">{{ __('Manage team leader and employee accounts.') }}</p></div>
  @if (auth()->user()->isAdmin())
    <a href="{{ route('admin.members.create') }}" class="rounded-xl bg-blue-900 px-4 py-3 text-sm font-bold text-white transition hover:bg-blue-800">+ {{ __('Create account') }}</a>
  @endif
</div>
<section class="panel-card overflow-hidden">
  <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4 sm:px-6">
    <div><h2 class="font-bold text-slate-900">{{ __('All accounts') }}</h2><p class="mt-1 text-xs text-slate-400">{{ $members->total() }} {{ __('accounts') }}</p></div>
  </div>
  <form method="GET" class="grid gap-3 border-b border-slate-100 p-4 sm:grid-cols-4">
    <input name="search" value="{{ request('search') }}" class="field-control" placeholder="{{ __('Search name, email or member ID') }}">
    <select name="role" class="field-control"><option value="">{{ __('All roles') }}</option><option value="team_leader" @selected(request('role') === 'team_leader')>{{ __('Team Leader') }}</option><option value="employee" @selected(request('role') === 'employee')>{{ __('Employee') }}</option></select>
    <select name="status" class="field-control"><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 class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-bold text-white">{{ __('Search') }}</button>
  </form>
  <div class="table-scroll">
    <table class="w-full text-left text-sm">
      <thead class="bg-slate-50 text-xs font-bold uppercase tracking-wider text-slate-400"><tr><th class="px-5 py-3">{{ __('Member ID') }}</th><th class="px-5 py-3">{{ __('Account') }}</th><th class="px-5 py-3">{{ __('Email') }}</th><th class="px-5 py-3">{{ __('Role') }}</th><th class="px-5 py-3">{{ __('Status') }}</th><th class="px-5 py-3"></th></tr></thead>
      <tbody class="divide-y divide-slate-100">
      @forelse($members as $m)
        <tr class="text-slate-600">
          <td class="whitespace-nowrap px-5 py-4 font-semibold text-slate-800">{{ $m->member_id }}</td>
          <td class="whitespace-nowrap px-5 py-4 font-semibold text-slate-800">{{ $m->name }}</td>
          <td class="whitespace-nowrap px-5 py-4">{{ $m->email }}</td>
          <td class="px-5 py-4"><span class="rounded-full px-2.5 py-1 text-xs font-bold {{ $m->isEmployee() ? 'bg-violet-50 text-violet-700' : 'bg-blue-50 text-blue-700' }}">{{ __($m->isEmployee() ? 'Employee' : 'Team Leader') }}</span></td>
          <td class="px-5 py-4"><span class="rounded-full px-2.5 py-1 text-xs font-bold {{ $m->is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500' }}">{{ $m->is_active ? __('Active') : __('Inactive') }}</span></td>
          <td class="px-5 py-4">@if (auth()->user()->isAdmin())<a href="{{ route('admin.members.edit',$m) }}" class="font-semibold text-blue-700 hover:text-blue-900">{{ __('Edit') }}</a>@else<span class="text-xs text-slate-400">{{ __('View only') }}</span>@endif</td>
        </tr>
      @empty
        <tr><td colspan="6" class="px-5 py-12 text-center text-sm text-slate-400">{{ __('No accounts have been created yet.') }}</td></tr>
      @endforelse
      </tbody>
    </table>
  </div>
  <div class="border-t border-slate-100 px-5 py-4">{{ $members->links() }}</div>
</div>
@endsection