@extends('layouts.app')

@section('content')

<div class="max-w-7xl mx-auto p-6">

    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-3xl font-bold text-[#1c1d56]">
                Kelola User
            </h1>

            <p class="text-slate-500 text-sm mt-1">
                Daftar hak akses dan manajemen pengguna aplikasi LPKA
            </p>
        </div>

        <div class="flex items-center gap-2">
            <a href="{{ route('admin.users.create') }}"
               class="bg-[#1c1d56] hover:opacity-90 text-white px-5 py-3 rounded-xl font-semibold transition text-sm">
                + Tambah User
            </a>
        </div>
    </div>

    {{-- ALERT SUCCESS --}}
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-700 text-sm rounded-xl font-medium">
            ✓ {{ session('success') }}
        </div>
    @endif

    <div class="bg-white rounded-2xl shadow border border-slate-200 overflow-hidden">

        <table class="w-full text-sm border-collapse">

            <thead class="bg-[#1c1d56] text-white">
                <tr>
                    <th class="p-4 text-left">Nama</th>
                    <th class="p-4 text-left">Email</th>
                    <th class="p-4 text-center">Role</th>
                    <th class="p-4 text-center w-[180px]">Aksi</th>
                </tr>
            </thead>

            <tbody>
                @foreach($users as $user)
                <tr class="border-b hover:bg-slate-50 transition">

                    <td class="p-4 font-semibold">
                        {{ $user->name }}
                    </td>

                    <td class="p-4 text-slate-600">
                        {{ $user->email }}
                    </td>

<td class="p-4 text-center"> 
    <span class="px-3 py-1 text-xs rounded-full font-bold uppercase tracking-wider inline-block
        {{ $user->role == 'admin' ? 'bg-red-100 text-red-700' : '' }}
        {{ $user->role == 'staff' ? 'bg-green-100 text-green-700' : '' }}
        {{ $user->role == 'user' ? 'bg-blue-100 text-blue-700' : '' }}">
        {{ $user->role }}
    </span>
</td>

                    <td class="p-4">
                        <div class="flex items-center justify-center gap-2">

                            <a href="{{ route('admin.users.edit', $user) }}"
                               class="px-3 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg text-xs font-semibold transition">
                                Edit
                            </a>

                            <form method="POST" action="{{ route('admin.users.delete', $user) }}" class="inline m-0 p-0">
                                @csrf
                                @method('DELETE')
                                <button type="submit" 
                                        onclick="return confirm('Yakin hapus user ini?')"
                                        class="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-xs font-semibold transition">
                                    Hapus
                                </button>
                            </form>

                        </div>
                    </td>

                </tr>
                @endforeach
            </tbody>

        </table>

    </div>

</div>

@endsection