@extends('layouts.admin')

@section('title', __('admin_staff.title'))

@section('content')
    <div class="page-header">
        <div>
            <h1 class="page-title">{{ __('admin_staff.title') }}</h1>
            <p>{{ __('admin_staff.limit_help') }}</p>
        </div>

        @if($staffMembers->count() < 2)
            <a class="button" href="{{ route('admin.staff.create') }}">{{ __('admin_staff.add') }}</a>
        @endif
    </div>

    <div class="card table-wrap">
        <table>
            <thead><tr>
                <th>{{ __('admin_staff.name') }}</th>
                <th>{{ __('admin_staff.username') }}</th>
                <th>{{ __('admin_staff.email') }}</th>
                <th>{{ __('admin_staff.status') }}</th>
                <th>{{ __('admin_staff.permissions') }}</th>
                <th>{{ __('admin_staff.actions') }}</th>
            </tr></thead>
            <tbody>
            @forelse($staffMembers as $staff)
                <tr>
                    <td>{{ $staff->full_name }}</td>
                    <td>{{ $staff->username }}</td>
                    <td>{{ $staff->email }}</td>
                    <td>{{ __('admin_staff.statuses.'.$staff->status) }}</td>
                    <td>
                        @foreach($staff->staffPermissions->where('is_allowed', true) as $permission)
                            <span class="tag">{{ __('admin_staff.permission_labels.'.$permission->permission_name) }}</span>
                        @endforeach
                    </td>
                    <td class="actions">
                        <a class="button button-secondary" href="{{ route('admin.staff.edit', $staff) }}">{{ __('admin_staff.edit') }}</a>
                        <form method="POST" action="{{ route('admin.staff.destroy', $staff) }}" onsubmit="return confirm('{{ __('admin_staff.delete_confirm') }}')">
                            @csrf @method('DELETE')
                            <button class="button button-danger" type="submit">{{ __('admin_staff.delete') }}</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6">{{ __('admin_staff.empty') }}</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
@endsection

@push('styles')
    .table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid var(--border);text-align:start;vertical-align:top}.tag{display:inline-block;padding:5px 8px;margin:2px;border-radius:999px;background:var(--primary-light);color:var(--primary-dark);font-size:12px}.actions{display:flex;gap:7px;flex-wrap:wrap}.actions form{margin:0}
@endpush