<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div>
                <h2 class="font-bold text-xl text-white leading-tight">Edit User</h2>
                <p class="text-teal-100 text-sm mt-0.5">Ubah data: <span class="font-semibold">{{ $user->name }}</span></p>
            </div>
            <div class="flex gap-2 self-start sm:self-auto">
                <a href="{{ route('admin.users.show', $user->id) }}"
                   class="inline-flex items-center gap-1.5 px-3 py-2 bg-white/20 hover:bg-white/30 text-white text-sm font-medium rounded-lg transition-colors">
                    <i class="fas fa-eye text-xs"></i> Detail
                </a>
                <a href="{{ route('admin.users.index') }}"
                   class="inline-flex items-center gap-1.5 px-3 py-2 bg-white/20 hover:bg-white/30 text-white text-sm font-medium rounded-lg transition-colors">
                    <i class="fas fa-arrow-left text-xs"></i> Kembali
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-6 sm:py-8">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">

            @if($errors->any())
            <div class="px-4 py-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 rounded-xl">
                <p class="text-sm font-semibold text-red-700 dark:text-red-400 mb-1">
                    <i class="fas fa-exclamation-triangle mr-1"></i> Mohon perbaiki kesalahan:
                </p>
                <ul class="list-disc list-inside text-sm text-red-600 dark:text-red-400 space-y-0.5">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
            @endif

            {{-- User info strip --}}
            <div class="kkd-card flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-teal-400 to-teal-600 flex items-center justify-center text-white font-bold text-xl shrink-0">
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                </div>
                <div class="flex-1 min-w-0">
                    <p class="font-semibold text-slate-800 dark:text-slate-100">{{ $user->name }}</p>
                    {{-- FIX: Gunakan @ di luar Blade, atau escape agar tidak terparsing --}}
                    <p class="text-sm text-slate-500 dark:text-slate-400 font-mono">&#64;{{ $user->username }}</p>
                </div>
                <p class="text-xs text-slate-400 dark:text-slate-500 shrink-0 hidden sm:block">
                    Dibuat {{ $user->created_at->format('d/m/Y') }}
                </p>
            </div>

            {{-- Form --}}
            <div class="kkd-card">
                <form method="POST" action="{{ route('admin.users.update', $user->id) }}" class="space-y-5">
                    @csrf @method('PUT')

                    {{-- Section 1 --}}
                    <div>
                        <h3 class="section-title mb-4 flex items-center gap-2">
                            <span class="w-6 h-6 rounded-full bg-teal-100 dark:bg-teal-900/40 flex items-center justify-center text-teal-600 dark:text-teal-400 text-xs font-bold">1</span>
                            Informasi Akun
                        </h3>

                        {{-- Role Cards — $roles is key=>value array from UserController --}}
                        <div class="mb-4">
                            <label class="form-label-dark mb-2">Role <span class="text-red-500">*</span></label>
                            <div class="grid grid-cols-3 gap-2 mt-1.5">
                                @foreach($roles as $key => $label)
                                @php
                                    $icon       = match($key) { 'admin' => 'fa-shield-alt', 'dokter' => 'fa-user-md', default => 'fa-user-nurse' };
                                    $isSelected = old('role', $user->role) == $key;
                                @endphp
                                <label class="role-card {{ $isSelected ? 'role-card--active-'.$key : '' }}"
                                       data-role="{{ $key }}"
                                       for="role_{{ $key }}">
                                    <input type="radio" id="role_{{ $key }}" name="role" value="{{ $key }}"
                                           {{ $isSelected ? 'checked' : '' }} class="sr-only" />
                                    <i class="fas {{ $icon }} text-sm shrink-0"></i>
                                    <span class="text-sm font-medium truncate">{{ $label }}</span>
                                    @if($isSelected)
                                        <i class="fas fa-check-circle ml-auto shrink-0 text-xs"></i>
                                    @endif
                                </label>
                                @endforeach
                            </div>
                            <x-input-error :messages="$errors->get('role')" class="mt-1" />
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="name" class="form-label-dark">Nama Lengkap <span class="text-red-500">*</span></label>
                                <input id="name" type="text" name="name"
                                       value="{{ old('name', $user->name) }}" required
                                       class="form-input-dark mt-1 w-full" />
                                <x-input-error :messages="$errors->get('name')" class="mt-1" />
                            </div>

                            <div>
                                <label for="username" class="form-label-dark">Username <span class="text-red-500">*</span></label>
                                <input id="username" type="text" name="username"
                                       value="{{ old('username', $user->username) }}" required
                                       class="form-input-dark mt-1 w-full" />
                                <x-input-error :messages="$errors->get('username')" class="mt-1" />
                            </div>

                            <div class="sm:col-span-2">
                                <label for="email" class="form-label-dark">Email <span class="text-red-500">*</span></label>
                                <input id="email" type="email" name="email"
                                       value="{{ old('email', $user->email) }}" required
                                       class="form-input-dark mt-1 w-full" />
                                <div class="flex items-center gap-1.5 mt-1.5">
                                    @if($user->email_verified_at)
                                        <i class="fas fa-check-circle text-green-500 text-xs"></i>
                                        <span class="text-xs text-green-600 dark:text-green-400">Email terverifikasi</span>
                                    @else
                                        <i class="fas fa-exclamation-circle text-yellow-500 text-xs"></i>
                                        <span class="text-xs text-yellow-600 dark:text-yellow-400">Belum terverifikasi</span>
                                    @endif
                                </div>
                                <x-input-error :messages="$errors->get('email')" class="mt-1" />
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-slate-100 dark:border-slate-700"></div>

                    {{-- Section 2 --}}
                    <div>
                        <h3 class="section-title mb-1 flex items-center gap-2">
                            <span class="w-6 h-6 rounded-full bg-teal-100 dark:bg-teal-900/40 flex items-center justify-center text-teal-600 dark:text-teal-400 text-xs font-bold">2</span>
                            Ganti Password
                        </h3>
                        <p class="text-xs text-slate-400 dark:text-slate-500 mb-4 ml-8">Kosongkan jika tidak ingin mengubah password</p>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="password" class="form-label-dark">Password Baru</label>
                                <div class="relative mt-1">
                                    <input id="password" type="password" name="password"
                                           placeholder="Min. 8 karakter"
                                           class="form-input-dark w-full pr-10" />
                                    <button type="button" onclick="togglePwd('password', this)"
                                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
                                        <i class="fas fa-eye text-sm"></i>
                                    </button>
                                </div>
                                <x-input-error :messages="$errors->get('password')" class="mt-1" />
                            </div>
                            <div>
                                <label for="password_confirmation" class="form-label-dark">Konfirmasi Password Baru</label>
                                <div class="relative mt-1">
                                    <input id="password_confirmation" type="password" name="password_confirmation"
                                           placeholder="Ulangi password baru"
                                           class="form-input-dark w-full pr-10" />
                                    <button type="button" onclick="togglePwd('password_confirmation', this)"
                                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
                                        <i class="fas fa-eye text-sm"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-slate-100 dark:border-slate-700 pt-4 flex flex-col-reverse sm:flex-row items-center justify-between gap-3">
                        <p class="text-xs text-slate-400 dark:text-slate-500">
                            <i class="fas fa-info-circle mr-1"></i> Field bertanda <span class="text-red-500">*</span> wajib diisi
                        </p>
                        <div class="flex gap-3 w-full sm:w-auto">
                            <a href="{{ route('admin.users.show', $user->id) }}"
                               class="flex-1 sm:flex-none text-center px-5 py-2.5 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 text-sm font-medium rounded-lg transition-colors">
                                Batal
                            </a>
                            <button type="submit"
                                    class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold rounded-lg shadow transition-colors">
                                <i class="fas fa-save"></i> Update User
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
    function togglePwd(id, btn) {
        var input = document.getElementById(id);
        var icon  = btn.querySelector('i');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.replace('fa-eye','fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.replace('fa-eye-slash','fa-eye');
        }
    }

    document.querySelectorAll('.role-card').forEach(function(card) {
        card.addEventListener('click', function() {
            document.querySelectorAll('.role-card').forEach(function(c) {
                // Hapus semua active class
                ['admin','petugas','dokter'].forEach(function(r) {
                    c.classList.remove('role-card--active-' + r);
                });
                // Hapus centang
                var chk = c.querySelector('.fa-check-circle');
                if (chk) chk.remove();
            });
            var role = this.dataset.role;
            this.classList.add('role-card--active-' + role);
            this.querySelector('input[type=radio]').checked = true;
            // Tambah centang
            if (!this.querySelector('.fa-check-circle')) {
                var chk = document.createElement('i');
                chk.className = 'fas fa-check-circle ml-auto shrink-0 text-xs';
                this.appendChild(chk);
            }
        });
    });
    </script>
    @endpush

    <style>
        .form-label-dark { display:block; font-size:.8125rem; font-weight:500; color:#475569; }
        .dark .form-label-dark { color:#94a3b8; }

        .form-input-dark {
            padding:.5rem .75rem; border:1px solid #e2e8f0; border-radius:.5rem;
            font-size:.875rem; background:#ffffff; color:#0f172a;
            outline:none; transition:border-color .15s,box-shadow .15s;
        }
        .dark .form-input-dark { background:#0f172a; border-color:#334155; color:#f1f5f9; }
        .form-input-dark:focus { border-color:#14b8a6; box-shadow:0 0 0 3px rgba(20,184,166,.15); }
        .dark .form-input-dark::placeholder { color:#475569; }

        .role-card {
            display:flex; align-items:center; gap:.5rem;
            padding:.65rem .85rem; border:2px solid #e2e8f0;
            border-radius:.625rem; cursor:pointer;
            transition:all .15s; color:#64748b;
            background:#f8fafc; user-select:none;
        }
        .dark .role-card { border-color:#334155; background:#0f172a; color:#94a3b8; }
        .role-card:hover { border-color:#94a3b8; background:#f1f5f9; }
        .dark .role-card:hover { border-color:#475569; background:#1e293b; }

        .role-card--active-admin {
            border-color:#f87171 !important; background:#fef2f2 !important;
            color:#b91c1c !important; box-shadow:0 0 0 3px rgba(248,113,113,.2);
        }
        .dark .role-card--active-admin {
            background:rgba(220,38,38,.15) !important;
            color:#fca5a5 !important; box-shadow:0 0 0 3px rgba(248,113,113,.15);
        }
        .role-card--active-petugas {
            border-color:#34d399 !important; background:#f0fdf4 !important;
            color:#065f46 !important; box-shadow:0 0 0 3px rgba(52,211,153,.2);
        }
        .dark .role-card--active-petugas {
            background:rgba(16,185,129,.15) !important;
            color:#6ee7b7 !important; box-shadow:0 0 0 3px rgba(52,211,153,.15);
        }
        .role-card--active-dokter {
            border-color:#60a5fa !important; background:#eff6ff !important;
            color:#1d4ed8 !important; box-shadow:0 0 0 3px rgba(96,165,250,.2);
        }
        .dark .role-card--active-dokter {
            background:rgba(37,99,235,.15) !important;
            color:#93c5fd !important; box-shadow:0 0 0 3px rgba(96,165,250,.15);
        }
    </style>
</x-app-layout>