@extends('layouts.app')
@php
    /** @var \App\Models\Credential $credential */
    $holder = $credential->user;
    $ev = is_array($credential->evidence) ? $credential->evidence : [];
    $course = $credential->course;
    $issuance = $credential->badge;
    $badge = $issuance?->badge;
    $valid = in_array($status, ['active', 'issued'], true);
    $bannerClass = $valid ? 'ok' : ($status === 'revoked' ? 'bad' : 'warn');
    $banner = match (true) {
        $valid => ['icon' => 'badge-check', 'title' => 'Verified — this certificate is genuine', 'text' => 'Issued by '.config('infotics.badges.issuer_name').' on '.$credential->issued_at->format('d M Y').'. '.($credential->expires_at ? 'Valid until '.$credential->expires_at->format('d M Y').'.' : 'It does not expire.')],
        $status === 'revoked' => ['icon' => 'shield-alert', 'title' => 'Revoked — this certificate is no longer valid', 'text' => 'Revoked'.($credential->revoked_at ? ' on '.$credential->revoked_at->format('d M Y') : '').'.'.($credential->revoke_reason ? ' Reason: '.$credential->revoke_reason : '')],
        default => ['icon' => 'alert', 'title' => 'Expired — this certificate is past its validity date', 'text' => 'Expired on '.$credential->expires_at?->format('d M Y').'. It was issued on '.$credential->issued_at->format('d M Y').'.'],
    };
    $hidden = ! $private && $credential->visibility !== 'public';
    $canShare = ! $private && ! $hidden && $status !== 'revoked';
    $skills = $credential->skills->isNotEmpty() ? $credential->skills : ($badge?->skills ?? collect());
    $hours = $ev['hours'] ?? $ev['duration_hours'] ?? $course?->total_hours;
    $pct = $ev['percent'] ?? $credential->score;
    $att = $ev['attendance_percent'] ?? null;
    $fmt = fn ($v) => rtrim(rtrim(number_format((float) $v, 2), '0'), '.');
    if (! $private) {
        seo()->schema(array_filter([
            '@type' => 'EducationalOccupationalCredential', 'name' => $credential->title, 'identifier' => $credential->credential_id,
            'url' => $credential->verifyUrl(), 'credentialCategory' => 'Certificate',
            'recognizedBy' => ['@type' => 'Organization', 'name' => config('infotics.badges.issuer_name'), 'url' => url('/')],
            'dateCreated' => $credential->issued_at->toDateString(), 'validUntil' => $credential->expires_at?->toDateString(),
            'creativeWorkStatus' => $valid ? 'Valid' : ucfirst($status),
            'competencyRequired' => $skills->pluck('name')->values()->all() ?: null,
        ], fn ($v) => $v !== null));
    }
@endphp
@section('content')
@if($private)
<section class="section">
  <div class="container narrow">
    <div class="card card-pad tr-bv-private">
      <span class="tr-bv-lock"><x-icon name="lock" :size="30"/></span>
      <h1>This certificate is private</h1>
      <p class="lead">The holder has chosen not to show this certificate publicly, so its details are hidden.</p>
      <p class="muted">Ask the holder for a public link, or check another credential by its ID.</p>
      <div class="row tr-bv-private-cta">
        @guest<a class="btn btn-primary" href="{{ route('login') }}">Log in <x-icon name="arrow-right" :size="18"/></a>@endguest
        <a class="btn btn-secondary" href="{{ route('verify') }}"><x-icon name="shield" :size="18"/> Verify another credential</a>
      </div>
    </div>
  </div>
</section>
@else
<section class="section-dark tr-show-hero tr-bv-hero" style="--lv:#0a66ff">
  <div class="tr-show-glow" aria-hidden="true"></div>
  <div class="container" style="position:relative;z-index:2">
    <nav class="crumbs" aria-label="Breadcrumb"><a href="{{ route('home') }}">Home</a><a href="{{ route('verify') }}">Verify</a><span>Certificate {{ $credential->credential_id }}</span></nav>

    <div class="verify-head {{ $bannerClass }} tr-bv-banner" role="status">
      <span class="tr-bv-banner-ico"><x-icon :name="$banner['icon']" :size="26"/></span>
      <div class="grow"><b>{{ $banner['title'] }}</b><span>{{ $banner['text'] }}</span></div>
      <span class="tr-bv-banner-id">Certificate ID <code>{{ $credential->credential_id }}</code></span>
    </div>

    @if($hidden)
      <div class="callout warn tr-bv-hidden"><x-icon name="lock" :size="18"/><div class="small"><b>This certificate is private.</b> {{ $isOwner ? 'Only you and INFOTICS admins can see this page. Make it public below before sharing it.' : 'You can see it as an administrator. It is hidden from the public.' }}</div></div>
    @endif

    <div class="badge-hero tr-show-grid">
      <div class="tr-show-art {{ $valid ? '' : 'is-off' }}">
        <div class="tr-cert-card" data-tilt aria-hidden="true">
          <span class="tr-cert-seal"><x-icon name="award" :size="34"/></span>
          <small>Certificate of {{ str_contains($credential->title, 'Completion') ? 'Completion' : 'Achievement' }}</small>
          <b>{{ $holder->name }}</b>
          <span>{{ $credential->title }}</span>
          <em>{{ $credential->issued_at->format('d M Y') }}</em>
        </div>
      </div>
      <div>
        <span class="eyebrow">Certificate</span>
        <h1>{{ $credential->title }}</h1>
        <div class="tr-bv-holder">
          <span class="avatar">@if($holder->avatarUrl())<img src="{{ $holder->avatarUrl() }}" alt="">@else{{ $holder->initials() }}@endif</span>
          <div><small>Awarded to</small><b>{{ $holder->name }}</b>@if($holder->headline)<span>{{ $holder->headline }}</span>@endif</div>
        </div>
        <div class="row tr-show-meta">
          <span class="tr-chip-dark"><x-icon name="building" :size="15"/> {{ config('infotics.badges.issuer_name') }}</span>
          <span class="tr-chip-dark"><x-icon name="calendar" :size="15"/> Issued {{ $credential->issued_at->format('d M Y') }}</span>
          @if($hours)<span class="tr-chip-dark"><x-icon name="clock" :size="15"/> {{ $hours }} hours</span>@endif
          @if($pct)<span class="tr-chip-dark"><x-icon name="target" :size="15"/> Score {{ $fmt($pct) }}%</span>@endif
        </div>
        <div class="hero-cta" style="margin-bottom:0">
          @if($canShare)
            <a class="btn btn-primary btn-lg" href="{{ $share['linkedin_profile'] }}" target="_blank" rel="noopener" data-share-popup><x-icon name="linkedin" :size="18"/> Add to LinkedIn profile</a>
            <a class="btn btn-ghost btn-lg" href="#share"><x-icon name="share" :size="18"/> Share</a>
          @else
            <a class="btn btn-primary btn-lg" href="{{ route('verify') }}"><x-icon name="shield" :size="18"/> Verify another credential</a>
          @endif
          @if($status !== 'revoked')<a class="btn btn-ghost btn-lg" href="{{ route('credentials.certificate.pdf', $credential->credential_id) }}" target="_blank" rel="noopener"><x-icon name="download" :size="18"/> Certificate PDF</a>@endif
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-sm">
  <div class="container">
    <div class="tr-cols">
      <div class="stack">
        <div class="card card-pad">
          <h2 class="tr-h2">What this certificate confirms</h2>
          <p class="tr-answer">{{ $holder->name }} was awarded “{{ $credential->title }}” by {{ config('infotics.badges.issuer_name') }}@if($course) after {{ $credential->type === 'completion' ? 'completing' : 'demonstrating skills in' }} <a href="{{ route('courses.show', $course->slug) }}">{{ $course->title }}</a>@endif.</p>
          <ul class="checks mb-0">
            @if($credential->type === 'completion' || $att)<li><x-icon name="check-circle" :size="18"/><span>Met the attendance requirement @if($att)({{ $fmt($att) }}% attendance)@endif.</span></li>@endif
            @if($pct)<li><x-icon name="check-circle" :size="18"/><span>Passed the proctored INFOTICS assessment with {{ $fmt($pct) }}%.</span></li>@endif
            <li><x-icon name="check-circle" :size="18"/><span>Record is held on the INFOTICS platform and checked live every time this page opens.</span></li>
            <li><x-icon name="check-circle" :size="18"/><span>Document fingerprint <code>{{ $credential->fingerprint() }}</code>: it must match the one printed on the certificate. Any edit to the name, course or date changes it.</span></li>
          </ul>
          <p class="small muted mt-2 mb-0">This is an INFOTICS training credential. It is not an official vendor certification unless it says so explicitly.</p>
        </div>

        @if($skills->isNotEmpty())
        <div class="card card-pad">
          <h2 class="tr-h2">Skills verified</h2>
          <div>@foreach($skills as $sk)<span class="skill-tag">{{ $sk->name }}</span>@endforeach</div>
        </div>
        @endif

        @if($badge && $issuance && $issuance->status === 'issued' && ($issuance->visibility ?? 'public') === 'public')
        <div class="card card-pad">
          <h2 class="tr-h2">Linked digital badge</h2>
          <div class="cert-mini" style="padding-left:0">
            <span class="seal"><x-icon name="badge-check" :size="26"/></span>
            <div class="grow"><b>{{ $badge->name }}</b><div class="small muted">{{ $badge->level }} level · Badge ID {{ $issuance->badge_id_code }}</div></div>
            <a class="btn btn-secondary btn-sm" href="{{ route('badges.verify', $issuance->badge_id_code) }}">View badge</a>
          </div>
        </div>
        @endif

        @if($canShare)
        <div class="card card-pad" id="share">
          <h2 class="tr-h2">{{ $isOwner ? 'Share your certificate' : 'Share this certificate' }}</h2>
          <p class="muted small">{{ $isOwner ? 'Add it to LinkedIn so recruiters can verify it in one click, or post it to your network.' : 'Anyone with the link can verify this certificate.' }}</p>
          <div class="share-row tr-bv-share" role="group" aria-label="Share this certificate">
            <a class="share-btn sh-linkedin" href="{{ $share['linkedin_profile'] }}" target="_blank" rel="noopener" data-share-popup><x-icon name="linkedin" :size="18"/> Add to LinkedIn profile</a>
            <a class="share-btn sh-linkedin" href="{{ $share['linkedin'] }}" target="_blank" rel="noopener" data-share-popup><x-icon name="linkedin" :size="18"/> LinkedIn post</a>
            <a class="share-btn sh-facebook" href="{{ $share['facebook'] }}" target="_blank" rel="noopener" data-share-popup><x-icon name="facebook" :size="18"/> Facebook</a>
            <a class="share-btn sh-x" href="{{ $share['x'] }}" target="_blank" rel="noopener" data-share-popup><x-icon name="x-twitter" :size="17"/> X</a>
            <a class="share-btn sh-whatsapp" href="{{ $share['whatsapp'] }}" target="_blank" rel="noopener" data-share-popup><x-icon name="whatsapp" :size="18"/> WhatsApp</a>
            <a class="share-btn sh-telegram" href="{{ $share['telegram'] }}" target="_blank" rel="noopener" data-share-popup><x-icon name="send" :size="18"/> Telegram</a>
            <a class="share-btn sh-email" href="{{ $share['email'] }}"><x-icon name="mail" :size="18"/> Email</a>
            <button class="share-btn sh-copy" type="button" data-copy="{{ $credential->verifyUrl() }}"><x-icon name="link" :size="18"/> Copy link</button>
            <button class="share-btn sh-copy" type="button" data-native-share data-title="{{ $credential->title }}" data-text="{{ $share['text'] }}" data-url="{{ $credential->verifyUrl() }}"><x-icon name="share" :size="18"/> Share&hellip;</button>
          </div>
        </div>
        @endif

        @if($isOwner)
        <div class="card card-pad" id="manage">
          <h2 class="tr-h2">Manage your certificate</h2>
          <form method="post" action="{{ route('credentials.visibility', $credential->credential_id) }}">@csrf
            <input type="hidden" name="public" value="{{ $credential->visibility === 'public' ? 0 : 1 }}">
            <p class="small muted">{{ $credential->visibility === 'public' ? 'Your certificate is public: anyone with the link can verify it.' : 'Your certificate is private: only you and INFOTICS admins can open it.' }}</p>
            <button class="btn btn-secondary" type="submit"><x-icon name="{{ $credential->visibility === 'public' ? 'lock' : 'eye' }}" :size="18"/> {{ $credential->visibility === 'public' ? 'Make private' : 'Make public' }}</button>
          </form>
        </div>
        @endif
      </div>

      <aside class="stack">
        <div class="verify-card tr-bv-record">
          <div class="tr-bv-record-head">
            <span class="tr-bv-seal"><x-icon name="shield" :size="26"/></span>
            <div><b>Verification record</b><span>Checked live against INFOTICS records &middot; {{ now()->format('d M Y, h:i A') }}</span></div>
          </div>
          <dl class="kv tr-bv-kv">
            <dt>Status</dt><dd><x-pill :status="$status"/></dd>
            <dt>Certificate ID</dt><dd><span class="mono tr-bv-code">{{ $credential->credential_id }}</span> <button class="tr-bv-copy" type="button" data-copy="{{ $credential->credential_id }}" aria-label="Copy certificate ID"><x-icon name="copy" :size="15"/></button></dd>
            <dt>Holder</dt><dd>{{ $holder->name }}</dd>
            <dt>Title</dt><dd>{{ $credential->title }}</dd>
            @if($course)<dt>Course</dt><dd>{{ $course->title }}</dd>@endif
            <dt>Issuer</dt><dd>{{ config('infotics.badges.issuer_name') }}</dd>
            <dt>Issued</dt><dd>{{ $credential->issued_at->format('d M Y') }}</dd>
            <dt>{{ $status === 'expired' ? 'Expired' : 'Expires' }}</dt><dd>{{ $credential->expires_at ? $credential->expires_at->format('d M Y') : 'Never' }}</dd>
          </dl>
          <div class="tr-bv-qr">
            <img src="{{ route('credentials.qr', $credential->credential_id) }}" alt="QR code that opens this certificate's verification page" width="120" height="120">
            <p class="small muted mb-0">Scan to open this verification page on any phone. The QR code always points to the live record.</p>
          </div>
        </div>
        <div class="card card-pad">
          <h3 class="tr-h3">How to check a certificate is genuine</h3>
          <ol class="tr-bv-how">
            <li>Make sure the address starts with <b>{{ parse_url(url('/'), PHP_URL_HOST) }}</b>.</li>
            <li>Compare the certificate ID above with the one printed on the PDF, or enter it on the <a href="{{ route('verify') }}">verification page</a>.</li>
            <li>Read the status banner. Revoked and expired certificates are flagged here straight away.</li>
          </ol>
        </div>
      </aside>
    </div>
  </div>
</section>
@endif
@endsection