@extends('layouts.app')

@section('title', 'Staff')
@section('nav_staff', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Staff & Roles')
@section('page_subtitle', 'Manage team members and their access')

@section('content')

@if(session('success'))
<div class="mb-4 px-4 py-3 bg-green-50 border-[0.5px] border-green-200 rounded-xl text-sm text-green-700">
    {{ session('success') }}
</div>
@endif
@if(session('error'))
<div class="mb-4 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-sm text-red-700">
    {{ session('error') }}
</div>
@endif

{{-- Section tab nav + action button --}}
<div class="flex items-center justify-between mb-5">
    <div class="flex gap-1 bg-white border-[0.5px] border-gray-200 rounded-lg p-1">
        <a href="{{ route('staff.index') }}"
           class="px-3 py-1.5 text-xs font-semibold rounded-md bg-teal-600 text-white transition-colors">
            Staff Members
        </a>
        @can('roles.view')
        <a href="{{ route('roles.index') }}"
           class="px-3 py-1.5 text-xs font-medium text-gray-500 hover:bg-gray-50 rounded-md transition-colors">
            Roles &amp; Permissions
        </a>
        @endcan
    </div>

    @can('staff.manage')
    <a href="{{ route('staff.create') }}"
       class="px-4 py-2 text-xs font-semibold bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">
        + Add Staff Member
    </a>
    @endcan
</div>

{{-- Status filter pills --}}
<div class="flex gap-2 mb-4">
    <a href="{{ route('staff.index') }}"
       class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] transition-colors
              {{ $status === 'all' ? 'bg-gray-800 text-white border-gray-800' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50' }}">
        All
        <span class="ml-1 {{ $status === 'all' ? 'text-gray-400' : 'text-gray-400' }}">{{ $counts['all'] }}</span>
    </a>
    <a href="{{ route('staff.index', ['status' => 'active']) }}"
       class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] transition-colors
              {{ $status === 'active' ? 'bg-green-600 text-white border-green-600' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50' }}">
        Active
        <span class="ml-1 {{ $status === 'active' ? 'text-green-200' : 'text-gray-400' }}">{{ $counts['active'] }}</span>
    </a>
    <a href="{{ route('staff.index', ['status' => 'inactive']) }}"
       class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] transition-colors
              {{ $status === 'inactive' ? 'bg-gray-600 text-white border-gray-600' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50' }}">
        Inactive
        <span class="ml-1 {{ $status === 'inactive' ? 'text-gray-300' : 'text-gray-400' }}">{{ $counts['inactive'] }}</span>
    </a>
</div>

@php
$roleColors = [
    'super_admin'  => 'bg-purple-50 text-purple-700 border-purple-200',
    'manager'      => 'bg-teal-50 text-teal-700 border-teal-200',
    'front_desk'   => 'bg-blue-50 text-blue-700 border-blue-200',
    'housekeeping' => 'bg-amber-50 text-amber-700 border-amber-200',
    'maintenance'  => 'bg-orange-50 text-orange-700 border-orange-200',
    'accountant'   => 'bg-slate-100 text-slate-600 border-slate-300',
];
$avatarColors = [
    'super_admin'  => 'bg-purple-100 text-purple-700',
    'manager'      => 'bg-teal-100 text-teal-700',
    'front_desk'   => 'bg-blue-100 text-blue-700',
    'housekeeping' => 'bg-amber-100 text-amber-700',
    'maintenance'  => 'bg-orange-100 text-orange-700',
    'accountant'   => 'bg-slate-100 text-slate-600',
];
@endphp

<div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
    @if($staff->isEmpty())
    <p class="px-5 py-10 text-center text-gray-300 text-sm">No staff members found.</p>
    @else
    <div class="overflow-x-auto">
    <table class="w-full text-sm min-w-[640px]">
        <thead>
            <tr class="border-b border-gray-100 bg-gray-50/50">
                <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Staff Member</th>
                <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Role</th>
                <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Phone</th>
                <th class="px-4 py-2.5 text-center text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Status</th>
                <th class="hidden md:table-cell px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Last Login</th>
                <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($staff as $member)
            @php
                $roleSlug    = $member->role?->slug ?? '';
                $roleColor   = $roleColors[$roleSlug] ?? 'bg-indigo-50 text-indigo-700 border-indigo-200';
                $avatarColor = $avatarColors[$roleSlug] ?? 'bg-indigo-100 text-indigo-700';
            @endphp
            <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors {{ !$member->active ? 'opacity-55' : '' }}">
                <td class="px-5 py-3">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full {{ $avatarColor }} flex items-center justify-center text-xs font-bold flex-shrink-0">
                            {{ $member->initials() }}
                        </div>
                        <div>
                            <div class="flex items-center gap-1.5">
                                <p class="font-medium text-gray-800">{{ $member->name }}</p>
                                @if($member->id === auth()->id())
                                <span class="text-[10px] font-medium text-teal-600 bg-teal-50 border-[0.5px] border-teal-200 px-1.5 py-0.5 rounded">You</span>
                                @endif
                            </div>
                            <p class="text-[10px] text-gray-400">{{ $member->email }}</p>
                        </div>
                    </div>
                </td>
                <td class="px-4 py-3">
                    @if($member->role)
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] {{ $roleColor }}">
                        {{ $member->role->name }}
                    </span>
                    @else
                    <span class="text-gray-300 text-xs">—</span>
                    @endif
                    @if($member->position)
                    <p class="text-[10px] text-gray-400 mt-0.5">{{ $member->position }}</p>
                    @endif
                </td>
                <td class="px-4 py-3">
                    <p class="text-xs text-gray-600">{{ $member->phone ?: '—' }}</p>
                </td>
                <td class="px-4 py-3 text-center">
                    @if($member->active)
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-green-50 text-green-700 border-green-200">
                        <span class="w-1.5 h-1.5 rounded-full bg-green-400 inline-block"></span>Active
                    </span>
                    @else
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-gray-100 text-gray-500 border-gray-300">
                        <span class="w-1.5 h-1.5 rounded-full bg-gray-400 inline-block"></span>Inactive
                    </span>
                    @endif
                </td>
                <td class="hidden md:table-cell px-4 py-3">
                    @if($member->last_login_at)
                    <p class="text-xs text-gray-600">{{ $member->last_login_at->format('M j, Y') }}</p>
                    <p class="text-[10px] text-gray-400">{{ $member->last_login_at->format('g:i A') }}</p>
                    @else
                    <p class="text-xs text-gray-400">Never</p>
                    @endif
                </td>
                <td class="px-5 py-3 text-right">
                    <div class="flex items-center justify-end gap-2">
                        @can('staff.manage')
                        <a href="{{ route('staff.edit', $member->id) }}"
                           class="text-xs font-medium text-teal-600 hover:text-teal-800 transition-colors">Edit</a>

                        @if($member->id !== auth()->id())
                            @if($member->active)
                            <form method="POST" action="{{ route('staff.deactivate', $member->id) }}"
                                  data-confirm="Deactivate {{ $member->name }}? They will no longer be able to log in." data-danger="true">
                                @csrf
                                <button type="submit" class="text-xs font-medium text-red-500 hover:text-red-700 transition-colors">Deactivate</button>
                            </form>
                            @else
                            <form method="POST" action="{{ route('staff.activate', $member->id) }}"
                                  data-confirm="Reactivate {{ $member->name }}?">
                                @csrf
                                <button type="submit" class="text-xs font-medium text-blue-600 hover:text-blue-800 transition-colors">Activate</button>
                            </form>
                            @endif
                        @endif
                        @endcan
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
    @endif
    @if($staff->hasPages())
    <div class="px-5 py-3 border-t border-gray-100">
        {{ $staff->links() }}
    </div>
    @endif
</div>

@endsection