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

@php
    $locked = $selected?->isLocked();
    $granted = $selected ? ($selected->hasFullAccess() ? \App\Support\Permissions::all() : ($selected->permissions ?? [])) : [];
    $canEdit = auth()->user()->can('roles.manage');
    $totalPerms = count(\App\Support\Permissions::all());
@endphp

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Roles & Permissions</h1>
            <p class="text-sm text-ink-muted max-w-3xl">Choose a role, then tick what people in that role may open and do. Changes apply as soon as they open their next page. Every role except Administrator can be customised.</p>
        </div>
        @if ($canEdit)
            <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-add-role')"><i data-lucide="shield-plus" class="w-3.5 h-3.5"></i> New role</button>
        @endif
    </div>

    <div class="grid lg:grid-cols-4 gap-6 items-start">
        {{-- Role list --}}
        <div class="card p-2 space-y-1 lg:sticky lg:top-20">
            @foreach ($roles as $role)
                @php $count = $role->hasFullAccess() ? $totalPerms : count($role->permissions ?? []); @endphp
                <a href="{{ route('settings.roles.index', ['role' => $role->id]) }}"
                   class="flex items-center justify-between gap-2 rounded-lg px-3 py-2.5 text-sm transition {{ $selected && $selected->id === $role->id ? 'bg-primary-50 text-primary-700 font-semibold' : 'hover:bg-ink/5 text-ink' }}">
                    <span class="min-w-0">
                        <span class="block truncate">{{ $role->name }}</span>
                        <span class="block text-[11px] font-normal text-ink-faint">{{ $role->users_count }} {{ \Illuminate\Support\Str::plural('person', $role->users_count) }} · {{ $role->hasFullAccess() ? 'full access' : $count.' allowed' }}</span>
                    </span>
                    @if ($role->hasFullAccess())<i data-lucide="lock" class="w-3.5 h-3.5 text-ink-faint shrink-0"></i>@endif
                </a>
            @endforeach
        </div>

        {{-- Selected role --}}
        <div class="lg:col-span-3">
        @if ($selected)
            <form method="POST" action="{{ route('settings.roles.update', $selected) }}" class="card"
                  x-data="{
                      tab: 'menus',
                      granted: @js(array_values($granted)),
                      needs: @js($requirements),
                      locked: @js((bool) $locked || ! $canEdit),
                      has(k) { return this.granted.includes(k) },
                      toggle(k) {
                          if (this.locked) return;
                          if (this.has(k)) {
                              this.granted = this.granted.filter(x => x !== k);
                              // Removing a screen also removes the actions that depend on it
                              Object.entries(this.needs).forEach(([action, page]) => { if (page === k) this.granted = this.granted.filter(x => x !== action); });
                          } else {
                              this.granted.push(k);
                              if (this.needs[k] && !this.has(this.needs[k])) this.granted.push(this.needs[k]);
                          }
                      },
                      setMany(keys, on) { keys.forEach(k => { if (on !== this.has(k)) this.toggle(k); }); },
                      allOn(keys) { return keys.every(k => this.has(k)); }
                  }">
                @csrf @method('PUT')

                <div class="p-5 border-b border-border space-y-4">
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="field-label">Role name</label>
                            <input type="text" name="name" value="{{ old('name', $selected->name) }}" class="input" required @disabled($locked || ! $canEdit)>
                        </div>
                        <div>
                            <label class="field-label">Short description</label>
                            <input type="text" name="description" value="{{ old('description', $selected->description) }}" class="input" placeholder="What is this role for?" @disabled($locked || ! $canEdit)>
                        </div>
                    </div>

                    @if ($locked)
                        <div class="flex gap-2 rounded-lg bg-primary-50 text-primary-700 text-sm px-3 py-2.5">
                            <i data-lucide="lock" class="w-4 h-4 mt-0.5 shrink-0"></i>
                            <span>Administrators always have full access. This is locked so that nobody can accidentally shut themselves out of the system.</span>
                        </div>
                    @endif

                    <div class="flex flex-wrap items-center gap-2 text-xs text-ink-muted">
                        <span class="badge badge-teal"><span x-text="granted.length"></span> of {{ $totalPerms }} allowed</span>
                        <span>{{ $selected->users_count }} {{ \Illuminate\Support\Str::plural('person', $selected->users_count) }} in this role</span>
                    </div>
                </div>

                {{-- Tabs --}}
                <div class="flex border-b border-border px-2 overflow-x-auto">
                    @foreach ($sections as $key => $section)
                        <button type="button" class="tab-btn whitespace-nowrap" :class="tab === '{{ $key }}' && 'active'" x-on:click="tab = '{{ $key }}'">{{ $section['label'] }}</button>
                    @endforeach
                </div>

                <div class="p-5">
                    @foreach ($sections as $key => $section)
                        <div x-show="tab === '{{ $key }}'" x-cloak class="space-y-5">
                            <p class="text-sm text-ink-muted">{{ $section['hint'] }}</p>

                            @foreach ($catalog[$key] as $group => $items)
                                @php $keys = array_keys($items); @endphp
                                <div class="border border-border rounded-xl">
                                    <div class="flex items-center justify-between gap-3 px-4 py-2.5 bg-ink/[.03] rounded-t-xl border-b border-border">
                                        <p class="text-xs font-bold uppercase tracking-wide text-ink-muted">{{ $group }}</p>
                                        @unless ($locked || ! $canEdit)
                                            <button type="button" class="text-xs font-semibold text-primary-600 hover:underline"
                                                    x-on:click="setMany(@js($keys), !allOn(@js($keys)))"
                                                    x-text="allOn(@js($keys)) ? 'Clear all' : 'Select all'"></button>
                                        @endunless
                                    </div>
                                    <div class="divide-y divide-border/70">
                                        @foreach ($items as $perm => $meta)
                                            <label class="flex items-start gap-3 px-4 py-3 {{ ($locked || ! $canEdit) ? 'cursor-default' : 'cursor-pointer hover:bg-primary-50/40' }}">
                                                <input type="checkbox" class="mt-0.5 rounded border-border text-primary-500 focus:ring-primary-200"
                                                       :checked="has('{{ $perm }}')" x-on:change="toggle('{{ $perm }}')" :disabled="locked">
                                                <span class="min-w-0">
                                                    <span class="block text-sm font-medium text-ink">{{ $meta[0] }}</span>
                                                    <span class="block text-xs text-ink-muted">{{ $meta[1] }}</span>
                                                </span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                    {{-- Only what is currently ticked is submitted --}}
                    <template x-for="k in granted" :key="k"><input type="hidden" name="permissions[]" :value="k"></template>
                </div>

                @if ($canEdit)
                    <div class="flex flex-wrap items-center justify-between gap-3 px-5 py-4 border-t border-border bg-bg/50 rounded-b-xl2">
                        <div class="flex items-center gap-4">
                            @if (! $selected->is_system && $selected->users_count === 0)
                                <button type="submit" form="delete-role-form" class="text-xs text-danger hover:underline" onclick="return confirm('Delete this role permanently?')">Delete role</button>
                            @endif
                            @if ($selected->is_system && ! $locked)
                                <button type="submit" form="reset-role-form" class="text-xs text-ink-muted hover:underline" onclick="return confirm('Put this role back to its standard access?')">Reset to standard access</button>
                            @endif
                        </div>
                        @unless ($locked)
                            <button class="btn-primary"><i data-lucide="save" class="w-4 h-4"></i> Save access</button>
                        @endunless
                    </div>
                @endif
            </form>

            @if ($canEdit)
                <form id="delete-role-form" method="POST" action="{{ route('settings.roles.destroy', $selected) }}">@csrf @method('DELETE')</form>
                <form id="reset-role-form" method="POST" action="{{ route('settings.roles.reset', $selected) }}">@csrf</form>
            @endif
        @endif
        </div>
    </div>

    @if ($canEdit)
        <x-modal id="add-role" title="New role" maxWidth="md">
            <form method="POST" action="{{ route('settings.roles.store') }}" id="add-role-form" class="space-y-4">
                @csrf
                <div><label class="field-label">Role name</label><input type="text" name="name" class="input" required placeholder="e.g. Night Supervisor"></div>
                <div><label class="field-label">Short description (optional)</label><input type="text" name="description" class="input" placeholder="What is this role for?"></div>
                <div>
                    <label class="field-label">Start from</label>
                    <select name="copy_from" class="input">
                        <option value="">Nothing ticked (start empty)</option>
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}">Copy of {{ $role->name }}</option>
                        @endforeach
                    </select>
                    <p class="text-xs text-ink-faint mt-1">You can change every tick afterwards.</p>
                </div>
            </form>
            <x-slot:footer>
                <button type="button" class="btn-secondary" x-on:click="open = false">Cancel</button>
                <button form="add-role-form" class="btn-primary">Create role</button>
            </x-slot:footer>
        </x-modal>
    @endif
</div>
@endsection