@extends('layouts.app')
@section('title', __('Roles & Permissions'))

@section('content')
<div x-data="{ editRole: null }">
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2 space-y-4">
            @foreach ($roles as $role)
                <div class="card">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-semibold text-slate-800">{{ $role->name }}
                                @if ($role->is_system)<span class="badge ml-1 bg-slate-100 text-slate-500">{{ __('System') }}</span>@endif
                            </h3>
                            <p class="text-xs text-slate-400">{{ $role->users_count }} {{ __('users') }} · {{ $role->permissions_count }} {{ __('permissions') }}</p>
                        </div>
                        <div class="flex gap-2">
                            <button @click="editRole = {{ $role->load('permissions')->toJson() }}" class="text-brand-600"><x-icon name="pencil" class="h-4 w-4"/></button>
                            @unless ($role->is_system)
                                <form method="POST" action="{{ route('roles.destroy', $role) }}" onsubmit="return confirm('{{ __('Delete role?') }}')">@csrf @method('DELETE')
                                    <button class="text-red-500"><x-icon name="trash" class="h-4 w-4"/></button>
                                </form>
                            @endunless
                        </div>
                    </div>
                    <div class="mt-3 flex flex-wrap gap-1">
                        @foreach ($role->permissions as $permission)
                            <span class="badge bg-brand-50 text-brand-700">{{ $permission->slug }}</span>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>

        <div class="card">
            <h2 class="font-semibold" x-text="editRole ? '{{ __('Edit role') }}' : '{{ __('New role') }}'"></h2>
            <form method="POST" :action="editRole ? '/app/roles/' + editRole.id : '{{ route('roles.store') }}'" class="mt-4 space-y-3">
                @csrf
                <template x-if="editRole"><input type="hidden" name="_method" value="PUT"></template>
                <div><label class="label">{{ __('Name') }}</label><input type="text" name="name" :value="editRole?.name" required class="input"></div>
                <div>
                    <label class="label">{{ __('Permissions') }}</label>
                    <div class="max-h-80 space-y-3 overflow-y-auto">
                        @foreach ($permissions as $group => $items)
                            <div>
                                <p class="mb-1 text-xs font-semibold uppercase text-slate-400">{{ __($group) }}</p>
                                @foreach ($items as $permission)
                                    <label class="flex items-center gap-2 py-1 text-sm">
                                        <input type="checkbox" name="permissions[]" value="{{ $permission->id }}"
                                               :checked="editRole?.permissions?.some(p => p.id === {{ $permission->id }})"
                                               class="rounded border-slate-300 text-brand-600">
                                        {{ $permission->name }}
                                    </label>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="flex gap-2">
                    <button class="btn-primary flex-1" x-text="editRole ? '{{ __('Update') }}' : '{{ __('Create') }}'"></button>
                    <button type="button" x-show="editRole" @click="editRole = null" class="btn-secondary">{{ __('New') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection