@extends('layouts.master')

@section('body')
    <h3 class="text-orange-400 text-base md:text-3xl font-medium">Rolu redaktə et</h3>

    <div class="flex flex-col mt-8">
        <form action="{{ route('roles.update', $role->id) }}" method="post">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 mt-4">
                {{-- Role name --}}
                <div>
                    <label class="text-gray-700" for="name">Ad</label>
                    <input name="name"
                        value="{{ old('name', $role->name) }}"
                        class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
                               focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                        type="text"
                        required>
                </div>

                {{-- Permissions --}}
                <div class="mt-4">
                    <label class="text-gray-700" for="permissions">Permissions</label>
                    <div class="flex flex-wrap">
                        @foreach ($permissions as $permission)
                            <label class="flex items-center w-full md:w-1/3 space-x-2 bg-gray-50 p-3 rounded-lg border
                                           border-gray-200 hover:bg-gray-100 transition">
                                <input type="checkbox" name="permissions[]" value="{{ $permission->id }}"
                                    class="text-indigo-600 focus:ring-indigo-500 rounded"
                                    @if(in_array($permission->id, $rolePermissionIds ?? [])) checked @endif>
                                <span class="text-gray-700">{{ ucfirst($permission->name) }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="flex justify-end mt-4">
                <button type="submit"
                    class="px-4 py-2 bg-gray-800 text-gray-200 rounded-md hover:bg-gray-700
                           focus:outline-none focus:bg-gray-700">
                    Yenilə
                </button>
            </div>
        </form>
    </div>
@endsection