@extends('layouts.app')
@section('title', $role->exists ? 'Edit Role' : 'New Role')
@section('content')

@php $editing = $role->exists; @endphp

<div class="d-flex align-items-center justify-content-between mb-4">
    <h4 class="fw-bold mb-0">{{ $editing ? 'Edit Role' : 'New Role' }}</h4>
    <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Back
    </a>
</div>

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

<form method="POST" action="{{ $editing ? route('admin.roles.update', $role) : route('admin.roles.store') }}">
    @csrf
    @if($editing) @method('PUT') @endif

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <label class="form-label fw-semibold">Role name <span class="text-danger">*</span></label>
            @if($isProtected)
            <input type="text" class="form-control" value="{{ $role->name }}" disabled>
            <div class="form-text">
                Built-in role — the name is fixed because application logic refers to it.
                You can still change its permissions below.
            </div>
            @else
            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                   value="{{ old('name', $role->name) }}" required placeholder="programme_coordinator">
            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            <div class="form-text">Lowercase letters, numbers and underscores only.</div>
            @endif
        </div>
    </div>

    @if($role->name === 'superadmin')
    <div class="alert alert-warning">
        <i class="bi bi-shield-lock me-1"></i>
        <strong>Superadmin</strong> bypasses all permission checks by design, so its permission set
        cannot be restricted. Remove the role from a user instead.
    </div>
    @else
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
            <span class="fw-semibold">Permissions</span>
            <div>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="selectAll">Select all</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="clearAll">Clear</button>
            </div>
        </div>
        <div class="card-body">
            @foreach($groups as $group => $permissions)
            <div class="mb-4">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <h6 class="fw-semibold mb-0">{{ $group }}</h6>
                    <button type="button" class="btn btn-sm btn-link p-0 small group-toggle" data-group="{{ Str::slug($group) }}">toggle</button>
                </div>
                <div class="row g-2">
                    @foreach($permissions as $name => $label)
                    <div class="col-md-6">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input perm-check g-{{ Str::slug($group) }}"
                                   id="perm_{{ $name }}" name="permissions[]" value="{{ $name }}"
                                   @checked(in_array($name, old('permissions', $assigned), true))>
                            <label class="form-check-label" for="perm_{{ $name }}">
                                {{ $label }}
                                <code class="small text-muted d-block">{{ $name }}</code>
                            </label>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <button class="btn btn-primary">
        <i class="bi bi-check-lg me-1"></i>{{ $editing ? 'Save changes' : 'Create role' }}
    </button>
</form>

@push('scripts')
<script>
    (function () {
        const all = () => Array.from(document.querySelectorAll('.perm-check'));
        document.getElementById('selectAll')?.addEventListener('click', () => all().forEach(c => c.checked = true));
        document.getElementById('clearAll')?.addEventListener('click', () => all().forEach(c => c.checked = false));

        document.querySelectorAll('.group-toggle').forEach(btn => {
            btn.addEventListener('click', () => {
                const boxes = Array.from(document.querySelectorAll('.g-' + btn.dataset.group));
                const target = !boxes.every(b => b.checked);
                boxes.forEach(b => b.checked = target);
            });
        });
    })();
</script>
@endpush
@endsection