@extends('layouts.portal')
@section('title', 'Certificates and badges')
@section('subtitle', 'Every credential you earn has a public verification page. Share it on LinkedIn so employers can confirm it in one click.')
@section('actions')<a class="btn btn-secondary" href="{{ route('portfolio.mine') }}"><x-icon name="id-card" :size="17"/> My portfolio</a>@endsection

@section('content')
@php
  $shareIcons = ['linkedin' => ['sh-linkedin', 'linkedin', 'Post on LinkedIn'], 'facebook' => ['sh-facebook', 'facebook', 'Share on Facebook'], 'x' => ['sh-x', 'x-twitter', 'Share on X'], 'whatsapp' => ['sh-whatsapp', 'whatsapp', 'Share on WhatsApp']];
@endphp

@if($credentials->isEmpty() && $badges->isEmpty() && $letters->isEmpty())
  <div class="panel reveal"><x-empty icon="award" title="Your first credential is one exam away" text="Complete your course, meet the attendance requirement and pass the exam. Your certificate and digital badge appear here automatically."><a class="btn btn-primary mt-2" href="{{ route('student.exams') }}">See my exams</a></x-empty></div>
@endif

@if($credentials->isNotEmpty())
<h2 class="pt-h2">Certificates <span class="pill pill-gray">{{ $credentials->count() }}</span></h2>
<div class="pt-grid pt-grid-wide">
  @foreach($credentials as $c)
    @php $sh = \App\Support\Share::credential($c); $st = $c->effectiveStatus(); @endphp
    <article class="card pt-cred reveal" id="c-{{ $c->id }}">
      <div class="pt-cred-head">
        <span class="seal"><x-icon name="award" :size="28"/></span>
        <div style="min-width:0"><h3>{{ $c->title }}</h3><div class="xs muted">{{ $c->course?->title }}</div></div>
        <x-pill :status="$st"/>
      </div>
      <dl class="kv pt-kv">
        <dt>Credential ID</dt><dd class="mono">{{ $c->credential_id }}</dd>
        <dt>Issued</dt><dd>{{ $c->issued_at?->format('d M Y') }}@if($c->expires_at) · expires {{ $c->expires_at->format('d M Y') }}@endif</dd>
        @if($c->score)<dt>Exam score</dt><dd>{{ rtrim(rtrim(number_format((float) $c->score, 1), '0'), '.') }}%</dd>@endif
      </dl>
      @if($c->skills->isNotEmpty())<div class="mt-1">@foreach($c->skills->take(6) as $sk)<span class="skill-tag">{{ $sk->name }}</span>@endforeach</div>@endif
      @if($c->isValid())
        <div class="pt-share">
          <a class="share-btn sh-linkedin" data-share-popup data-channel="linkedin_profile" href="{{ $sh['linkedin_profile'] }}" target="_blank" rel="noopener"><x-icon name="linkedin" :size="16"/> Add to LinkedIn profile</a>
          <div class="pt-share-icons">
            @foreach($shareIcons as $k => [$cls, $ico, $lab])<a class="pt-sh {{ $cls }}" data-share-popup data-channel="{{ $k }}" href="{{ $sh[$k] }}" target="_blank" rel="noopener" aria-label="{{ $lab }}" title="{{ $lab }}"><x-icon :name="$ico" :size="17"/></a>@endforeach
            <button type="button" class="pt-sh sh-copy" data-copy="{{ $sh['url'] }}" data-channel="link" aria-label="Copy verification link" title="Copy verification link"><x-icon name="copy" :size="17"/></button>
            <button type="button" class="pt-sh sh-email" data-native-share data-title="{{ $sh['title'] }}" data-text="{{ $sh['text'] }}" data-url="{{ $sh['url'] }}" aria-label="Share using your device" title="Share"><x-icon name="share" :size="17"/></button>
          </div>
        </div>
      @endif
      <div class="pt-actions">
        <a class="btn btn-secondary btn-sm" href="{{ route('credentials.verify', $c->credential_id) }}"><x-icon name="shield" :size="15"/> Verification page</a>
        @if($st !== 'revoked')<a class="btn btn-secondary btn-sm" href="{{ route('credentials.certificate.pdf', $c->credential_id) }}" target="_blank"><x-icon name="download" :size="15"/> Certificate PDF</a>@endif
        <form method="post" action="{{ route('credentials.visibility', $c->credential_id) }}" class="pt-vis">@csrf
          <label class="xs muted" for="cv-{{ $c->id }}">Visibility</label>
          <select class="select" id="cv-{{ $c->id }}" name="public" data-autosubmit><option value="1" @selected($c->visibility === 'public')>Public</option><option value="0" @selected($c->visibility !== 'public')>Private</option></select>
        </form>
      </div>
    </article>
  @endforeach
</div>
@endif

@if($badges->isNotEmpty())
<h2 class="pt-h2">Digital badges <span class="pill pill-gray">{{ $badges->count() }}</span></h2>
<div class="pt-grid">
  @foreach($badges as $b)
    @php $sh = \App\Support\Share::badge($b); $st = $b->effectiveStatus(); $track = route('badges.track', $b->badge_id_code); @endphp
    <article class="card badge-tile pt-badge reveal" id="b-{{ $b->id }}">
      <img class="badge-art" src="{{ $b->badge->imageUrl() }}" alt="{{ $b->badge->name }} badge artwork" width="150" height="150" loading="lazy">
      <h3 style="margin:0 0 4px;font-size:1.05rem">{{ $b->badge->name }}</h3>
      <div class="xs muted mb-2">{{ $b->badge->level }} · Issued {{ $b->issued_at?->format('d M Y') }}</div>
      <div class="row center" style="justify-content:center;margin-bottom:8px"><x-pill :status="$st"/> <span class="pill pill-gray" title="Public verification page views"><x-icon name="eye" :size="12"/> {{ $b->view_count }}</span> <span class="pill pill-gray" title="Times shared"><x-icon name="share" :size="12"/> {{ $b->share_count }}</span></div>
      @if($b->skills->isNotEmpty())<div>@foreach($b->skills->take(4) as $sk)<span class="skill-tag">{{ $sk->name }}</span>@endforeach</div>@endif
      @if($b->isValid())
        <div class="pt-share center">
          <a class="share-btn sh-linkedin" data-share-popup data-track="{{ $track }}" data-channel="linkedin_profile" href="{{ $sh['linkedin_profile'] }}" target="_blank" rel="noopener"><x-icon name="linkedin" :size="16"/> Add to LinkedIn profile</a>
          <div class="pt-share-icons" style="justify-content:center">
            @foreach($shareIcons as $k => [$cls, $ico, $lab])<a class="pt-sh {{ $cls }}" data-share-popup data-track="{{ $track }}" data-channel="{{ $k }}" href="{{ $sh[$k] }}" target="_blank" rel="noopener" aria-label="{{ $lab }}" title="{{ $lab }}"><x-icon :name="$ico" :size="17"/></a>@endforeach
            <button type="button" class="pt-sh sh-copy" data-copy="{{ $sh['url'] }}" data-track="{{ $track }}" data-channel="link" aria-label="Copy verification link" title="Copy verification link"><x-icon name="copy" :size="17"/></button>
            <button type="button" class="pt-sh sh-email" data-native-share data-track="{{ $track }}" data-title="{{ $sh['title'] }}" data-text="{{ $sh['text'] }}" data-url="{{ $sh['url'] }}" aria-label="Share using your device" title="Share"><x-icon name="share" :size="17"/></button>
          </div>
        </div>
      @endif
      <div class="pt-actions" style="justify-content:center">
        <a class="btn btn-secondary btn-sm" href="{{ route('badges.verify', $b->badge_id_code) }}"><x-icon name="shield" :size="15"/> Verify</a>
        <a class="btn btn-secondary btn-sm" href="{{ route('badges.png', $b->badge_id_code) }}" download><x-icon name="image" :size="15"/> PNG</a>
        <a class="btn btn-secondary btn-sm" href="{{ route('badges.assertion', $b->badge_id_code) }}" target="_blank" rel="noopener"><x-icon name="code" :size="15"/> JSON</a>
      </div>
      <form method="post" action="{{ route('badges.visibility', $b->badge_id_code) }}" class="pt-vis" style="justify-content:center;margin-top:10px">@csrf
        <label class="xs muted" for="bv-{{ $b->id }}">Visibility</label>
        <select class="select" id="bv-{{ $b->id }}" name="public" data-autosubmit><option value="1" @selected($b->visibility === 'public')>Public</option><option value="0" @selected($b->visibility !== 'public')>Private</option></select>
      </form>
    </article>
  @endforeach
</div>
@endif

@if($letters->isNotEmpty())
<h2 class="pt-h2">Letters <span class="pill pill-gray">{{ $letters->count() }}</span></h2>
<div class="table-wrap reveal">
  <table class="table"><thead><tr><th>Letter</th><th>Reference</th><th>Issued</th><th>Status</th><th></th></tr></thead><tbody>
    @foreach($letters as $l)
      <tr><td><b>{{ ucwords(str_replace('_', ' ', $l->type)) }}</b></td><td class="mono">{{ $l->letter_id }}</td><td>{{ $l->issued_at?->format('d M Y') }}</td><td><x-pill :status="$l->status"/></td>
      <td class="actions"><a class="btn btn-secondary btn-sm" href="{{ route('letters.verify', $l->letter_id) }}">Verify</a> <a class="btn btn-secondary btn-sm" href="{{ route('letters.pdf', $l->letter_id) }}" target="_blank"><x-icon name="download" :size="15"/> PDF</a></td></tr>
    @endforeach
  </tbody></table>
</div>
@endif

@if($credentials->isNotEmpty() || $badges->isNotEmpty())
<div class="callout reveal mt-3"><x-icon name="info" :size="20"/><div class="small"><b>How LinkedIn sharing works.</b> “Add to LinkedIn profile” opens LinkedIn’s certification form with the name, issuer, dates, credential ID and verification link already filled in. Only <b>public</b> credentials can be verified by people who are not logged in. Set a credential to private to hide it from employers.</div></div>
@endif
@endsection