@extends('layouts.app')
@section('title', 'Manajemen Pengguna')
@section('page-title', 'Manajemen Pengguna')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

    {{-- Form Tambah User --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5">
        <h3 class="font-bold text-slate-800 mb-4">➕ Tambah Pengguna</h3>
        <form method="POST" action="{{ route('users.store') }}" class="space-y-3">
            @csrf
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Nama Lengkap</label>
                <input type="text" name="name" value="{{ old('name') }}" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Username</label>
                <input type="text" name="username" value="{{ old('username') }}" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Email (opsional)</label>
                <input type="email" name="email" value="{{ old('email') }}"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Role</label>
                <select name="role" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 bg-white">
                    <option value="kasir">Kasir</option>
                    <option value="manajer">Manajer</option>
                    <option value="admin">Admin</option>
                </select>
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Password</label>
                <input type="password" name="password" required minlength="6"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Konfirmasi Password</label>
                <input type="password" name="password_confirmation" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">PIN Kasir (6 digit, opsional)</label>
                <input type="text" name="pin" maxlength="6" pattern="\d{6}" value="{{ old('pin') }}"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                    placeholder="123456">
            </div>
            <button type="submit" class="w-full py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl text-sm transition">
                Tambah Pengguna
            </button>
        </form>
    </div>

    {{-- User List --}}
    <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-5 py-4 border-b border-slate-200">
            <h3 class="font-bold text-slate-800">Daftar Pengguna</h3>
        </div>
        <div class="divide-y divide-slate-100">
            @forelse($users as $user)
            <div class="px-5 py-4 flex items-center gap-4 {{ $user->trashed() ? 'opacity-50 bg-slate-50' : '' }}">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-indigo-600 flex items-center justify-center text-white font-bold flex-shrink-0">
                    {{ strtoupper(substr($user->name,0,1)) }}
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                        <span class="font-semibold text-slate-800">{{ $user->name }}</span>
                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold
                            {{ $user->role==='admin' ? 'bg-red-100 text-red-700' : ($user->role==='manajer' ? 'bg-purple-100 text-purple-700' : 'bg-blue-100 text-blue-700') }}">
                            {{ ucfirst($user->role) }}
                        </span>
                        @if(!$user->is_active || $user->trashed())
                        <span class="px-2 py-0.5 rounded-full text-xs bg-slate-100 text-slate-500">Nonaktif</span>
                        @endif
                    </div>
                    <div class="text-xs text-slate-500">@{{ $user->username }} {{ $user->email ? '· '.$user->email : '' }}</div>
                </div>
                @if(!$user->trashed() && $user->id !== auth()->id())
                <div class="flex gap-2">
                    <button onclick="showEditUser({{ $user->id }}, '{{ addslashes($user->name) }}', '{{ $user->username }}', '{{ $user->email }}', '{{ $user->role }}')"
                        class="px-2.5 py-1.5 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg text-xs transition">Edit</button>
                    <form method="POST" action="{{ route('users.destroy', $user) }}" onsubmit="return confirm('Nonaktifkan user ini?')">
                        @csrf @method('DELETE')
                        <button class="px-2.5 py-1.5 bg-red-50 hover:bg-red-100 text-red-500 rounded-lg text-xs transition">Hapus</button>
                    </form>
                </div>
                @endif
            </div>
            @empty
            <div class="px-5 py-12 text-center text-slate-400">Tidak ada pengguna</div>
            @endforelse
        </div>
        <div class="px-4 py-3 border-t border-slate-200">
            {{ $users->links() }}
        </div>
    </div>
</div>

{{-- Modal Edit User --}}
<div id="editUserModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
        <h3 class="font-bold text-slate-800 mb-4">Edit Pengguna</h3>
        <form id="editUserForm" method="POST" class="space-y-3">
            @csrf @method('PUT')
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Nama</label>
                <input type="text" name="name" id="editName" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Username</label>
                <input type="text" name="username" id="editUsername" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Email</label>
                <input type="email" name="email" id="editEmail"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Role</label>
                <select name="role" id="editRole" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
                    <option value="kasir">Kasir</option>
                    <option value="manajer">Manajer</option>
                    <option value="admin">Admin</option>
                </select>
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Password Baru (kosongkan jika tidak diubah)</label>
                <input type="password" name="password" minlength="6"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Konfirmasi Password</label>
                <input type="password" name="password_confirmation"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="is_active" value="1" id="editIsActive" checked class="rounded">
                <span class="text-sm text-slate-700">Akun Aktif</span>
            </label>
            <div class="flex gap-2 pt-2">
                <button type="button" onclick="document.getElementById('editUserModal').classList.add('hidden')"
                    class="flex-1 py-2 bg-slate-100 hover:bg-slate-200 rounded-xl text-sm font-semibold transition">Batal</button>
                <button type="submit" class="flex-1 py-2 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl text-sm transition">Simpan</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function showEditUser(id, name, username, email, role) {
    document.getElementById('editName').value = name;
    document.getElementById('editUsername').value = username;
    document.getElementById('editEmail').value = email;
    document.getElementById('editRole').value = role;
    document.getElementById('editUserForm').action = `/users/${id}`;
    document.getElementById('editUserModal').classList.remove('hidden');
}
</script>
@endpush
@endsection