@extends('admin.layout')

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

@section('page-title', 'Pengaturan')
@section('page-subtitle', 'Daftar pengguna dan admin sistem')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-6" x-data="{ search: '' }">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
        <!-- Header & Actions -->
        <div class="p-6 border-b border-gray-100 dark:border-gray-700 flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h3 class="text-base font-bold text-gray-800 dark:text-white">Daftar User</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Total {{ $users->total() }} pengguna terdaftar</p>
            </div>
            
            <div class="flex items-center gap-3">
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                        <i class="fas fa-search text-sm"></i>
                    </span>
                    <input type="text" x-model="search" placeholder="Cari user..." 
                        class="pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all w-full md:w-64">
                </div>
                <a href="{{ route('admin.users.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-bold transition shadow-lg shadow-blue-600/20 flex items-center">
                    <i class="fas fa-plus mr-2"></i>
                    Tambah User
                </a>
            </div>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50 dark:bg-gray-700/50">
                        <th class="px-6 py-4 text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider">User</th>
                        <th class="px-6 py-4 text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Level</th>
                        <th class="px-6 py-4 text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Prodi</th>
                        <th class="px-6 py-4 text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Kontak</th>
                        <th class="px-6 py-4 text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-4 text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                    @foreach($users as $user)
                    <tr x-show="search === '' || '{{ strtolower($user->Nama) }}'.includes(search.toLowerCase()) || '{{ strtolower($user->Username) }}'.includes(search.toLowerCase())"
                        class="hover:bg-gray-50/50 dark:hover:bg-gray-700/30 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg shadow-sm">
                                    {{ substr($user->Nama, 0, 1) }}
                                </div>
                                <div>
                                    <p class="text-sm font-bold text-gray-800 dark:text-white">{{ $user->Nama }}</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">@ {{ $user->Username }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2.5 py-1 text-[11px] font-bold rounded-md 
                                @if($user->IDLevel == 1) bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300
                                @elseif($user->IDLevel == 2) bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300
                                @else bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 @endif">
                                {{ $user->level->Nama }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-xs text-gray-600 dark:text-gray-400">{{ $user->KodeProdi ?? '-' }}</p>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-xs text-gray-600 dark:text-gray-400">{{ $user->Email ?? '-' }}</p>
                            <p class="text-[10px] text-gray-400">{{ $user->Telp ?? '-' }}</p>
                        </td>
                        <td class="px-6 py-4">
                            @if($user->NA == 'N')
                                <span class="flex items-center text-xs text-green-600 font-medium">
                                    <span class="w-1.5 h-1.5 bg-green-600 rounded-full mr-2"></span>
                                    Aktif
                                </span>
                            @else
                                <span class="flex items-center text-xs text-red-500 font-medium">
                                    <span class="w-1.5 h-1.5 bg-red-500 rounded-full mr-2"></span>
                                    Nonaktif
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-center space-x-2">
                                <a href="{{ route('admin.users.edit', $user->IDUser) }}" 
                                    class="inline-flex items-center justify-center w-9 h-9 bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400 rounded-lg hover:bg-blue-600 hover:text-white dark:hover:bg-blue-500 transition-all duration-200" 
                                    title="Edit User">
                                    <i class="fas fa-edit text-sm"></i>
                                </a>
                                <button type="button" 
                                    onclick="confirmDelete('delete-form-{{ $user->IDUser }}', '{{ $user->Nama }}')" 
                                    class="inline-flex items-center justify-center w-9 h-9 bg-red-100 dark:bg-red-900/40 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-600 hover:text-white dark:hover:bg-red-500 transition-all duration-200" 
                                    title="Hapus User">
                                    <i class="fas fa-trash-alt text-sm"></i>
                                </button>
                                <form id="delete-form-{{ $user->IDUser }}" action="{{ route('admin.users.destroy', $user->IDUser) }}" method="POST" class="hidden">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="p-6 border-t border-gray-100 dark:border-gray-700">
            {{ $users->links() }}
        </div>
    </div>
</div>
@endsection