@extends('layouts.portal')

@php
    $u = auth()->user();
    $md = fn (?string $t) => \Illuminate\Support\Str::markdown(preg_replace('/^\s*[•▪]\s*/mu', '- ', (string) $t), ['html_input' => 'strip', 'allow_unsafe_links' => false]);
    $level = ['L1' => 'Foundation', 'L2' => 'Associate', 'L3' => 'Professional', 'L4' => 'Expert'][$project->difficulty] ?? $project->difficulty;
    $isStudent = $u->isStudent();
    $reviewed = $submission && $submission->score !== null;
    $labs = $project->course?->labs()->where('published', true)->get() ?? collect();
@endphp

@section('title', $project->title)
@section('subtitle', ($project->course?->title ?? 'Capstone').' · Level '.$project->difficulty.' ('.$level.') · scored out of '.$project->max_score)
@section('actions')
  <a class="btn btn-secondary btn-sm" href="{{ route('labs.index') }}"><x-icon name="arrow-left" :size="15"/> Labs &amp; projects</a>
  @if($project->course)<a class="btn btn-secondary btn-sm" href="{{ route('lms.course', $project->course->slug) }}"><x-icon name="book-open" :size="15"/> Course home</a>@endif
@endsection

@section('content')
<div class="lb-layout">
  <div class="lb-main">
    <section class="card card-pad" aria-labelledby="pj-brief-h">
      <h2 id="pj-brief-h" class="lb-h">Project brief</h2>
      <div class="lm-prose">{!! $md($project->brief) !!}</div>
    </section>

    <section class="card card-pad" aria-labelledby="pj-req-h">
      <h2 id="pj-req-h" class="lb-h">Requirements</h2>
      <div class="lm-prose pj-req">{!! $md($project->requirements) !!}</div>
      @if($project->skills->isNotEmpty())
        <h3 class="pj-sub">Skills you will demonstrate</h3>
        <div>@foreach($project->skills as $sk)<span class="skill-tag">{{ $sk->name }}</span>@endforeach</div>
      @endif
    </section>

    <section class="card card-pad" aria-labelledby="pj-how-h">
      <h2 id="pj-how-h" class="lb-h">How it is reviewed</h2>
      <ol class="pj-flow">
        <li><b>Submit</b><span>Share a link to your repository or write-up and explain what you built.</span></li>
        <li><b>Trainer review</b><span>Your trainer checks your work against the requirements above.</span></li>
        <li><b>Score</b><span>You receive a score out of {{ $project->max_score }}, shown on this page.</span></li>
      </ol>
    </section>
  </div>

  <aside class="lb-side" aria-label="Your submission">
    <section class="card card-pad">
      <div class="row between"><h2 class="lb-h mb-0">Your submission</h2>@if($submission)<x-pill :status="$submission->status"/>@endif</div>
      @if($submission)
        @if($reviewed)
          <div class="pj-score"><b>{{ rtrim(rtrim(number_format((float) $submission->score, 1), '0'), '.') }}</b><span>/ {{ $project->max_score }}</span></div>
          <div class="progress {{ $submission->score / max(1, $project->max_score) >= .7 ? 'green' : 'amber' }} mb-1"><i style="width:{{ min(100, $submission->score / max(1, $project->max_score) * 100) }}%"></i></div>
        @else
          <p class="small muted mt-1">Submitted {{ $submission->submitted_at && $submission->submitted_at->diffInMinutes() < 1 ? 'just now' : $submission->submitted_at?->diffForHumans() }}. Your trainer has not scored it yet.</p>
        @endif
        <dl class="kv pj-kv">
          <dt>Submitted</dt><dd>{{ $submission->submitted_at?->format('d M Y, g:i A') }}</dd>
          @if($submission->repo_url)<dt>Repository</dt><dd><a href="{{ $submission->repo_url }}" target="_blank" rel="noopener noreferrer">{{ \Illuminate\Support\Str::limit(preg_replace('~^https?://~', '', $submission->repo_url), 40) }}</a></dd>@endif
        </dl>
        <p class="small mt-1 pj-notes">{{ \Illuminate\Support\Str::limit($submission->notes, 400) }}</p>
      @endif

      @if($isStudent)
        <form method="post" action="{{ route('projects.submit', $project) }}" class="pj-form" novalidate>
          @csrf
          <h3 class="pj-sub">{{ $submission ? 'Update your submission' : 'Submit your project' }}</h3>
          <div class="field">
            <label class="label" for="pj-repo">Repository or document link</label>
            <input id="pj-repo" type="url" name="repo_url" class="input @error('repo_url') is-invalid @enderror" value="{{ old('repo_url', $submission?->repo_url) }}" placeholder="https://github.com/you/project" autocomplete="url">
            @error('repo_url')<div class="field-error">{{ $message }}</div>@enderror
            <div class="help">GitHub, GitLab, OneDrive or Google Drive. Make sure your trainer can open it.</div>
          </div>
          <div class="field">
            <label class="label" for="pj-notes">What did you build? <span class="req">*</span></label>
            <textarea id="pj-notes" name="notes" class="textarea @error('notes') is-invalid @enderror" rows="6" required minlength="10" maxlength="5000" placeholder="Summarise your design, how you met each requirement, and anything the reviewer should know.">{{ old('notes', $submission?->notes) }}</textarea>
            @error('notes')<div class="field-error">{{ $message }}</div>@enderror
          </div>
          <button type="submit" class="btn btn-primary w-full"><x-icon name="send" :size="16"/> {{ $submission ? 'Resubmit for review' : 'Submit for review' }}</button>
          @if($submission)<p class="xs muted mt-1 mb-0">Resubmitting sends your project back to the trainer for review.</p>@endif
        </form>
      @else
        <div class="callout mt-2"><x-icon name="info" :size="18"/><div>Submissions are made by enrolled learners. You are viewing the brief as {{ $u->isAdmin() ? 'an administrator' : 'a trainer' }}.</div></div>
      @endif
    </section>

    @if($labs->isNotEmpty())
    <section class="panel">
      <div class="panel-head"><h2>Practise first</h2></div>
      <div class="panel-body lb-related">
        @foreach($labs as $l)<a class="res-card" href="{{ route('labs.show', $l->slug) }}"><span class="res-ico"><x-icon name="flask" :size="20"/></span><div><b class="small">{{ $l->title }}</b><div class="xs muted">Guided lab · {{ $l->duration_minutes }} min</div></div></a>@endforeach
      </div>
    </section>
    @endif
  </aside>
</div>
@endsection