@extends('layouts.portal')
@php
  $editing = $badge->exists;
  $levelCfg = config('infotics.badges.levels');
  $criteriaOptions = ['manual' => 'Manually by an administrator', 'course' => 'On completing a course', 'exam' => 'On passing an exam'];
  $type = old('criteria_type', $badge->criteria_type ?: 'manual');
@endphp
@section('title', $editing ? 'Edit badge' : 'New badge')
@section('subtitle', $editing ? $badge->name : 'Define what the badge means, how it is earned and how long it stays valid.')
@section('actions')
  <a class="btn btn-secondary" href="{{ route('admin.badges.index') }}"><x-icon name="arrow-left" :size="16"/> All badges</a>
  @if($editing)<a class="btn btn-secondary" href="{{ $badge->pageUrl() }}" target="_blank" rel="noopener"><x-icon name="external-link" :size="16"/> Public page</a>@endif
@endsection

@section('content')
<form method="post" action="{{ $editing ? route('admin.badges.update', $badge) : route('admin.badges.store') }}" enctype="multipart/form-data" novalidate data-badge-form>
  @csrf
  @if($editing) @method('PUT') @endif

  <div class="ad-form-grid">
    <div class="b1-main">
      <section class="panel" aria-labelledby="bd-basics">
        <div class="panel-head"><h2 id="bd-basics">Badge details</h2></div>
        <div class="panel-body">
          <div class="form-grid">
            <x-field name="name" label="Badge name" :value="$badge->name" required full placeholder="e.g. Azure Administrator — Course Completion"/>
            <x-field name="level" label="Level" type="select" :options="array_combine($levels, $levels)" :value="$badge->level" required help="Sets the default colour and star rating."/>
            <x-field name="status" label="Status" type="select" :options="['active' => 'Active — can be awarded', 'draft' => 'Draft — hidden from the public', 'archived' => 'Archived — no new awards']" :value="$badge->status" required/>
            <x-field name="description" label="Description" type="textarea" :rows="4" :value="$badge->description" required full help="Shown on the public badge page and in the Open Badges data. Say what the holder can do, in plain words."/>
            <x-field name="criteria_narrative" label="Earning criteria" type="textarea" :rows="3" :value="$badge->criteria_narrative" full help="Optional. How someone earns it, e.g. “Attend at least 75% of classes and pass the final assessment.”"/>
          </div>
        </div>
      </section>

      <section class="panel" aria-labelledby="bd-award">
        <div class="panel-head"><h2 id="bd-award">How it is awarded</h2></div>
        <div class="panel-body">
          <div class="form-grid">
            <x-field name="criteria_type" label="Awarded" type="select" :options="$criteriaOptions" :value="$badge->criteria_type" required/>
            <x-field name="validity_months" label="Valid for (months)" type="number" :value="$badge->validity_months" :min="1" :max="240" placeholder="No expiry" help="Leave blank for a badge that never expires."/>
            <div class="full" data-criteria-pane="course" @if($type !== 'course') hidden @endif>
              <x-field name="course_id" label="Course" type="select" :options="$courses->pluck('title', 'id')->all()" :value="$badge->course_id" blank="Choose a course" help="Awarded together with the completion certificate when a batch is completed."/>
            </div>
            <div class="full" data-criteria-pane="exam" @if($type !== 'exam') hidden @endif>
              <x-field name="exam_id" label="Exam" type="select" :options="$exams->pluck('title', 'id')->all()" :value="$badge->exam_id" blank="Choose an exam" help="Awarded automatically when a learner passes this exam."/>
            </div>
          </div>
        </div>
      </section>

      <section class="panel" aria-labelledby="bd-skills">
        <div class="panel-head"><h2 id="bd-skills">Skills &amp; discovery</h2></div>
        <div class="panel-body">
          <div class="form-grid">
            <x-field name="skills" label="Skills demonstrated" :value="$skillsCsv" full placeholder="Virtual networks, Storage accounts, Azure AD" help="Comma separated. Shown as skill tags on the badge and copied to every issued badge."/>
            <x-field name="tags" label="Tags" :value="$tagsCsv" full placeholder="azure, cloud, microsoft" help="Comma separated keywords used for search and the badge data."/>
          </div>
        </div>
      </section>
    </div>

    <aside class="b1-side">
      <section class="panel" aria-labelledby="bd-art">
        <div class="panel-head"><h2 id="bd-art">Artwork</h2></div>
        <div class="panel-body">
          <div class="b1-art" style="--lv:{{ $badge->levelColor() }}">
            <img @if($editing) src="{{ $badge->imageUrl() }}" @else hidden @endif alt="Badge artwork" width="132" height="146" data-art-preview>
            @unless($editing)<p class="small muted" data-art-empty>The artwork is generated from the level colour and name once the badge is saved. Upload your own to replace it.</p>@endunless
          </div>
          <x-field name="image" type="file" label="Upload image" accept="image/png,image/jpeg,image/webp,image/svg+xml" help="PNG, JPG, WEBP or SVG, up to 2 MB. Square artwork on a transparent background works best."/>
          <div class="field">
            <label class="label" for="f-color">Accent colour</label>
            <div class="input-group">
              <input class="input mono" type="text" id="f-color" name="color" value="{{ old('color', $badge->getRawOriginal('color')) }}" placeholder="Level colour" maxlength="7" pattern="#[0-9A-Fa-f]{6}" inputmode="text" autocomplete="off" data-color-text>
              <input class="b1-color" type="color" value="{{ old('color', $badge->getRawOriginal('color')) ?: $badge->levelColor() }}" aria-label="Pick a colour" data-color-picker>
            </div>
            <div class="help">Optional #RRGGBB. Blank uses the level colour: @foreach($levelCfg as $ln => $lc)<span class="b1-swatch" title="{{ $ln }}" style="background:{{ $lc['color'] }}"></span>@endforeach</div>
            @error('color')<div class="field-error">{{ $message }}</div>@enderror
          </div>
        </div>
      </section>

      <section class="panel" aria-labelledby="bd-issuer">
        <div class="panel-head"><h2 id="bd-issuer">Issuer</h2></div>
        <div class="panel-body">
          <x-field name="issuer_name" label="Issuer name" :value="$badge->issuer_name" :placeholder="config('infotics.badges.issuer_name')" help="Blank uses “{{ config('infotics.badges.issuer_name') }}”."/>
          <x-field name="vendor_id" label="Vendor" type="select" :options="$vendors->pluck('name', 'id')->all()" :value="$badge->vendor_id" blank="No vendor" help="For grouping on the public catalogue. Does not imply the vendor issued it."/>
          <x-field name="slug" label="URL slug" :value="$badge->slug" placeholder="Generated from the name" help="Lowercase letters, numbers and dashes. Changing it changes the public URL."/>
        </div>
      </section>
    </aside>
  </div>

  <div class="ad-actionbar">
    <a class="btn btn-secondary" href="{{ route('admin.badges.index') }}">Cancel</a>
    <button class="btn btn-primary" type="submit"><x-icon name="check" :size="16"/> {{ $editing ? 'Save badge' : 'Create badge' }}</button>
  </div>
</form>

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