@extends('layouts.portal')
@section('title', 'Digital badges')
@section('subtitle', 'The badge catalogue, who holds each badge, and manual awards. Every issued badge has a public verification page.')
@section('actions')
  <button class="btn btn-secondary" type="button" data-modal-open="#issue-modal"><x-icon name="award" :size="16"/> Issue badge</button>
  <a class="btn btn-primary" href="{{ route('admin.badges.create') }}"><x-icon name="plus" :size="16"/> New badge</a>
@endsection

@section('content')
@php
  $levels = config('infotics.badges.levels');
  $byLevel = $badges->groupBy('level');
  $known = array_keys($levels);
  $others = $badges->reject(fn ($b) => in_array($b->level, $known, true));
  $activeCount = $badges->where('status', 'active')->count();
  $validCount = (int) ($stats['issued'] ?? 0);
  $revokedCount = (int) ($stats['revoked'] ?? 0);
  $top = $badges->sortByDesc('issuances_count')->first();
  $criteriaLabel = ['manual' => 'Manual award', 'course' => 'Course completion', 'exam' => 'Exam pass'];
  $errorsOnIssue = $errors->any() && old('_form') === 'issue';
@endphp

<div class="kpis">
  <div class="card kpi"><span class="ico"><x-icon name="badge-check" :size="22"/></span><span>Badges in catalogue</span><b>{{ $badges->count() }}</b><small>{{ $activeCount }} active{{ $badges->count() > $activeCount ? ' · '.($badges->count() - $activeCount).' draft or archived' : '' }}</small></div>
  <div class="card kpi green"><span class="ico"><x-icon name="check-circle" :size="22"/></span><span>Valid badges held</span><b>{{ number_format($validCount) }}</b><small>Publicly verifiable right now</small></div>
  <div class="card kpi {{ $revokedCount ? 'red' : '' }}"><span class="ico"><x-icon name="shield-alert" :size="22"/></span><span>Revoked</span><b>{{ number_format($revokedCount) }}</b><small>Shown as revoked on the verify page</small></div>
  <div class="card kpi violet"><span class="ico"><x-icon name="trending-up" :size="22"/></span><span>Most awarded</span><b class="b1-kpi-text">{{ $top && $top->issuances_count ? \Illuminate\Support\Str::limit($top->name, 26) : 'None yet' }}</b><small>{{ $top && $top->issuances_count ? number_format($top->issuances_count).' issued' : 'Issue the first badge' }}</small></div>
</div>

<section aria-labelledby="cat-h">
  <div class="between b1-sec-head"><h2 id="cat-h">Catalogue</h2><span class="small muted">Grouped by level. Artwork is generated from the level colour unless you upload your own.</span></div>

  @if($badges->isEmpty())
    <div class="panel"><x-empty icon="badge-check" title="No badges yet" text="Create a badge, then link it to a course or an exam so it is awarded automatically."><a class="btn btn-primary btn-sm" href="{{ route('admin.badges.create') }}">Create the first badge</a></x-empty></div>
  @endif

  @foreach(array_merge($known, $others->isNotEmpty() ? ['Other'] : []) as $level)
    @php $group = $level === 'Other' ? $others : ($byLevel[$level] ?? collect()); @endphp
    @continue($group->isEmpty())
    @php $cfg = $levels[$level] ?? ['color' => '#0A66FF', 'stars' => 1]; @endphp
    <div class="b1-level" style="--lv:{{ $cfg['color'] }}">
      <span class="b1-stars" aria-hidden="true">@for($s = 0; $s < $cfg['stars']; $s++)<x-icon name="star" :size="14"/>@endfor</span>
      <h3>{{ $level }}</h3><span class="pill pill-gray">{{ $group->count() }}</span>
    </div>
    <div class="b1-grid">
      @foreach($group as $b)
        <article class="card badge-tile b1-tile" style="--lv:{{ $b->levelColor() }}">
          @if($b->status !== 'active')<span class="b1-tile-state"><x-pill :status="$b->status"/></span>@endif
          <a class="icon-btn b1-tile-link" href="{{ $b->pageUrl() }}" target="_blank" rel="noopener" aria-label="Open public page of {{ $b->name }}" title="Public page"><x-icon name="external-link" :size="14"/></a>
          <img class="badge-art" src="{{ $b->imageUrl() }}" alt="" width="88" height="97" loading="lazy">
          <h4 class="b1-tile-name" title="{{ $b->name }}">{{ $b->name }}</h4>
          <p class="xs muted b1-tile-meta">{{ $criteriaLabel[$b->criteria_type] ?? 'Manual award' }} · {{ number_format($b->issuances_count) }} issued</p>
          <div class="b1-tile-actions">
            <a class="btn btn-secondary btn-sm" href="{{ route('admin.badges.edit', $b) }}"><x-icon name="edit" :size="14"/> Edit</a>
            <button class="btn btn-secondary btn-sm" type="button" data-modal-open="#issue-modal" data-issue-badge="{{ $b->id }}" @disabled($b->status !== 'active') title="{{ $b->status === 'active' ? 'Award this badge to a learner' : 'Only active badges can be issued' }}"><x-icon name="award" :size="14"/> Issue</button>
          </div>
        </article>
      @endforeach
    </div>
  @endforeach
</section>

<section class="b1-block" aria-labelledby="iss-h">
  <div class="between b1-sec-head"><h2 id="iss-h">Issued badges</h2><span class="small muted">{{ number_format($issuances->total()) }} {{ \Illuminate\Support\Str::plural('record', $issuances->total()) }}{{ $filters ? ' match your search' : '' }}</span></div>
  <form method="get" class="filters" role="search" aria-label="Search issued badges">
    <div class="searchbox"><x-icon name="search" :size="18"/><input class="input" type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Search by holder name, email or badge ID" aria-label="Search issued badges"></div>
    <button class="btn btn-secondary btn-sm" type="submit">Search</button>
    @if($filters)<a class="btn btn-ghost btn-sm" href="{{ route('admin.badges.index') }}">Clear</a>@endif
  </form>

  @if($issuances->isEmpty())
    <div class="panel"><x-empty icon="award" :title="$filters ? 'No issued badges match' : 'No badges issued yet'" :text="$filters ? 'Try a different name, email or badge ID.' : 'Badges are issued automatically when learners pass an exam or complete a course, or manually with the Issue badge button.'"/></div>
  @else
  <div class="table-wrap">
    <table class="table b1-tbl">
      <thead><tr><th>Holder</th><th>Badge</th><th>Issued</th><th>Status</th><th>Verify</th><th class="actions">Actions</th></tr></thead>
      <tbody>
      @foreach($issuances as $i)
        @php $st = $i->effectiveStatus(); @endphp
        <tr>
          <td><div class="person"><span class="avatar avatar-sm">@if($i->user?->avatarUrl())<img src="{{ $i->user->avatarUrl() }}" alt="">@else{{ $i->user?->initials() ?? '?' }}@endif</span><div class="b1-min"><b>{{ $i->user?->name ?? 'Deleted user' }}</b><div class="xs muted">{{ $i->user?->email }}</div></div></div></td>
          <td class="b1-min b1-wide"><b>{{ $i->badge?->name ?? 'Deleted badge' }}</b><span class="b1-sub mono">{{ $i->badge_id_code }}</span></td>
          <td class="nowrap">{{ $i->issued_at?->format('d M Y') ?? '—' }}<span class="b1-sub">{{ $i->expires_at ? 'Expires '.$i->expires_at->format('d M Y') : 'No expiry' }}</span></td>
          <td><x-pill :status="$st"/>@if($st === 'revoked' && $i->revoke_reason)<span class="b1-sub b1-reason" title="{{ $i->revoke_reason }}">{{ \Illuminate\Support\Str::limit($i->revoke_reason, 26) }}</span>@endif</td>
          <td class="nowrap">
            <a class="icon-btn" href="{{ $i->verifyUrl() }}" target="_blank" rel="noopener" aria-label="Open verification page for {{ $i->badge_id_code }}" title="Open verify page"><x-icon name="external-link" :size="16"/></a>
            <button class="icon-btn" type="button" data-copy="{{ $i->verifyUrl() }}" aria-label="Copy verify link for {{ $i->badge_id_code }}" title="Copy verify link"><x-icon name="copy" :size="16"/></button>
          </td>
          <td class="actions">
            @if($st !== 'revoked')
              <button class="btn btn-danger btn-sm" type="button" data-modal-open="#revoke-modal" data-revoke data-action="{{ route('admin.badges.revoke', $i) }}" data-label="{{ ($i->user?->name ?? 'Holder').' · '.($i->badge?->name ?? 'Badge') }}"><x-icon name="shield-alert" :size="14"/> Revoke</button>
            @else
              <span class="xs muted">{{ $i->revoked_at?->format('d M Y') }}</span>
            @endif
          </td>
        </tr>
      @endforeach
      </tbody>
    </table>
  </div>
  {{ $issuances->links() }}
  @endif
</section>

{{-- Issue badge --}}
<div class="modal {{ $errorsOnIssue ? 'open' : '' }}" id="issue-modal" role="dialog" aria-modal="true" aria-labelledby="issue-modal-h">
  <div class="modal-box b1-modal">
    <div class="between b1-modal-head"><div><h2 id="issue-modal-h">Issue a badge</h2><p class="small muted">The learner is emailed a link to their badge with share buttons.</p></div><button class="icon-btn" type="button" data-modal-close aria-label="Close"><x-icon name="x" :size="18"/></button></div>
    @php $firstActive = $badges->firstWhere('status', 'active'); @endphp
    @if(! $firstActive)
      <div class="callout warn"><x-icon name="alert" :size="18"/><div class="small">There is no active badge to issue. Activate or create a badge first.</div></div>
    @else
    <form method="post" action="{{ route('admin.badges.issue', $firstActive) }}" data-issue-form>
      @csrf
      <input type="hidden" name="_form" value="issue">
      <div class="form-grid">
        <div class="field full">
          <label class="label" for="bi-badge">Badge <span class="req">*</span></label>
          <select class="select" id="bi-badge" data-issue-badge-select required>
            @foreach($badges->where('status', 'active') as $b)<option value="{{ $b->id }}" data-action="{{ route('admin.badges.issue', $b) }}">{{ $b->name }} · {{ $b->level }}</option>@endforeach
          </select>
        </div>
        <div class="field full">
          <label class="label" for="bi-user">Learner <span class="req">*</span></label>
          <input class="input b1-filter-input" type="search" placeholder="Type to narrow the list by name or email" aria-label="Narrow the learner list" data-select-filter="#bi-user" autocomplete="off">
          <select class="select" id="bi-user" name="user_id" size="1" required>
            <option value="">Choose a learner</option>
            @foreach($students as $s)<option value="{{ $s->id }}" @selected((string) old('user_id') === (string) $s->id)>{{ $s->name }} · {{ $s->email }}</option>@endforeach
          </select>
          @error('user_id')<div class="field-error">{{ $message }}</div>@enderror
        </div>
        <div class="field full">
          <label class="label" for="bi-note">Evidence or reason <span class="muted">(optional)</span></label>
          <textarea class="textarea" id="bi-note" name="note" rows="3" maxlength="300" placeholder="e.g. Passed the practical lab on 12 September">{{ old('note') }}</textarea>
          <div class="help">Stored with the badge as evidence. Maximum 300 characters.</div>
          @error('note')<div class="field-error">{{ $message }}</div>@enderror
        </div>
        <div class="field full">
          <label class="label" for="bi-exp">Expiry date <span class="muted">(optional)</span></label>
          <input class="input" type="date" id="bi-exp" name="expires_at" value="{{ old('expires_at') }}" min="{{ now()->addDay()->toDateString() }}">
          <div class="help">Leave blank to use the badge’s default validity period.</div>
          @error('expires_at')<div class="field-error">{{ $message }}</div>@enderror
        </div>
      </div>
      <div class="row b1-modal-foot"><button class="btn btn-secondary" type="button" data-modal-close>Cancel</button><button class="btn btn-primary" type="submit"><x-icon name="award" :size="16"/> Issue and email badge</button></div>
    </form>
    @endif
  </div>
</div>

{{-- Revoke badge --}}
<div class="modal" id="revoke-modal" role="dialog" aria-modal="true" aria-labelledby="revoke-modal-h">
  <div class="modal-box b1-modal">
    <div class="between b1-modal-head"><div><h2 id="revoke-modal-h">Revoke this badge?</h2><p class="small muted" data-revoke-label></p></div><button class="icon-btn" type="button" data-modal-close aria-label="Close"><x-icon name="x" :size="18"/></button></div>
    <div class="callout danger mb-2"><x-icon name="shield-alert" :size="18"/><div class="small">The public verification page will immediately show this badge as revoked, and any linked certificate is revoked with it. This cannot be undone.</div></div>
    <form method="post" action="#" data-revoke-form data-confirm="Revoke this badge? The holder will lose it and the public page will show it as revoked.">
      @csrf
      <div class="field">
        <label class="label" for="rv-reason">Reason <span class="req">*</span></label>
        <textarea class="textarea" id="rv-reason" name="reason" rows="3" maxlength="300" required placeholder="Recorded in the audit log for your records"></textarea>
      </div>
      <div class="row b1-modal-foot"><button class="btn btn-secondary" type="button" data-modal-close>Keep badge</button><button class="btn btn-danger" type="submit">Revoke badge</button></div>
    </form>
  </div>
</div>

@push('scripts')<script src="{{ asset_v('assets/js/admin-b1.js') }}" defer nonce="{{ csp_nonce() }}"></script>@endpush
@endsection