@extends('layout')

@section('content')
    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">View Role</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li><a href="{{ route('roles.index') }}">Roles & Permission</a></li>
                    <li><span>View Role</span></li>
                </ul>
            </div>

            <div class="dashboard_main-actions">
                <div class="switcher">
                    <label>
                        <span class="text">Inactive</span>
                        <input type="checkbox" id="statusSwitch" {{ $role->status === 'active' ? 'checked' : '' }}
                            disabled />
                        <span class="slider"></span>
                        <span class="text">Active</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="dashboard_main-body">
            <form>
                {{-- No action or method because it's read-only --}}
                <div class="accordion-list">
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Role Details
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>

                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">

                                    {{-- Role Name --}}
                                    <div class="form-group full-w">
                                        <label class="form-label">Role Name</label>
                                        <input type="text" name="name" class="form-control"
                                            value="{{ $role->name }}" disabled />
                                    </div>

                                    {{-- Dynamic Permissions --}}
                                    @php
                                        use Illuminate\Support\Str;
                                        $groupedPermissions = $permissions->groupBy(function ($perm) {
                                            return explode('.', $perm->name)[0];
                                        });
                                        $rolePermissions = $role->permissions->pluck('name')->toArray();
                                    @endphp

                                    @foreach ($groupedPermissions as $module => $perms)
                                        <div class="form-group full-w">
                                            <h4 class="group-title">{{ Str::headline($module) }}</h4>
                                            <div class="form-checkboxs grid">
                                                @foreach ($perms as $permission)
                                                    <div class="form-checkbox">
                                                        <label>
                                                            <input type="checkbox" disabled
                                                                {{ in_array($permission->name, $rolePermissions) ? 'checked' : '' }} />
                                                            <span class="mark">
                                                                <i class="fas fa-check"></i>
                                                            </span>
                                                            <span class="text">
                                                                {{ Str::headline(explode('.', $permission->name)[1] ?? $permission->name) }}
                                                            </span>
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                {{-- Buttons --}}
                                <div class="form-buttons">
                                    <a href="{{ route('roles.index') }}" class="btn btn-primary">
                                        Back to Roles
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Scripts --}}
    <script src="{{ asset('assets/js/svg.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
@endsection