@extends('layouts.app')

@section('title', $certificate->course_title . ' — Certificate')

@push('head')
<meta name="robots" content="noindex,nofollow">
@endpush

@section('content')

<div class="mx-auto max-w-2xl px-5 py-12">

    <a href="{{ route('dashboard', ['tab' => 'certificates']) }}" class="text-[13px] font-medium text-teal-800 hover:underline dark:text-teal-400">
        &larr; My certificates
    </a>

    <div class="mt-4 rounded-lg border-2 border-teal-700 bg-white p-8 text-center dark:border-teal-600 dark:bg-slate-800">
        <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Certificate of Completion</p>

        <p class="mt-6 text-[13px] text-slate-500">This is to certify that</p>
        <p class="mt-1 font-serif text-3xl font-medium tracking-tight">{{ $certificate->issued_to_name }}</p>
        <div class="mx-auto mt-3 h-px w-48 bg-amber-600/60"></div>

        <p class="mt-6 text-[13px] text-slate-500">has successfully completed</p>
        <p class="mt-1 text-xl font-bold">{{ $certificate->course_title }}</p>

        <p class="mt-6 text-[13px] text-slate-500">Awarded by</p>
        <p class="mt-1 text-[15px] font-semibold text-amber-800 dark:text-amber-400">{{ $certificate->awarding_body }}</p>

        <dl class="mt-8 flex flex-wrap justify-center gap-x-10 gap-y-3 border-t border-slate-200 pt-5 text-[12px] dark:border-slate-700">
            <div>
                <dt class="text-slate-500">Completed</dt>
                <dd class="font-semibold tabular-nums">{{ $certificate->completion_date->format('j F Y') }}</dd>
            </div>
            @if ($certificate->course_hours)
                <div>
                    <dt class="text-slate-500">Length</dt>
                    <dd class="font-semibold tabular-nums">{{ $certificate->course_hours }} hours</dd>
                </div>
            @endif
            <div>
                <dt class="text-slate-500">Code</dt>
                <dd class="font-mono font-semibold tracking-wider">{{ $certificate->verification_code }}</dd>
            </div>
        </dl>
    </div>

    <div class="mt-6 flex flex-wrap gap-3">
        <a href="{{ route('certificates.download', $certificate) }}"
           class="rounded-md bg-teal-800 px-5 py-2.5 text-[14px] font-semibold text-white hover:bg-teal-900">
            {{ $certificate->isPdfReady() ? 'Download PDF' : 'Preparing PDF…' }}
        </a>

        <a href="{{ $certificate->verificationUrl() }}"
           class="rounded-md border border-slate-300 px-5 py-2.5 text-[14px] font-medium hover:bg-slate-50 dark:border-slate-600 dark:hover:bg-slate-700">
            Public verification page
        </a>

        {{-- LinkedIn's "add to profile" deep link. Everything it needs is in
             the snapshot columns, so the link never goes stale. --}}
        <a href="https://www.linkedin.com/profile/add?{{ http_build_query([
                'startTask'          => 'CERTIFICATION_NAME',
                'name'               => $certificate->course_title,
                'organizationName'   => $certificate->awarding_body,
                'issueYear'          => $certificate->completion_date->year,
                'issueMonth'         => $certificate->completion_date->month,
                'certUrl'            => $certificate->verificationUrl(),
                'certId'             => $certificate->verification_code,
           ]) }}"
           target="_blank" rel="noopener noreferrer"
           class="rounded-md border border-slate-300 px-5 py-2.5 text-[14px] font-medium hover:bg-slate-50 dark:border-slate-600 dark:hover:bg-slate-700">
            Add to LinkedIn
        </a>
    </div>

    @unless ($certificate->isPdfReady())
        <p class="mt-4 rounded-md border border-amber-300 bg-amber-50 px-4 py-2.5 text-[13px] text-amber-900 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200">
            The PDF is being generated and usually lands within a minute. Your certificate
            is already verifiable at the link above.
        </p>
    @endunless
</div>

@endsection