@extends('layouts.app')
@section('title', lang_trans('Create role'))

@section('content')
    <form method="POST" action="{{ route('role.assign_permission.store',$role?->id) }}" enctype="multipart/form-data">
        @csrf
        <div class="rounded-2xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03] bg-white">

            {{-- Header --}}
            <div class="px-5 py-4 sm:px-6 sm:py-5 border-b border-gray-100 dark:border-gray-800">
                <div class="justify-between flex">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-white/90">
                        Assign Permission to `{{ $role?->name }}`
                    </h3>
                </div>
            </div>

            {{-- Body --}}
            <div class="space-y-6 p-5 sm:p-6">
                <div class="grid grid-cols-4 gap-4">
                    @foreach($permissions as $permission)
                        <div class="mt-3">
                            <input type="checkbox" name="permission[]" {{ in_array($permission->name,$hasPermissions) ? "checked" : "" }} value="{{ $permission->name }}" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft" id="permission-{{ $permission->id }}">
                            <label for="permission-{{ $permission->id }}" class="text-lg font-medium mr-4 cursor-pointer">{{ $permission->name }}</label>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Footer --}}
            <div class="flex justify-end px-5 py-4 sm:px-6 sm:py-5 border-t border-gray-100 dark:border-gray-800">
                <x-custom.button type="submit">
                    <i class="fa fa-check"></i> {{ lang_trans('Save') }}
                </x-custom.button>
            </div>
        </div>
    </form>
@endsection