@extends('admin.layout')

@section('title', 'Daftar Manajemen User')
@section('page_heading', 'Manajemen Akun Admin & Operator')

@section('content')
<div class="space-y-6">

    <div class="flex justify-between items-center mb-8">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Daftar Akun Admin</h2>
            <p class="text-sm text-on-surface-variant mt-1">Kelola akses akun superadmin dan operator untuk panel ini.</p>
        </div>
        <a href="{{ route('admin.users.create') }}" class="px-6 py-2.5 rounded-xl bg-primary text-on-primary font-bold text-sm hover:bg-opacity-90 transition-all shadow flex items-center gap-2">
            <span class="material-symbols-outlined text-[20px]">person_add</span>
            <span>Tambah User</span>
        </a>
    </div>

    <!-- Tabs Filter -->
    <div class="flex gap-6 border-b border-outline-variant">
        <a href="{{ route('admin.users.index') }}" class="py-2 text-sm font-bold transition-colors {{ !request()->has('trashed') ? 'text-primary border-b-2 border-primary' : 'text-on-surface-variant hover:text-on-surface' }}">
            Semua User
        </a>
        <a href="{{ route('admin.users.index', ['trashed' => 1]) }}" class="py-2 text-sm font-bold transition-colors {{ request()->has('trashed') ? 'text-primary border-b-2 border-primary' : 'text-on-surface-variant hover:text-on-surface' }}">
            Terhapus (Trash)
        </a>
    </div>

    <!-- Table Card with Horizontal Scroll -->
    <div class="bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs whitespace-nowrap min-w-[800px]">
                <thead class="bg-surface-container-low border-b border-outline-variant text-on-surface-variant font-bold text-[11px] uppercase tracking-wider">
                    <tr>
                        <th class="px-5 py-3.5 w-12 text-center">No</th>
                        <th class="px-5 py-3.5">Nama & Email</th>
                        <th class="px-5 py-3.5">No. WA</th>
                        <th class="px-5 py-3.5 text-center">Status</th>
                        <th class="px-5 py-3.5 text-center">Role</th>
                        <th class="px-5 py-3.5 w-24 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/60">
                    @forelse($users as $user)
                    <tr class="hover:bg-surface-container-low/50 transition-colors">
                        <td class="px-5 py-3.5 text-center font-bold text-on-surface-variant">#{{ $loop->iteration }}</td>
                        <td class="px-5 py-3.5">
                            <div class="font-bold text-on-surface text-xs">{{ $user->name }}</div>
                            <div class="text-[11px] font-normal text-on-surface-variant max-w-xs truncate mt-0.5">{{ $user->email }}</div>
                        </td>
                        <td class="px-5 py-3.5 font-bold text-primary">
                            {{ $user->phone ?? '-' }}
                        </td>
                        <td class="px-5 py-3.5 text-center">
                            @if($user->is_active)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-[#E1F2E8] text-[#1E5128]">
                                Aktif
                            </span>
                            @else
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-[#FCE8E8] text-[#A62727]">
                                Non-aktif
                            </span>
                            @endif
                        </td>
                        <td class="px-5 py-3.5 text-center">
                            @if($user->role === 'superadmin')
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-[10px] font-bold bg-primary-container text-on-primary-container border border-primary/20">
                                    <span class="material-symbols-outlined text-[12px]">shield_person</span>
                                    Superadmin
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-[10px] font-medium bg-surface-container-highest text-on-surface border border-outline-variant">
                                    <span class="material-symbols-outlined text-[12px]">support_agent</span>
                                    Operator
                                </span>
                            @endif
                        </td>
                        <td class="px-5 py-3.5 text-center">
                            <div class="flex items-center justify-center gap-1">
                                @if(request()->has('trashed'))
                                    <!-- Restore Button -->
                                    <form action="{{ route('admin.users.restore', $user) }}" method="POST" class="inline-block form-confirm" data-title="Pulihkan User?" data-text="User ini akan dipulihkan dan bisa aktif kembali.">
                                        @csrf
                                        <button type="submit" title="Pulihkan User" class="p-1.5 rounded-lg text-success hover:bg-success-container/20 transition-colors flex items-center justify-center">
                                            <span class="material-symbols-outlined text-lg">settings_backup_restore</span>
                                        </button>
                                    </form>
                                @else
                                    <!-- Edit Button -->
                                    <a href="{{ route('admin.users.edit', $user) }}"
                                        title="Edit User"
                                        class="p-1.5 rounded-lg text-tertiary hover:bg-tertiary-container/20 transition-colors flex items-center justify-center">
                                        <span class="material-symbols-outlined text-lg">edit</span>
                                    </a>

                                    @if($user->role === 'superadmin')
                                    <button type="button" title="Superadmin tidak dapat diubah statusnya" class="p-1.5 rounded-lg text-outline cursor-not-allowed flex items-center justify-center opacity-50">
                                        <span class="material-symbols-outlined text-lg">block</span>
                                    </button>
                                    <button type="button" title="Superadmin tidak dapat direset" class="p-1.5 rounded-lg text-outline cursor-not-allowed flex items-center justify-center opacity-50">
                                        <span class="material-symbols-outlined text-lg">lock_reset</span>
                                    </button>
                                    <button type="button" title="Superadmin tidak dapat dihapus" class="p-1.5 rounded-lg text-outline cursor-not-allowed flex items-center justify-center opacity-50">
                                        <span class="material-symbols-outlined text-lg">delete</span>
                                    </button>
                                    @else
                                    <!-- Toggle Status -->
                                    <form action="{{ route('admin.users.toggle-status', $user) }}" method="POST" class="inline-block form-confirm" data-title="Ubah Status User?" data-text="Apakah Anda yakin ingin {{ $user->is_active ? 'menonaktifkan' : 'mengaktifkan' }} user ini?">
                                        @csrf
                                        @method('PATCH')
                                        <button type="submit" title="{{ $user->is_active ? 'Nonaktifkan Akun' : 'Aktifkan Akun' }}" class="p-1.5 rounded-lg {{ $user->is_active ? 'text-error hover:bg-error-container' : 'text-success hover:bg-success-container' }} transition-colors flex items-center justify-center">
                                            <span class="material-symbols-outlined text-lg">{{ $user->is_active ? 'block' : 'check_circle' }}</span>
                                        </button>
                                    </form>
                                    
                                    <!-- Reset Password -->
                                    <form action="{{ route('admin.users.reset-password', $user) }}" method="POST" class="inline-block form-confirm" data-title="Reset Password?" data-text="Password baru akan dikirimkan ke email user ini.">
                                        @csrf
                                        <button type="submit" title="Reset Password" class="p-1.5 rounded-lg text-primary hover:bg-primary-container/20 transition-colors flex items-center justify-center">
                                            <span class="material-symbols-outlined text-lg">lock_reset</span>
                                        </button>
                                    </form>

                                    <!-- Delete -->
                                    <form action="{{ route('admin.users.destroy', $user) }}" method="POST" class="inline-block form-confirm" data-title="Hapus User?" data-text="User ini akan dihapus secara permanen.">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" title="Hapus User" class="p-1.5 rounded-lg text-error hover:bg-error-container transition-colors flex items-center justify-center">
                                            <span class="material-symbols-outlined text-lg">delete</span>
                                        </button>
                                    </form>
                                    @endif
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-10 text-center text-on-surface-variant text-xs">
                            Belum ada data user. Klik "Tambah User" untuk membuat akun baru.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection