@extends('layouts.app')
@section('title', ($role->exists ? 'Edit role' : 'New role') . ' · Settings')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('settings.index') }}">Settings</a></li>
    <li class="breadcrumb-item"><a href="{{ route('settings.roles.index') }}">Roles</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ $role->exists ? 'Edit' : 'Create' }}</li>
@endsection

@section('content')
    @php
        $action = $role->exists ? route('settings.roles.update', $role) : route('settings.roles.store');
    @endphp

    <x-layout.page-header
        :title="$role->exists ? 'Edit role · ' . $role->name : 'Create role'"
        :subtitle="$role->exists ? 'Update this role and its permissions.' : 'Define a role and assign permissions.'"
        icon="person-badge"
        :back="route('settings.roles.index')"
    />

    <form method="POST" action="{{ $action }}" class="settings-form">
        @csrf
        @if($role->exists) @method('PUT') @endif

        <x-ui.card title="Role details" icon="tag">
            <div class="row g-3">
                <div class="col-md-4">
                    <x-form.input name="name" label="System name" :value="$role->name" required
                        :readonly="$role->is_system"
                        help="Lower-case, underscores only. Cannot be changed later." />
                </div>
                <div class="col-md-8">
                    <x-form.input name="description" label="Description" :value="$role->description" />
                </div>
            </div>
        </x-ui.card>

        <x-ui.card title="Permissions" icon="key" subtitle="Grouped by module. Admins always retain full access.">
            @foreach($groupedPermissions as $group => $items)
                <fieldset class="permission-group">
                    <legend class="permission-group__legend">
                        <span>{{ Str::title(str_replace(['-','_'],' ', $group)) }}</span>
                        <label class="permission-group__toggle">
                            <input type="checkbox" data-permission-group-toggle="{{ Str::slug($group) }}">
                            <small>Toggle all</small>
                        </label>
                    </legend>
                    <div class="permission-group__grid">
                        @foreach($items as $perm)
                            <label class="permission-item">
                                <input type="checkbox"
                                       name="permissions[]"
                                       value="{{ $perm->name }}"
                                       data-permission-group="{{ Str::slug($group) }}"
                                       @checked($role->exists && $role->hasPermissionTo($perm->name))
                                       @disabled($role->is_system && $role->name === 'admin')>
                                <span class="permission-item__label">
                                    {{ $perm->label ?? $perm->name }}
                                </span>
                                @if($perm->description ?? false)
                                    <small class="permission-item__hint">{{ $perm->description }}</small>
                                @endif
                            </label>
                        @endforeach
                    </div>
                </fieldset>
            @endforeach
        </x-ui.card>

        <x-layout.sticky-save
            :label="$role->exists ? 'Save role' : 'Create role'"
            :cancel-href="route('settings.roles.index')" />
    </form>
@endsection