@extends('layouts.portal')

@php
    $u = auth()->user();
    $pub = route('portfolio.show', $p->slug);
    $creds = $p->user->credentials->where('revoked_at', null);
    $badges = $p->user->badges->where('status', 'issued');
    $typeIcon = ['project' => 'git-branch', 'certification' => 'award', 'link' => 'link'];
    $showing = $creds->where('visibility', 'public')->count() + $badges->where('visibility', 'public')->count();
@endphp

@section('title', 'My portfolio')
@section('subtitle', 'A public, recruiter-friendly page with your verified credentials and the work you choose to show.')
@section('actions')
  <a class="btn btn-secondary btn-sm" href="{{ $pub }}" target="_blank" rel="noopener"><x-icon name="eye" :size="15"/> Preview page</a>
  @if($p->is_public)<button type="button" class="btn btn-primary btn-sm" data-copy="{{ $pub }}"><x-icon name="copy" :size="15"/> Copy public link</button>@endif
@endsection

@section('content')
<div class="callout {{ $p->is_public ? 'success' : 'warn' }} mb-3">
  <x-icon name="{{ $p->is_public ? 'globe' : 'lock' }}" :size="20"/>
  <div>@if($p->is_public)<b>Your portfolio is public.</b> Anyone with the link can see it and search engines may index it: <a href="{{ $pub }}" target="_blank" rel="noopener">{{ preg_replace('~^https?://~', '', $pub) }}</a>.
    @else<b>Your portfolio is private.</b> Only you can preview it. Switch it to public below when you are ready to share the link with employers.@endif</div>
</div>

<div class="pf-layout">
  <div class="pf-main">
    <form method="post" action="{{ route('portfolio.update') }}" class="panel" aria-labelledby="pf-prof-h">
      @csrf @method('PUT')
      <div class="panel-head"><h2 id="pf-prof-h">Profile</h2></div>
      <div class="panel-body">
        <div class="form-grid">
          <x-field name="headline" label="Headline" :value="old('headline', $p->headline)" placeholder="e.g. Azure administrator in training" help="One line employers see first (max 120 characters)." />
          <x-field name="location" label="Location" :value="old('location', $p->location)" placeholder="Karachi, Pakistan" />
          <x-field name="bio" label="About you" type="textarea" :rows="5" :value="old('bio', $p->bio)" full help="Two or three sentences: what you are learning, the roles you want, and what you have built." />
        </div>
        <label class="pf-switch">
          <span class="switch"><input type="checkbox" name="is_public" value="1" @checked(old('is_public', $p->is_public))><span></span></span>
          <span><b>Make my portfolio public</b><br><span class="small muted">Shows your name, headline, bio, public credentials and badges, and the items below.</span></span>
        </label>
        <button type="submit" class="btn btn-primary mt-2">Save portfolio</button>
      </div>
    </form>

    <section class="panel" aria-labelledby="pf-items-h">
      <div class="panel-head"><h2 id="pf-items-h">Projects &amp; links</h2><span class="small muted">{{ $p->items->count() }} of 24</span></div>
      @forelse($p->items as $it)
        <div class="list-row pf-item">
          <span class="res-ico"><x-icon :name="$typeIcon[$it->type] ?? 'link'" :size="20"/></span>
          <div class="grow"><b>{{ $it->title }}</b> <span class="pill pill-gray">{{ ucfirst($it->type) }}</span>
            @if($it->description)<div class="small muted">{{ $it->description }}</div>@endif
            @if($it->url)<a class="small" href="{{ $it->url }}" target="_blank" rel="noopener noreferrer nofollow">{{ \Illuminate\Support\Str::limit(preg_replace('~^https?://~', '', $it->url), 60) }}</a>@endif</div>
          <form method="post" action="{{ route('portfolio.items.destroy', $it) }}" data-confirm="Remove “{{ $it->title }}” from your portfolio?">@csrf @method('DELETE')<button class="btn btn-danger btn-sm" type="submit" aria-label="Remove {{ $it->title }}"><x-icon name="trash" :size="15"/></button></form>
        </div>
      @empty
        <div class="panel-body small muted">Nothing here yet. Add a lab write-up, a GitHub repository or a certification you earned elsewhere.</div>
      @endforelse
      <form method="post" action="{{ route('portfolio.items.store') }}" class="panel-body pf-add" aria-labelledby="pf-add-h">
        @csrf
        <h3 id="pf-add-h" class="pj-sub">Add an item</h3>
        <div class="form-grid">
          <x-field name="type" label="Type" type="select" :options="['project' => 'Project', 'certification' => 'Certification', 'link' => 'Link']" :value="old('type', 'project')" required />
          <x-field name="title" label="Title" :value="old('title')" required placeholder="e.g. Hub-and-spoke network on Azure" />
          <x-field name="description" label="Short description" type="textarea" :rows="3" :value="old('description')" full />
          <x-field name="url" label="Link (optional)" type="url" :value="old('url')" full placeholder="https://github.com/…" />
        </div>
        <button type="submit" class="btn btn-secondary">Add to portfolio</button>
      </form>
    </section>
  </div>

  <aside class="pf-side">
    <section class="panel" aria-labelledby="pf-cred-h">
      <div class="panel-head"><h2 id="pf-cred-h">Listed automatically</h2><span class="pill pill-blue">{{ $showing }} public</span></div>
      <div class="panel-body">
        <p class="small muted">Credentials and badges from your record appear on your page when their visibility is <b>public</b>. Change it any time on <a href="{{ route('student.credentials') }}">Certificates &amp; badges</a>.</p>
        @forelse($creds as $c)
          <div class="pf-cred"><span class="res-ico"><x-icon name="award" :size="18"/></span><div class="grow"><b class="small">{{ $c->title }}</b><div class="xs muted">Issued {{ $c->issued_at?->format('d M Y') }}</div></div><span class="pill {{ $c->visibility === 'public' ? 'pill-green' : 'pill-gray' }}">{{ $c->visibility === 'public' ? 'Public' : 'Hidden' }}</span></div>
        @empty
          <p class="small muted mb-0">No certificates yet. Pass a certification exam to earn your first one.</p>
        @endforelse
        @foreach($badges as $b)
          <div class="pf-cred"><img src="{{ $b->badge->imageUrl() }}" alt="" width="36" height="36"><div class="grow"><b class="small">{{ $b->badge->name }}</b><div class="xs muted">Badge · {{ $b->issued_at?->format('d M Y') }}</div></div><span class="pill {{ $b->visibility === 'public' ? 'pill-green' : 'pill-gray' }}">{{ $b->visibility === 'public' ? 'Public' : 'Hidden' }}</span></div>
        @endforeach
      </div>
    </section>
    <section class="panel">
      <div class="panel-head"><h2>Contact links</h2></div>
      <div class="panel-body small">
        <p class="muted">Your LinkedIn and GitHub links come from your profile.</p>
        <dl class="kv pf-kv"><dt>LinkedIn</dt><dd>{{ $u->linkedin_url ?: 'Not added' }}</dd><dt>GitHub</dt><dd>{{ $u->github_url ?: 'Not added' }}</dd></dl>
        <a class="btn btn-secondary btn-sm mt-2" href="{{ route('account.edit') }}">Edit profile</a>
      </div>
    </section>
  </aside>
</div>
@endsection