@extends('layouts.admin')
@section('title', 'Manajemen User')

@section('content')

<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
    <div>
        <h1 class="text-xl font-bold text-gray-900">Manajemen User</h1>
        <p class="text-sm text-gray-500 mt-0.5">Kelola akun admin, kasir, teknisi, dan kurir</p>
    </div>
    <a href="{{ route('admin.users.create') }}"
       class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white
              text-sm font-semibold rounded-xl px-4 py-2.5 transition shadow-sm self-start sm:self-auto">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        Tambah User
    </a>
</div>

{{-- Search --}}
<form method="GET" action="{{ route('admin.users.index') }}" class="mb-5">
    <div class="relative max-w-sm">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"
             fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M21 21l-4.35-4.35M17 11A6 6 0 105 11a6 6 0 0012 0z"/>
        </svg>
        <input type="text" name="search" value="{{ $search }}" placeholder="Cari nama atau email…"
               class="w-full rounded-xl border border-gray-200 pl-9 pr-4 py-2.5 text-sm bg-white
                      focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">
    </div>
</form>

@php
$roleColor = [
    'admin'       => 'bg-purple-100 text-purple-800',
    'cashier'     => 'bg-emerald-100 text-emerald-800',
    'technician'  => 'bg-blue-100 text-blue-800',
    'courier'     => 'bg-amber-100 text-amber-800',
];
$roleLabel = [
    'admin'       => 'Admin',
    'cashier'     => 'Kasir',
    'technician'  => 'Teknisi',
    'courier'     => 'Kurir',
];
@endphp

{{-- Desktop table --}}
<div class="hidden md:block bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
    <table class="w-full text-sm">
        <thead>
            <tr class="bg-gray-50 border-b border-gray-100 text-left">
                <th class="px-5 py-3 font-semibold text-gray-600">Nama</th>
                <th class="px-5 py-3 font-semibold text-gray-600">Email</th>
                <th class="px-5 py-3 font-semibold text-gray-600">Role</th>
                <th class="px-5 py-3 font-semibold text-gray-600">Dibuat</th>
                <th class="px-5 py-3 font-semibold text-gray-600 text-right">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($users as $user)
            <tr class="hover:bg-gray-50/60 transition {{ $user->id === auth()->id() ? 'bg-brand-50/30' : '' }}">
                <td class="px-5 py-3">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-brand-100 flex items-center justify-center
                                    font-bold text-brand-700 text-sm uppercase flex-shrink-0">
                            {{ substr($user->name, 0, 1) }}
                        </div>
                        <div>
                            <p class="font-medium text-gray-900">{{ $user->name }}</p>
                            @if($user->id === auth()->id())
                                <p class="text-xs text-brand-500">Akun Anda</p>
                            @endif
                        </div>
                    </div>
                </td>
                <td class="px-5 py-3 text-gray-600">{{ $user->email }}</td>
                <td class="px-5 py-3">
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold
                                 {{ $roleColor[$user->role] ?? 'bg-gray-100 text-gray-600' }}">
                        {{ $roleLabel[$user->role] ?? $user->role }}
                    </span>
                </td>
                <td class="px-5 py-3 text-xs text-gray-400">{{ $user->created_at->format('d M Y') }}</td>
                <td class="px-5 py-3 text-right">
                    <div class="flex items-center justify-end gap-2">
                        <a href="{{ route('admin.users.edit', $user) }}"
                           class="inline-flex items-center gap-1.5 text-xs font-semibold text-gray-600
                                  bg-gray-100 hover:bg-gray-200 px-3 py-1.5 rounded-lg transition">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5
                                         m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                            Edit
                        </a>

                        @if($user->id !== auth()->id())
                        <form method="POST" action="{{ route('admin.users.destroy', $user) }}"
                              x-data
                              @submit.prevent="if(confirm('Hapus akun {{ addslashes($user->name) }}?')) $el.submit()">
                            @csrf @method('DELETE')
                            <button type="submit"
                                    class="inline-flex items-center gap-1.5 text-xs font-semibold text-red-600
                                           bg-red-50 hover:bg-red-100 px-3 py-1.5 rounded-lg transition">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0
                                             01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4
                                             a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                                Hapus
                            </button>
                        </form>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="px-5 py-12 text-center text-gray-400">
                    Tidak ada user ditemukan.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>

    @if($users->hasPages())
    <div class="px-5 py-3 border-t border-gray-50 flex items-center justify-between flex-wrap gap-2 text-sm">
        <p class="text-xs text-gray-400">{{ $users->firstItem() }}–{{ $users->lastItem() }} dari {{ $users->total() }}</p>
        <div class="flex gap-1">
            @if($users->onFirstPage())
                <span class="px-3 py-1.5 rounded-lg text-gray-300">‹</span>
            @else
                <a href="{{ $users->previousPageUrl() }}" class="px-3 py-1.5 rounded-lg text-gray-600 hover:bg-gray-100 transition">‹</a>
            @endif
            @foreach($users->getUrlRange(1, $users->lastPage()) as $page => $url)
            <a href="{{ $url }}" class="px-3 py-1.5 rounded-lg text-xs font-medium transition
                {{ $page == $users->currentPage() ? 'bg-brand-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                {{ $page }}
            </a>
            @endforeach
            @if($users->hasMorePages())
                <a href="{{ $users->nextPageUrl() }}" class="px-3 py-1.5 rounded-lg text-gray-600 hover:bg-gray-100 transition">›</a>
            @else
                <span class="px-3 py-1.5 rounded-lg text-gray-300">›</span>
            @endif
        </div>
    </div>
    @endif
</div>

{{-- Mobile cards --}}
<div class="md:hidden space-y-3">
    @forelse($users as $user)
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
        <div class="flex items-center justify-between gap-3 mb-2">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-brand-100 flex items-center justify-center
                            font-bold text-brand-700 uppercase flex-shrink-0">
                    {{ substr($user->name, 0, 1) }}
                </div>
                <div>
                    <p class="font-semibold text-gray-900 text-sm">{{ $user->name }}</p>
                    <p class="text-xs text-gray-400">{{ $user->email }}</p>
                </div>
            </div>
            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold
                         {{ $roleColor[$user->role] ?? 'bg-gray-100 text-gray-600' }} flex-shrink-0">
                {{ $roleLabel[$user->role] ?? $user->role }}
            </span>
        </div>
        <div class="flex gap-2 mt-3">
            <a href="{{ route('admin.users.edit', $user) }}"
               class="flex-1 flex items-center justify-center gap-1.5 text-xs font-semibold text-gray-700
                      bg-gray-100 hover:bg-gray-200 px-3 py-2 rounded-xl transition">
                Edit
            </a>
            @if($user->id !== auth()->id())
            <form method="POST" action="{{ route('admin.users.destroy', $user) }}"
                  x-data
                  @submit.prevent="if(confirm('Hapus akun {{ addslashes($user->name) }}?')) $el.submit()"
                  class="flex-1">
                @csrf @method('DELETE')
                <button type="submit"
                        class="w-full flex items-center justify-center gap-1.5 text-xs font-semibold
                               text-red-600 bg-red-50 hover:bg-red-100 px-3 py-2 rounded-xl transition">
                    Hapus
                </button>
            </form>
            @endif
        </div>
    </div>
    @empty
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-8 text-center text-gray-400 text-sm">
        Tidak ada user ditemukan.
    </div>
    @endforelse
</div>

@endsection
