@extends('layouts.app')

@section('header', 'Manajemen User')

@section('content')
<div class="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="p-8 border-b border-gray-100 flex flex-col md:flex-row justify-between items-center gap-4">
        <div>
            <h3 class="text-xl font-extrabold text-gray-800">Daftar Pengguna Sistem</h3>
            <p class="text-sm text-gray-500">Kelola akses akun Orang Tua Asuh dan Admin</p>
        </div>
        <div class="flex items-center space-x-3 w-full md:w-auto">
            <form action="{{ route('users.index') }}" method="GET" class="relative flex-1 md:flex-none">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari user..." 
                    class="pl-10 pr-10 py-3 bg-gray-50 border border-gray-100 rounded-2xl text-sm focus:ring-2 focus:ring-primary focus:bg-white outline-none w-full md:w-64 transition-all">
                <i class="fas fa-search absolute left-4 top-3.5 text-gray-400"></i>
                @if(request('search'))
                    <a href="{{ route('users.index') }}" class="absolute right-4 top-3.5 text-gray-400 hover:text-red-500">
                        <i class="fas fa-times-circle"></i>
                    </a>
                @endif
            </form>
            <a href="{{ route('users.create') }}" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white rounded-2xl font-bold text-sm shadow-lg shadow-primary/20 transition-all flex items-center whitespace-nowrap">
                <i class="fas fa-plus mr-2"></i> Tambah User
            </a>
        </div>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-left">
            <thead class="bg-gray-50 text-gray-500 uppercase text-[10px] font-bold tracking-widest">
                <tr>
                    <th class="px-8 py-4">Nama & Email</th>
                    <th class="px-8 py-4">Jabatan</th>
                    <th class="px-8 py-4">Desa Penugasan</th>
                    <th class="px-8 py-4">Role</th>
                    <th class="px-8 py-4 text-right">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($users as $user)
                <tr class="hover:bg-gray-50/50 transition-colors">
                    <td class="px-8 py-4">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold mr-3">
                                {{ substr($user->name, 0, 1) }}
                            </div>
                            <div>
                                <p class="text-sm font-bold text-gray-900">{{ $user->name }}</p>
                                <p class="text-xs text-gray-500">{{ $user->email }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-8 py-4">
                        <span class="text-xs font-medium text-gray-600">{{ $user->position ?? '-' }}</span>
                    </td>
                    <td class="px-8 py-4">
                        @if($user->village)
                            <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-[10px] font-bold uppercase">{{ $user->village }}</span>
                        @else
                            <span class="text-gray-400">-</span>
                        @endif
                    </td>
                    <td class="px-8 py-4">
                        <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-[10px] font-bold uppercase">
                            {{ $user->getRoleNames()->first() ?? 'No Role' }}
                        </span>
                    </td>
                    <td class="px-8 py-4 text-right">
                        <div class="flex justify-end space-x-2">
                            <a href="{{ route('users.edit', $user->id) }}" class="p-2 text-gray-400 hover:text-primary transition-colors">
                                <i class="fas fa-edit"></i>
                            </a>
                            @if($user->id !== Auth::id())
                            <form action="{{ route('users.destroy', $user->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus user ini?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2 text-gray-400 hover:text-red-500 transition-colors">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    @if($users->hasPages())
    <div class="p-8 border-t border-gray-100">
        {{ $users->links() }}
    </div>
    @endif
</div>
@endsection
