@extends('layouts.app')

@section('content')

<div class="min-h-screen flex justify-center p-6 pt-10">

    <div class="w-full max-w-xl">

        <div class="bg-white p-6 rounded-2xl shadow border border-slate-200">

            <h2 class="text-xl font-bold mb-6 text-center text-[#1c1d56]">
                Edit Data User
            </h2>

            <form method="POST" action="{{ route('admin.users.update', $user) }}">
                @csrf
                @method('PUT')

                <div class="mb-4">
                    <label class="block mb-1 text-sm font-semibold text-slate-700">Nama</label>
                    <input type="text" name="name" value="{{ $user->name }}" required
                        class="w-full border border-slate-300 rounded-xl p-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1c1d56] focus:border-transparent transition">
                </div>

                <div class="mb-4">
                    <label class="block mb-1 text-sm font-semibold text-slate-700">Email</label>
                    <input type="email" name="email" value="{{ $user->email }}" required
                        class="w-full border border-slate-300 rounded-xl p-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1c1d56] focus:border-transparent transition">
                </div>

                <div class="mb-6">
                    <label class="block mb-1 text-sm font-semibold text-slate-700">Role Hak Akses</label>
                    <select name="role" required
                        class="w-full border border-slate-300 rounded-xl p-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1c1d56] focus:border-transparent transition bg-white cursor-pointer">
                        <option value="user" {{ $user->role == 'user' ? 'selected' : '' }}>User</option>
                        <option value="staff" {{ $user->role == 'staff' ? 'selected' : '' }}>Staff</option>
                        <option value="admin" {{ $user->role == 'admin' ? 'selected' : '' }}>Admin</option>
                    </select>
                </div>

                <div class="flex items-center gap-3">
                    
                    {{-- TOMBOL BATAL / KEMBALI --}}
                    <a href="{{ route('admin.users.index') }}" 
                       class="w-1/2 bg-slate-200 hover:bg-slate-300 text-slate-700 text-center px-4 py-2.5 rounded-xl font-semibold text-sm transition">
                        Batal
                    </a>

                    {{-- TOMBOL UPDATE --}}
                    <button type="submit" 
                            class="w-1/2 bg-[#1c1d56] hover:opacity-90 text-white px-4 py-2.5 rounded-xl font-semibold text-sm transition shadow-sm">
                        Update
                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

@endsection