@extends('layouts.app')

@php
    $user = $portfolio->user;
    $creds = $user->credentials->sortByDesc('issued_at');
    $badges = $user->badges->sortByDesc('issued_at');
    $skills = $creds->flatMap->skills->pluck('name')->unique()->sort()->values();
    $items = $portfolio->items->where('status', 'published');
    $owner = auth()->check() && auth()->id() === $portfolio->user_id;
    $typeIcon = ['project' => 'git-branch', 'certification' => 'award', 'link' => 'link'];
    $summary = $user->name.' is a learner at INFOTICS Academy'.($portfolio->headline ? ' ('.rtrim($portfolio->headline, '.').')' : '').($portfolio->location ? ' based in '.$portfolio->location : '').'. '
        .($creds->count() + $badges->count() > 0 ? 'This page lists '.$creds->count().' verified '.\Illuminate\Support\Str::plural('credential', $creds->count()).' and '.$badges->count().' digital '.\Illuminate\Support\Str::plural('badge', $badges->count()).', each with a public verification link.' : 'Verified credentials will appear here as they are earned.');
@endphp

@section('content')
<section class="section-dark pf-hero">
  <div class="container">
    @if(! $portfolio->is_public)
      <div class="callout warn pf-preview"><x-icon name="lock" :size="18"/><div><b>Private preview.</b> Only you {{ $owner ? '' : '(as an administrator) ' }}can see this page. It is not indexed by search engines.@if($owner) <a href="{{ route('portfolio.mine') }}">Edit or publish it</a>.@endif</div></div>
    @endif
    <div class="pf-head">
      <span class="avatar avatar-lg pf-avatar">@if($user->avatarUrl())<img src="{{ $user->avatarUrl() }}" alt="{{ $user->name }}">@else{{ $user->initials() }}@endif</span>
      <div class="grow">
        <h1 class="pf-name">{{ $user->name }}</h1>
        @if($portfolio->headline)<p class="pf-headline">{{ $portfolio->headline }}</p>@endif
        <div class="pf-chips">
          @if($portfolio->location)<span class="pf-chip"><x-icon name="map-pin" :size="14"/> {{ $portfolio->location }}</span>@endif
          @if($user->open_to_work)<span class="pf-chip pf-open"><x-icon name="briefcase" :size="14"/> Open to work</span>@endif
          <span class="pf-chip"><x-icon name="badge-check" :size="14"/> {{ $creds->count() }} verified {{ \Illuminate\Support\Str::plural('credential', $creds->count()) }}</span>
        </div>
        @if($user->linkedin_url || $user->github_url)
          <div class="pf-links">
            @if($user->linkedin_url)<a class="btn btn-ghost btn-sm" href="{{ $user->linkedin_url }}" target="_blank" rel="noopener noreferrer nofollow"><x-icon name="linkedin" :size="15"/> LinkedIn</a>@endif
            @if($user->github_url)<a class="btn btn-ghost btn-sm" href="{{ $user->github_url }}" target="_blank" rel="noopener noreferrer nofollow"><x-icon name="git-branch" :size="15"/> GitHub</a>@endif
          </div>
        @endif
      </div>
    </div>
  </div>
</section>

<div class="container pf-page">
  <p class="pf-summary">{{ $summary }}</p>

  @if($portfolio->bio)
  <section class="pf-sec" aria-labelledby="pf-about-h"><h2 id="pf-about-h">About</h2><p class="pf-bio">{{ $portfolio->bio }}</p></section>
  @endif

  @if($skills->isNotEmpty())
  <section class="pf-sec" aria-labelledby="pf-skills-h"><h2 id="pf-skills-h">Verified skills</h2><div>@foreach($skills as $s)<span class="skill-tag">{{ $s }}</span>@endforeach</div></section>
  @endif

  <section class="pf-sec" aria-labelledby="pf-cred-h">
    <h2 id="pf-cred-h">Verified credentials</h2>
    @forelse($creds as $c)
      @php $b = $c->badge?->badge; @endphp
      <article class="card pf-cred-card">
        @if($b)<img src="{{ $b->imageUrl() }}" alt="{{ $b->name }} badge" width="84" height="84" loading="lazy">@else<span class="cert-mini"><span class="seal"><x-icon name="award" :size="28"/></span></span>@endif
        <div class="grow">
          <h3>{{ $c->title }}</h3>
          <p class="small muted mb-1">{{ $c->type }} · Issued {{ $c->issued_at?->format('d M Y') }}@if($c->expires_at) · Valid until {{ $c->expires_at->format('d M Y') }}@endif · ID <span class="mono">{{ $c->credential_id }}</span></p>
          @if($c->skills->isNotEmpty())<div>@foreach($c->skills->take(5) as $s)<span class="skill-tag">{{ $s->name }}</span>@endforeach</div>@endif
        </div>
        <div class="pf-cred-act">
          <x-pill :status="$c->effectiveStatus()"/>
          <a class="btn btn-secondary btn-sm" href="{{ route('credentials.verify', $c->credential_id) }}" rel="noopener"><x-icon name="shield" :size="14"/> Verify</a>
        </div>
      </article>
    @empty
      <p class="muted">No public credentials yet.</p>
    @endforelse
  </section>

  @if($badges->isNotEmpty())
  <section class="pf-sec" aria-labelledby="pf-badge-h">
    <h2 id="pf-badge-h">Digital badges</h2>
    <div class="pf-badges">
      @foreach($badges as $bi)
        <a class="card badge-tile pf-badge" href="{{ route('badges.verify', $bi->badge_id_code) }}">
          <img class="badge-art" src="{{ $bi->badge->imageUrl() }}" alt="{{ $bi->badge->name }} badge" width="120" height="120" loading="lazy">
          <b>{{ $bi->badge->name }}</b><span class="xs muted">{{ $bi->badge->level }} · {{ $bi->issued_at?->format('M Y') }}</span><span class="xs pf-verify">Verify badge</span>
        </a>
      @endforeach
    </div>
  </section>
  @endif

  @if($items->isNotEmpty())
  <section class="pf-sec" aria-labelledby="pf-work-h">
    <h2 id="pf-work-h">Projects &amp; work</h2>
    <div class="pf-work">
      @foreach($items as $it)
        <article class="card card-pad">
          <div class="row"><span class="res-ico"><x-icon :name="$typeIcon[$it->type] ?? 'link'" :size="20"/></span><h3 class="mb-0">{{ $it->title }}</h3></div>
          @if($it->description)<p class="mt-1 mb-1">{{ $it->description }}</p>@endif
          @if($it->url)<a href="{{ $it->url }}" target="_blank" rel="noopener noreferrer nofollow ugc">View {{ $it->type === 'link' ? 'link' : 'work' }} <x-icon name="external-link" :size="13"/></a>@endif
        </article>
      @endforeach
    </div>
  </section>
  @endif

  <section class="cta-band pf-cta">
    <div>
      <h2>Hiring for an IT role?</h2>
      <p>Credentials on this page are issued by INFOTICS Academy and can be checked with the Verify links. Employers can also request verified candidates through INFOTICS Careers.</p>
    </div>
    <div class="row"><a class="btn btn-light" href="{{ route('careers.index') }}">INFOTICS Careers</a><a class="btn btn-ghost" href="{{ route('verify') }}">Verify a certificate</a></div>
  </section>
  <p class="xs muted pf-updated">Portfolio last updated {{ $portfolio->updated_at?->format('d M Y') }}.</p>
</div>
@endsection