@extends('layouts.app')
@php
    $editing = $role->exists;
    $groups = \App\Support\Permissions::groups();
    $actions = ['view' => 'View', 'create' => 'Create', 'edit' => 'Edit', 'delete' => 'Delete'];
    // groups that have the full view / create / edit / delete set are shown as a grid, everything else as single switches
    $matrixGroups = collect($groups)->filter(fn ($g, $key) => isset($g['permissions']["$key.delete"]));
    $matrixKeys = $matrixGroups->flatMap(fn ($g, $key) => collect(array_keys($actions))->map(fn ($a) => "$key.$a"))->all();
    $selected = old('permissions', $role->permissions ?? []);
    $total = count(\App\Support\Permissions::all());
@endphp
@section('title', $editing ? 'Edit '.$role->name : 'New role')

@section('content')
<x-page-header :title="$editing ? 'Edit role' : 'New role'" :subtitle="$editing ? $role->name : ($template ? 'Started from the “'.$template->name.'” role — adjust and save' : 'Choose what this role can see and do')" />

<form method="POST" action="{{ $editing ? route('roles.update', $role) : route('roles.store') }}" id="role-form" data-validate novalidate data-requires='@json(config('permissions.requires'), JSON_HEX_APOS | JSON_HEX_AMP)'>
    @csrf
    @if ($editing) @method('PUT') @endif
    @include('partials.error-summary')

    <x-form-section title="Role" icon="shield-lock">
        <x-field name="name" data-live label="Name" :value="$role->name ?: ($template ? 'Copy of '.$template->name : '')" required maxlength="100" placeholder="e.g. Warehouse" autofocus />
        <x-field name="description" label="Description" :value="$role->description" maxlength="255" placeholder="What is this role for?" />
    </x-form-section>

    <x-form-section title="Which data can they see?" icon="person-lock">
        <div class="col-12">
            @php($scope = old('data_scope', $role->data_scope ?: 'own'))
            <div class="row g-2">
                <div class="col-md-6">
                    <label class="card card-body h-100 d-flex flex-row gap-3 align-items-start mb-0" style="cursor:pointer">
                        <input class="form-check-input mt-1" type="radio" name="data_scope" value="own" @checked($scope === 'own')>
                        <span><span class="fw-semibold d-block">Only my data</span><span class="small text-muted">They see only records they created, or that were assigned or sent to them. Dashboard, reports and ledger stay closed to them.</span></span>
                    </label>
                </div>
                <div class="col-md-6">
                    <label class="card card-body h-100 d-flex flex-row gap-3 align-items-start mb-0" style="cursor:pointer">
                        <input class="form-check-input mt-1" type="radio" name="data_scope" value="all" @checked($scope === 'all')>
                        <span><span class="fw-semibold d-block">All data</span><span class="small text-muted">They see every record their permissions allow, including ones created by other people and older records.</span></span>
                    </label>
                </div>
            </div>
            <div class="invalid-feedback {{ $errors->has('data_scope') ? 'is-visible' : '' }}">{{ $errors->first('data_scope') }}</div>
        </div>
    </x-form-section>

    <section class="card form-section">
        <div class="card-header flex-wrap">
            <div><span class="card-title"><i class="bi bi-ui-checks-grid section-icon" aria-hidden="true"></i>What they can do with records</span>
                <div class="card-sub">Create, edit and delete automatically include View.</div></div>
            <div class="d-flex gap-2 align-items-center">
                <span class="chip-stat"><i class="bi bi-check2-square" aria-hidden="true"></i><b id="perm-count">0</b> of {{ $total }}</span>
                <div class="dropdown">
                    <button class="btn btn-ghost btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">Quick select</button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><button class="dropdown-item" type="button" data-preset="view"><i class="bi bi-eye"></i>Read-only everywhere</button></li>
                        <li><button class="dropdown-item" type="button" data-preset="business"><i class="bi bi-briefcase"></i>Everything except admin</button></li>
                        <li><button class="dropdown-item" type="button" data-preset="none"><i class="bi bi-x-circle"></i>Clear all</button></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="table-wrap">
            <table class="table table-modern perm-matrix align-middle mb-0">
                <thead><tr><th scope="col">Records</th>@foreach ($actions as $label)<th scope="col" class="text-center">{{ $label }}</th>@endforeach<th scope="col" class="text-center">All</th></tr></thead>
                <tbody>
                @foreach ($matrixGroups as $key => $group)
                    <tr>
                        <td class="fw-semibold"><i class="bi bi-{{ $group['icon'] }} text-primary me-2" aria-hidden="true"></i>{{ $group['label'] }}</td>
                        @foreach ($actions as $a => $label)
                            @php($perm = "$key.$a")
                            <td class="text-center"><input class="form-check-input perm" type="checkbox" name="permissions[]" value="{{ $perm }}" id="p-{{ $key }}-{{ $a }}" data-perm="{{ $perm }}" @checked(in_array($perm, $selected)) aria-label="{{ $label }} {{ strtolower($group['label']) }}"></td>
                        @endforeach
                        <td class="text-center"><input class="form-check-input row-all" type="checkbox" aria-label="All permissions for {{ strtolower($group['label']) }}"></td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </section>

    <section class="card form-section">
        <div class="card-header"><span class="card-title"><i class="bi bi-toggles section-icon" aria-hidden="true"></i>Other access</span></div>
        <ul class="list-rows">
            @foreach ($groups as $key => $group)
                @foreach ($group['permissions'] as $perm => [$label, $desc])
                    @continue(in_array($perm, $matrixKeys, true))
                    <li>
                        <span class="icon-chip" style="width:34px;height:34px"><i class="bi bi-{{ $group['icon'] }}" aria-hidden="true"></i></span>
                        <label class="grow mb-0" for="p-{{ str_replace('.', '-', $perm) }}" style="cursor:pointer">
                            <span class="title">{{ $label }} <span class="text-muted fw-normal small">· {{ $group['label'] }}</span></span>
                            <span class="sub">{{ $desc }}</span>
                        </label>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input perm" type="checkbox" role="switch" name="permissions[]" value="{{ $perm }}" id="p-{{ str_replace('.', '-', $perm) }}" data-perm="{{ $perm }}" @checked(in_array($perm, $selected))>
                        </div>
                    </li>
                @endforeach
            @endforeach
        </ul>
        <div class="card-footer"><i class="bi bi-info-circle me-1" aria-hidden="true"></i>For example, someone who can create orders also needs to see clients to pick one — tick Clients → View for them.</div>
    </section>

    <div class="form-actions">
        <a href="{{ route('roles.index') }}" class="btn btn-ghost">Cancel</a>
        <span class="dirty-note"><i class="bi bi-circle-fill text-warning" style="font-size:.5rem"></i> Unsaved changes</span>
        <span class="spacer"></span>
        <button class="btn btn-primary">{{ $editing ? 'Save role' : 'Create role' }}</button>
    </div>
</form>
@endsection