{{--
    One role's permissions — Obvizio's "Manage Permissions" screen: the catalog
    grouped, one checkbox each, saved together. Plus who holds the role and a
    plain-words summary of what that gives them.
--}}
@extends('layouts.app')

@php
    use App\Support\Permissions;
    $groupIcons = [
        'Overview' => 'ti-home', 'Monitoring' => 'ti-device-desktop-analytics', 'Reports' => 'ti-report',
        'Whose data' => 'ti-eye', 'Administration' => 'ti-settings',
    ];
@endphp

@section('header')
    <div class="row g-2 align-items-center">
        <div class="col">
            <div class="page-pretitle">Administration · Roles &amp; Permissions</div>
            <h2 class="page-title">
                {{ $role->label ?? $role->name }}
                @if ($mirrored) <span class="badge bg-cyan-lt ms-2">Workspace</span> @endif
                @if ($role->company_id === null) <span class="badge bg-secondary-lt ms-2">Global</span> @endif
            </h2>
        </div>
        <div class="col-auto ms-auto">
            <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary">
                <i class="ti ti-arrow-narrow-left me-1"></i><span class="d-none d-sm-inline">All roles</span>
            </a>
        </div>
    </div>
@endsection

@section('content')
<form method="POST" action="{{ route('admin.roles.permissions', $role) }}" id="role-permissions">
    @csrf @method('PUT')

    <div class="row g-3">
        {{-- Permissions ------------------------------------------------------ --}}
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Permissions</h3>
                    <span class="ms-auto text-secondary small" data-perm-count></span>
                </div>
                <div class="list-group list-group-flush">
                    @foreach ($catalog as $group => $items)
                        <div class="list-group-header sticky-top d-flex align-items-center gap-2 wlr-group">
                            <i class="ti {{ $groupIcons[$group] ?? 'ti-point' }}"></i>
                            <span>{{ $group }}</span>
                            @if ($canEdit && $group !== 'Whose data')
                                <label class="form-check form-check-inline m-0 ms-auto small text-secondary fw-normal text-transform-none">
                                    <input type="checkbox" class="form-check-input" data-group-toggle="{{ \Illuminate\Support\Str::slug($group) }}">
                                    <span class="form-check-label">All</span>
                                </label>
                            @endif
                        </div>
                        @if ($group === 'Whose data')
                            <div class="list-group-item py-2 small text-secondary">
                                Neither ticked means they see only themselves. “Everyone” wins if both are ticked.
                            </div>
                        @endif
                        @foreach ($items as $name => [$label, $description])
                            <label class="list-group-item wlr-perm" for="perm-{{ $name }}">
                                <div class="row align-items-center g-3">
                                    <div class="col-auto">
                                        <input type="checkbox" class="form-check-input m-0" id="perm-{{ $name }}"
                                               name="permissions[]" value="{{ $name }}"
                                               data-group="{{ \Illuminate\Support\Str::slug($group) }}"
                                               data-kind="{{ in_array($name, [Permissions::VIEW_ALL, Permissions::VIEW_TEAM], true) ? 'scope' : 'page' }}"
                                               @checked(in_array($name, $assigned, true)) @disabled(! $canEdit)>
                                    </div>
                                    <div class="col">
                                        <div class="fw-semibold">{{ $label }}</div>
                                        <div class="text-secondary small">{{ $description }}</div>
                                    </div>
                                    <div class="col-auto d-none d-md-block"><code class="small">{{ $name }}</code></div>
                                </div>
                            </label>
                        @endforeach
                    @endforeach
                </div>
                @if ($canEdit)
                    <div class="card-footer d-flex align-items-center gap-2">
                        <span class="text-secondary small d-none" data-dirty><i class="ti ti-point-filled text-orange"></i> Unsaved changes</span>
                        <a href="{{ route('admin.roles.index') }}" class="btn btn-link ms-auto">Cancel</a>
                        <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy me-1"></i>Save permissions</button>
                    </div>
                @else
                    <div class="card-footer text-secondary small">A global role — only the Super Admin can change it.</div>
                @endif
            </div>
        </div>

        {{-- Summary + holders ------------------------------------------------ --}}
        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header"><h3 class="card-title">What this role gives</h3></div>
                <div class="card-body" data-summary>
                    <div class="mb-2"><span class="text-secondary small text-uppercase fw-semibold">Portal</span>
                        <div class="fw-semibold" data-summary-portal></div></div>
                    <div class="mb-2"><span class="text-secondary small text-uppercase fw-semibold">Whose data</span>
                        <div class="fw-semibold" data-summary-scope></div></div>
                    <div class="text-secondary small mt-3">
                        A person’s access is exactly their role — only the Super Admin can do more. Changes apply on
                        their next page load.
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">People</h3>
                    <span class="badge bg-secondary-lt ms-auto">{{ $members->count() }}</span>
                </div>
                @if ($mirrored)
                    <div class="card-body py-2 small text-secondary border-bottom">
                        Given automatically to everyone whose workspace role is “{{ $role->label }}”.
                    </div>
                @endif
                <div class="list-group list-group-flush" style="max-height: 28rem; overflow-y: auto;">
                    @forelse ($members as $member)
                        <a href="{{ route('admin.users.show', $member) }}" class="list-group-item list-group-item-action py-2">
                            <div class="d-flex align-items-center gap-2">
                                <span class="fw-semibold text-truncate">{{ $member->name }}</span>
                                @if ($member->status === \App\Support\EmployeeStatus::INACTIVE)
                                    <span class="badge bg-secondary-lt">Inactive</span>
                                @endif
                            </div>
                            <div class="text-secondary small text-truncate">{{ $member->designation ?: $member->email }}</div>
                        </a>
                    @empty
                        <div class="list-group-item text-secondary">Nobody holds this role.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('styles')
<style>
    .wlr-group { font-size: .75rem; }
    .wlr-group .form-check-label { text-transform: none; letter-spacing: 0; }
    .wlr-perm { cursor: pointer; }
    .wlr-perm:has(input:checked) { background: rgba(var(--tblr-primary-rgb), .05); }
</style>
@endpush

@push('scripts')
<script>
(function () {
    var form = document.getElementById('role-permissions');
    if (!form) return;
    var boxes = Array.prototype.slice.call(form.querySelectorAll('input[name="permissions[]"]'));
    var initial = boxes.map(function (b) { return b.checked; }).join();

    function refresh() {
        var pages = boxes.filter(function (b) { return b.dataset.kind === 'page' && b.checked; }).length;
        var all  = form.querySelector('#perm-employees\\.view_all');
        var team = form.querySelector('#perm-employees\\.view_team');

        form.querySelector('[data-perm-count]').textContent =
            boxes.filter(function (b) { return b.checked; }).length + ' of ' + boxes.length + ' granted';
        form.querySelector('[data-summary-portal]').textContent = pages
            ? 'Can sign in — ' + pages + ' screen' + (pages === 1 ? '' : 's')
            : 'No web access — desktop only';
        form.querySelector('[data-summary-scope]').textContent = !pages ? '—'
            : (all && all.checked) ? 'Everyone in the company'
            : (team && team.checked) ? 'Members of teams they lead, and themselves'
            : 'Only themselves';

        document.querySelectorAll('[data-group-toggle]').forEach(function (t) {
            var inGroup = boxes.filter(function (b) { return b.dataset.group === t.dataset.groupToggle; });
            var on = inGroup.filter(function (b) { return b.checked; }).length;
            t.checked = on === inGroup.length;
            t.indeterminate = on > 0 && on < inGroup.length;
        });

        var dirty = form.querySelector('[data-dirty]');
        if (dirty) dirty.classList.toggle('d-none', boxes.map(function (b) { return b.checked; }).join() === initial);
    }

    boxes.forEach(function (b) { b.addEventListener('change', refresh); });
    document.querySelectorAll('[data-group-toggle]').forEach(function (t) {
        t.addEventListener('change', function () {
            boxes.filter(function (b) { return b.dataset.group === t.dataset.groupToggle; })
                 .forEach(function (b) { b.checked = t.checked; });
            refresh();
        });
    });
    refresh();
})();
</script>
@endpush