@extends('layouts.app')
@section('title', 'Edit Role — ' . $role->display_name)

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('roles.index') }}">Roles</a></li>
<li class="breadcrumb-item active">Edit: {{ $role->display_name }}</li>
@endsection

@section('content')

<div class="page-header">
    <h1 class="page-title"><i class="bi bi-shield-lock me-2" style="color:#1d4ed8;"></i>Edit Role: {{ $role->display_name }}</h1>
</div>

@if($errors->any())
<div class="alert alert-danger">
    <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
</div>
@endif

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

<div class="card mb-3">
    <div class="card-header fw-600">Role Information</div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label fw-semibold">Display Name <span class="text-danger">*</span></label>
                <input type="text" name="display_name" class="form-control" value="{{ old('display_name', $role->display_name) }}" required>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-semibold">Internal Key <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" value="{{ old('name', $role->name) }}"
                       pattern="[a-zA-Z0-9_-]+" required>
                <div class="form-text">Letters, numbers, dashes and underscores only.</div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center fw-600">
        <span><i class="bi bi-check2-square me-2"></i>Permissions</span>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="toggleAll(true)">Select All</button>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleAll(false)">Clear All</button>
        </div>
    </div>
    <div class="card-body">
        @php
            $currentPermissions = old('permissions', $role->permissions ?? []);
            $hasWildcard = in_array('*', $currentPermissions);
        @endphp
        @if($hasWildcard)
        <div class="alert alert-info py-2 mb-3">
            <i class="bi bi-info-circle me-1"></i>
            This role currently has the wildcard <code>*</code> permission (full access). Saving without checking individual boxes will remove full access — check "Select All" first if you want to keep it as individual permissions, or leave as-is to preserve full access only if untouched.
        </div>
        @endif
        <div class="row g-3">
            @foreach($permissionGroups as $groupName => $permissions)
            <div class="col-12 col-md-6">
                <div class="border rounded p-3 h-100">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <strong style="font-size:.88rem;">{{ $groupName }}</strong>
                        <a href="javascript:void(0)" class="text-primary" style="font-size:.78rem;" onclick="toggleGroup(this, true)">All</a>
                    </div>
                    @foreach($permissions as $key => $label)
                    <div class="form-check mb-1">
                        <input class="form-check-input perm-checkbox" type="checkbox" name="permissions[]"
                               value="{{ $key }}" id="perm_{{ $key }}"
                               {{ ($hasWildcard || in_array($key, $currentPermissions)) ? 'checked' : '' }}>
                        <label class="form-check-label" for="perm_{{ $key }}" style="font-size:.85rem;">{{ $label }}</label>
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

<div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary">
        <i class="bi bi-check-circle me-1"></i> Update Role
    </button>
    <a href="{{ route('roles.index') }}" class="btn btn-outline-secondary">Cancel</a>
</div>

</form>

@endsection

@push('scripts')
<script>
function toggleAll(state) {
    document.querySelectorAll('.perm-checkbox').forEach(cb => cb.checked = state);
}
function toggleGroup(link, state) {
    const container = link.closest('.border');
    container.querySelectorAll('.perm-checkbox').forEach(cb => cb.checked = state);
}
</script>
@endpush