@extends('layouts.admin')

@section('title', 'Edit Pengguna')

@section('content')
<div class="max-w-xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">✏️ Edit Pengguna</h1>

    @if ($errors->any())
        <div class="mb-4 bg-red-100 dark:bg-red-800 text-red-700 dark:text-red-200 px-4 py-2 rounded">
            <ul class="list-disc ml-5 text-sm">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form id="edit-user-form" action="{{ route('admin.user.update', $user) }}" method="POST"
          class="space-y-5 bg-white dark:bg-gray-800 p-6 rounded shadow border dark:border-gray-700">
        @csrf
        @method('PUT')

        <div>
            <label for="name" class="block text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">Nama</label>
            <input type="text" name="name" id="name" value="{{ old('name', $user->name) }}"
                   class="w-full px-4 py-2 border rounded bg-gray-50 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                   required>
        </div>

        <div>
            <label for="email" class="block text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">Email</label>
            <input type="email" name="email" id="email" value="{{ old('email', $user->email) }}"
                   class="w-full px-4 py-2 border rounded bg-gray-50 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                   required>
        </div>

        <div>
            <label for="password" class="block text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">Password (opsional)</label>
            <input type="password" name="password" id="password"
                   placeholder="Kosongkan jika tidak ingin mengganti"
                   class="w-full px-4 py-2 border rounded bg-gray-50 dark:bg-gray-900 dark:border-gray-700 dark:text-white">
        </div>

        <div>
            <label class="block text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">Peran</label>
            <div class="grid grid-cols-2 gap-2">
                @foreach($roles as $role)
                    <label class="flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-200">
                        <input type="checkbox" name="roles[]" value="{{ $role }}"
                               {{ in_array($role, old('roles', $userRoles)) ? 'checked' : '' }}
                               class="rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800 text-blue-600 focus:ring focus:ring-blue-300">
                        <span>{{ $role }}</span>
                    </label>
                @endforeach
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Centang satu atau lebih peran yang sesuai untuk pengguna ini.</p>
        </div>

        <div class="flex justify-end">
            <button type="button" id="submit-edit"
                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded transition">
                Simpan Perubahan
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.getElementById('submit-edit').addEventListener('click', function () {
        const form = document.getElementById('edit-user-form');
        const userName = document.getElementById('name').value;

        Swal.fire({
            title: 'Simpan Perubahan?',
            text: `Perubahan pada pengguna "${userName}" akan disimpan.`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#2563eb',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Ya, simpan',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
</script>
@endpush