@extends('layouts.portal')

@section('title', 'User Roles & Access Control — Abu Dhabi Auto Care')

@section('content')
<div class="space-y-6">
    
    <div>
        <div class="flex items-center space-x-2 text-xs text-amber-400 font-bold mb-1">
            <span>SUPER ADMIN EXCLUSIVE</span>
        </div>
        <h1 class="text-2xl font-black text-white tracking-tight">User Roles & Access Control</h1>
        <p class="text-xs text-slate-400 mt-1">Manage system administrators, workshop technicians, and client permissions.</p>
    </div>

    <div class="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden shadow-xl">
        <div class="overflow-x-auto">
            <table class="w-full text-xs text-left">
                <thead class="bg-slate-950/70 border-b border-slate-800 text-slate-400 uppercase font-bold">
                    <tr>
                        <th class="px-5 py-3.5">User</th>
                        <th class="px-5 py-3.5">Contact Details</th>
                        <th class="px-5 py-3.5">Assigned Role</th>
                        <th class="px-5 py-3.5">Account Status</th>
                        <th class="px-5 py-3.5 text-right">Update Permissions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/80 text-slate-300">
                    @foreach($users as $user)
                        <tr class="hover:bg-slate-800/40 transition">
                            <td class="px-5 py-4">
                                <div class="font-bold text-white text-sm">{{ $user->name }}</div>
                                <div class="text-[11px] text-slate-400">ID #{{ $user->id }} • Joined {{ $user->created_at->format('M d, Y') }}</div>
                            </td>
                            <td class="px-5 py-4">
                                <div class="font-semibold text-slate-200">{{ $user->email }}</div>
                                <div class="text-[11px] text-slate-400">{{ $user->phone ?: 'No phone logged' }}</div>
                            </td>
                            <td class="px-5 py-4">
                                <span class="px-2.5 py-1 rounded text-[11px] font-bold uppercase {{ $user->role_badge_class }}">
                                    {{ $user->role_title }}
                                </span>
                            </td>
                            <td class="px-5 py-4">
                                <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase {{ $user->status === 'active' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-rose-500/10 text-rose-400' }}">
                                    {{ $user->status }}
                                </span>
                            </td>
                            <td class="px-5 py-4 text-right">
                                <form action="{{ route('admin.users.update_role', $user->id) }}" method="POST" class="inline-flex items-center space-x-2">
                                    @csrf
                                    <select name="role" class="px-2.5 py-1.5 rounded-lg bg-slate-950 border border-slate-800 text-white text-xs font-semibold focus:outline-none focus:border-sky-500">
                                        <option value="super_admin" {{ $user->role === 'super_admin' ? 'selected' : '' }}>Super Admin</option>
                                        <option value="admin" {{ $user->role === 'admin' ? 'selected' : '' }}>Admin</option>
                                        <option value="technician" {{ $user->role === 'technician' ? 'selected' : '' }}>Technician</option>
                                        <option value="client" {{ $user->role === 'client' ? 'selected' : '' }}>Client</option>
                                    </select>

                                    <select name="status" class="px-2 py-1.5 rounded-lg bg-slate-950 border border-slate-800 text-white text-xs font-semibold focus:outline-none focus:border-sky-500">
                                        <option value="active" {{ $user->status === 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ $user->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>

                                    <button type="submit" class="px-3 py-1.5 rounded-lg bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs transition">
                                        Save
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection