@extends('layouts.dashboard')

@section('content')
@php
/**
 * Admin → Roles → New / Edit role. Name the role, then pick what it may do.
 *
 * @var array|null $role      the role being edited, or null when creating
 * @var array      $catalogue config/permissions.php — module => ['label', 'perms']
 * @var array      $held      privilege slugs currently ticked
 * @var array      $pills     selectable badge colours
 * @var int        $labelMax  max length of the name field
 * @var int        $descMax   max length of the description field
 */
$role = $role ?? null;
$catalogue = $catalogue ?? [];
$held = $held ?? [];
$pills = $pills ?? ['blue'];
$isEdit = $role !== null;
$curPill = (string) ($role['pill'] ?? '');
if (!in_array($curPill, $pills, true)) {
    $curPill = $pills[0];
}
$total = count(\App\Models\Role::catalogueSlugs());
$chosen = count(array_intersect($held, \App\Models\Role::catalogueSlugs()));
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php // Page-level Back action lives in the subheader band (right of the breadcrumb), not inside the card header.
@endphp
@php ob_start();
@endphp
<a href="{{ route('admin.roles') }}" class="qm-btn qm-btn-outline"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i>{{ t_raw('common.back') }}</a>
@php \App\Support\View::slot('subhead', ob_get_clean());
@endphp
<form method="post" action="{{ route('admin.roles') }}">
    @csrf
    <input type="hidden" name="id" value="{{ (int) ($role['id'] ?? 0) }}">

    <div class="qm-card">
        <div class="qm-ops-head">
            <div class="d-flex align-items-center gap-2">
                <h2 class="mb-0">{{ t_raw('admin.roles.form_heading') }}</h2>
                <span class="qm-pill qm-pill-grey" data-perm-total>{{ t_raw('admin.roles.selected_pill', [':n' => $chosen, ':total' => $total]) }}</span>
            </div>
        </div>

        @php // The name/description/colour row reuses the app's shared filter-bar component (.qm-order-filters + .qm-of-field/.qm-of-label) — the same responsive labelled-field bar the Orders/Users/Reviews filters use — so it looks and reflows identically instead of a bespoke row/col style.
@endphp
        <div class="qm-order-filters">
            <div class="qm-of-field qm-of-grow">
                <label class="qm-of-label" for="role-label">{{ t_raw('admin.roles.f_name') }}</label>
                <input type="text" id="role-label" name="label" class="form-control" required
                       maxlength="{{ (int) $labelMax }}" value="{{ (string) ($role['label'] ?? old('label')) }}"
                       placeholder="{{ t_raw('admin.roles.f_name_placeholder') }}">
            </div>
            <div class="qm-of-field qm-of-grow">
                <label class="qm-of-label" for="role-description">{{ t_raw('admin.roles.f_description') }}</label>
                <input type="text" id="role-description" name="description" class="form-control"
                       maxlength="{{ (int) $descMax }}" value="{{ (string) ($role['description'] ?? old('description')) }}"
                       placeholder="{{ t_raw('admin.roles.f_description_placeholder') }}">
            </div>
            <div class="qm-of-field">
                <label class="qm-of-label" for="role-pill">{{ t_raw('admin.roles.f_colour') }}</label>
                <select class="form-select" id="role-pill" name="pill">
                    @foreach ($pills as $p)
                    <option value="{{ $p }}"{{ $curPill === $p ? ' selected' : '' }}>{{ t_raw('admin.roles.colour_' . $p) }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    @php // Modules tile into our responsive grid (2-up ≥md, 3-up ≥xl) instead of stacking full-width, so the page stays compact. h-100 + mb-0 keep the cards equal-height per row with the gutter, not qm-card's own margin.
@endphp
    <div class="row g-3">
    @foreach ($catalogue as $modKey => $module)
@php $perms = $module['perms']; $on = count(array_intersect(array_keys($perms), $held)); @endphp
        <div class="col-12 col-md-6 col-xl-4">
            <div class="qm-card h-100 mb-0" data-perm-module>
                <div class="qm-ops-head">
                    <div class="d-flex align-items-center gap-2">
                        <h2 class="mb-0">{{ t_raw($module['label']) }}</h2>
                        <span class="qm-pill qm-pill-grey" data-perm-count>{{ $on }} / {{ count($perms) }}</span>
                    </div>
                    @php /* Select-all as a head switch, the same control Clear database wears —
                             its on/off state mirrors "every permission in this module is held". */
@endphp
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" role="switch" id="perm-all-{{ $modKey }}" data-perm-all
                               aria-label="{{ t_raw('admin.roles.select_all') }}">
                        <label class="form-check-label" for="perm-all-{{ $modKey }}">{{ t_raw('admin.roles.select_all') }}</label>
                    </div>
                </div>
                @foreach ($perms as $slug => $perm)
                <label class="qm-switch-row">
                    <span>
                        <strong class="d-flex align-items-center gap-2 flex-wrap">{{ t_raw($perm['label']) }}@if (!empty($perm['dangerous']))<span class="qm-pill qm-pill-red">{{ t_raw('admin.roles.pill_dangerous') }}</span>@endif</strong>
                        <small>{{ $slug }}</small>
                    </span>
                    <input type="checkbox" name="permissions[]" value="{{ $slug }}"{{ in_array($slug, $held, true) ? ' checked' : '' }}>
                </label>
                @endforeach
            </div>
        </div>
    @endforeach
    </div>

    <div class="qm-card d-flex justify-content-end">
        <button type="submit" class="qm-btn">{{ t_raw($isEdit ? 'admin.roles.save_btn' : 'admin.roles.create_btn') }}</button>
    </div>
</form>

</div>@php /* /.qm-d2 */
@endphp
@endsection