@extends('layouts.app')

@section('content')
<div class="mb-6">
    <h2 class="text-3xl font-black text-gray-900 font-sans tracking-tight">System Users</h2>
    <p class="text-gray-500 mt-1 uppercase text-xs font-bold tracking-widest">Manage login accounts and access roles.</p>
</div>

@if(session('success'))
    <div class="bg-green-50 text-green-700 p-4 rounded-xl border border-green-200 mb-6 font-bold shadow-sm">✅ {{ session('success') }}</div>
@endif
@if($errors->any())
    <div class="bg-red-50 text-red-700 p-4 rounded-xl border border-red-200 mb-6 font-bold shadow-sm">⚠️ {{ $errors->first() }}</div>
@endif

<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
    <div class="xl:col-span-1">
        <form action="{{ route('users.store') }}" method="POST" class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            @csrf
            <h3 class="font-black text-gray-800 uppercase tracking-widest text-sm mb-4">Create New Login Account</h3>
            
            <div class="mb-4">
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Full Name</label>
                <input type="text" name="name" required class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-brand-500 outline-none">
            </div>
            <div class="mb-4">
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Email Address</label>
                <input type="email" name="email" required class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-brand-500 outline-none">
            </div>
            <div class="mb-4">
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Temporary Password</label>
                <input type="text" name="password" required class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-brand-500 outline-none">
            </div>
            <div class="mb-6">
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">System Role</label>
                <select name="role" required class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-brand-500 outline-none bg-white">
                    <option value="Employee">Employee (Cannot view teams)</option>
                    <option value="Manager">Manager (Can evaluate team)</option>
                    <option value="HR">HR (Can oversee directory)</option>
                    <option value="Admin">System Admin (Full Access)</option>
                </select>
            </div>

            <button type="submit" class="w-full bg-gray-900 hover:bg-black text-white font-bold py-3 rounded-xl shadow-lg transition uppercase tracking-widest text-xs">Create User</button>
        </form>
    </div>

    <div class="xl:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <table class="w-full text-left border-collapse">
            <thead class="bg-slate-50 border-b border-gray-200">
                <tr>
                    <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">User Details</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">System Role</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($users as $u)
                    <tr class="hover:bg-slate-50/50 transition">
                        <td class="px-6 py-4">
                            <div class="font-bold text-gray-900">{{ $u->name }}</div>
                            <div class="text-xs text-gray-500 mt-1">{{ $u->email }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-[10px] font-bold uppercase tracking-widest border border-gray-200">{{ $u->role }}</span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <form action="{{ route('users.destroy', $u->id) }}" method="POST" onsubmit="return confirm('Delete this user? They will lose access instantly.');">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-700 text-xs font-bold uppercase tracking-widest transition"><i class="fas fa-trash-alt mr-1"></i> Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="3" class="px-6 py-8 text-center text-gray-400">No other users created yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection