@extends('admin.layout.tamplate')

@section('content')
    <div class="p-6 md:p-10 space-y-6">
        {{-- Header Section --}}
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div class="flex flex-col gap-1">
                @include('admin.layout.breadcumb')
            </div>

            <div class="flex flex-col md:flex-row gap-4 w-full md:w-auto">
                {{-- Form Pencarian --}}
                <form action="{{ route('dashboard.user') }}" method="GET" class="flex items-center gap-2 w-full md:w-auto">
                    <div class="relative flex-1 md:flex-none">
                        <i
                            class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-sky-500 transition-colors"></i>
                        <input type="text" name="search" value="{{ request('search') }}"
                            placeholder="Cari nama atau email..."
                            class="pl-11 pr-4 py-3 bg-white border border-sky-100 rounded-xl text-sm w-full md:w-64 outline-none focus:border-sky-500 focus:ring-4 focus:ring-sky-500/5 transition shadow-sm">
                    </div>

                    <button type="submit"
                        class="px-5 py-3 bg-white border border-sky-100 text-sky-600 rounded-xl font-bold text-[10px] uppercase tracking-wider hover:bg-sky-50 transition flex items-center gap-2 shadow-sm active:scale-95">
                        Cari
                    </button>

                    @if (request('search'))
                        <a href="{{ route('dashboard.user') }}"
                            class="px-4 py-3 bg-slate-100 text-slate-500 rounded-xl font-bold text-xs hover:bg-slate-200 transition shadow-sm"
                            title="Reset Pencarian">
                            <i class="fas fa-undo-alt"></i>
                        </a>
                    @endif
                </form>

                <a href="{{ route('dashboard.user.tambah') }}"
                    class="px-6 py-3 bg-sky-600 text-white rounded-xl font-bold text-xs shadow-lg shadow-sky-100 hover:bg-sky-700 transition flex items-center justify-center gap-2 active:scale-95">
                    <i class="fas fa-plus"></i> Tambah User
                </a>
            </div>
        </div>

        @include('admin.layout.alert')

        {{-- Tabel Section --}}
        <div class="bg-white rounded-[2.5rem] shadow-sm border border-sky-50 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-sky-50/50">
                            <th
                                class="px-6 py-5 text-[10px] font-bold text-sky-900/40 uppercase tracking-widest border-b border-sky-50">
                                User & Status</th>
                            <th
                                class="px-6 py-5 text-[10px] font-bold text-sky-900/40 uppercase tracking-widest border-b border-sky-50">
                                Informasi Login</th>
                            <th
                                class="px-6 py-5 text-[10px] font-bold text-sky-900/40 uppercase tracking-widest border-b border-sky-50">
                                Hak Akses</th>
                            <th
                                class="px-6 py-5 text-[10px] font-bold text-sky-900/40 uppercase tracking-widest border-b border-sky-50 text-center">
                                Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-sky-50">
                        @forelse($users as $user)
                            <tr class="hover:bg-sky-50/20 transition group">
                                {{-- Nama & Status Active --}}
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        {{-- Bagian Indicator Online di Blade --}}
                                        <div class="relative">
                                            <div
                                                class="w-10 h-10 rounded-full bg-gradient-to-br from-sky-100 to-sky-50 flex items-center justify-center text-sky-600 font-bold shadow-inner uppercase">
                                                {{ substr($user->name, 0, 1) }}
                                            </div>

                                            @php
                                                // Cek jika last_seen_at ada dan selisihnya kurang dari 5 menit
                                                $isOnline =
                                                    $user->last_seen_at &&
                                                    $user->last_seen_at->gt(now()->subMinutes(2));
                                            @endphp

                                            <span
                                                class="absolute bottom-0 right-0 w-3.5 h-3.5 {{ $isOnline ? 'bg-emerald-500' : 'bg-slate-300' }} border-2 border-white rounded-full shadow-sm"
                                                title="{{ $isOnline ? 'Sedang Aktif' : 'Offline (Terakhir: ' . ($user->last_seen_at ? $user->last_seen_at->diffForHumans() : 'Tidak diketahui') . ')' }}">
                                            </span>
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-sm font-bold text-sky-950">{{ $user->name }}</span>
                                            <span class="text-[11px] text-slate-400 font-medium">{{ $user->email }}</span>
                                        </div>
                                    </div>
                                </td>

                                {{-- IP & Browser --}}
                                <td class="px-6 py-4">
                                    <div class="space-y-1.5">
                                        <div class="flex items-center gap-2 text-[11px] font-semibold text-slate-600">
                                            <i class="fas fa-network-wired text-sky-400 w-4"></i>
                                            {{ $user->last_login_ip ?? 'Belum Login' }}
                                        </div>
                                        <div class="flex items-center gap-2 text-[10px] text-slate-400 max-w-[180px] truncate"
                                            title="{{ $user->last_login_browser }}">
                                            <i class="fas fa-desktop w-4"></i>
                                            {{ $user->last_login_browser ? Str::limit($user->last_login_browser, 35) : '-' }}
                                        </div>
                                    </div>
                                </td>

                                {{-- Role Spatie --}}
                                <td class="px-6 py-4">
                                    <div class="flex flex-wrap gap-1">
                                        @forelse($user->getRoleNames() as $role)
                                            <span
                                                class="px-3 py-1 bg-sky-50 text-sky-600 border border-sky-100 rounded-full text-[9px] font-bold uppercase tracking-wider">
                                                {{ $role }}
                                            </span>
                                        @empty
                                            <span class="text-[10px] text-slate-300 italic text-italic">No Role</span>
                                        @endforelse
                                    </div>
                                </td>

                                {{-- Tombol Aksi --}}
                                <td class="px-6 py-4">
                                    <div class="flex justify-center gap-2">
                                        <a href="{{ route('dashboard.user.ubah', $user->id) }}"
                                            class="w-9 h-9 flex items-center justify-center text-amber-500 hover:bg-amber-50 rounded-xl transition shadow-sm border border-amber-100 active:scale-90"
                                            title="Edit User">
                                            <i class="fas fa-edit text-xs"></i>
                                        </a>
                                        <form action="{{ route('dashboard.user.hapus', $user->id) }}" method="POST"
                                            onsubmit="return confirm('Apakah Anda yakin ingin menghapus user ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                class="w-9 h-9 flex items-center justify-center text-red-500 hover:bg-red-50 rounded-xl transition shadow-sm border border-red-100 active:scale-90"
                                                title="Hapus User">
                                                <i class="fas fa-trash text-xs"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-16 text-center">
                                    <div class="flex flex-col items-center gap-3">
                                        <div
                                            class="w-16 h-16 bg-sky-50 rounded-full flex items-center justify-center text-sky-200">
                                            <i class="fas fa-users-slash text-2xl"></i>
                                        </div>
                                        <div class="space-y-1">
                                            <p class="text-sky-950 font-bold">Tidak ada data ditemukan</p>
                                            <p class="text-slate-400 text-xs">Coba gunakan kata kunci pencarian lain.</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination Area --}}
            @if ($users->hasPages())
                <div class="pagination-sky mt-6">
                    {{ $datas->links('pagination::tailwind') }}
                </div>
            @endif
        </div>
    </div>


@endsection