@extends('admin.layouts.app')

@section('header')
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __('Rang kiosztás') }}
    </h2>
@endsection

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 bg-white border-b border-gray-200">
                <form method="POST" action="{{ route('admin.users.assign-role', $user) }}" x-data="{ selectAll: false }">
                    @csrf

                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Válassza ki a rangokat</label>
                        <button type="button" @click="selectAll = !selectAll; $refs.checkboxes.querySelectorAll('input[type=checkbox]').forEach(cb => cb.checked = selectAll)" class="mb-2 px-4 py-2 bg-green-300 text-gray-800 rounded hover:bg-green-500">
                            <span x-text="selectAll ? 'Összes törlése' : 'Összes kijelölése'"></span>
                        </button>
                        <div class="space-y-2" x-ref="checkboxes">
                            @foreach ($roles as $role)
                                <div class="flex items-center">
                                    <input type="checkbox" 
                                           id="role_{{ $role->id }}" 
                                           name="roles[]" 
                                           value="{{ $role->name }}"
                                           {{ $user->hasRole($role) ? 'checked' : '' }}
                                           class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                    <label for="role_{{ $role->id }}" class="ml-2 block text-sm text-gray-900">
                                        {{ $role->name }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    @error('roles')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror

                    <div class="mt-6">
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:border-indigo-900 focus:ring ring-indigo-300 disabled:opacity-25 transition ease-in-out duration-150">
                            Rangok mentése
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection