@extends('backEnd.layouts.master')
@section('title', 'Edit Role Permissions')

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="mb-0 fw-bold">Edit Role: {{ $roleLabel }}</h4>
            <small class="text-muted text-uppercase">{{ $roleModel->name }}</small>
        </div>
        <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i> Back to Roles
        </a>
    </div>

    @if(!empty($meta))
    <div class="alert alert-light border small mb-3">
        <div class="fw-semibold mb-1">{{ $meta['description'] ?? '' }}</div>
        @if(!empty($meta['description_bn']))
        <div class="text-muted mb-2">{{ $meta['description_bn'] }}</div>
        @endif
        <div class="row g-2">
            @if(!empty($meta['can']))
            <div class="col-md-6">
                <span class="text-success fw-semibold"><i class="fas fa-check-circle me-1"></i>Can do</span>
                <ul class="mb-0 ps-3 mt-1">
                    @foreach($meta['can'] as $item)
                    <li>{{ $item }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
            @if(!empty($meta['cannot']))
            <div class="col-md-6">
                <span class="text-danger fw-semibold"><i class="fas fa-times-circle me-1"></i>Cannot do</span>
                <ul class="mb-0 ps-3 mt-1">
                    @foreach($meta['cannot'] as $item)
                    <li>{{ $item }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
        </div>
    </div>
    @endif

    <form action="{{ route('admin.roles.update', $roleModel->name) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="row g-3">
            @foreach($groups as $groupName => $permissionKeys)
            <div class="col-lg-6">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-header bg-transparent py-2">
                        <div class="fw-semibold">{{ $groupName }}</div>
                        @if(!empty($groupHints[$groupName]))
                        <small class="text-muted">{{ $groupHints[$groupName] }}</small>
                        @endif
                    </div>
                    <div class="card-body py-2">
                        @foreach($permissionKeys as $permission)
                        @php $detail = $details[$permission] ?? null; @endphp
                        <div class="form-check mb-3 border-bottom pb-2">
                            <input class="form-check-input" type="checkbox" name="permissions[]"
                                value="{{ $permission }}" id="perm-{{ $permission }}"
                                @checked(in_array($permission, old('permissions', $roleModel->permissions->pluck('name')->all()), true))>
                            <label class="form-check-label w-100" for="perm-{{ $permission }}">
                                <span class="fw-semibold small d-block">{{ $labels[$permission] ?? $permission }}</span>
                                @if($detail)
                                <span class="text-muted d-block" style="font-size: 0.78rem;">{{ $detail['en'] }}</span>
                                <span class="text-muted d-block" style="font-size: 0.75rem;">{{ $detail['bn'] }}</span>
                                @if(!empty($detail['pages']))
                                <span class="badge bg-light text-dark border mt-1" style="font-size: 0.68rem;">
                                    {{ implode(' · ', $detail['pages']) }}
                                </span>
                                @endif
                                @endif
                            </label>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="mt-3">
            <button type="submit" class="btn btn-success btn-sm px-4">
                <i class="fas fa-save me-1"></i> Save Permissions
            </button>
        </div>
    </form>
</div>
@endsection