@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title ?? 'Edit User' }}" />

    <div class="mx-auto max-w-2xl">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Edit User: {{ $user->name }}</h3>
            </div>
            <div class="p-5">
                <form action="{{ route('users.update', $user) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="space-y-5">
                        <x-form.input
                            name="name"
                            label="Nama"
                            placeholder="Nama lengkap"
                            :value="$user->name"
                            :required="true"
                        />

                        <x-form.input
                            name="email"
                            label="Email"
                            type="email"
                            placeholder="email@example.com"
                            :value="$user->email"
                            :required="true"
                        />

                        <x-form.input
                            name="password"
                            label="Password Baru"
                            type="password"
                            placeholder="Kosongkan jika tidak diubah"
                            hint="Biarkan kosong jika tidak ingin mengubah password"
                        />

                        <x-form.select
                            name="role"
                            label="Role"
                            :options="$roles"
                            :value="$user->role"
                            :required="true"
                        />

                        <div x-data="{ active: {{ $user->is_active ? 'true' : 'false' }} }">
                            <label class="flex cursor-pointer items-center gap-3">
                                <div class="relative">
                                    <input type="hidden" name="is_active" value="0">
                                    <input type="checkbox" name="is_active" value="1" class="sr-only" x-model="active" {{ $user->is_active ? 'checked' : '' }}>
                                    <div class="h-6 w-11 rounded-full transition" :class="active ? 'bg-brand-500' : 'bg-gray-300 dark:bg-gray-600'"></div>
                                    <div class="absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow transition" :class="active ? 'translate-x-5' : ''"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-400">User Aktif</span>
                            </label>
                        </div>
                    </div>

                    <div class="mt-6 flex items-center justify-end gap-3 border-t border-gray-200 pt-6 dark:border-gray-700">
                        <a href="{{ route('users.index') }}" class="rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                            Batal
                        </a>
                        <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600">
                            Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection