@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">Add New Admin</h2>

    <form action="{{ route('users.store') }}" method="POST">
        @csrf

        <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" 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" required>
        </div>

        <div class="mb-4">
            <label class="block mb-1 font-medium">Password</label>
            <input type="password" name="password" class="w-full border-gray-300 rounded" required>
        </div>
@php
    $roleLabels = [
        'admin' => 'Editor',
        'user' => 'Viewer',
    ];

    $creator = auth()->user();
@endphp

<!-- Alpine.js -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ selectedRole: '' }">
    <!-- Role Selection -->
    <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($roleLabels as $value => $label)
                @php $inputId = 'role_' . $value; @endphp
                <label for="{{ $inputId }}" class="relative block">
                    <input
                        type="radio"
                        id="{{ $inputId }}"
                        name="role"
                        value="{{ $value }}"
                        class="sr-only peer"
                        x-model="selectedRole"
                        required
                    >

                    <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">{{ $label }}</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 Block (Visible only if 'admin' selected) -->
    <div x-show="selectedRole === 'admin'" class="mb-4 border border-gray-200 rounded-lg p-4 bg-gray-50 transition-all duration-200 ease-in-out">
        <label class="block mb-2 font-semibold text-gray-700">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">
                    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">
                    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">
                    Rent
                </label>
            @endif

        </div>
    </div>
</div>

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