feat: new interview page, MediaPipe Integration and Stun server discovery #20
@ -31,6 +31,23 @@ public function index()
|
||||
return view('interview.index', compact('interviews', 'interviewers'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a specific Candidate Interview Live Review & Call Session.
|
||||
*/
|
||||
public function show($id)
|
||||
{
|
||||
$user = Auth::user();
|
||||
|
||||
if (!$user->isAdmin() && strtolower($user->role) !== 'hr' && !$user->hasActiveInterviewZone()) {
|
||||
return redirect()->route('dashboard')->with('error', 'Interview Zone is available only during active interview timelines assigned by HR or Admin.');
|
||||
}
|
||||
|
||||
$interview = Interview::findOrFail($id);
|
||||
$interviewers = User::orderBy('name', 'asc')->get();
|
||||
|
||||
return view('interview.show', compact('interview', 'interviewers'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Store a new Candidate Interview session created by HR.
|
||||
*/
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { getMeteredIceServers, initMeteredIceServers, globalIceServers } from './metered.js';
|
||||
import './interview-call.js';
|
||||
|
||||
window.globalIceServers = globalIceServers;
|
||||
window.getMeteredIceServers = getMeteredIceServers;
|
||||
@ -8,3 +9,4 @@ window.initMeteredIceServers = initMeteredIceServers;
|
||||
if (typeof window !== 'undefined') {
|
||||
window.getMeteredIceServers();
|
||||
}
|
||||
|
||||
|
||||
1833
resources/js/interview-call.js
Normal file
1833
resources/js/interview-call.js
Normal file
File diff suppressed because it is too large
Load Diff
55
resources/views/components/audit-log-item.blade.php
Normal file
55
resources/views/components/audit-log-item.blade.php
Normal file
@ -0,0 +1,55 @@
|
||||
@props([
|
||||
'type' => 'violation',
|
||||
'details' => '',
|
||||
'timestamp' => null,
|
||||
'screenshotUrl' => null,
|
||||
'aiVerdict' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$icoClass = 'amber';
|
||||
$faIcon = 'fa-solid fa-window-restore';
|
||||
$isFlag = false;
|
||||
|
||||
if ($type === 'focus_lost') {
|
||||
$icoClass = 'amber'; $faIcon = 'fa-solid fa-window-restore';
|
||||
} elseif (in_array($type, ['gaze_anomaly', 'gaze_fixed_staring'])) {
|
||||
$icoClass = 'amber'; $faIcon = 'fa-solid fa-eye';
|
||||
} elseif (in_array($type, ['gaze_lower_device', 'reading_external_device'])) {
|
||||
$icoClass = 'red'; $faIcon = 'fa-solid fa-mobile-screen'; $isFlag = true;
|
||||
} elseif (in_array($type, ['question_repeat_lower', 'question_repetition'])) {
|
||||
$icoClass = 'red'; $faIcon = 'fa-solid fa-comments'; $isFlag = true;
|
||||
} elseif ($type === 'talking_on_phone') {
|
||||
$icoClass = 'red'; $faIcon = 'fa-solid fa-phone'; $isFlag = true;
|
||||
} elseif ($type === 'external_ai_detected') {
|
||||
$icoClass = 'red'; $faIcon = 'fa-solid fa-robot'; $isFlag = true;
|
||||
} elseif ($type === 'tab_switch') {
|
||||
$icoClass = 'amber'; $faIcon = 'fa-solid fa-window-restore';
|
||||
}
|
||||
|
||||
$titleCap = ucfirst(str_replace('_', ' ', $type));
|
||||
$timeStr = $timestamp ? \Carbon\Carbon::parse($timestamp)->format('H:i:s') : now()->format('H:i:s');
|
||||
@endphp
|
||||
|
||||
<div {{ $attributes->merge(['class' => 'log-item flex gap-2.5 p-3 border-b border-[#1b2233] last:border-b-0 ' . ($isFlag ? 'bg-[rgba(239,74,95,0.1)] flag' : '')]) }}>
|
||||
<div class="log-ico w-6 h-6 rounded-md flex-shrink-0 flex items-center justify-center text-[11px] mt-0.5 {{ $icoClass === 'amber' ? 'bg-[rgba(240,169,57,0.12)] text-[#f0a939]' : 'bg-[rgba(239,74,95,0.1)] text-[#ef4a5f]' }}">
|
||||
<i class="{{ $faIcon }}"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="log-text text-xs leading-relaxed text-slate-300">
|
||||
<b class="text-white {{ $isFlag ? '!text-[#ef4a5f]' : '' }}">{{ $titleCap }}</b> — {{ $details }}
|
||||
@if($screenshotUrl)
|
||||
<a href="{{ $screenshotUrl }}" target="_blank" class="text-sky-400 underline ml-1 font-medium">[<i class="fa-solid fa-camera mr-0.5"></i> Screenshot]</a>
|
||||
@endif
|
||||
@if($aiVerdict)
|
||||
@php
|
||||
$confPct = round(($aiVerdict['confidence'] ?? 0.85) * 100);
|
||||
$engineName = $aiVerdict['engine'] ?? 'AI Engine';
|
||||
$toolName = !empty($aiVerdict['ai_tool_detected']) ? ' • Detected: <strong>' . e($aiVerdict['ai_tool_detected']) . '</strong>' : '';
|
||||
@endphp
|
||||
<div class="mt-1 text-[11px] text-red-300"><b>AI inspector · {{ $confPct }}% cheating confidence</b> ({!! $engineName . $toolName !!})</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="log-time text-[10.5px] text-slate-500 mt-0.5">{{ $timeStr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
21
resources/views/components/audit-log.blade.php
Normal file
21
resources/views/components/audit-log.blade.php
Normal file
@ -0,0 +1,21 @@
|
||||
@props([
|
||||
'logs' => [],
|
||||
])
|
||||
|
||||
<div {{ $attributes->merge(['class' => 'bg-[#0d1220] border border-[#1b2233] rounded-[9px] max-h-[260px] overflow-y-auto']) }}>
|
||||
@if(is_array($logs) && count($logs) > 0)
|
||||
@foreach($logs as $log)
|
||||
<x-audit-log-item
|
||||
:type="$log['type'] ?? 'violation'"
|
||||
:details="$log['details'] ?? ''"
|
||||
:timestamp="$log['timestamp'] ?? null"
|
||||
:screenshotUrl="$log['screenshot_url'] ?? null"
|
||||
:aiVerdict="$log['ai_verdict'] ?? null"
|
||||
/>
|
||||
@endforeach
|
||||
@else
|
||||
<div class="p-4 text-center text-[#21c274] text-xs font-medium">
|
||||
<i class="fa-solid fa-circle-check mr-1"></i> Zero proctoring violations recorded.
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
41
resources/views/components/button.blade.php
Normal file
41
resources/views/components/button.blade.php
Normal file
@ -0,0 +1,41 @@
|
||||
@props([
|
||||
'variant' => 'primary', // primary, secondary, danger, warning, success, ghost
|
||||
'size' => 'md', // sm, md, lg
|
||||
'type' => 'button',
|
||||
'icon' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$baseClasses = 'inline-flex items-center gap-1.5 rounded-lg border font-medium text-xs transition-all duration-150 cursor-pointer select-none whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed';
|
||||
|
||||
$variants = [
|
||||
'default' => 'bg-[#0d1220] text-slate-300 border-[#232b3d] hover:bg-[#161d2d] hover:text-white hover:border-[#3a4257]',
|
||||
'secondary' => 'bg-[#0d1220] text-slate-300 border-[#232b3d] hover:bg-[#161d2d] hover:text-white hover:border-[#3a4257]',
|
||||
'primary' => 'bg-[#4b82f7] text-white border-[#4b82f7] hover:bg-[#3d6fe0] shadow-sm',
|
||||
'success' => 'bg-[#21c274] text-white border-[#21c274] hover:bg-[#1da865] shadow-sm',
|
||||
'danger' => 'bg-[#ef4a5f] text-white border-[#ef4a5f] hover:bg-[#d63d51] shadow-sm',
|
||||
'warning' => 'bg-[#f0a939] text-white border-[#f0a939] hover:bg-[#d8952d] shadow-sm',
|
||||
'ghost' => 'bg-transparent text-slate-400 border-transparent hover:bg-white/5 hover:text-slate-200',
|
||||
];
|
||||
|
||||
$sizes = [
|
||||
'sm' => 'px-2.5 py-1.5 text-xs',
|
||||
'md' => 'px-3 py-1.5 text-[12.5px]',
|
||||
'lg' => 'px-4 py-2 text-sm',
|
||||
];
|
||||
|
||||
$classes = implode(' ', [
|
||||
$baseClasses,
|
||||
$variants[$variant] ?? $variants['secondary'],
|
||||
$sizes[$size] ?? $sizes['md'],
|
||||
]);
|
||||
@endphp
|
||||
|
||||
<button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
|
||||
@if($icon)
|
||||
<i class="{{ $icon }}"></i>
|
||||
@endif
|
||||
@if(trim($slot))
|
||||
<span>{{ $slot }}</span>
|
||||
@endif
|
||||
</button>
|
||||
28
resources/views/components/card.blade.php
Normal file
28
resources/views/components/card.blade.php
Normal file
@ -0,0 +1,28 @@
|
||||
@props([
|
||||
'title' => null,
|
||||
'icon' => null,
|
||||
])
|
||||
|
||||
<div {{ $attributes->merge(['class' => 'bg-[#121826] border border-[#1b2233] rounded-[12px] mb-4 overflow-hidden']) }}>
|
||||
@if($title || $icon || isset($headerExtra))
|
||||
<div class="flex items-center justify-between px-5 py-3.5 border-b border-[#1b2233]">
|
||||
<div class="flex items-center gap-2.5 font-semibold text-[14.5px] tracking-tight text-white">
|
||||
@if($icon)
|
||||
<i class="{{ $icon }} text-[#4b82f7] text-[13.5px]"></i>
|
||||
@endif
|
||||
@if($title)
|
||||
<span>{{ $title }}</span>
|
||||
@endif
|
||||
</div>
|
||||
@if(isset($headerExtra))
|
||||
<div class="flex items-center gap-2">
|
||||
{{ $headerExtra }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
42
resources/views/components/chat-message.blade.php
Normal file
42
resources/views/components/chat-message.blade.php
Normal file
@ -0,0 +1,42 @@
|
||||
@props([
|
||||
'senderName' => 'Interviewer',
|
||||
'isCandidate' => false,
|
||||
'color' => '#6366f1',
|
||||
'message' => '',
|
||||
'timestamp' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$resolvedColor = $isCandidate ? '#38bdf8' : ($color ?? '#6366f1');
|
||||
$timeStr = $timestamp ? \Carbon\Carbon::parse($timestamp)->format('H:i:s') : now()->format('H:i:s');
|
||||
|
||||
// Hex to rgba helper for background opacity
|
||||
$hex = ltrim($resolvedColor, '#');
|
||||
if (strlen($hex) == 3) {
|
||||
$r = hexdec(substr($hex,0,1).substr($hex,0,1));
|
||||
$g = hexdec(substr($hex,1,1).substr($hex,1,1));
|
||||
$b = hexdec(substr($hex,2,1).substr($hex,2,1));
|
||||
} else {
|
||||
$r = hexdec(substr($hex,0,2));
|
||||
$g = hexdec(substr($hex,2,2));
|
||||
$b = hexdec(substr($hex,4,2));
|
||||
}
|
||||
$bgRgba = "rgba({$r}, {$g}, {$b}, 0.1)";
|
||||
$borderRgba = "rgba({$r}, {$g}, {$b}, 0.35)";
|
||||
@endphp
|
||||
|
||||
<div {{ $attributes->merge(['class' => 'chat-message mb-2 p-2.5 rounded-lg border-l-2 transition-all']) }} style="background: {{ $bgRgba }}; border-color: {{ $resolvedColor }};">
|
||||
<div class="flex justify-between items-center mb-1 gap-2">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<span class="w-1.5 h-1.5 rounded-full shrink-0" style="background: {{ $resolvedColor }};"></span>
|
||||
<strong class="text-xs truncate" style="color: {{ $resolvedColor }};">{{ $senderName }}</strong>
|
||||
@if($isCandidate)
|
||||
<span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded bg-sky-500/20 text-sky-300 border border-sky-500/30 shrink-0">Candidate</span>
|
||||
@else
|
||||
<span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 shrink-0">Panelist</span>
|
||||
@endif
|
||||
</div>
|
||||
<span class="text-[10.5px] text-slate-500 shrink-0 font-mono">{{ $timeStr }}</span>
|
||||
</div>
|
||||
<div class="text-slate-200 text-xs leading-relaxed font-medium pl-3 break-words">{{ $message }}</div>
|
||||
</div>
|
||||
44
resources/views/components/chat-panel.blade.php
Normal file
44
resources/views/components/chat-panel.blade.php
Normal file
@ -0,0 +1,44 @@
|
||||
@props([
|
||||
'warnings' => [],
|
||||
'candidateName' => 'Candidate',
|
||||
])
|
||||
|
||||
@php
|
||||
$interviewerColors = [
|
||||
'#6366f1', // Indigo
|
||||
'#10b981', // Emerald
|
||||
'#f59e0b', // Amber
|
||||
'#ec4899', // Pink
|
||||
'#8b5cf6', // Purple
|
||||
'#06b6d4', // Cyan
|
||||
'#f97316', // Orange
|
||||
];
|
||||
@endphp
|
||||
|
||||
<div {{ $attributes->merge(['class' => 'bg-[#0d1220] border border-[#1b2233] rounded-[9px] h-[150px] overflow-y-auto p-3 flex flex-col gap-2']) }}>
|
||||
@if(count($warnings) > 0)
|
||||
@foreach($warnings as $w)
|
||||
@php
|
||||
$isCand = is_null($w->sent_by);
|
||||
$senderName = $isCand
|
||||
? ($candidateName ?: 'Candidate')
|
||||
: ($w->sender ? $w->sender->name : 'Interviewer');
|
||||
|
||||
$color = $isCand
|
||||
? '#38bdf8'
|
||||
: $interviewerColors[($w->sent_by ?? 1) % count($interviewerColors)];
|
||||
@endphp
|
||||
<x-chat-message
|
||||
:senderName="$senderName"
|
||||
:isCandidate="$isCand"
|
||||
:color="$color"
|
||||
:message="$w->message"
|
||||
:timestamp="$w->created_at"
|
||||
/>
|
||||
@endforeach
|
||||
@else
|
||||
<div class="h-full w-full flex items-center justify-center text-xs text-[#5b637a] italic">
|
||||
No chat history. Send a message below.
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
43
resources/views/components/modal.blade.php
Normal file
43
resources/views/components/modal.blade.php
Normal file
@ -0,0 +1,43 @@
|
||||
@props([
|
||||
'id',
|
||||
'title' => null,
|
||||
'maxWidth' => '2xl',
|
||||
'onClose' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$maxWidths = [
|
||||
'sm' => 'max-w-sm',
|
||||
'md' => 'max-w-md',
|
||||
'lg' => 'max-w-lg',
|
||||
'xl' => 'max-w-xl',
|
||||
'2xl' => 'max-w-2xl',
|
||||
'5xl' => 'max-w-5xl',
|
||||
'7xl' => 'max-w-7xl',
|
||||
'full' => 'max-w-full mx-4',
|
||||
];
|
||||
|
||||
$maxWidthClass = $maxWidths[$maxWidth] ?? $maxWidths['2xl'];
|
||||
@endphp
|
||||
|
||||
<div id="{{ $id }}" {{ $attributes->merge(['class' => 'admin-modal fixed inset-0 w-screen h-screen bg-slate-950/85 backdrop-blur-md flex items-center justify-center z-[1000] opacity-0 pointer-events-none transition-opacity duration-300 [&.active]:opacity-100 [&.active]:pointer-events-auto']) }}>
|
||||
<div class="admin-modal-content bg-slate-900 border border-slate-700/60 rounded-2xl w-[90%] {{ $maxWidthClass }} p-7 shadow-2xl text-white max-h-[90vh] overflow-y-auto">
|
||||
@if($title || isset($headerActions))
|
||||
<div class="flex items-center justify-between pb-4 mb-4 border-b border-white/10">
|
||||
@if($title)
|
||||
<h3 class="font-outfit text-xl font-bold text-white m-0">{{ $title }}</h3>
|
||||
@endif
|
||||
<div class="flex items-center gap-2">
|
||||
@if(isset($headerActions))
|
||||
{{ $headerActions }}
|
||||
@endif
|
||||
<button type="button" onclick="document.getElementById('{{ $id }}').classList.remove('active'); {{ $onClose ? $onClose . '();' : '' }}" class="bg-transparent border-none text-slate-400 hover:text-white text-2xl cursor-pointer leading-none px-1">×</button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
41
resources/views/components/pill.blade.php
Normal file
41
resources/views/components/pill.blade.php
Normal file
@ -0,0 +1,41 @@
|
||||
@props([
|
||||
'variant' => 'info', // primary, secondary, success, danger, warning, info, ghost
|
||||
'size' => 'md', // sm, md
|
||||
'icon' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$baseClasses = 'inline-flex items-center gap-1.5 font-semibold text-[11px] tracking-wide px-2.5 py-1 rounded-full border transition-colors duration-150 whitespace-nowrap';
|
||||
|
||||
$variants = [
|
||||
'blue' => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
|
||||
'primary' => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
|
||||
'info' => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
|
||||
'red' => 'text-[#ef4a5f] bg-[rgba(239,74,95,0.1)] border-[rgba(239,74,95,0.32)]',
|
||||
'danger' => 'text-[#ef4a5f] bg-[rgba(239,74,95,0.1)] border-[rgba(239,74,95,0.32)]',
|
||||
'success' => 'text-[#21c274] bg-[rgba(33,194,116,0.12)] border-[rgba(33,194,116,0.35)]',
|
||||
'warning' => 'text-[#f0a939] bg-[rgba(240,169,57,0.12)] border-[rgba(240,169,57,0.35)]',
|
||||
'secondary' => 'text-slate-400 bg-[#0d1220] border-[#232b3d]',
|
||||
'ghost' => 'text-slate-400 bg-[#0d1220] border-[#232b3d]',
|
||||
];
|
||||
|
||||
$sizes = [
|
||||
'sm' => 'px-2 py-0.5 text-[10.5px]',
|
||||
'md' => 'px-2.5 py-1 text-[11px]',
|
||||
];
|
||||
|
||||
$classes = implode(' ', [
|
||||
$baseClasses,
|
||||
$variants[$variant] ?? $variants['ghost'],
|
||||
$sizes[$size] ?? $sizes['md'],
|
||||
]);
|
||||
@endphp
|
||||
|
||||
<span {{ $attributes->merge(['class' => $classes]) }}>
|
||||
@if($icon)
|
||||
<i class="{{ $icon }}"></i>
|
||||
@endif
|
||||
@if(trim($slot))
|
||||
<span>{{ $slot }}</span>
|
||||
@endif
|
||||
</span>
|
||||
26
resources/views/components/tab-button.blade.php
Normal file
26
resources/views/components/tab-button.blade.php
Normal file
@ -0,0 +1,26 @@
|
||||
@props([
|
||||
'id' => null,
|
||||
'active' => false,
|
||||
'icon' => null,
|
||||
'tabKey' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$baseClasses = 'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-md transition-colors duration-150 cursor-pointer select-none border-none';
|
||||
$activeClasses = $active
|
||||
? 'bg-[#4b82f7] text-white shadow-sm active'
|
||||
: 'bg-transparent text-slate-400 hover:text-slate-200';
|
||||
@endphp
|
||||
|
||||
<button
|
||||
@if($id) id="{{ $id }}" @endif
|
||||
type="button"
|
||||
@if($tabKey) data-tab="{{ $tabKey }}" @endif
|
||||
{{ $attributes->merge(['class' => implode(' ', ['tab', $baseClasses, $activeClasses])]) }}>
|
||||
@if($icon)
|
||||
<i class="{{ $icon }} text-[11px]"></i>
|
||||
@endif
|
||||
@if(trim($slot))
|
||||
<span>{{ $slot }}</span>
|
||||
@endif
|
||||
</button>
|
||||
57
resources/views/components/video-tile.blade.php
Normal file
57
resources/views/components/video-tile.blade.php
Normal file
@ -0,0 +1,57 @@
|
||||
@props([
|
||||
'id',
|
||||
'videoId',
|
||||
'placeholderId',
|
||||
'badgeText' => '',
|
||||
'badgeId' => null,
|
||||
'borderColor' => 'border-[#1b2233]',
|
||||
'showZoom' => false,
|
||||
'showFullscreen' => false,
|
||||
'initials' => 'CD',
|
||||
'avatarCircleId' => null,
|
||||
'avatarNameId' => null,
|
||||
'avatarTitle' => 'Video Stream',
|
||||
'zoomInFn' => null,
|
||||
'zoomOutFn' => null,
|
||||
'zoomResetFn' => null,
|
||||
'fullscreenFn' => null,
|
||||
'containerId' => null,
|
||||
'focused' => false,
|
||||
])
|
||||
|
||||
<div id="{{ $id }}" {{ $attributes->merge(['class' => 'video-tile relative aspect-[16/11] bg-[#0d1220] border rounded-[10px] overflow-hidden flex flex-col items-center justify-center transition-all ' . ($focused ? 'border-[rgba(75,130,247,0.35)] shadow-[0_0_0_1px_rgba(75,130,247,0.35)]' : 'border-[#1b2233]')]) }}>
|
||||
@if($showZoom || $showFullscreen)
|
||||
<div class="tile-tools absolute top-2 right-2 z-20 flex gap-1">
|
||||
@if($showZoom)
|
||||
<button type="button" onclick="{{ $zoomInFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom In"><i class="fa-solid fa-magnifying-glass-plus"></i></button>
|
||||
<button type="button" onclick="{{ $zoomOutFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom Out"><i class="fa-solid fa-magnifying-glass-minus"></i></button>
|
||||
<button type="button" onclick="{{ $zoomResetFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Reset Zoom"><i class="fa-solid fa-rotate-left"></i></button>
|
||||
@endif
|
||||
@if($showFullscreen)
|
||||
<button type="button" onclick="{{ $fullscreenFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Fullscreen"><i class="fa-solid fa-expand"></i></button>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($containerId)
|
||||
<div id="{{ $containerId }}" class="w-full h-full overflow-auto">
|
||||
<video id="{{ $videoId }}" autoplay playsinline class="w-full h-full object-contain origin-top-left transition-transform duration-200"></video>
|
||||
</div>
|
||||
@else
|
||||
<video id="{{ $videoId }}" autoplay playsinline class="w-full h-full object-cover origin-center transition-transform duration-200"></video>
|
||||
@endif
|
||||
|
||||
<div id="{{ $placeholderId }}" class="absolute inset-0 flex flex-col items-center justify-center bg-[#0d1220]/95 text-slate-400 text-xs z-10 p-3">
|
||||
<div id="{{ $avatarCircleId }}" class="av w-[58px] h-[58px] rounded-full bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-white font-semibold text-[19px] mb-2.5 shadow-md shadow-[#4b82f7]/20">
|
||||
{{ $initials }}
|
||||
</div>
|
||||
<div id="{{ $avatarNameId }}" class="name text-[13.5px] font-semibold text-white">{{ $avatarTitle }}</div>
|
||||
<div class="status text-[11.5px] text-[#5b637a] mt-1 text-center px-3">
|
||||
{{ $slot->isNotEmpty() ? $slot : "Waiting for candidate…" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="tile-tag absolute left-2.5 bottom-2.5 text-[10px] font-semibold tracking-wide px-2 py-1 rounded-md bg-black/35 text-slate-400 border border-[#1b2233] z-10">
|
||||
{{ $badgeText }}
|
||||
</span>
|
||||
</div>
|
||||
@ -1022,12 +1022,19 @@ function logViolation(type, details) {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
body: JSON.stringify({ type: type, details: details })
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(res => {
|
||||
if (typeof callSigChannel !== 'undefined' && callSigChannel) {
|
||||
callSigChannel.postMessage({ type: 'violation_occurred', violation_type: type, details: details });
|
||||
}
|
||||
if (typeof liveSyncChannel !== 'undefined' && liveSyncChannel) {
|
||||
liveSyncChannel.postMessage({ type: 'violation_logged', violation_type: type, details: details });
|
||||
}
|
||||
if (typeof pollReviewData === 'function') {
|
||||
pollReviewData();
|
||||
}
|
||||
});
|
||||
|
||||
// Post message over BroadcastChannel to alert interviewer dashboard real-time
|
||||
if (typeof callSigChannel !== 'undefined' && callSigChannel) {
|
||||
callSigChannel.postMessage({ type: 'violation_occurred', violation_type: type, details: details });
|
||||
}
|
||||
}
|
||||
|
||||
// --- CANDIDATE REAL-TIME CALL RINGTONE SYNTHESIZER ---
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
423
resources/views/interview/show.blade.php
Normal file
423
resources/views/interview/show.blade.php
Normal file
@ -0,0 +1,423 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>{{ $interview->candidate_name }} - Assessment Review | SingleLogin</title>
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
|
||||
<script src="//cdn.metered.ca/sdk/video/1.4.6/sdk.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0e17;
|
||||
--panel: #121826;
|
||||
--panel-2: #0d1220;
|
||||
--border: #232b3d;
|
||||
--border-soft: #1b2233;
|
||||
--text: #e8ebf3;
|
||||
--text-dim: #9199ad;
|
||||
--text-faint: #5b637a;
|
||||
--accent: #4b82f7;
|
||||
--accent-soft: rgba(75,130,247,0.12);
|
||||
--accent-border: rgba(75,130,247,0.35);
|
||||
--success: #21c274;
|
||||
--danger: #ef4a5f;
|
||||
--danger-soft: rgba(239,74,95,0.1);
|
||||
--warning: #f0a939;
|
||||
--warning-soft: rgba(240,169,57,0.12);
|
||||
--radius: 12px;
|
||||
--mono: 'JetBrains Mono', monospace;
|
||||
--sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: radial-gradient(1200px 600px at 15% -10%, rgba(75,130,247,0.06), transparent 60%), var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
}
|
||||
|
||||
/* Toggle switch */
|
||||
.toggle {
|
||||
width: 32px; height: 18px; border-radius: 20px; background: var(--panel-2);
|
||||
border: 1px solid var(--border); position: relative; cursor: pointer; flex-shrink: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.toggle::after {
|
||||
content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
|
||||
border-radius: 50%; background: var(--text-faint); transition: left .15s ease;
|
||||
}
|
||||
.toggle.on { background: var(--accent-soft); border-color: var(--accent-border); }
|
||||
.toggle.on::after { left: 16px; background: var(--accent); }
|
||||
|
||||
/* Accordion disclosure */
|
||||
details.meta summary {
|
||||
list-style: none; cursor: pointer; user-select: none;
|
||||
}
|
||||
details.meta summary::-webkit-details-marker { display: none; }
|
||||
details.meta summary i.chev { transition: transform .15s ease; }
|
||||
details.meta[open] summary i.chev { transform: rotate(180deg); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col antialiased">
|
||||
|
||||
<div class="max-w-[1320px] w-full mx-auto px-7 py-5 pb-16 flex-1">
|
||||
|
||||
<!-- Top bar -->
|
||||
<div class="flex items-center justify-between pb-4 mb-4 border-b border-[#1b2233]">
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="{{ route('interview.index') }}" class="w-9 h-9 rounded-xl bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-sm text-white shadow-[0_4px_14px_rgba(75,130,247,0.35)] no-underline">
|
||||
<i class="fa-solid fa-bolt"></i>
|
||||
</a>
|
||||
<div>
|
||||
<h1 class="text-base font-semibold text-white m-0 tracking-tight">Candidate Assessment Review</h1>
|
||||
<p class="text-xs text-[#5b637a] m-0 mt-0.5">Live proctored session & review room</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1.5">
|
||||
<a href="{{ route('interview.index') }}">
|
||||
<x-button variant="ghost" icon="fa-solid fa-arrow-left">Back to assessments</x-button>
|
||||
</a>
|
||||
@if(Auth::user()->isAdmin())
|
||||
<a href="{{ route('admin.dashboard') }}">
|
||||
<x-button variant="ghost" icon="fa-solid fa-sliders">Control panel</x-button>
|
||||
</a>
|
||||
@endif
|
||||
<form action="{{ route('logout') }}" method="POST" id="logout-form" class="inline">
|
||||
@csrf
|
||||
<x-button type="button" onclick="interviewerLogoutAction()" variant="ghost" icon="fa-solid fa-arrow-right-from-bracket">Logout</x-button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(session('success'))
|
||||
<div class="mb-4 bg-[#21c274]/15 border border-[#21c274]/35 text-[#21c274] px-4 py-2.5 rounded-lg text-xs font-medium">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Session Panel -->
|
||||
<div class="bg-[#121826] border border-[#1b2233] rounded-[12px] mb-4 overflow-hidden">
|
||||
<div class="flex items-center justify-between p-5 gap-4 flex-wrap">
|
||||
<div class="flex items-center gap-3.5">
|
||||
@php
|
||||
$parts = preg_split('/\s+/', trim($interview->candidate_name));
|
||||
$candInitials = count($parts) >= 2 ? strtoupper(substr($parts[0],0,1).substr(end($parts),0,1)) : strtoupper(substr($interview->candidate_name,0,2));
|
||||
@endphp
|
||||
<div class="w-[42px] h-[42px] rounded-full bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-white font-semibold text-[15px] shrink-0">
|
||||
{{ $candInitials }}
|
||||
</div>
|
||||
<div>
|
||||
<h2 id="modal-cand-name" class="text-[15px] font-semibold text-white m-0 mb-0.5">{{ $interview->candidate_name }}</h2>
|
||||
<div class="text-xs text-[#5b637a] font-mono">{{ $interview->candidate_email }} · {{ $interview->candidate_phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
@if($interview->isExpired())
|
||||
<x-pill id="timeline-status-pill" variant="red" icon="fa-solid fa-circle">Expired</x-pill>
|
||||
@elseif($interview->status === 'completed')
|
||||
<x-pill id="timeline-status-pill" variant="success" icon="fa-solid fa-circle">Completed</x-pill>
|
||||
@elseif($interview->call_status === 'active')
|
||||
<x-pill id="timeline-status-pill" variant="blue" class="live" icon="fa-solid fa-circle">Call in progress</x-pill>
|
||||
@elseif($interview->isActiveTimeline())
|
||||
<x-pill id="timeline-status-pill" variant="blue" class="live" icon="fa-solid fa-circle">Timeline live</x-pill>
|
||||
@else
|
||||
<x-pill id="timeline-status-pill" variant="secondary" icon="fa-solid fa-clock">Scheduled</x-pill>
|
||||
@endif
|
||||
|
||||
<div class="w-px h-[18px] bg-[#232b3d] mx-1"></div>
|
||||
|
||||
<div class="flex items-center gap-2 text-xs text-[#9199ad] cursor-pointer" onclick="toggleSosAutoTrigger()">
|
||||
<span class="toggle on" id="sosToggle"></span> SOS auto-trigger
|
||||
</div>
|
||||
|
||||
<div class="w-px h-[18px] bg-[#232b3d] mx-1"></div>
|
||||
|
||||
<x-button onclick="regenerateCandidatePassword()" variant="secondary" icon="fa-solid fa-key">Password</x-button>
|
||||
<x-button onclick="openReportPage()" variant="secondary" icon="fa-solid fa-file-pdf">PDF report</x-button>
|
||||
<x-button onclick="blockCandidateAction()" variant="secondary" icon="fa-solid fa-ban">Block</x-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submission Details Disclosure Accordion -->
|
||||
<details class="meta border-t border-[#1b2233]">
|
||||
<summary class="flex items-center gap-2 px-5 py-2.5 text-xs text-[#5b637a] font-medium hover:text-[#9199ad] transition-colors">
|
||||
<i class="fa-solid fa-chevron-down chev text-[10px]"></i> Show submission details
|
||||
</summary>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2.5 px-5 pb-4">
|
||||
<div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
|
||||
<div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Submission ID</div>
|
||||
<div id="modal-cand-uid" class="text-xs font-mono text-[#9199ad] break-all">{{ $interview->submission_unique_id }}</div>
|
||||
</div>
|
||||
<div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
|
||||
<div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Temp Pass</div>
|
||||
<div class="text-xs font-mono text-[#9199ad]">{{ $interview->temp_password }}</div>
|
||||
</div>
|
||||
<div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
|
||||
<div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Language</div>
|
||||
<div class="text-xs font-mono text-[#9199ad] uppercase">{{ $interview->language }}</div>
|
||||
</div>
|
||||
<div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
|
||||
<div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Timeline</div>
|
||||
<div class="text-xs font-mono text-[#9199ad]">{{ ($interview->scheduled_at ?? $interview->created_at)->format('M d, H:i') }} – {{ $interview->expires_at->format('H:i') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Call Panel -->
|
||||
<x-card>
|
||||
<x-slot:headerExtra>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- 1. Mic Toggle (Icon Only) -->
|
||||
<x-button id="btn-toggle-interviewer-mic" onclick="toggleInterviewerMic()" variant="ghost" icon="fa-solid fa-microphone" style="display: none;" title="Mic On / Mute"></x-button>
|
||||
|
||||
<!-- 2. Cam Toggle (Icon Only) -->
|
||||
<x-button id="btn-toggle-interviewer-cam" onclick="toggleInterviewerCam()" variant="ghost" icon="fa-solid fa-video" style="display: none;" title="Cam On / Off"></x-button>
|
||||
|
||||
<!-- 3. Start / Join / Restart Call -->
|
||||
<x-button id="btn-start-call" onclick="startInterviewerCall()" variant="primary" icon="fa-solid fa-phone">
|
||||
Start / Join Call
|
||||
</x-button>
|
||||
|
||||
<!-- 4. Record Call (Silent) -->
|
||||
<x-button id="btn-start-recording" onclick="startCallRecording()" variant="secondary" icon="fa-solid fa-circle-dot">
|
||||
Record Call (Silent)
|
||||
</x-button>
|
||||
<x-button id="btn-stop-recording" onclick="stopCallRecording()" variant="danger" icon="fa-solid fa-square" style="display: none;" class="animate-pulse" title="Stop & Save Recording"></x-button>
|
||||
|
||||
<!-- 5. Leave Call -->
|
||||
<x-button id="btn-leave-call" onclick="leaveInterviewerCall()" variant="secondary" icon="fa-solid fa-arrow-right-from-bracket" style="display: none;">
|
||||
Leave Call
|
||||
</x-button>
|
||||
|
||||
<!-- 6. End Call for All (Icon Only, Far Right) -->
|
||||
<x-button id="btn-end-all-call" onclick="endCallForAll()" variant="danger" icon="fa-solid fa-phone-slash" style="display: none;" title="End Call for All"></x-button>
|
||||
</div>
|
||||
</x-slot:headerExtra>
|
||||
|
||||
<!-- Video Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3.5 p-5">
|
||||
<!-- Candidate Video -->
|
||||
<x-video-tile
|
||||
id="cand-video-wrapper"
|
||||
videoId="interviewer-cand-video"
|
||||
placeholderId="cand-video-placeholder"
|
||||
badgeText="Candidate video"
|
||||
badgeId="cand-vid-zoom-badge"
|
||||
showZoom="true"
|
||||
zoomInFn="zoomCandVideo(0.25)"
|
||||
zoomOutFn="zoomCandVideo(-0.25)"
|
||||
zoomResetFn="zoomCandVideo(0)"
|
||||
avatarCircleId="modal-cand-avatar-circle"
|
||||
avatarNameId="cand-avatar-name"
|
||||
avatarTitle="{{ $interview->candidate_name }}"
|
||||
initials="{{ $candInitials }}">
|
||||
Waiting for candidate…
|
||||
</x-video-tile>
|
||||
|
||||
<!-- Candidate Shared Screen -->
|
||||
<x-video-tile
|
||||
id="screen-wrapper"
|
||||
videoId="interviewer-screen-video"
|
||||
placeholderId="screen-video-placeholder"
|
||||
badgeText="Shared screen"
|
||||
badgeId="zoom-level-badge"
|
||||
focused="true"
|
||||
showZoom="true"
|
||||
showFullscreen="true"
|
||||
zoomInFn="zoomScreen(0.25)"
|
||||
zoomOutFn="zoomScreen(-0.25)"
|
||||
zoomResetFn="resetZoomScreen()"
|
||||
fullscreenFn="toggleFullscreenScreen()"
|
||||
containerId="screen-zoom-container"
|
||||
avatarTitle="Candidate live screen"
|
||||
initials="CD">
|
||||
Waiting for candidate to share screen…
|
||||
</x-video-tile>
|
||||
|
||||
<!-- Panelist Self -->
|
||||
@php
|
||||
$usrWords = preg_split('/\s+/', trim(Auth::user()->name));
|
||||
$usrInitials = count($usrWords) >= 2 ? strtoupper(substr($usrWords[0],0,1).substr(end($usrWords),0,1)) : strtoupper(substr(trim(Auth::user()->name),0,2));
|
||||
@endphp
|
||||
<x-video-tile
|
||||
id="self-video-wrapper"
|
||||
videoId="interviewer-self-video"
|
||||
placeholderId="self-video-placeholder"
|
||||
badgeText="Panelist self"
|
||||
avatarTitle="{{ Auth::user()->name }}"
|
||||
initials="{{ $usrInitials }}">
|
||||
Panelist (self)
|
||||
</x-video-tile>
|
||||
</div>
|
||||
|
||||
<!-- Multi-Party Panelist Video Grid -->
|
||||
<div id="panelist-mesh-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3.5 px-5 pb-5"></div>
|
||||
</x-card>
|
||||
|
||||
<!-- Inspector Panel -->
|
||||
<x-card>
|
||||
<div class="inline-flex gap-1 p-1 bg-[#0d1220] border border-[#1b2233] rounded-[10px] mx-5 mt-4">
|
||||
<x-tab-button id="tab-btn-code" tabKey="code" active="true" icon="fa-solid fa-code" onclick="switchIdeTab('code')">Live IDE code</x-tab-button>
|
||||
<x-tab-button id="tab-btn-notes" tabKey="notes" active="false" icon="fa-solid fa-note-sticky" onclick="switchIdeTab('notes')">Candidate notepad</x-tab-button>
|
||||
<x-tab-button id="tab-btn-drawing" tabKey="drawing" active="false" icon="fa-solid fa-pen" onclick="switchIdeTab('drawing')">Candidate drawing</x-tab-button>
|
||||
<x-tab-button id="tab-btn-recordings" tabKey="recordings" active="false" icon="fa-solid fa-film" onclick="switchIdeTab('recordings')">Saved recordings</x-tab-button>
|
||||
<x-tab-button id="tab-btn-screenshots" tabKey="screenshots" active="false" icon="fa-solid fa-image" onclick="switchIdeTab('screenshots')">Tab switch screenshots</x-tab-button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-5 gap-4 p-5">
|
||||
<!-- Left 3 Cols: Tab Content -->
|
||||
<div class="lg:col-span-3">
|
||||
<!-- Tab 1: Live IDE Code -->
|
||||
<div id="tab-content-code" class="block">
|
||||
<div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Current code solution — visible even if candidate does not share screen</div>
|
||||
<pre id="modal-code-display" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3.5 font-mono text-[13px] text-[#6ee7c9] min-h-[220px] max-h-[300px] overflow-y-auto whitespace-pre-wrap"></pre>
|
||||
|
||||
<div class="text-[11.5px] text-[#5b637a] mt-4 mb-2 font-medium">Execution stdout / stderr</div>
|
||||
<pre id="modal-output-display" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 font-mono text-xs text-[#5b637a] max-h-[100px] overflow-y-auto whitespace-pre-wrap"></pre>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: Candidate Notepad -->
|
||||
<div id="tab-content-notes" class="hidden">
|
||||
<div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Candidate live notepad notes (auto-synced)</div>
|
||||
<pre id="modal-notes-display" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3.5 font-mono text-xs text-slate-200 min-h-[250px] max-h-[350px] overflow-y-auto whitespace-pre-wrap"></pre>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Candidate Canvas Drawing -->
|
||||
<div id="tab-content-drawing" class="hidden">
|
||||
<div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Candidate live drawing / architecture diagram</div>
|
||||
<div class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 flex justify-center items-center min-h-[250px]">
|
||||
<img id="modal-drawing-img" src="" alt="Candidate Drawing Board" class="max-w-full max-h-[320px] hidden rounded-lg border border-dashed border-[#232b3d]" />
|
||||
<div id="no-drawing-placeholder" class="text-[#5b637a] text-xs">No drawing data submitted by candidate yet.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 4: Saved Video Recordings -->
|
||||
<div id="tab-content-recordings" class="hidden">
|
||||
<div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Saved candidate video sessions (sorted by newest first)</div>
|
||||
<div id="modal-recordings-container" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 min-h-[250px] max-h-[420px] overflow-y-auto">
|
||||
<div class="text-[#5b637a] text-xs text-center pt-10">No video recordings saved for this candidate yet.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 5: Tab-Switch Screenshots -->
|
||||
<div id="tab-content-screenshots" class="hidden">
|
||||
<div class="text-[11.5px] text-[#5b637a] mb-2 font-medium flex justify-between items-center">
|
||||
<span>Candidate tab-switch captured screenshots</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-[#9199ad]">Admin Screenshot Capture:</span>
|
||||
<x-button id="modal-toggle-screenshot-btn" onclick="toggleTabScreenshotCapture()" variant="success" size="sm" icon="fa-solid fa-camera">
|
||||
ENABLED
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="modal-screenshots-container" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 min-h-[250px] max-h-[420px] overflow-y-auto">
|
||||
<div class="text-[#5b637a] text-xs text-center pt-10">No tab-switch screenshots captured for this candidate yet.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right 2 Cols: Audit Log & Chat -->
|
||||
<div class="lg:col-span-2">
|
||||
<h3 class="text-[12.5px] font-semibold text-white mb-2.5 flex items-center gap-2 m-0">
|
||||
Proctoring logs
|
||||
</h3>
|
||||
|
||||
<x-audit-log id="modal-logs-display" :logs="$interview->proctor_logs ?? []" />
|
||||
|
||||
<div class="mt-4">
|
||||
<h3 class="text-[12.5px] font-semibold text-white mb-2.5 flex items-center gap-2 m-0">
|
||||
Live Chat
|
||||
</h3>
|
||||
<x-chat-panel id="interviewer-chat-history" class="mb-2.5" :warnings="$interview->warnings ?? []" :candidateName="$interview->candidate_name" />
|
||||
<div class="flex gap-2">
|
||||
<input type="text" id="warning-input" placeholder="Type message to candidate…" onkeydown="if(event.key==='Enter') sendSilentWarning()" class="flex-1 bg-[#0d1220] border border-[#232b3d] rounded-lg px-3 py-2 text-white text-xs outline-none focus:border-[rgba(75,130,247,0.35)] placeholder-[#5b637a]">
|
||||
<x-button onclick="sendSilentWarning()" variant="primary" icon="fa-solid fa-paper-plane">Send</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-card>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SOS CHEATING ALERT MODAL -->
|
||||
<x-modal id="sos-modal" title="candidate might cheating" maxWidth="lg" onClose="stopSosAlarm">
|
||||
<div id="sos-violation-list" class="bg-[rgba(239,74,95,0.1)] border border-[rgba(239,74,95,0.32)] rounded-lg p-3.5 text-xs text-[#ef4a5f] mb-4 max-h-[180px] overflow-y-auto">
|
||||
Violation details loading...
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<x-button onclick="stopSosAlarm()" variant="secondary" size="md" icon="fa-solid fa-xmark">
|
||||
Close
|
||||
</x-button>
|
||||
<x-button onclick="stopSosAlarm()" variant="danger" size="md" icon="fa-solid fa-bell-slash">
|
||||
Acknowledge & Stop SOS Alarm
|
||||
</x-button>
|
||||
</div>
|
||||
</x-modal>
|
||||
|
||||
<!-- INCOMING CALL RING MODAL -->
|
||||
<x-modal id="incoming-call-modal" maxWidth="md">
|
||||
<div class="text-center p-2">
|
||||
<div class="relative w-[90px] h-[90px] mx-auto mb-5 flex items-center justify-center">
|
||||
<div class="absolute -inset-4 rounded-full border-2 border-[#21c274]/60 animate-ping"></div>
|
||||
<div class="w-20 h-20 rounded-full bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-3xl font-extrabold text-white shadow-xl shadow-[#4b82f7]/50 z-10">
|
||||
<i class="fa-solid fa-phone"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs uppercase tracking-wider text-[#21c274] font-extrabold mb-1">
|
||||
⚡ INCOMING INTERVIEW CALL
|
||||
</div>
|
||||
|
||||
<h3 id="incoming-cand-name" class="font-outfit text-2xl font-extrabold text-white mb-1">
|
||||
{{ $interview->candidate_name }}
|
||||
</h3>
|
||||
|
||||
<div id="incoming-starter-info" class="text-xs text-[#4b82f7] mb-4">
|
||||
Initiated by Panelist
|
||||
</div>
|
||||
|
||||
<div class="bg-white/5 border border-white/10 rounded-xl p-3 text-xs text-slate-300 mb-6 leading-relaxed">
|
||||
Another interviewer has started calling the candidate. Click <strong>Accept Call</strong> to join live, or <strong>Decline</strong> if busy.
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 justify-center">
|
||||
<x-button id="incoming-decline-btn" onclick="declineIncomingCall()" variant="danger" size="md" icon="fa-solid fa-xmark" class="flex-1">
|
||||
Decline / Miss
|
||||
</x-button>
|
||||
<x-button id="incoming-accept-btn" onclick="acceptIncomingCall()" variant="success" size="md" icon="fa-solid fa-phone" class="flex-[1.3] font-extrabold animate-pulse">
|
||||
Accept Call
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</x-modal>
|
||||
|
||||
<!-- Page Initialization Script -->
|
||||
<script>
|
||||
window.currentUserId = {{ Auth::id() }};
|
||||
window.currentUserName = "{{ addslashes(Auth::user()->name) }}";
|
||||
window.currentUserRole = "{{ Auth::user()->is_admin ? 'admin' : 'interviewer' }}";
|
||||
window.csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
openReviewModal(
|
||||
{{ $interview->id }},
|
||||
"{{ addslashes($interview->candidate_name) }}",
|
||||
"{{ $interview->submission_unique_id }}",
|
||||
{{ request('join_call') == '1' ? 'true' : 'false' }}
|
||||
);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -74,6 +74,7 @@
|
||||
// Candidate Assessment Management for HR & Panelists
|
||||
Route::get('/interviews', [InterviewController::class, 'index'])->name('interview.index');
|
||||
Route::get('/interviews/active-calls', [InterviewController::class, 'getActiveCalls'])->name('interview.active-calls');
|
||||
Route::get('/interviews/{id}', [InterviewController::class, 'show'])->name('interview.show');
|
||||
Route::post('/interviews', [InterviewController::class, 'store'])->name('interview.store');
|
||||
Route::post('/interviews/{id}/warning', [InterviewController::class, 'sendWarning'])->name('interview.warning');
|
||||
Route::get('/interviews/{id}/poll', [InterviewController::class, 'getPollData'])->name('interview.poll');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user