@extends('layouts.app')
@section('title', 'Add Role')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('roles.index') }}">Roles</a></li>
<li class="breadcrumb-item active">Add Role</li>
@endsection

@section('content')

<div class="page-header">
    <h1 class="page-title"><i class="bi bi-shield-plus me-2" style="color:#1d4ed8;"></i>Add Role</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.store') }}">
@csrf

<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') }}"
                       placeholder="e.g. Branch Manager" 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') }}"
                       placeholder="e.g. branch_manager" pattern="[a-zA-Z0-9_-]+" required>
                <div class="form-text">Letters, numbers, dashes and underscores only. Cannot be changed easily later.</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">
        <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 }}" {{ in_array($key, old('permissions', [])) ? '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> Create 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