@extends('layouts.app')

@section('title', 'Staff · ' . config('app.name'))
@section('page-title', 'Staff Management')

@section('content')
    <div class="card mb-3">
        <div class="card-body">
            <form method="GET" class="row g-2 align-items-end">
                <div class="col-md-4">
                    <label class="form-label small">Search</label>
                    <input type="text" name="search" value="{{ request('search') }}" class="form-control form-control-sm" placeholder="Name, employee ID, username...">
                </div>
                <div class="col-md-3">
                    <label class="form-label small">Department</label>
                    <select name="department_id" class="form-select form-select-sm">
                        <option value="">All</option>
                        @foreach($departments as $department)
                            <option value="{{ $department->id }}" @selected((string) request('department_id') === (string) $department->id)>{{ $department->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small">Status</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="">All</option>
                        <option value="active" @selected(request('status') === 'active')>Active</option>
                        <option value="inactive" @selected(request('status') === 'inactive')>Inactive</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-sm btn-primary w-100 text-nowrap"><i class="bi bi-funnel"></i> Filter</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <span class="fw-semibold">Staff Members</span>
            <a href="{{ route('admin.staff.create') }}" class="btn btn-sm btn-primary"><i class="bi bi-plus-lg"></i> Add Staff</a>
        </div>
        <div class="table-responsive">
            <table class="table mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th></th>
                        <th>Employee ID</th>
                        <th>Name</th>
                        <th>Department</th>
                        <th>Designation</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($staff as $member)
                        <tr>
                            <td>
                                @if($member->profile_photo)
                                    <img src="{{ \Illuminate\Support\Facades\Storage::url($member->profile_photo) }}" class="rounded-circle" width="32" height="32" style="object-fit: cover;" alt="">
                                @else
                                    <i class="bi bi-person-circle fs-4 text-secondary"></i>
                                @endif
                            </td>
                            <td>{{ $member->employee_id }}</td>
                            <td>{{ $member->name }}</td>
                            <td>{{ $member->department?->name ?? '—' }}</td>
                            <td>{{ $member->designation?->name ?? '—' }}</td>
                            <td><x-role-chip :role="$member->roles->first()->name ?? 'unassigned'" /></td>
                            <td>
                                <span class="badge {{ $member->status === 'active' ? 'bg-success' : 'bg-secondary' }}">
                                    {{ ucfirst($member->status) }}
                                </span>
                            </td>
                            <td class="text-end">
                                <a href="{{ route('admin.staff.edit', $member) }}" class="btn btn-sm btn-outline-secondary">Edit</a>
                                @if($member->id !== auth()->id())
                                    <form method="POST" action="{{ route('admin.staff.toggle-status', $member) }}" class="d-inline">
                                        @csrf
                                        @method('PATCH')
                                        <button type="submit" class="btn btn-sm btn-outline-{{ $member->status === 'active' ? 'warning' : 'success' }}">
                                            {{ $member->status === 'active' ? 'Deactivate' : 'Activate' }}
                                        </button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="text-center text-secondary py-4">No staff members yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-3">{{ $staff->links() }}</div>
@endsection