@extends('layouts.app')

@section('content')
<div class="bg-white shadow rounded p-6 max-w-md mx-auto">
    <h2 class="text-2xl font-bold mb-4">Edit Admin</h2>

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

        <div class="mb-4">
            <label class="block mb-1 font-medium">Name</label>
            <input type="text" name="name" class="w-full border-gray-300 rounded"
                   value="{{ old('name', $user->name) }}" required>
        </div>

        <div class="mb-4">
            <label class="block mb-1 font-medium">Email</label>
            <input type="email" name="email" class="w-full border-gray-300 rounded"
                   value="{{ old('email', $user->email) }}" required>
        </div>
@php
    use Spatie\Permission\Models\Role;

    $creator = auth()->user();
    $assignableRoles = collect();

    if ($creator->hasRole('super admin')) {
        $assignableRoles = Role::all();
    } elseif ($creator->hasRole('admin')) {
        $assignableRoles = Role::whereIn('name', ['admin', 'user'])->get();
    }

    $roleLabels = [
        'super admin' => 'Super Admin',
        'admin' => 'Editor',
        'user' => 'Viewer',
    ];

    $currentRole = $user->getRoleNames()->first();
@endphp

<div x-data="{ selectedRole: '{{ $currentRole }}' }">
    {{-- Role Selector --}}
    <div class="mb-4">
        <label class="block mb-2 font-semibold text-gray-700">Select Role</label>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            @foreach($assignableRoles as $role)
                @php
                    $inputId = 'role_' . $role->id;
                @endphp
                <label for="{{ $inputId }}" class="relative block">
                    <input type="radio"
                        id="{{ $inputId }}"
                        name="role"
                        value="{{ $role->name }}"
                        class="sr-only peer"
                        x-model="selectedRole"
                        {{ $currentRole === $role->name ? 'checked' : '' }}>

                    <div class="w-full rounded-lg border border-gray-300 p-4 shadow-sm cursor-pointer transition 
                        peer-checked:border-blue-600 peer-checked:bg-blue-50 peer-checked:text-blue-700">
                        <div class="flex items-center justify-between">
                            <span class="font-medium">
                                {{ $roleLabels[$role->name] ?? ucfirst($role->name) }}
                            </span>
                            <svg class="w-5 h-5 text-blue-600 opacity-0 peer-checked:opacity-100 transition" 
                                 fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                    </div>
                </label>
            @endforeach
        </div>
    </div>

    {{-- Permissions: Shown only if "admin" (Editor) is selected --}}
    <div class="mb-4" x-show="selectedRole === 'admin'" x-transition>
        <label class="block mb-1 font-medium">Permissions</label>
        <div class="space-y-2">
            @if($creator->can_sell)
                <label class="flex items-center">
                    <input type="hidden" name="can_sell" value="0">
                    <input type="checkbox" name="can_sell" value="1"
                        class="mr-2" {{ $user->can_sell ? 'checked' : '' }}>
                    Sell
                </label>
            @endif

            @if($creator->can_lease)
                <label class="flex items-center">
                    <input type="hidden" name="can_lease" value="0">
                    <input type="checkbox" name="can_lease" value="1"
                        class="mr-2" {{ $user->can_lease ? 'checked' : '' }}>
                    Lease
                </label>
            @endif

            @if($creator->can_rent)
                <label class="flex items-center">
                    <input type="hidden" name="can_rent" value="0">
                    <input type="checkbox" name="can_rent" value="1"
                        class="mr-2" {{ $user->can_rent ? 'checked' : '' }}>
                    Rent
                </label>
            @endif
        </div>
    </div>
</div>

        <button type="submit" class="bg-yellow-500 text-white px-4 py-2 rounded">Update</button>
    </form>
</div>
@endsection