@extends('pdf._base')
@section('title', 'Certificate '.$c->credential_id)
@php
  $completion = in_array(strtolower((string) $c->type), ['course completion', 'completion'], true);
  $name = $c->user->name;
  $len = mb_strlen($name);
  $nameSize = $len > 30 ? 34 : ($len > 22 ? 40 : 46);
  $course = preg_replace('/\s+—\s+(Certificate of Completion|Certificate)$/u', '', $c->title);
  $courseSize = mb_strlen($course) > 70 ? 17 : (mb_strlen($course) > 46 ? 20 : 24);
  $ev = (array) ($c->evidence ?? []);
  $hours = $ev['hours'] ?? $ev['duration_hours'] ?? $c->course?->total_hours;
  $pct = $ev['percent'] ?? $c->score;
  $att = $ev['attendance_percent'] ?? null;
  $fmt = fn ($v) => rtrim(rtrim(number_format((float) $v, 1), '0'), '.');
  $facts = array_filter([
    $c->course?->exam_code ? ['Aligned to', $c->course->exam_code] : null,
    $hours ? ['Training', $fmt($hours).' hours'] : null,
    $pct !== null ? ['Assessment', $fmt($pct).'%'] : null,
    $att !== null ? ['Attendance', $fmt($att).'%'] : null,
    $c->course?->level ? ['Level', $c->course->level] : null,
  ]);
  $skills = $c->skills->pluck('name')->take(6);
  $verifyHost = preg_replace('#^https?://#', '', $c->verifyUrl());
@endphp
@section('css')
<style>
@page { margin: 0; }
body { width: 1123px; height: 794px; }
.bg { position: absolute; left: 0; top: 0; width: 1123px; height: 794px; }
/* navy credential band (0 – 300px) */
.b-logo { position: absolute; left: 44px; top: 50px; }
.b-kick { position: absolute; left: 44px; top: 118px; width: 220px; font-family: 'Sora'; font-size: 8.5px; letter-spacing: 3.2px; color: #d9b65a; }
.b-type { position: absolute; left: 44px; top: 134px; width: 220px; font-family: 'Playfair'; font-weight: bold; font-size: 21px; line-height: 1.15; color: #ffffff; }
.b-badge { position: absolute; left: 44px; top: 206px; width: 212px; }
.b-badge-cap { font-size: 7.5px; letter-spacing: 1.6px; color: #9fb4d6; margin-top: 4px; }
.b-qr { position: absolute; left: 44px; top: 640px; width: 74px; height: 74px; background: #ffffff; padding: 5px; border-radius: 6px; }
.b-qr-text { position: absolute; left: 134px; top: 642px; width: 136px; font-size: 7.6px; line-height: 1.55; color: #b9c8e2; }
.b-qr-text b { color: #ffffff; font-size: 8.4px; letter-spacing: .3px; }
/* paper (300 – 1123px) */
.meta { position: absolute; right: 64px; top: 50px; text-align: right; font-size: 8.2px; line-height: 1.6; color: #6b7b90; letter-spacing: .3px; }
.meta b { color: #0b1b33; font-size: 9px; }
.kicker { position: absolute; left: 370px; top: 104px; font-family: 'Sora'; font-size: 10px; letter-spacing: 6px; color: #9c7020; }
.certify { position: absolute; left: 370px; top: 150px; font-family: 'Playfair'; font-style: italic; font-size: 15px; color: #5b6b80; }
.name { position: absolute; left: 368px; right: 64px; top: 172px; font-family: 'Playfair'; font-weight: bold; font-size: {{ $nameSize }}px; line-height: 1.12; color: #0b1b33; letter-spacing: .3px; }
.name-rule { position: absolute; left: 370px; top: 246px; width: 360px; height: 2px; background: #c9a046; }
.name-rule2 { position: absolute; left: 734px; top: 246px; width: 60px; height: 2px; background: #1287f7; }
.stmt { position: absolute; left: 370px; right: 80px; top: 266px; font-size: 12.5px; line-height: 1.6; color: #3b4b60; }
.course { position: absolute; left: 370px; right: 70px; top: 292px; font-family: 'Sora'; font-weight: bold; font-size: {{ $courseSize }}px; line-height: 1.22; color: #0a3fb8; }
.facts { position: absolute; left: 370px; right: 64px; top: 372px; }
.fact { display: inline-block; margin: 0 8px 8px 0; padding: 7px 12px 6px; border: 1px solid #dfe7f1; border-radius: 8px; background: #ffffff; }
.fact span { display: block; font-size: 6.8px; letter-spacing: 1.4px; color: #7a8ba0; text-transform: uppercase; }
.fact b { display: block; font-family: 'Sora'; font-size: 11.5px; color: #0b1b33; margin-top: 1px; }
.skills { position: absolute; left: 370px; right: 64px; top: 446px; font-size: 9px; color: #5b6b80; }
.skills .lbl { display: block; font-size: 6.8px; letter-spacing: 1.4px; color: #7a8ba0; margin-bottom: 5px; }
.chip { display: inline-block; margin: 0 5px 5px 0; padding: 3px 9px; border-radius: 20px; background: #eef4ff; color: #0a3fb8; font-weight: 600; font-size: 8.6px; }
.sig { position: absolute; top: 578px; width: 230px; }
.sig .script { font-family: 'Script'; font-size: 30px; color: #0b1b33; height: 40px; line-height: 40px; }
.sig .line { border-top: 1px solid #b48729; padding-top: 6px; font-size: 10px; color: #0b1b33; font-weight: bold; }
.sig .role { font-size: 8.5px; color: #6b7b90; margin-top: 1px; }
.foot { position: absolute; left: 370px; right: 64px; top: 712px; font-size: 7.4px; color: #7a8ba0; letter-spacing: .25px; line-height: 1.5; }
.foot b { color: #33445a; }
.void { position: absolute; left: 420px; top: 300px; font-family: 'Sora'; font-weight: bold; font-size: 110px; color: #e11d48; opacity: .12; }
</style>
@endsection
@section('body')
<img class="bg" src="{{ $bg }}" alt="">

{{-- band --}}
<div class="b-logo"><img src="{{ brand_logo_data_uri(true) }}" style="height:40px" alt="INFOTICS Academy"></div>
<div class="b-kick">{{ $completion ? 'PROFESSIONAL TRAINING' : 'VERIFIED ACHIEVEMENT' }}</div>
<div class="b-type">{{ $completion ? 'Certificate of Completion' : 'Certificate of Achievement' }}</div>
@if($badgePng)
  <div class="b-badge"><img src="{{ $badgePng }}" width="112" height="112" alt=""><div class="b-badge-cap">DIGITAL BADGE · OPEN BADGES 2.0</div></div>
@endif
<div class="b-qr"><img src="{{ $qr }}" width="74" height="74" alt=""></div>
<div class="b-qr-text">Scan to verify live<br><b>{{ $c->credential_id }}</b><br>Fingerprint<br><b>{{ $c->fingerprint() }}</b></div>

{{-- paper --}}
<div class="meta">Credential ID <b>{{ $c->credential_id }}</b><br>Issued <b>{{ $c->issued_at->format('d F Y') }}</b>@if($c->expires_at)<br>Valid until <b>{{ $c->expires_at->format('d F Y') }}</b>@endif</div>
<div class="kicker">INFOTICS ACADEMY · KARACHI · ONLINE</div>
<div class="certify">This is to certify that</div>
<div class="name">{{ $name }}</div>
<div class="name-rule"></div><div class="name-rule2"></div>
<div class="stmt">has {{ $completion ? 'successfully completed the instructor-led professional training program' : 'passed the proctored certification assessment for' }}</div>
<div class="course" style="top:{{ 292 }}px">{{ $course }}</div>

@if($facts)
<div class="facts">@foreach($facts as [$k, $v])<div class="fact"><span>{{ $k }}</span><b>{{ $v }}</b></div>@endforeach</div>
@endif
@if($skills->isNotEmpty())
<div class="skills"><span class="lbl">SKILLS VERIFIED</span>@foreach($skills as $s)<span class="chip">{{ $s }}</span>@endforeach</div>
@endif

<div class="sig" style="left:370px"><div class="script">{{ $signatures['left']['script'] }}</div><div class="line">{{ $signatures['left']['name'] }}</div><div class="role">{{ $signatures['left']['role'] }}</div></div>
<div class="sig" style="left:660px"><div class="script">{{ $signatures['right']['script'] }}</div><div class="line">{{ $signatures['right']['name'] }}</div><div class="role">{{ $signatures['right']['role'] }}</div></div>

<div class="foot">Verify this credential at <b>{{ $verifyHost }}</b>. The fingerprint above must match the verification page; any edit to the name, course or date breaks it.
  This certificate is issued by INFOTICS Academy and is not an official vendor certification unless stated.</div>
@if($c->revoked_at)<div class="void">REVOKED</div>@endif
@endsection