@extends('layouts.epelcon')
@section('title', 'Staff & Roles')

@section('content')
<div x-data="{ add: false, edit: null }">
    <div class="mb-5 flex items-center justify-between">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Staff & role management</h1>
            <p class="text-sm text-slate-500">Login accounts and role-based access to the Epelcon portal.</p>
        </div>
        <button @click="add = true" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ Staff account</button>
    </div>

    <div class="no-scrollbar mb-4 flex gap-2 overflow-x-auto">
        <a href="{{ route('epelcon.staff.index') }}" class="shrink-0 rounded-full px-4 py-2 text-xs font-bold {{ ! request('role') ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200' }}">All</a>
        @foreach (\App\Models\User::STAFF_ROLES as $role => $label)
            <a href="{{ route('epelcon.staff.index', ['role' => $role]) }}"
               class="shrink-0 rounded-full px-4 py-2 text-xs font-bold {{ request('role') === $role ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200' }}">{{ $label }} ({{ $roleCounts[$role] ?? 0 }})</a>
        @endforeach
    </div>

    <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
        <table class="w-full min-w-[720px] text-sm">
            <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                <th class="px-4 py-3">Staff</th><th class="px-4 py-3">Role</th><th class="px-4 py-3">Department</th><th class="px-4 py-3">Last login</th><th class="px-4 py-3">Status</th><th class="px-4 py-3"></th>
            </tr></thead>
            <tbody class="divide-y divide-slate-100">
            @foreach ($staff as $member)
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-3">
                            <div class="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-700">{{ $member->initials() }}</div>
                            <div><p class="font-bold text-slate-800">{{ $member->name }}</p><p class="text-xs text-slate-400">{{ $member->email }}</p></div>
                        </div>
                    </td>
                    <td class="px-4 py-3"><span class="rounded-full bg-indigo-50 px-2.5 py-1 text-[10px] font-bold uppercase text-indigo-700">{{ $member->roleLabel() }}</span></td>
                    <td class="px-4 py-3 text-slate-600">{{ $member->department ?? '—' }}</td>
                    <td class="px-4 py-3 text-slate-500">{{ $member->last_login_at?->diffForHumans() ?? 'Never' }}</td>
                    <td class="px-4 py-3"><span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase {{ $member->status === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">{{ $member->status }}</span></td>
                    <td class="px-4 py-3">
                        <div class="flex justify-end gap-1.5">
                            <button @click='edit = {{ json_encode($member->only(['id','name','email','phone','role','department'])) }}' class="rounded-lg bg-indigo-50 px-2.5 py-1.5 text-[11px] font-bold text-indigo-600 hover:bg-indigo-100">Edit</button>
                            @if ($member->id !== auth()->id())
                                <form method="POST" action="{{ route('epelcon.staff.toggle', $member) }}">@csrf
                                    <button class="rounded-lg px-2.5 py-1.5 text-[11px] font-bold {{ $member->status === 'active' ? 'bg-rose-50 text-rose-600 hover:bg-rose-100' : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100' }}">
                                        {{ $member->status === 'active' ? 'Suspend' : 'Activate' }}</button></form>
                            @endif
                        </div>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

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

    {{-- Add/Edit modal --}}
    <template x-for="mode in ['add', 'edit']" :key="mode">
        <div x-cloak x-show="(mode === 'add' && add) || (mode === 'edit' && edit)" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="add = false; edit = null"></div>
            <div x-transition class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
                <h2 class="mb-4 text-lg font-extrabold" x-text="mode === 'add' ? 'New staff account' : 'Edit staff account'"></h2>
                <form method="POST" :action="mode === 'add' ? '{{ route('epelcon.staff.store') }}' : '{{ url('epelcon/staff') }}/' + edit?.id + '/update'" class="grid grid-cols-2 gap-4">@csrf
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Full name</span>
                        <input name="name" required :value="mode === 'edit' ? edit?.name : ''" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Email (login)</span>
                        <input type="email" name="email" required :value="mode === 'edit' ? edit?.email : ''" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Phone</span>
                        <input name="phone" :value="mode === 'edit' ? edit?.phone : ''" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Role</span>
                        <select name="role" class="w-full rounded-xl border-slate-200 text-sm" x-init="mode === 'edit' && edit && ($el.value = edit.role)">
                            @foreach (\App\Models\User::STAFF_ROLES as $role => $label)<option value="{{ $role }}">{{ $label }}</option>@endforeach
                        </select></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Department</span>
                        <input name="department" :value="mode === 'edit' ? edit?.department : ''" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500" x-text="mode === 'add' ? 'Password' : 'New password (leave blank to keep)'"></span>
                        <input type="password" name="password" :required="mode === 'add'" minlength="8" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <div class="col-span-2 flex justify-end gap-2">
                        <button type="button" @click="add = false; edit = null" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                        <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Save account</button>
                    </div>
                </form>
            </div>
        </div>
    </template>
</div>
@endsection
