619 lines
21 KiB
PHP
619 lines
21 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<title>Go / No Go Assessment Report</title>
|
|
<style>
|
|
/* ─── Reset & Base ─────────────────────────────────────────── */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 10pt;
|
|
background-color: #2b303a;
|
|
color: #ffffff;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ─── Page Layout ───────────────────────────────────────────── */
|
|
@page {
|
|
size: A4;
|
|
margin: 0;
|
|
}
|
|
|
|
.page-wrapper {
|
|
width: 210mm;
|
|
min-height: 297mm;
|
|
background-color: #2b303a;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ─── Header ────────────────────────────────────────────────── */
|
|
.header {
|
|
background-color: #1e222b;
|
|
padding: 32pt 36pt 28pt 36pt;
|
|
border-bottom: 3pt solid #d1ec51;
|
|
}
|
|
|
|
.header-eyebrow {
|
|
font-size: 7pt;
|
|
font-weight: bold;
|
|
letter-spacing: 3pt;
|
|
text-transform: uppercase;
|
|
color: #d1ec51;
|
|
margin-bottom: 6pt;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 26pt;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
letter-spacing: -0.5pt;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.header-title-accent {
|
|
color: #d1ec51;
|
|
}
|
|
|
|
.header-subtitle {
|
|
font-size: 11pt;
|
|
color: #9ca3af;
|
|
margin-top: 6pt;
|
|
letter-spacing: 0.5pt;
|
|
}
|
|
|
|
.header-category {
|
|
color: #00b7b3;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ─── Content Area ──────────────────────────────────────────── */
|
|
.content {
|
|
padding: 28pt 36pt 36pt 36pt;
|
|
}
|
|
|
|
/* ─── Meta Block (User Info + Date + Result) ────────────────── */
|
|
.meta-block {
|
|
margin-bottom: 24pt;
|
|
}
|
|
|
|
/* Two-column table for user info + result */
|
|
.meta-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.meta-table td {
|
|
vertical-align: top;
|
|
padding: 0;
|
|
}
|
|
|
|
.meta-left {
|
|
width: 58%;
|
|
}
|
|
|
|
.meta-right {
|
|
width: 42%;
|
|
}
|
|
|
|
/* ─── User Info Card ────────────────────────────────────────── */
|
|
.card {
|
|
background-color: #1e222b;
|
|
border: 1pt solid #3a404d;
|
|
border-radius: 6pt;
|
|
padding: 16pt 18pt;
|
|
margin-right: 12pt;
|
|
}
|
|
|
|
.card-label {
|
|
font-size: 6.5pt;
|
|
font-weight: bold;
|
|
letter-spacing: 2.5pt;
|
|
text-transform: uppercase;
|
|
color: #d1ec51;
|
|
margin-bottom: 12pt;
|
|
padding-bottom: 8pt;
|
|
border-bottom: 1pt solid #3a404d;
|
|
}
|
|
|
|
.info-row {
|
|
margin-bottom: 8pt;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.info-key {
|
|
font-size: 7pt;
|
|
color: #9ca3af;
|
|
letter-spacing: 1pt;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1pt;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 9.5pt;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.info-value-secondary {
|
|
font-size: 9pt;
|
|
color: #d1d5db;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* ─── Date Block ────────────────────────────────────────────── */
|
|
.date-block {
|
|
background-color: #1e222b;
|
|
border: 1pt solid #3a404d;
|
|
border-radius: 6pt;
|
|
padding: 12pt 18pt;
|
|
margin-bottom: 12pt;
|
|
}
|
|
|
|
.date-label {
|
|
font-size: 6.5pt;
|
|
font-weight: bold;
|
|
letter-spacing: 2.5pt;
|
|
text-transform: uppercase;
|
|
color: #9ca3af;
|
|
margin-bottom: 3pt;
|
|
}
|
|
|
|
.date-value {
|
|
font-size: 11pt;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* ─── Result Badge ──────────────────────────────────────────── */
|
|
.result-badge {
|
|
border-radius: 6pt;
|
|
padding: 16pt 18pt;
|
|
text-align: center;
|
|
}
|
|
|
|
.result-badge-go {
|
|
background-color: #14532d;
|
|
border: 2pt solid #22c55e;
|
|
}
|
|
|
|
.result-badge-consult {
|
|
background-color: #451a03;
|
|
border: 2pt solid #f59e0b;
|
|
}
|
|
|
|
.result-badge-no-go {
|
|
background-color: #450a0a;
|
|
border: 2pt solid #ef4444;
|
|
}
|
|
|
|
.result-label {
|
|
font-size: 6.5pt;
|
|
font-weight: bold;
|
|
letter-spacing: 2.5pt;
|
|
text-transform: uppercase;
|
|
margin-bottom: 6pt;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.result-text {
|
|
font-size: 18pt;
|
|
font-weight: bold;
|
|
letter-spacing: 1pt;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.result-text-go {
|
|
color: #4ade80;
|
|
}
|
|
|
|
.result-text-consult {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.result-text-no-go {
|
|
color: #f87171;
|
|
}
|
|
|
|
.result-score {
|
|
margin-top: 8pt;
|
|
font-size: 8.5pt;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.result-score-value {
|
|
font-weight: bold;
|
|
color: #d1ec51;
|
|
}
|
|
|
|
/* ─── Section Divider ───────────────────────────────────────── */
|
|
.section-divider {
|
|
margin: 20pt 0 16pt 0;
|
|
border: none;
|
|
border-top: 1pt solid #3a404d;
|
|
}
|
|
|
|
/* ─── Question Group ────────────────────────────────────────── */
|
|
.group-header {
|
|
margin-bottom: 12pt;
|
|
}
|
|
|
|
.group-number {
|
|
display: inline;
|
|
font-size: 7pt;
|
|
font-weight: bold;
|
|
letter-spacing: 2pt;
|
|
text-transform: uppercase;
|
|
color: #00b7b3;
|
|
}
|
|
|
|
.group-name {
|
|
font-size: 13pt;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
margin-top: 3pt;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.group-description {
|
|
font-size: 8.5pt;
|
|
color: #9ca3af;
|
|
margin-top: 4pt;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ─── Question Item ─────────────────────────────────────────── */
|
|
.question-list {
|
|
margin-bottom: 8pt;
|
|
}
|
|
|
|
.question-item {
|
|
background-color: #1e222b;
|
|
border: 1pt solid #3a404d;
|
|
border-radius: 5pt;
|
|
margin-bottom: 6pt;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.question-item-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.question-body {
|
|
padding: 10pt 14pt;
|
|
width: 72%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.question-answer-cell {
|
|
width: 28%;
|
|
padding: 10pt 14pt;
|
|
border-left: 1pt solid #3a404d;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
background-color: #242830;
|
|
}
|
|
|
|
.question-text {
|
|
font-size: 9pt;
|
|
color: #e5e7eb;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.question-text-value {
|
|
margin-top: 5pt;
|
|
font-size: 8pt;
|
|
color: #9ca3af;
|
|
font-style: italic;
|
|
padding: 5pt 8pt;
|
|
background-color: #2b303a;
|
|
border-left: 2pt solid #3a404d;
|
|
border-radius: 2pt;
|
|
}
|
|
|
|
/* Answer pill */
|
|
.answer-pill {
|
|
display: inline;
|
|
font-size: 8pt;
|
|
font-weight: bold;
|
|
letter-spacing: 1pt;
|
|
text-transform: uppercase;
|
|
padding: 6pt 9pt;
|
|
border-radius: 20pt;
|
|
}
|
|
|
|
.answer-yes {
|
|
background-color: #14532d;
|
|
color: #4ade80;
|
|
border: 1pt solid #22c55e;
|
|
}
|
|
|
|
.answer-no {
|
|
background-color: #450a0a;
|
|
color: #f87171;
|
|
border: 1pt solid #ef4444;
|
|
}
|
|
|
|
.answer-na {
|
|
background-color: #1e222b;
|
|
color: #9ca3af;
|
|
border: 1pt solid #4b5563;
|
|
}
|
|
|
|
.answer-missing {
|
|
font-size: 7.5pt;
|
|
color: #6b7280;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ─── Additional Comments ───────────────────────────────────── */
|
|
.comments-section {
|
|
margin-top: 8pt;
|
|
}
|
|
|
|
.comments-card {
|
|
background-color: #1e222b;
|
|
border: 1pt solid #3a404d;
|
|
border-left: 3pt solid #d1ec51;
|
|
border-radius: 5pt;
|
|
padding: 14pt 16pt;
|
|
}
|
|
|
|
.comments-label {
|
|
font-size: 6.5pt;
|
|
font-weight: bold;
|
|
letter-spacing: 2.5pt;
|
|
text-transform: uppercase;
|
|
color: #d1ec51;
|
|
margin-bottom: 8pt;
|
|
}
|
|
|
|
.comments-text {
|
|
font-size: 9pt;
|
|
color: #d1d5db;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ─── Footer ────────────────────────────────────────────────── */
|
|
.footer {
|
|
margin-top: 28pt;
|
|
padding-top: 12pt;
|
|
border-top: 1pt solid #3a404d;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: 7pt;
|
|
color: #4b5563;
|
|
letter-spacing: 0.5pt;
|
|
}
|
|
|
|
.footer-accent {
|
|
color: #d1ec51;
|
|
}
|
|
|
|
/* ─── Page break control ────────────────────────────────────── */
|
|
.no-break {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.group-block {
|
|
page-break-inside: avoid;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
|
|
{{-- ═══ HEADER ═══════════════════════════════════════════════════════ --}}
|
|
<div class="header">
|
|
<div class="header-eyebrow">Assessment Report</div>
|
|
<div class="header-title">
|
|
Go <span class="header-title-accent">/</span> No Go
|
|
</div>
|
|
<div class="header-subtitle">
|
|
Category:
|
|
<span class="header-category">{{ $session->category->name ?? 'Unknown Category' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ═══ CONTENT ════════════════════════════════════════════════════════ --}}
|
|
<div class="content">
|
|
|
|
{{-- ─── Meta Block ─────────────────────────────────────────────── --}}
|
|
<div class="meta-block">
|
|
<table class="meta-table">
|
|
<tr>
|
|
{{-- Left: user info --}}
|
|
<td class="meta-left">
|
|
<div class="card">
|
|
<div class="card-label">Submitted By</div>
|
|
|
|
<div class="info-row">
|
|
<div class="info-key">Name</div>
|
|
<div class="info-value">{{ $session->user->name ?? '—' }}</div>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<div class="info-key">Email</div>
|
|
<div class="info-value-secondary">{{ $session->user->email ?? '—' }}</div>
|
|
</div>
|
|
|
|
@if (!empty($session->user->company_name))
|
|
<div class="info-row">
|
|
<div class="info-key">Company</div>
|
|
<div class="info-value-secondary">{{ $session->user->company_name }}</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if (!empty($session->user->job_title))
|
|
<div class="info-row">
|
|
<div class="info-key">Job Title</div>
|
|
<div class="info-value-secondary">{{ $session->user->job_title }}</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if (!empty($session->user->department))
|
|
<div class="info-row">
|
|
<div class="info-key">Department</div>
|
|
<div class="info-value-secondary">{{ $session->user->department }}</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</td>
|
|
|
|
{{-- Right: date + result --}}
|
|
<td class="meta-right">
|
|
|
|
{{-- Completion date --}}
|
|
<div class="date-block">
|
|
<div class="date-label">Completed</div>
|
|
<div class="date-value">
|
|
@if ($session->completed_at)
|
|
{{ $session->completed_at->format('d M Y, H:i') }}
|
|
@else
|
|
—
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Result badge --}}
|
|
@php
|
|
$result = $session->result ?? 'no_go';
|
|
$badgeClass = match ($result) {
|
|
'go' => 'result-badge-go',
|
|
'consult_leadership' => 'result-badge-consult',
|
|
default => 'result-badge-no-go',
|
|
};
|
|
$textClass = match ($result) {
|
|
'go' => 'result-text-go',
|
|
'consult_leadership' => 'result-text-consult',
|
|
default => 'result-text-no-go',
|
|
};
|
|
$resultLabel = match ($result) {
|
|
'go' => 'GO',
|
|
'consult_leadership' => 'Consult Leadership',
|
|
default => 'NO GO',
|
|
};
|
|
@endphp
|
|
|
|
<div class="result-badge {{ $badgeClass }}">
|
|
<div class="result-label">Decision</div>
|
|
<div class="result-text {{ $textClass }}">{{ $resultLabel }}</div>
|
|
@if (isset($session->score))
|
|
<div class="result-score">
|
|
Score: <span class="result-score-value">{{ $session->score }} pts</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- ─── Question Groups ─────────────────────────────────────── --}}
|
|
@php
|
|
// Key answers by question_id for fast lookup
|
|
$answersMap = $session->answers->keyBy('question_id');
|
|
@endphp
|
|
|
|
@foreach ($questionGroups as $groupIndex => $group)
|
|
<hr class="section-divider">
|
|
|
|
<div class="group-block no-break">
|
|
{{-- Group heading --}}
|
|
<div class="group-header">
|
|
<div class="group-number">Group {{ $groupIndex + 1 }}</div>
|
|
<div class="group-name">{{ $group->name }}</div>
|
|
@if (!empty($group->description))
|
|
<div class="group-description">{{ $group->description }}</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Questions --}}
|
|
<div class="question-list">
|
|
@forelse ($group->questions as $question)
|
|
@php
|
|
$answer = $answersMap->get($question->id);
|
|
$answerValue = $answer?->value;
|
|
$textValue = $answer?->text_value;
|
|
|
|
$pillClass = match ($answerValue) {
|
|
'yes' => 'answer-pill answer-yes',
|
|
'no' => 'answer-pill answer-no',
|
|
'na' => 'answer-pill answer-na',
|
|
default => '',
|
|
};
|
|
$pillLabel = match ($answerValue) {
|
|
'yes' => 'Yes',
|
|
'no' => 'No',
|
|
'na' => 'N/A',
|
|
default => null,
|
|
};
|
|
@endphp
|
|
|
|
<div class="question-item no-break">
|
|
<table class="question-item-table">
|
|
<tr>
|
|
<td class="question-body"@if ($pillLabel === null) colspan="2"@endif>
|
|
<div class="question-text">{{ $question->text }}</div>
|
|
@if (!empty($textValue))
|
|
<div class="question-text-value">{{ $textValue }}</div>
|
|
@endif
|
|
</td>
|
|
@if ($pillLabel !== null)
|
|
<td class="question-answer-cell">
|
|
<span class="{{ $pillClass }}">{{ $pillLabel }}</span>
|
|
</td>
|
|
@endif
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
@empty
|
|
<div style="color: #6b7280; font-size: 8.5pt; font-style: italic; padding: 8pt 0;">
|
|
No questions in this group.
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
{{-- ─── Additional Comments ─────────────────────────────────── --}}
|
|
@if (!empty($session->additional_comments))
|
|
<hr class="section-divider">
|
|
|
|
<div class="comments-section no-break">
|
|
<div class="comments-card">
|
|
<div class="comments-label">Additional Comments</div>
|
|
<div class="comments-text">{{ $session->additional_comments }}</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ─── Footer ──────────────────────────────────────────────── --}}
|
|
<div class="footer">
|
|
<div class="footer-text">
|
|
Generated by <span class="footer-accent">Go / No Go</span>
|
|
•
|
|
{{ now()->format('d M Y') }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>{{-- /content --}}
|
|
|
|
</div>{{-- /page-wrapper --}}
|
|
</body>
|
|
</html>
|