@extends('layouts.app')

@section('title', 'Peran dan Hak Akses')

@section('content')
    <div class="page-heading"><div><p class="eyebrow">PENGATURAN AKSES</p><h1>Peran dan hak akses</h1><p class="page-description">Atur izin sesuai tugas setiap operator. Hak akses superadmin dilindungi.</p></div><x-ui.button type="button" data-modal-target="#role-create">Tambah peran</x-ui.button></div>
    @if (session('success'))<x-ui.alert tone="success">{{ session('success') }}</x-ui.alert>@endif
    <x-ui.alert tone="info">Peran yang sudah diberikan kepada pengguna langsung mengikuti perubahan izin. Jangan berikan izin melebihi tugas pemilik akun.</x-ui.alert>
    <section class="panel section-block">
        <x-ui.table caption="Peran yang tersedia">
            <thead><tr><th scope="col">Peran</th><th scope="col">Pengguna</th><th scope="col">Jumlah izin</th><th scope="col"><span class="sr-only">Aksi</span></th></tr></thead>
            <tbody>@foreach ($roles as $role)
                <tr><td><strong>{{ $role->name }}</strong><br><span class="table-secondary">{{ $role->slug }}@if ($role->description) · {{ $role->description }}@endif</span></td><td>{{ $role->users_count }}</td><td>{{ $role->permissions->count() }}</td><td>
                    @if ($role->slug !== 'super-admin')
                        <x-ui.button type="button" variant="secondary" size="sm" data-modal-target="#role-permissions-{{ $role->id }}">Atur izin</x-ui.button>
                        <x-ui.modal id="role-permissions-{{ $role->id }}" title="Izin untuk {{ $role->name }}" description="Pilih hanya kemampuan yang diperlukan oleh pemilik peran." size="lg">
                        <form method="POST" action="{{ route('settings.roles.permissions.update', $role) }}" class="form-stack">@csrf @method('PUT')<input type="hidden" name="_modal_key" value="role-permissions-{{ $role->id }}">
                            <div class="permission-groups-container">
                                @foreach ($permissionGroups as $module => $permissions)
                                    <fieldset class="permission-group"><legend class="permission-group-title">{{ $module }}</legend>
                                        <div class="permission-grid">
                                            @foreach ($permissions as $permission)
                                                @if ($permission->slug !== 'roles.manage')
                                                    <label class="permission-checkbox-item">
                                                        <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" @checked($role->permissions->contains('id', $permission->id))>
                                                        <span class="permission-checkbox-label">
                                                            <span class="permission-name">{{ $permission->name }}</span>
                                                            <span class="permission-slug">{{ $permission->slug }}</span>
                                                        </span>
                                                    </label>
                                                @endif
                                            @endforeach
                                        </div>
                                    </fieldset>
                                @endforeach
                            </div>
                            <div class="modal-actions"><x-ui.button type="button" variant="ghost" data-modal-dismiss>Batal</x-ui.button><x-ui.button type="submit">Simpan izin</x-ui.button></div>
                        </form>
                        </x-ui.modal>
                    @else<x-ui.badge tone="neutral">Hak penuh terkunci</x-ui.badge>@endif
                </td></tr>
            @endforeach</tbody>
        </x-ui.table>
    </section>
    <x-ui.modal id="role-create" title="Tambah peran" description="Nama dan kode akan ditampilkan pada pengaturan pengguna.">
        <form method="POST" action="{{ route('settings.roles.store') }}" class="form-stack">@csrf<input type="hidden" name="_modal_key" value="role-create">
            <x-ui.field name="name" label="Nama peran" maxlength="100" required :form-key="'role-create'" />
            <x-ui.field name="slug" label="Kode peran (opsional)" maxlength="100" help="Kosongkan untuk membuat kode dari nama." :form-key="'role-create'" />
            <x-ui.textarea name="description" label="Keterangan" maxlength="1000" :form-key="'role-create'" />
            <div class="modal-actions"><x-ui.button type="button" variant="ghost" data-modal-dismiss>Batal</x-ui.button><x-ui.button type="submit">Simpan peran</x-ui.button></div>
        </form>
    </x-ui.modal>
@endsection