@extends('layouts.portal')
@section('title', 'Letters')
@section('subtitle', 'Issue verifiable letters such as training completion or enrollment confirmation, from reusable templates.')
@section('actions')
  <button class="btn btn-secondary" type="button" data-modal-open="#tpl-modal" data-tpl-new><x-icon name="plus" :size="16"/> New template</button>
  <a class="btn btn-primary" href="#issue-letter"><x-icon name="send" :size="16"/> Issue a letter</a>
@endsection

@section('content')
@php
  $supported = [
    'name' => 'Learner’s full name',
    'email' => 'Learner’s email address',
    'course' => 'Course or programme, typed when you issue the letter',
    'details' => 'Extra details, typed when you issue the letter',
    'date' => 'Issue date, e.g. '.now()->format('d F Y'),
    'organisation' => config('infotics.brand.legal_name'),
  ];
  $errorsOnTpl = $errors->any() && old('_form') === 'tpl';
  $errorsOnIssue = $errors->any() && old('_form') === 'letter';
  $tplPlaceholders = function ($body) use ($supported) {
      preg_match_all('/\{\{([^{}]*)\}\}/', (string) $body, $m);
      return collect($m[1])->unique()->map(fn ($k) => ['key' => $k, 'ok' => array_key_exists($k, $supported)])->values();
  };
  $latest = $letters->first();
  $ph = fn ($k) => '{'.'{'.$k.'}'.'}';
@endphp

<div class="kpis">
  <div class="card kpi"><span class="ico"><x-icon name="file-text" :size="22"/></span><span>Templates</span><b>{{ $templates->count() }}</b><small>{{ $templates->where('active', true)->count() }} active</small></div>
  <div class="card kpi green"><span class="ico"><x-icon name="mail-check" :size="22"/></span><span>Letters issued</span><b>{{ number_format($letters->total()) }}</b><small>Each one is emailed and verifiable</small></div>
  <div class="card kpi violet"><span class="ico"><x-icon name="calendar-check" :size="22"/></span><span>Latest letter</span><b class="b1-kpi-text">{{ $latest?->issued_at?->format('d M Y') ?? 'None yet' }}</b><small>{{ $latest ? ($latest->user?->name ?? '') : 'Issue the first letter below' }}</small></div>
</div>

<section class="panel" id="issue-letter" aria-labelledby="il-h">
  <div class="panel-head"><h2 id="il-h">Issue a letter</h2><span class="xs muted">The learner receives an email with a link to the letter and its verification page.</span></div>
  @if($templates->isEmpty())
    <x-empty icon="file-text" title="Create a template first" text="A template holds the wording of the letter, with placeholders that are filled in for each learner."><button class="btn btn-primary btn-sm" type="button" data-modal-open="#tpl-modal" data-tpl-new>New template</button></x-empty>
  @else
  <div class="b1-issue">
    <form class="b1-issue-form" method="post" action="{{ route('admin.letters.issue') }}" data-letter-form data-today="{{ now()->format('d F Y') }}" data-org="{{ config('infotics.brand.legal_name') }}">
      @csrf
      <input type="hidden" name="_form" value="letter">
      <div class="field">
        <label class="label" for="il-template">Template <span class="req">*</span></label>
        <select class="select" id="il-template" name="template_id" required data-letter-template>
          @foreach($templates as $t)<option value="{{ $t->id }}" data-body="{{ $t->body_template }}" @selected((string) old('template_id') === (string) $t->id)>{{ $t->name }}</option>@endforeach
        </select>
        @error('template_id')<div class="field-error">{{ $message }}</div>@enderror
      </div>
      <div class="field">
        <label class="label" for="il-user">Recipient <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 recipient list" data-select-filter="#il-user" autocomplete="off">
        <select class="select" id="il-user" name="user_id" required data-letter-user>
          <option value="">Choose a learner or trainer</option>
          @foreach($students as $s)<option value="{{ $s->id }}" data-name="{{ $s->name }}" data-email="{{ $s->email }}" @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">
        <label class="label" for="il-course">Course or programme</label>
        <input class="input" id="il-course" name="course" maxlength="200" value="{{ old('course') }}" placeholder="e.g. Microsoft Azure Administrator" data-letter-course>
        <div class="help">Fills <span class="b1-ph">@{{course}}</span> in the template.</div>
        @error('course')<div class="field-error">{{ $message }}</div>@enderror
      </div>
      <div class="field">
        <label class="label" for="il-extra">Additional details</label>
        <textarea class="textarea" id="il-extra" name="extra" rows="3" maxlength="500" placeholder="e.g. Attended 42 hours between 3 March and 28 April 2026." data-letter-extra>{{ old('extra') }}</textarea>
        <div class="help">Fills <span class="b1-ph">@{{details}}</span>. Maximum 500 characters.</div>
        @error('extra')<div class="field-error">{{ $message }}</div>@enderror
      </div>
      <button class="btn btn-primary" type="submit"><x-icon name="send" :size="16"/> Issue and email letter</button>
    </form>

    <div class="b1-issue-preview" aria-live="polite">
      <div class="between b1-prev-head"><h3>Preview</h3><span class="xs muted">Updates as you type</span></div>
      <div class="b1-letter"><div class="b1-letter-head"><b>{{ config('infotics.brand.legal_name') }}</b><span>{{ setting('address') }}</span></div><div class="b1-letter-body" data-letter-preview></div></div>
      <p class="xs b1-warn hidden" data-letter-warn></p>
    </div>
  </div>
  @endif
</section>

<section class="b1-block" aria-labelledby="tp-h">
  <div class="between b1-sec-head"><h2 id="tp-h">Templates</h2><span class="small muted">Use the exact placeholders below, without spaces inside the braces.</span></div>
  @if($templates->isEmpty())
    <div class="panel"><x-empty icon="file-text" title="No templates yet" text="Create one with the New template button."/></div>
  @else
  <div class="b1-tpl-grid">
    @foreach($templates as $t)
      @php $found = $tplPlaceholders($t->body_template); @endphp
      <article class="card b1-tpl">
        <div class="b1-tpl-head"><h3>{{ $t->name }}</h3><x-pill :status="$t->active ? 'active' : 'draft'"/></div>
        <p class="xs muted">{{ $t->type }} · version {{ $t->version }} · {{ $t->letters()->count() }} issued</p>
        <p class="small b1-tpl-body">{{ \Illuminate\Support\Str::limit(preg_replace('/\s+/', ' ', $t->body_template), 170) }}</p>
        <div class="b1-phs">
          @forelse($found as $p)<span class="b1-ph {{ $p['ok'] ? '' : 'bad' }}" @unless($p['ok']) title="Not a supported placeholder, it will appear exactly as typed" @endunless>{{ $ph($p['key']) }}</span>@empty<span class="xs muted">No placeholders</span>@endforelse
        </div>
        <div class="b1-tile-actions">
          <button class="btn btn-secondary btn-sm" type="button" data-use-template="{{ $t->id }}"><x-icon name="send" :size="14"/> Use</button>
          <button class="btn btn-secondary btn-sm" type="button" data-modal-open="#tpl-modal" data-tpl-edit data-name="{{ $t->name }}" data-type="{{ $t->type }}" data-body="{{ $t->body_template }}"><x-icon name="edit" :size="14"/> Edit</button>
        </div>
      </article>
    @endforeach
  </div>
  @endif
</section>

<section class="b1-block" aria-labelledby="lt-h">
  <div class="between b1-sec-head"><h2 id="lt-h">Issued letters</h2><span class="small muted">{{ number_format($letters->total()) }} in total</span></div>
  @if($letters->isEmpty())
    <div class="panel"><x-empty icon="mail" title="No letters issued yet" text="Letters you issue appear here with their PDF, print and verification links."/></div>
  @else
  <div class="table-wrap">
    <table class="table b1-tbl">
      <thead><tr><th>Letter</th><th>Recipient</th><th>Issued</th><th>Status</th><th class="actions">Open</th></tr></thead>
      <tbody>
      @foreach($letters as $l)
        @php $vurl = route('letters.verify', $l->letter_id); @endphp
        <tr>
          <td class="b1-min"><b>{{ $l->type }}</b><span class="b1-sub mono">{{ $l->letter_id }}</span></td>
          <td><div class="person"><span class="avatar avatar-sm">@if($l->user?->avatarUrl())<img src="{{ $l->user->avatarUrl() }}" alt="">@else{{ $l->user?->initials() ?? '?' }}@endif</span><div class="b1-min"><b>{{ $l->user?->name ?? 'Deleted user' }}</b><div class="xs muted">{{ $l->user?->email }}</div></div></div></td>
          <td class="nowrap">{{ $l->issued_at?->format('d M Y') ?? '—' }}</td>
          <td><x-pill :status="$l->status"/></td>
          <td class="actions">
            <div class="ad-actions b1-acts">
              <a class="icon-btn" href="{{ route('letters.pdf', $l->letter_id) }}" target="_blank" rel="noopener" aria-label="Open PDF of {{ $l->letter_id }}" title="PDF"><x-icon name="download" :size="16"/></a>
              <a class="icon-btn" href="{{ route('letters.print', $l->letter_id) }}" target="_blank" rel="noopener" aria-label="Open printable version of {{ $l->letter_id }}" title="Print view"><x-icon name="file-text" :size="16"/></a>
              <a class="icon-btn" href="{{ $vurl }}" target="_blank" rel="noopener" aria-label="Open verification page for {{ $l->letter_id }}" title="Verify page"><x-icon name="external-link" :size="16"/></a>
              <button class="icon-btn" type="button" data-copy="{{ $vurl }}" aria-label="Copy verify link for {{ $l->letter_id }}" title="Copy verify link"><x-icon name="copy" :size="16"/></button>
            </div>
          </td>
        </tr>
      @endforeach
      </tbody>
    </table>
  </div>
  {{ $letters->links() }}
  @endif
</section>

{{-- Create / edit template --}}
<div class="modal {{ $errorsOnTpl ? 'open' : '' }}" id="tpl-modal" role="dialog" aria-modal="true" aria-labelledby="tpl-modal-h">
  <div class="modal-box b1-modal b1-modal-lg">
    <div class="between b1-modal-head"><div><h2 id="tpl-modal-h" data-tpl-heading>New template</h2><p class="small muted" data-tpl-note>Templates are saved by name. Using the name of an existing template replaces it.</p></div><button class="icon-btn" type="button" data-modal-close aria-label="Close"><x-icon name="x" :size="18"/></button></div>
    <form method="post" action="{{ route('admin.letters.templates.store') }}" data-tpl-form>
      @csrf
      <input type="hidden" name="_form" value="tpl">
      <div class="form-grid">
        <div class="field">
          <label class="label" for="tp-name">Template name <span class="req">*</span></label>
          <input class="input" id="tp-name" name="name" maxlength="120" required value="{{ old('name') }}" placeholder="e.g. Training Completion Letter">
          @error('name')<div class="field-error">{{ $message }}</div>@enderror
        </div>
        <div class="field">
          <label class="label" for="tp-type">Document type <span class="req">*</span></label>
          <input class="input" id="tp-type" name="type" maxlength="80" required list="tp-types" value="{{ old('type') }}" placeholder="e.g. Training Completion Letter">
          <datalist id="tp-types">@foreach($templates->pluck('type')->unique() as $ty)<option value="{{ $ty }}">@endforeach</datalist>
          <div class="help">Printed as the letter heading and shown on the verify page.</div>
          @error('type')<div class="field-error">{{ $message }}</div>@enderror
        </div>
        <div class="field full">
          <label class="label" for="tp-body">Letter text <span class="req">*</span></label>
          <textarea class="textarea b1-tpl-text" id="tp-body" name="body_template" rows="10" maxlength="8000" required placeholder="This is to certify that @{{name}} has completed …" data-tpl-body>{{ old('body_template') }}</textarea>
          @error('body_template')<div class="field-error">{{ $message }}</div>@enderror
        </div>
      </div>
      <div class="b1-ph-help">
        <div class="label">Placeholders <span class="muted">click to insert at the cursor</span></div>
        <div class="b1-phs">
          @foreach($supported as $key => $desc)<button class="b1-ph b1-ph-btn" type="button" data-insert="{{ $ph($key) }}" title="{{ $desc }}">{{ $ph($key) }}</button>@endforeach
        </div>
        <ul class="b1-ph-list xs muted">
          @foreach($supported as $key => $desc)<li><span class="mono">{{ $ph($key) }}</span> {{ $desc }}</li>@endforeach
        </ul>
        <p class="xs muted">Write placeholders exactly as shown, with no spaces inside the braces. Anything else stays in the letter as typed. Blank lines become paragraph breaks.</p>
      </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="check" :size="16"/> Save template</button></div>
    </form>
  </div>
</div>

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