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

@section('content')
    <div class="page-head">
        <div><h1>Roles &amp; permissions</h1><p>Role-based access control across every module.</p></div>
        <button type="button" class="btn" data-modal="role-modal">+ New role</button>
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Roles</h3></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Role</th><th class="num">Permissions</th><th class="num">Users</th><th>Status</th><th></th></tr></thead>
                        <tbody>
                        @forelse ($roles as $role)
                            <tr>
                                <td><strong>{{ $role->name }}</strong>
                                    <div class="tiny muted">{{ $role->description }}</div></td>
                                <td class="num">{{ $role->permissions()->count() }}</td>
                                <td class="num">{{ $role->users()->count() }}</td>
                                <td><span class="badge {{ status_color($role->is_active ? 'active' : 'inactive') }}">
                                    {{ $role->is_active ? 'active' : 'inactive' }}</span></td>
                                <td class="right">
                                    <button type="button" class="btn xs secondary" data-modal="perms-{{ $role->id }}">Permissions</button>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5">@include('components.empty-state', ['icon' => '&#128273;', 'title' => 'No roles defined'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Available permissions</h3></div>
            <div class="card-body">
                @foreach ($permissions->groupBy('module') as $module => $perms)
                    <div class="mb-2">
                        <div class="small strong mb-1">{{ title_case_words($module) }}</div>
                        <div class="flex gap-1 flex-wrap">
                            @foreach ($perms as $permission)
                                <span class="badge muted">{{ $permission->slug }}</span>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="role-modal">
        <div class="modal">
            <form method="POST" action="{{ route('settings.roles.store') }}">
                @csrf
                <div class="modal-head"><h3>New role</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Role name <span class="req">*</span></label>
                            <input type="text" name="name" required placeholder="e.g. Support Agent"></div>
                        <div class="field"><label>Slug <span class="req">*</span></label>
                            <input type="text" name="slug" required class="mono" placeholder="support-agent"></div>
                        <div class="field"><label>Description</label>
                            <input type="text" name="description"></div>
                        <label class="check"><input type="checkbox" name="is_active" value="1" checked> Active</label>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Create role</button>
                </div>
            </form>
        </div>
    </div>

    @foreach ($roles as $role)
        <div class="modal-backdrop" id="perms-{{ $role->id }}">
            <div class="modal">
                <form method="POST" action="{{ route('settings.roles.permissions', $role) }}">
                    @csrf @method('PUT')
                    <div class="modal-head"><h3>Permissions — {{ $role->name }}</h3>
                        <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                    <div class="modal-body" style="max-height:60vh;overflow:auto;">
                        @foreach ($permissions->groupBy('module') as $module => $perms)
                            <div class="mb-2">
                                <div class="small strong mb-1">{{ title_case_words($module) }}</div>
                                <div class="flex gap-2 flex-wrap">
                                    @foreach ($perms as $permission)
                                        <label class="check">
                                            <input type="checkbox" name="permissions[]" value="{{ $permission->id }}"
                                                   @checked($role->permissions->contains($permission->id))>
                                            {{ $permission->name }}
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="modal-foot">
                        <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                        <button type="submit" class="btn">Save permissions</button>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
@endsection