@extends('layouts.app')

@section('title', 'Staff Management')
@section('page-title', 'Staff Management')

@section('content')
{{-- Header --}}
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <p class="text-muted mb-0 small">Manage all admin and staff accounts</p>
    </div>
    <a href="{{ route('admin.staff.create') }}" class="btn btn-sm text-white px-3" style="background:#1a2a4a">
        <i class="bi bi-person-plus me-1"></i> Add Staff
    </a>
</div>

{{-- Filters --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body py-3">
        <form method="GET" action="{{ route('admin.staff.index') }}" class="row g-2 align-items-end">
            <div class="col-md-5">
                <input
                    type="text"
                    name="search"
                    class="form-control"
                    placeholder="Search by name, email or mobile…"
                    value="{{ request('search') }}"
                >
            </div>
            <div class="col-md-3">
                <select name="status" class="form-select">
                    <option value="">All Status</option>
                    <option value="active"   {{ request('status') === 'active'   ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div class="col-auto d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-search me-1"></i>Search
                </button>
                @if(request()->hasAny(['search','status']))
                    <a href="{{ route('admin.staff.index') }}" class="btn btn-outline-secondary">Clear</a>
                @endif
            </div>
        </form>
    </div>
</div>

{{-- Table --}}
<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        @if($staff->isEmpty())
            <div class="text-center py-5 text-muted">
                <i class="bi bi-people fs-1 d-block mb-2 opacity-25"></i>
                No staff accounts found.
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            @include('partials._sort_th', ['column' => 'name', 'label' => 'Name / Email', 'thClass' => 'ps-4'])
                            <th>Mobile</th>
                            @include('partials._sort_th', ['column' => 'role', 'label' => 'Role'])
                            <th>Status</th>
                            @include('partials._sort_th', ['column' => 'created_at', 'label' => 'Created'])
                            <th class="text-end pe-4">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($staff as $member)
                        <tr>
                            <td class="ps-4">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-semibold flex-shrink-0"
                                         style="width:38px;height:38px;background:#1a2a4a;font-size:14px">
                                        {{ strtoupper(substr($member->name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <div class="fw-semibold lh-1">{{ $member->name }}
                                            @if($member->id === auth()->id())
                                                <span class="badge bg-secondary ms-1" style="font-size:0.65rem">You</span>
                                            @endif
                                        </div>
                                        <div class="text-muted" style="font-size:0.8rem">{{ $member->email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-muted small">{{ $member->mobile ?? '—' }}</td>
                            <td>
                                @if($member->isAdmin())
                                    <span class="badge bg-danger bg-opacity-10 text-danger">Admin</span>
                                @else
                                    <span class="badge bg-primary bg-opacity-10 text-primary">Staff</span>
                                @endif
                            </td>
                            <td>
                                @if($member->is_active)
                                    <span class="badge bg-success bg-opacity-10 text-success">
                                        <i class="bi bi-circle-fill me-1" style="font-size:0.5rem"></i>Active
                                    </span>
                                @else
                                    <span class="badge bg-danger bg-opacity-10 text-danger">
                                        <i class="bi bi-circle-fill me-1" style="font-size:0.5rem"></i>Inactive
                                    </span>
                                @endif
                            </td>
                            <td class="text-muted small">{{ $member->created_at->format('d M Y') }}</td>
                            <td class="text-end pe-4">
                                <div class="d-flex justify-content-end gap-1">
                                    <a href="{{ route('admin.staff.show', $member) }}"
                                       class="btn btn-sm btn-light" title="View">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('admin.staff.edit', $member) }}"
                                       class="btn btn-sm btn-light" title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <a href="{{ route('admin.staff.activity', $member) }}"
                                       class="btn btn-sm btn-light" title="Activity Log">
                                        <i class="bi bi-activity"></i>
                                    </a>
                                    @if($member->id !== auth()->id())
                                        <form method="POST" action="{{ route('admin.staff.toggle-status', $member) }}"
                                              data-confirm="{{ $member->is_active ? 'Deactivate' : 'Activate' }} {{ $member->name }}?">
                                            @csrf @method('PATCH')
                                            <button
                                                type="submit"
                                                class="btn btn-sm {{ $member->is_active ? 'btn-warning' : 'btn-success' }}"
                                                title="{{ $member->is_active ? 'Deactivate' : 'Activate' }}"
                                            >
                                                <i class="bi bi-{{ $member->is_active ? 'person-slash' : 'person-check' }}"></i>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if($staff->hasPages())
                <div class="px-4 py-3 border-top">
                    {{ $staff->links() }}
                </div>
            @endif
        @endif
    </div>
</div>
@endsection