1327 lines
72 KiB
PHP
1327 lines
72 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Candidate Live Assessment Portal | 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=Instrument+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<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="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<style>
|
|
:root {
|
|
--bg-color: #0b0f19;
|
|
--card-bg: rgba(15, 23, 42, 0.65);
|
|
--card-border: rgba(255, 255, 255, 0.22);
|
|
--accent-primary: #6366f1;
|
|
--accent-secondary: #0078d4;
|
|
--text-main: #ffffff;
|
|
--text-muted: #d1d5db;
|
|
}
|
|
|
|
/* Scrollbars */
|
|
html, body, *, ::-webkit-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(15, 23, 42, 0.35);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Instrument Sans', sans-serif;
|
|
background-color: var(--bg-color);
|
|
background-image: radial-gradient(circle at 85% 15%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
|
|
radial-gradient(circle at 15% 85%, rgba(0, 120, 212, 0.12) 0%, transparent 45%);
|
|
background-attachment: fixed;
|
|
color: var(--text-main);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Top Navbar */
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 5%;
|
|
background: rgba(10, 15, 26, 0.65);
|
|
border-bottom: 1px solid var(--card-border);
|
|
backdrop-filter: blur(20px);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.btn-nav {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--card-border);
|
|
color: white;
|
|
padding: 8px 16px;
|
|
border-radius: 10px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-nav:hover {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Assessment Card */
|
|
.assessment-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 20px;
|
|
padding: 24px;
|
|
backdrop-filter: blur(16px);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* Users Table */
|
|
.table-responsive {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.users-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: left;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.users-table th {
|
|
padding: 14px 16px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
border-bottom: 1px solid var(--card-border);
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.users-table td {
|
|
padding: 16px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.users-table tr:hover td {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 9999px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.admin-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(11, 15, 25, 0.85);
|
|
backdrop-filter: blur(12px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.admin-modal.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.admin-modal-content {
|
|
background-color: #151b2c;
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 20px;
|
|
width: 90%;
|
|
max-width: 1150px;
|
|
padding: 24px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
|
|
max-height: 92vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 10px;
|
|
color: white;
|
|
font-size: 0.85rem;
|
|
outline: none;
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
@keyframes sosPulse {
|
|
0% { transform: scale(1); box-shadow: 0 0 10px rgba(239,68,68,0.7); }
|
|
100% { transform: scale(1.05); box-shadow: 0 0 25px rgba(239,68,68,1); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header Navbar -->
|
|
<header class="navbar">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<div style="width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #6366f1 0%, #0078d4 100%); display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: 'Outfit', sans-serif;">
|
|
SL
|
|
</div>
|
|
<div>
|
|
<h1 style="font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 700; color: white; margin: 0;">Interview Zone & Assessment Hub</h1>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);">Proctored IDE, Live Workspace Inspector & 2-Way Calls</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 12px;">
|
|
@if(Auth::user()->isAdmin())
|
|
<a href="{{ route('admin.dashboard') }}" class="btn-nav" style="border-color: #818cf8; color: #818cf8;">Control Panel</a>
|
|
@endif
|
|
<a href="{{ route('onboarding.index') }}" class="btn-nav">Onboarding Hub</a>
|
|
<a href="{{ route('dashboard') }}" class="btn-nav">User Portal</a>
|
|
<form action="{{ route('logout') }}" method="POST" id="logout-form" style="display: inline;">
|
|
@csrf
|
|
<button type="button" onclick="interviewerLogoutAction()" class="btn-nav" style="background: rgba(239,68,68,0.2); border-color: #ef4444; color: #fca5a5; font-weight: 600;">
|
|
🚪 Logout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
|
|
<main style="max-width: 1400px; width: 100%; margin: 30px auto; padding: 0 4%; flex: 1;">
|
|
@if(session('success'))
|
|
<div style="margin-bottom: 24px; background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #34d399; padding: 12px 20px; border-radius: 12px; font-size: 0.9rem;">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
|
|
<div>
|
|
<h2 style="font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 700; color: white; margin: 0;">Live Interview Assessments</h2>
|
|
<div style="font-size: 0.8rem; color: var(--text-muted);">Temporary Candidate Access, Real-Time Proctored IDE, and Unique Code Records</div>
|
|
</div>
|
|
|
|
<button onclick="document.getElementById('create-interview-modal').classList.add('active')" class="btn-nav" style="background-color: var(--accent-primary); color: white; border-color: transparent; font-weight: 600; padding: 10px 18px; cursor: pointer;">
|
|
+ Schedule Candidate Interview
|
|
</button>
|
|
</div>
|
|
|
|
<div class="assessment-card">
|
|
<div class="table-responsive">
|
|
<table class="users-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Candidate & Temp Pass</th>
|
|
<th>Unique Submission ID</th>
|
|
<th>Status & Validity</th>
|
|
<th>Language</th>
|
|
<th>Proctoring Alerts</th>
|
|
<th style="text-align: right;">Review & Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($interviews as $inv)
|
|
@php
|
|
$logs = $inv->proctor_logs ?? [];
|
|
$tabSwitches = count(array_filter($logs, fn($l) => ($l['type'] ?? '') === 'tab_switch'));
|
|
$focusLost = count(array_filter($logs, fn($l) => ($l['type'] ?? '') === 'focus_lost'));
|
|
$gazeAlerts = count(array_filter($logs, fn($l) => ($l['type'] ?? '') === 'gaze_anomaly'));
|
|
@endphp
|
|
<tr>
|
|
<td>
|
|
<div style="font-weight: 600; color: white;">{{ $inv->candidate_name }}</div>
|
|
<div style="font-size: 0.75rem; color: #38bdf8;">{{ $inv->candidate_email }}</div>
|
|
<div style="font-size: 0.7rem; color: #fcd34d; margin-top: 2px;">Pass: <code>{{ $inv->temp_password }}</code></div>
|
|
</td>
|
|
<td>
|
|
<span style="font-family: monospace; font-size: 0.75rem; background: rgba(0,0,0,0.3); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--card-border); color: #a7f3d0;">
|
|
{{ $inv->submission_unique_id }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
@if($inv->isExpired())
|
|
<span class="badge" style="background: rgba(239, 68, 68, 0.2); color: #fca5a5;">EXPIRED</span>
|
|
@elseif($inv->status === 'submitted')
|
|
<span class="badge" style="background: rgba(16, 185, 129, 0.2); color: #34d399;">SUBMITTED</span>
|
|
@else
|
|
<span class="badge" style="background: rgba(56, 189, 248, 0.2); color: #38bdf8;">ACTIVE ({{ $inv->expires_at->diffForHumans() }})</span>
|
|
@endif
|
|
</td>
|
|
<td>
|
|
<span class="badge" style="background: rgba(99, 102, 241, 0.2); color: #a5b4fc;">
|
|
{{ strtoupper($inv->language) }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div style="display: flex; flex-direction: column; gap: 2px; font-size: 0.7rem;">
|
|
<span style="color: {{ $tabSwitches > 0 ? '#ef4444' : 'var(--text-muted)' }}; font-weight: {{ $tabSwitches > 0 ? '700' : '400' }};">
|
|
🔴 Tab Switches: {{ $tabSwitches }}
|
|
</span>
|
|
<span style="color: {{ $focusLost > 0 ? '#fbbf24' : 'var(--text-muted)' }};">
|
|
🟡 Focus Loss / Overlay: {{ $focusLost }}
|
|
</span>
|
|
<span style="color: {{ $gazeAlerts > 0 ? '#f43f5e' : 'var(--text-muted)' }};">
|
|
👁️ Eye Gaze Anomaly: {{ $gazeAlerts }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td style="text-align: right; white-space: nowrap;">
|
|
<a href="{{ route('interview.report', $inv->id) }}" target="_blank" class="btn-nav" style="background: rgba(16,185,129,0.15); color: #34d399; border-color: rgba(16,185,129,0.3); font-weight: 600; padding: 6px 10px; margin-right: 4px;">
|
|
📄 Report
|
|
</a>
|
|
|
|
<button onclick="openReviewModal({{ $inv->id }}, '{{ addslashes($inv->candidate_name) }}', '{{ $inv->submission_unique_id }}')" class="btn-nav" style="background: rgba(99,102,241,0.15); color: #818cf8; border-color: rgba(99,102,241,0.3); font-weight: 600; padding: 6px 12px; margin-right: 4px; cursor: pointer;">
|
|
🔍 Review Code & Proctor Logs
|
|
</button>
|
|
|
|
<a href="{{ route('interview.room', $inv->submission_unique_id) }}" target="_blank" class="btn-nav" style="padding: 6px 10px; font-size: 0.75rem;">
|
|
Open IDE Link
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" style="text-align: center; color: var(--text-muted); padding: 30px;">
|
|
No candidate interviews scheduled yet.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Modal: Schedule New Candidate Interview -->
|
|
<div id="create-interview-modal" class="admin-modal">
|
|
<div class="admin-modal-content" style="max-width: 520px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h3 style="font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; color: white;">Schedule Candidate Assessment</h3>
|
|
<button onclick="document.getElementById('create-interview-modal').classList.remove('active')" style="background:none; border:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer;">×</button>
|
|
</div>
|
|
|
|
<form action="{{ route('interview.store') }}" method="POST">
|
|
@csrf
|
|
<div class="form-group">
|
|
<label class="form-label">Candidate Name</label>
|
|
<input type="text" name="candidate_name" required class="form-input" placeholder="e.g. John Doe">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Candidate Email</label>
|
|
<input type="email" name="candidate_email" required class="form-input" placeholder="e.g. john@example.com">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Assessment Programming Language</label>
|
|
<select name="language" class="form-input">
|
|
<option value="python">Python 3</option>
|
|
<option value="cpp">C++ (GCC)</option>
|
|
<option value="c">C (GCC)</option>
|
|
<option value="java">Java 15</option>
|
|
<option value="php">PHP 8.2 / Laravel</option>
|
|
<option value="javascript">JavaScript (Node.js)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Access Duration (Hours)</label>
|
|
<input type="number" name="duration_hours" value="2" min="1" max="24" class="form-input">
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px;">
|
|
<button type="button" onclick="document.getElementById('create-interview-modal').classList.remove('active')" class="btn-nav">Cancel</button>
|
|
<button type="submit" class="btn-nav" style="background: var(--accent-primary); border-color: transparent; font-weight: 600;">Schedule & Generate Pass</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Live Review, 2-Way Video Call, Screen Share, Large IDE Inspector & SOS Alert -->
|
|
<div id="review-modal" class="admin-modal">
|
|
<div class="admin-modal-content" style="max-width: 1150px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px;">
|
|
<div>
|
|
<h3 id="modal-cand-name" style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; color: white; margin: 0;">Review Candidate Session</h3>
|
|
<div id="modal-cand-uid" style="font-size: 0.75rem; color: #38bdf8;"></div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px; align-items: center;">
|
|
<!-- SOS AUTO TRIGGER TOGGLE BUTTON FOR SESSION -->
|
|
<button id="toggle-auto-sos-btn" onclick="toggleAutoSosTrigger()" class="btn-nav" style="background: rgba(239,68,68,0.2); border-color: #ef4444; color: #fca5a5; font-size: 0.75rem; font-weight: 600;">
|
|
🔔 SOS Auto-Trigger: ON
|
|
</button>
|
|
|
|
<!-- PDF REPORT DOWNLOAD LINK -->
|
|
<a id="btn-modal-pdf-report" href="#" target="_blank" class="btn-nav" style="background: rgba(16,185,129,0.2); border-color: #10b981; color: #34d399; font-size: 0.75rem; font-weight: 600; text-decoration: none;">
|
|
📄 Generate PDF Report
|
|
</a>
|
|
|
|
<!-- SOS CHEATING ALERT BUTTON (Flashing Red) -->
|
|
<button id="sos-alert-btn" onclick="openSosModal()" class="btn-nav" style="display: none; background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); color: white; border: none; font-weight: 800; padding: 6px 14px; box-shadow: 0 0 15px rgba(239,68,68,0.7); cursor: pointer; animation: sosPulse 1.2s infinite alternate;">
|
|
🚨 SOS CHEATING DETECTED!
|
|
</button>
|
|
|
|
<!-- REGENERATE CANDIDATE PASSWORD -->
|
|
<button onclick="regenerateCandidatePassword()" class="btn-nav" style="background: rgba(234,179,8,0.15); color: #fde047; border-color: #eab308; font-size: 0.75rem; font-weight: 600;">
|
|
🔑 Password
|
|
</button>
|
|
|
|
<!-- BLOCK CANDIDATE EMAIL & IP -->
|
|
<button onclick="blockCandidateAction()" class="btn-nav" style="background: rgba(239,68,68,0.15); color: #fca5a5; border-color: #ef4444; font-size: 0.75rem; font-weight: 600;">
|
|
⛔ Block
|
|
</button>
|
|
|
|
<button onclick="closeReviewModal()" style="background:none; border:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer;">×</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LIVE 2-WAY VIDEO CALL & SCREEN SHARE PANEL -->
|
|
<div style="background: rgba(15,23,42,0.8); border: 1.5px solid #6366f1; border-radius: 16px; padding: 16px; margin-bottom: 20px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span style="font-size: 1.1rem;">📞</span>
|
|
<strong style="color: white; font-size: 0.95rem;">Real-Time 2-Way Interview Call & Candidate Screen</strong>
|
|
<span id="interviewer-call-status" class="badge" style="background: rgba(99,102,241,0.2); color: #818cf8;">DISCONNECTED</span>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
<button id="btn-start-call" onclick="startInterviewerCall()" class="btn-nav" style="background: #10b981; color: white; border: none; font-weight: 700; padding: 6px 14px; cursor: pointer;">
|
|
📞 Start / Join Call
|
|
</button>
|
|
<button id="btn-leave-call" onclick="leaveInterviewerCall()" class="btn-nav" style="display: none; background: rgba(234,179,8,0.2); border-color: #eab308; color: #fde047; font-size: 0.75rem; font-weight: 600;" title="Leave your individual connection without ending call for others">
|
|
🚪 Leave Call
|
|
</button>
|
|
<button id="btn-end-all-call" onclick="endCallForAll()" class="btn-nav" style="display: none; background: #ef4444; color: white; border: none; font-weight: 700; font-size: 0.75rem; padding: 6px 12px; cursor: pointer;" title="End call for candidate and all panelists">
|
|
🛑 End Call for All
|
|
</button>
|
|
<button id="btn-toggle-interviewer-mic" onclick="toggleInterviewerMic()" class="btn-nav" style="display: none; background: rgba(255,255,255,0.1); font-size: 0.75rem;">
|
|
🎤 Mic On
|
|
</button>
|
|
<button id="btn-toggle-interviewer-cam" onclick="toggleInterviewerCam()" class="btn-nav" style="display: none; background: rgba(255,255,255,0.1); font-size: 0.75rem;">
|
|
📷 Cam On
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video Feeds Grid: Candidate Video, Candidate Screen (with Zoom controls), Panelist Video -->
|
|
<div style="display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; min-height: 220px;">
|
|
<!-- 1. Candidate Camera Stream (with Zoom Controls & Initials Avatar) -->
|
|
<div id="cand-video-wrapper" style="position: relative; background: #050811; border-radius: 12px; border: 1.5px solid var(--card-border); overflow: hidden; height: 220px;">
|
|
<div style="position: absolute; top: 6px; right: 6px; z-index: 20; display: flex; gap: 4px; background: rgba(0,0,0,0.7); padding: 3px 6px; border-radius: 6px; backdrop-filter: blur(4px);">
|
|
<button onclick="zoomCandVideo(0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom In Candidate Video (🔍+)">🔍+</button>
|
|
<button onclick="zoomCandVideo(-0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom Out Candidate Video (🔎-)">🔎-</button>
|
|
<button onclick="zoomCandVideo(0)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Reset Zoom (↺)">↺</button>
|
|
</div>
|
|
|
|
<video id="interviewer-cand-video" autoplay playsinline style="width: 100%; height: 100%; object-fit: cover; transform-origin: center center; transition: transform 0.2s ease;"></video>
|
|
<div id="cand-video-placeholder" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,23,42,0.95); color: #94a3b8; font-size: 0.75rem; z-index: 5;">
|
|
<div id="modal-cand-avatar-circle" style="width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #6366f1 0%, #0078d4 100%); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; font-family: 'Outfit', sans-serif; color: white; margin-bottom: 6px; box-shadow: 0 0 15px rgba(99,102,241,0.4);">
|
|
CD
|
|
</div>
|
|
<div id="cand-avatar-name" style="font-weight: 700; color: white;">Candidate Camera</div>
|
|
<div style="font-size: 0.65rem; color: #38bdf8; margin-top: 2px;">Click 'Start / Join Call' to connect</div>
|
|
</div>
|
|
<div style="position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,0.6); padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; color: #34d399; font-weight: 600; z-index: 10;">
|
|
👤 Candidate Video <span id="cand-vid-zoom-badge" style="color: #38bdf8; font-size: 0.6rem;">(100%)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Candidate Live Shared Screen (with Zoom In / Zoom Out Controls & Fullscreen) -->
|
|
<div id="screen-wrapper" style="position: relative; background: #050811; border-radius: 12px; border: 1.5px solid #38bdf8; overflow: hidden; height: 220px;">
|
|
<div style="position: absolute; top: 6px; right: 6px; z-index: 20; display: flex; gap: 4px; background: rgba(0,0,0,0.7); padding: 3px 6px; border-radius: 6px; backdrop-filter: blur(4px);">
|
|
<button onclick="zoomScreen(0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom In (🔍+)">🔍+</button>
|
|
<button onclick="zoomScreen(-0.25)" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Zoom Out (🔎-)">🔎-</button>
|
|
<button onclick="resetZoomScreen()" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: rgba(255,255,255,0.1);" title="Reset Zoom (↺)">↺</button>
|
|
<button onclick="toggleFullscreenScreen()" class="btn-nav" style="padding: 2px 6px; font-size: 0.7rem; background: #38bdf8; color: black; font-weight: bold;" title="Fullscreen (⛶)">⛶</button>
|
|
</div>
|
|
|
|
<div id="screen-zoom-container" style="width: 100%; height: 100%; overflow: auto;">
|
|
<video id="interviewer-screen-video" autoplay playsinline style="width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; transition: transform 0.2s ease;"></video>
|
|
</div>
|
|
|
|
<div id="screen-video-placeholder" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,23,42,0.95); color: #94a3b8; font-size: 0.75rem; z-index: 5;">
|
|
<div style="font-size: 2rem; margin-bottom: 4px;">🖥️</div>
|
|
<div style="font-weight: 700; color: white;">Candidate Live Screen</div>
|
|
<div style="font-size: 0.65rem; color: #94a3b8; margin-top: 2px;">Waiting for candidate to share screen...</div>
|
|
</div>
|
|
|
|
<div style="position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,0.6); padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; color: #38bdf8; font-weight: 600; z-index: 10;">
|
|
🖥️ Shared Screen <span id="zoom-level-badge" style="color: #a7f3d0; margin-left: 4px;">(100%)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. Interviewer / Panelist Camera Stream -->
|
|
<div style="position: relative; background: #050811; border-radius: 12px; border: 1.5px solid var(--card-border); overflow: hidden; height: 220px;">
|
|
<video id="interviewer-self-video" autoplay muted playsinline style="width: 100%; height: 100%; object-fit: cover;"></video>
|
|
<div id="self-video-placeholder" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,23,42,0.95); color: #94a3b8; font-size: 0.75rem; z-index: 5;">
|
|
@php
|
|
$usrWords = preg_split('/\s+/', trim(Auth::user()->name));
|
|
if (count($usrWords) >= 2) {
|
|
$usrInitials = strtoupper(substr($usrWords[0], 0, 1) . substr(end($usrWords), 0, 1));
|
|
} else {
|
|
$uStr = trim(Auth::user()->name);
|
|
$usrInitials = strtoupper(substr($uStr, 0, 1) . (strlen($uStr) > 1 ? substr($uStr, -1) : ''));
|
|
}
|
|
@endphp
|
|
<div style="width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; font-family: 'Outfit', sans-serif; color: white; margin-bottom: 6px; box-shadow: 0 0 15px rgba(16,185,129,0.4);">
|
|
{{ $usrInitials }}
|
|
</div>
|
|
<div style="font-weight: 700; color: white;">{{ Auth::user()->name }}</div>
|
|
<div style="font-size: 0.65rem; color: #34d399; margin-top: 2px;">Panelist (Self)</div>
|
|
</div>
|
|
<div style="position: absolute; bottom: 6px; left: 6px; background: rgba(99,102,241,0.8); padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; color: white; font-weight: 600; z-index: 10;">
|
|
🎤 Panelist Self
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CANDIDATE LIVE IDE & WORKSPACE INSPECTOR -->
|
|
<div style="background: rgba(15,23,42,0.8); border: 1.5px solid var(--card-border); border-radius: 16px; padding: 16px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span style="font-size: 1.1rem;">💻</span>
|
|
<strong style="color: white; font-size: 0.95rem;">Candidate Live IDE & Workspace Inspector</strong>
|
|
<span id="modal-lang-badge" class="badge" style="background: rgba(99,102,241,0.2); color: #a5b4fc;">UNKNOWN</span>
|
|
<span style="font-size: 0.75rem; color: #34d399; font-weight: 500;">• Live Synced</span>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 6px;">
|
|
<button onclick="switchInspectorTab('code')" id="tab-btn-code" class="btn-nav" style="background: #6366f1; border-color: transparent;">💻 Live IDE Code</button>
|
|
<button onclick="switchInspectorTab('notes')" id="tab-btn-notes" class="btn-nav">📝 Candidate Notepad</button>
|
|
<button onclick="switchInspectorTab('drawing')" id="tab-btn-drawing" class="btn-nav">🎨 Candidate Drawing</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 16px; min-height: 280px;">
|
|
<!-- Left Column: Code, Output, Notes & Canvas Tabs -->
|
|
<div>
|
|
<!-- Tab 1: Live Code & Stdout -->
|
|
<div id="tab-content-code">
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Current Code Typed by Candidate:</div>
|
|
<pre id="modal-code-display" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 14px; font-family: monospace; font-size: 0.85rem; color: #a7f3d0; min-height: 160px; max-height: 240px; overflow-y: auto; white-space: pre-wrap; margin-bottom: 10px;"></pre>
|
|
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 4px; font-weight: 600;">Execution Output (Stdout/Stderr):</div>
|
|
<pre id="modal-output-display" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; font-family: monospace; font-size: 0.75rem; color: #cbd5e1; max-height: 100px; overflow-y: auto; white-space: pre-wrap; margin: 0;"></pre>
|
|
</div>
|
|
|
|
<!-- Tab 2: Candidate Live Notepad Notes -->
|
|
<div id="tab-content-notes" style="display: none;">
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Candidate Live Notepad Notes (Auto-Synced):</div>
|
|
<pre id="modal-notes-display" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 16px; font-family: monospace; font-size: 0.85rem; color: #e2e8f0; min-height: 250px; max-height: 350px; overflow-y: auto; white-space: pre-wrap;"></pre>
|
|
</div>
|
|
|
|
<!-- Tab 3: Candidate Canvas Drawing Image -->
|
|
<div id="tab-content-drawing" style="display: none;">
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Candidate Live Drawing / Architecture Diagram:</div>
|
|
<div style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; display: flex; justify-content: center; align-items: center; min-height: 250px;">
|
|
<img id="modal-drawing-img" src="" alt="Candidate Drawing Board" style="max-width: 100%; max-height: 320px; display: none; border-radius: 8px; border: 1px dashed rgba(255,255,255,0.2);" />
|
|
<div id="no-drawing-placeholder" style="color: #94a3b8; font-size: 0.8rem;">No drawing data submitted by candidate yet.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Proctoring Audit & 2-Way Real-Time Chat -->
|
|
<div>
|
|
<span style="font-size: 0.8rem; font-weight: 600; color: white;">Proctoring Audit:</span>
|
|
<div id="modal-logs-display" style="background: rgba(0,0,0,0.4); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; max-height: 140px; overflow-y: auto; margin-bottom: 12px; font-size: 0.7rem; color: var(--text-muted);">
|
|
No violations recorded.
|
|
</div>
|
|
|
|
<!-- 2-Way Real-Time Chat Container with Candidate -->
|
|
<div style="background: rgba(15,23,42,0.8); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px;">
|
|
<div style="font-size: 0.75rem; color: #38bdf8; font-weight: 700; margin-bottom: 6px;">💬 2-Way Live Chat with Candidate:</div>
|
|
<div id="interviewer-chat-history" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; height: 150px; overflow-y: auto; font-size: 0.75rem; margin-bottom: 8px;">
|
|
<div style="color: #94a3b8; font-style: italic; text-align: center; padding-top: 50px;">No messages sent yet.</div>
|
|
</div>
|
|
<div style="display: flex; gap: 6px;">
|
|
<input type="text" id="warning-input" placeholder="Type message to candidate and press Enter..." class="form-input" style="font-size: 0.75rem; flex: 1;" onkeypress="if(event.key==='Enter') sendSilentWarning()">
|
|
<button onclick="sendSilentWarning()" class="btn-nav" style="background: #6366f1; color: white; border: none; font-size: 0.75rem; font-weight: 600; padding: 6px 12px; cursor: pointer;">
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: flex-end; margin-top: 16px;">
|
|
<button type="button" onclick="closeReviewModal()" class="btn-nav">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SOS CHEATING ALERT MODAL (FOR INTERVIEWER ONLY) -->
|
|
<div id="sos-modal" class="admin-modal">
|
|
<div class="admin-modal-content" style="max-width: 500px; border: 2px solid #ef4444; background: #1a0505;">
|
|
<div style="text-align: center; margin-bottom: 16px;">
|
|
<div style="font-size: 3rem; margin-bottom: 6px;">🚨</div>
|
|
<h3 style="font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 800; color: #ef4444;">SUSPICIOUS CHEATING DETECTED</h3>
|
|
<div style="font-size: 0.8rem; color: #fca5a5; margin-top: 4px;">Candidate proctoring engine has flagged unusual activities.</div>
|
|
</div>
|
|
|
|
<div style="background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); border-radius: 12px; padding: 14px; margin-bottom: 20px;">
|
|
<div style="font-weight: 700; color: white; font-size: 0.85rem; margin-bottom: 6px;">Flagged Integrity Violations:</div>
|
|
<div id="sos-violation-list" style="font-size: 0.8rem; color: #fca5a5; line-height: 1.5;"></div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 10px; justify-content: center;">
|
|
<button onclick="stopSosAlarm()" class="btn-nav" style="background: #ef4444; color: white; border: none; font-weight: 700; padding: 10px 20px;">
|
|
🔕 Acknowledge & Stop Alarm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentInterviewId = null;
|
|
let pollTimer = null;
|
|
let activeViolations = [];
|
|
let acknowledgedViolationCount = 0;
|
|
let sosDismissed = false;
|
|
let autoSosEnabled = true;
|
|
|
|
let interviewerLocalStream = null;
|
|
let interviewerPeer = null;
|
|
let activeCall = null;
|
|
let isInterviewerMicOn = true;
|
|
let isInterviewerCamOn = true;
|
|
let screenReceiverPeer = null;
|
|
let candVidZoomLevel = 1.0;
|
|
let screenZoomLevel = 1.0;
|
|
|
|
function toggleAutoSosTrigger() {
|
|
autoSosEnabled = !autoSosEnabled;
|
|
const btn = document.getElementById('toggle-auto-sos-btn');
|
|
if (btn) {
|
|
btn.innerText = autoSosEnabled ? '🔔 SOS Auto-Trigger: ON' : '🔕 SOS Auto-Trigger: OFF';
|
|
btn.style.background = autoSosEnabled ? 'rgba(239,68,68,0.2)' : 'rgba(71,85,105,0.4)';
|
|
btn.style.borderColor = autoSosEnabled ? '#ef4444' : '#64748b';
|
|
btn.style.color = autoSosEnabled ? '#fca5a5' : '#94a3b8';
|
|
}
|
|
}
|
|
|
|
function openReviewModal(id, candName, candUid) {
|
|
currentInterviewId = id;
|
|
acknowledgedViolationCount = 0;
|
|
sosDismissed = false;
|
|
autoSosEnabled = true;
|
|
|
|
const autoBtn = document.getElementById('toggle-auto-sos-btn');
|
|
if (autoBtn) {
|
|
autoBtn.innerText = '🔔 SOS Auto-Trigger: ON';
|
|
autoBtn.style.background = 'rgba(239,68,68,0.2)';
|
|
autoBtn.style.borderColor = '#ef4444';
|
|
autoBtn.style.color = '#fca5a5';
|
|
}
|
|
|
|
document.getElementById('modal-cand-name').innerText = 'Reviewing Session: ' + candName;
|
|
document.getElementById('modal-cand-uid').innerText = 'Submission Unique ID: ' + candUid;
|
|
|
|
const pdfBtn = document.getElementById('btn-modal-pdf-report');
|
|
if (pdfBtn) {
|
|
pdfBtn.href = `{{ route('interview.report', ':id') }}`.replace(':id', id);
|
|
}
|
|
|
|
const words = candName.trim().split(/\s+/);
|
|
let initials = 'CD';
|
|
if (words.length >= 2) {
|
|
initials = (words[0][0] + words[words.length - 1][0]).toUpperCase();
|
|
} else if (candName.length > 0) {
|
|
initials = candName.substr(0, 2).toUpperCase();
|
|
}
|
|
document.getElementById('modal-cand-avatar-circle').innerText = initials;
|
|
document.getElementById('cand-avatar-name').innerText = candName + ' (Camera)';
|
|
|
|
switchInspectorTab('code');
|
|
document.getElementById('review-modal').classList.add('active');
|
|
|
|
initInterviewerPeer();
|
|
pollReviewData();
|
|
if (pollTimer) clearInterval(pollTimer);
|
|
pollTimer = setInterval(pollReviewData, 1500);
|
|
}
|
|
|
|
function closeReviewModal() {
|
|
document.getElementById('review-modal').classList.remove('active');
|
|
if (pollTimer) clearInterval(pollTimer);
|
|
leaveInterviewerCall();
|
|
}
|
|
|
|
function switchInspectorTab(tab) {
|
|
document.getElementById('tab-content-code').style.display = tab === 'code' ? 'block' : 'none';
|
|
document.getElementById('tab-content-notes').style.display = tab === 'notes' ? 'block' : 'none';
|
|
document.getElementById('tab-content-drawing').style.display = tab === 'drawing' ? 'block' : 'none';
|
|
|
|
document.getElementById('tab-btn-code').style.background = tab === 'code' ? '#6366f1' : 'rgba(255,255,255,0.05)';
|
|
document.getElementById('tab-btn-notes').style.background = tab === 'notes' ? '#6366f1' : 'rgba(255,255,255,0.05)';
|
|
document.getElementById('tab-btn-drawing').style.background = tab === 'drawing' ? '#6366f1' : 'rgba(255,255,255,0.05)';
|
|
}
|
|
|
|
function pollReviewData() {
|
|
if (!currentInterviewId) return;
|
|
|
|
fetch(`{{ route('interview.poll', ':id') }}`.replace(':id', currentInterviewId))
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
document.getElementById('modal-lang-badge').innerText = (data.submitted_language || 'UNKNOWN').toUpperCase();
|
|
document.getElementById('modal-code-display').innerText = data.submitted_code || '// Candidate has not typed any code yet.';
|
|
document.getElementById('modal-output-display').innerText = data.code_output || 'No execution output.';
|
|
document.getElementById('modal-notes-display').innerText = data.candidate_notes || 'No candidate notes written yet.';
|
|
|
|
const drawingImg = document.getElementById('modal-drawing-img');
|
|
const noDrawing = document.getElementById('no-drawing-placeholder');
|
|
if (data.candidate_drawing) {
|
|
drawingImg.src = data.candidate_drawing;
|
|
drawingImg.style.display = 'block';
|
|
noDrawing.style.display = 'none';
|
|
} else {
|
|
drawingImg.style.display = 'none';
|
|
noDrawing.style.display = 'block';
|
|
}
|
|
|
|
// Render 2-Way Chat History
|
|
const chatHistory = document.getElementById('interviewer-chat-history');
|
|
if (chatHistory && data.warnings) {
|
|
let chatHtml = '';
|
|
if (data.warnings.length > 0) {
|
|
data.warnings.forEach(w => {
|
|
const isInterviewer = w.sent_by !== null;
|
|
const senderName = isInterviewer ? (w.sender ? w.sender.name : 'You (Interviewer)') : 'Candidate';
|
|
const badgeColor = isInterviewer ? '#6366f1' : '#38bdf8';
|
|
const bgColor = isInterviewer ? 'rgba(99,102,241,0.1)' : 'rgba(56,189,248,0.1)';
|
|
|
|
chatHtml += `<div style="margin-bottom:8px; background:${bgColor}; padding:8px 10px; border-radius:8px; border-left:3px solid ${badgeColor};">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
|
<strong style="color:${badgeColor}; font-size:0.75rem;">${senderName}</strong>
|
|
<span style="font-size:0.65rem; color:#94a3b8;">${new Date(w.created_at || Date.now()).toLocaleTimeString()}</span>
|
|
</div>
|
|
<div style="color: #ffffff !important; font-size:0.85rem; font-weight: 600; line-height:1.4; word-break: break-word;">${w.message}</div>
|
|
</div>`;
|
|
});
|
|
chatHistory.innerHTML = chatHtml;
|
|
chatHistory.scrollTop = chatHistory.scrollHeight;
|
|
}
|
|
}
|
|
|
|
// React to Global Call Status
|
|
const callStatusBadge = document.getElementById('interviewer-call-status');
|
|
if (callStatusBadge && data.call_status) {
|
|
if (data.call_status === 'active' && !interviewerLocalStream) {
|
|
callStatusBadge.innerText = 'CALL ACTIVE';
|
|
callStatusBadge.style.background = 'rgba(16,185,129,0.2)';
|
|
callStatusBadge.style.color = '#34d399';
|
|
document.getElementById('btn-start-call').innerText = '📞 Join Call';
|
|
document.getElementById('btn-start-call').style.background = '#6366f1';
|
|
document.getElementById('btn-start-call').style.display = 'inline-block';
|
|
} else if (data.call_status === 'ended') {
|
|
if (interviewerLocalStream) leaveInterviewerCall();
|
|
callStatusBadge.innerText = 'CALL ENDED';
|
|
callStatusBadge.style.background = 'rgba(239,68,68,0.2)';
|
|
callStatusBadge.style.color = '#fca5a5';
|
|
document.getElementById('btn-start-call').innerText = '📞 Restart Call';
|
|
document.getElementById('btn-start-call').style.background = '#10b981';
|
|
document.getElementById('btn-start-call').style.display = 'inline-block';
|
|
}
|
|
}
|
|
|
|
let logsHtml = '';
|
|
let currentViolations = [];
|
|
|
|
if (data.proctor_logs && data.proctor_logs.length > 0) {
|
|
data.proctor_logs.forEach(l => {
|
|
let icon = '🔴';
|
|
if (l.type === 'focus_lost') icon = '🟡';
|
|
if (l.type === 'gaze_anomaly') icon = '👁️';
|
|
if (l.type === 'paste_event' || l.type === 'tab_switch' || l.type === 'focus_lost' || l.type === 'gaze_anomaly') {
|
|
currentViolations.push(l);
|
|
}
|
|
logsHtml += `<div style="margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.05); padding-bottom:4px;">
|
|
<strong>${icon} ${l.type.toUpperCase()}:</strong> ${l.details || ''}
|
|
<div style="font-size:0.65rem; color:#94a3b8;">${new Date(l.timestamp).toLocaleTimeString()}</div>
|
|
</div>`;
|
|
});
|
|
} else {
|
|
logsHtml = '<div style="color:#34d399;">✅ Zero proctoring violations recorded.</div>';
|
|
}
|
|
document.getElementById('modal-logs-display').innerHTML = logsHtml;
|
|
|
|
activeViolations = currentViolations;
|
|
const totalViolations = currentViolations.length;
|
|
const sosBtn = document.getElementById('sos-alert-btn');
|
|
|
|
if (totalViolations > 0) {
|
|
sosBtn.style.display = 'inline-block';
|
|
|
|
// AUTOMATIC SOS TRIGGER & RE-ARMING (IF AUTO-SOS IS ENABLED)
|
|
if (autoSosEnabled && totalViolations > acknowledgedViolationCount) {
|
|
sosDismissed = false;
|
|
sosBtn.style.animation = 'sosPulse 1.2s infinite alternate';
|
|
sosBtn.innerText = '🚨 SOS CHEATING DETECTED!';
|
|
sosBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)';
|
|
openSosModal();
|
|
}
|
|
} else {
|
|
sosBtn.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
function openSosModal() {
|
|
let html = '';
|
|
if (activeViolations.length > 0) {
|
|
activeViolations.forEach(v => {
|
|
let desc = v.details || v.type;
|
|
html += `• <strong>${v.type.toUpperCase()}</strong>: ${desc}<br>`;
|
|
});
|
|
} else {
|
|
html = '<div>Potential proctoring alert flagged by engine.</div>';
|
|
}
|
|
document.getElementById('sos-violation-list').innerHTML = html;
|
|
document.getElementById('sos-modal').classList.add('active');
|
|
}
|
|
|
|
function stopSosAlarm() {
|
|
document.getElementById('sos-modal').classList.remove('active');
|
|
acknowledgedViolationCount = activeViolations.length;
|
|
sosDismissed = true;
|
|
|
|
const sosBtn = document.getElementById('sos-alert-btn');
|
|
if (sosBtn) {
|
|
sosBtn.style.animation = 'none';
|
|
sosBtn.innerText = '✅ SOS Muted (Auto-rearm active)';
|
|
sosBtn.style.background = '#475569';
|
|
}
|
|
}
|
|
|
|
function sendSilentWarning() {
|
|
if (!currentInterviewId) return;
|
|
const input = document.getElementById('warning-input');
|
|
const msg = input.value.trim();
|
|
if (!msg) return;
|
|
|
|
fetch(`{{ route('interview.warning', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ message: msg })
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
input.value = '';
|
|
pollReviewData();
|
|
});
|
|
}
|
|
|
|
function interviewerLogoutAction() {
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
title: 'Logout of Portal?',
|
|
text: 'Are you sure you want to log out of your session?',
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
cancelButtonColor: '#475569',
|
|
confirmButtonText: 'Yes, Logout'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
document.getElementById('logout-form').submit();
|
|
}
|
|
});
|
|
} else {
|
|
document.getElementById('logout-form').submit();
|
|
}
|
|
}
|
|
|
|
function regenerateCandidatePassword() {
|
|
if (!currentInterviewId) return;
|
|
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
title: 'Regenerate Candidate Password?',
|
|
text: 'This will invalidate the candidate\'s current password and issue a new system password.',
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#eab308',
|
|
cancelButtonColor: '#475569',
|
|
confirmButtonText: 'Regenerate Now'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
fetch(`{{ route('interview.regenerate-password', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'New Password Generated!',
|
|
text: 'New Candidate Passcode: ' + res.new_password,
|
|
confirmButtonColor: '#6366f1'
|
|
}).then(() => location.reload());
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function blockCandidateAction() {
|
|
if (!currentInterviewId) return;
|
|
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
title: '⛔ Block Candidate Email & IP?',
|
|
text: 'This will immediately terminate the candidate session and block their email and client IP address.',
|
|
icon: 'error',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
cancelButtonColor: '#475569',
|
|
confirmButtonText: 'Yes, Block Candidate'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
fetch(`{{ route('interview.block-candidate', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Candidate Blocked',
|
|
text: res.message,
|
|
confirmButtonColor: '#6366f1'
|
|
}).then(() => {
|
|
closeReviewModal();
|
|
location.reload();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function initInterviewerPeer() {
|
|
if (!currentInterviewId || typeof Peer === 'undefined') return;
|
|
|
|
const peerId = 'interviewer_' + currentInterviewId;
|
|
interviewerPeer = new Peer(peerId);
|
|
|
|
interviewerPeer.on('open', id => {
|
|
console.log('Interviewer WebRTC Peer Registered:', id);
|
|
});
|
|
|
|
// Listen for candidate screen share peer stream with STUN iceServers
|
|
const screenPeerId = 'interviewer_screen_' + currentInterviewId;
|
|
screenReceiverPeer = new Peer(screenPeerId, {
|
|
config: {
|
|
iceServers: [
|
|
{ urls: 'stun:stun.l.google.com:19302' },
|
|
{ urls: 'stun:stun1.l.google.com:19302' },
|
|
{ urls: 'stun:stun2.l.google.com:19302' }
|
|
]
|
|
}
|
|
});
|
|
screenReceiverPeer.on('call', call => {
|
|
call.answer();
|
|
call.on('stream', screenStream => {
|
|
const screenVid = document.getElementById('interviewer-screen-video');
|
|
const placeholder = document.getElementById('screen-video-placeholder');
|
|
if (screenVid) screenVid.srcObject = screenStream;
|
|
if (placeholder) placeholder.style.display = 'none';
|
|
});
|
|
});
|
|
}
|
|
|
|
function zoomCandVideo(delta) {
|
|
if (delta === 0) candVidZoomLevel = 1.0;
|
|
else candVidZoomLevel = Math.max(0.5, Math.min(3.0, candVidZoomLevel + delta));
|
|
const vid = document.getElementById('interviewer-cand-video');
|
|
if (vid) {
|
|
vid.style.transform = `scale(${candVidZoomLevel})`;
|
|
vid.style.transformOrigin = 'center center';
|
|
vid.style.transition = 'transform 0.2s ease';
|
|
}
|
|
const badge = document.getElementById('cand-vid-zoom-badge');
|
|
if (badge) badge.innerText = `(${Math.round(candVidZoomLevel * 100)}%)`;
|
|
}
|
|
|
|
function zoomScreen(delta) {
|
|
screenZoomLevel = Math.max(0.5, Math.min(3.0, screenZoomLevel + delta));
|
|
applyScreenZoom();
|
|
}
|
|
|
|
function resetZoomScreen() {
|
|
screenZoomLevel = 1.0;
|
|
applyScreenZoom();
|
|
}
|
|
|
|
function applyScreenZoom() {
|
|
const vid = document.getElementById('interviewer-screen-video');
|
|
if (vid) {
|
|
vid.style.transform = `scale(${screenZoomLevel})`;
|
|
}
|
|
const badge = document.getElementById('zoom-level-badge');
|
|
if (badge) badge.innerText = `(${Math.round(screenZoomLevel * 100)}%)`;
|
|
}
|
|
|
|
function toggleFullscreenScreen() {
|
|
const elem = document.getElementById('screen-wrapper');
|
|
if (!document.fullscreenElement) {
|
|
if (elem.requestFullscreen) elem.requestFullscreen();
|
|
else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen();
|
|
} else {
|
|
if (document.exitFullscreen) document.exitFullscreen();
|
|
}
|
|
}
|
|
|
|
let interviewerPeerConnection = null;
|
|
let interviewerSigChannel = null;
|
|
|
|
function initInterviewerSigChannel() {
|
|
if (!currentInterviewId) return;
|
|
if (interviewerSigChannel) interviewerSigChannel.close();
|
|
|
|
interviewerSigChannel = new BroadcastChannel('webrtc_call_' + currentInterviewId);
|
|
|
|
interviewerSigChannel.onmessage = async (event) => {
|
|
const msg = event.data;
|
|
if (!msg) return;
|
|
|
|
if ((msg.type === 'offer' || msg.type === 'candidate_ready') && msg.sender === 'candidate') {
|
|
if (msg.offer) {
|
|
await handleCandidateOffer(msg.offer);
|
|
} else if (interviewerLocalStream) {
|
|
sendOfferToCandidate();
|
|
}
|
|
} else if (msg.type === 'answer' && msg.sender === 'candidate' && interviewerPeerConnection) {
|
|
await interviewerPeerConnection.setRemoteDescription(new RTCSessionDescription(msg.answer));
|
|
} else if (msg.type === 'ice-candidate' && msg.sender === 'candidate' && interviewerPeerConnection && msg.candidate) {
|
|
try {
|
|
await interviewerPeerConnection.addIceCandidate(new RTCIceCandidate(msg.candidate));
|
|
} catch(e) {}
|
|
}
|
|
};
|
|
}
|
|
|
|
async function createInterviewerPeerConnection() {
|
|
if (interviewerPeerConnection) return interviewerPeerConnection;
|
|
|
|
interviewerPeerConnection = new RTCPeerConnection({
|
|
iceServers: [
|
|
{ urls: 'stun:stun.l.google.com:19302' },
|
|
{ urls: 'stun:stun1.l.google.com:19302' },
|
|
{ urls: 'stun:stun2.l.google.com:19302' }
|
|
]
|
|
});
|
|
|
|
if (interviewerLocalStream) {
|
|
interviewerLocalStream.getTracks().forEach(track => {
|
|
interviewerPeerConnection.addTrack(track, interviewerLocalStream);
|
|
});
|
|
}
|
|
|
|
interviewerPeerConnection.ontrack = (event) => {
|
|
const candVid = document.getElementById('interviewer-cand-video');
|
|
const placeholder = document.getElementById('cand-video-placeholder');
|
|
if (candVid && event.streams[0]) {
|
|
candVid.srcObject = event.streams[0];
|
|
candVid.play().catch(e => console.log(e));
|
|
}
|
|
if (placeholder) placeholder.style.display = 'none';
|
|
|
|
document.getElementById('interviewer-call-status').innerText = 'CONNECTED (LIVE)';
|
|
document.getElementById('interviewer-call-status').style.background = 'rgba(16,185,129,0.3)';
|
|
document.getElementById('interviewer-call-status').style.color = '#34d399';
|
|
};
|
|
|
|
interviewerPeerConnection.onicecandidate = (event) => {
|
|
if (event.candidate) {
|
|
interviewerSigChannel.postMessage({ type: 'ice-candidate', candidate: event.candidate, sender: 'interviewer' });
|
|
}
|
|
};
|
|
|
|
return interviewerPeerConnection;
|
|
}
|
|
|
|
async function sendOfferToCandidate() {
|
|
const pc = await createInterviewerPeerConnection();
|
|
const offer = await pc.createOffer();
|
|
await pc.setLocalDescription(offer);
|
|
interviewerSigChannel.postMessage({ type: 'offer', offer: offer, sender: 'interviewer' });
|
|
}
|
|
|
|
async function handleCandidateOffer(offer) {
|
|
const pc = await createInterviewerPeerConnection();
|
|
await pc.setRemoteDescription(new RTCSessionDescription(offer));
|
|
const answer = await pc.createAnswer();
|
|
await pc.setLocalDescription(answer);
|
|
interviewerSigChannel.postMessage({ type: 'answer', answer: answer, sender: 'interviewer' });
|
|
}
|
|
|
|
function startInterviewerCall() {
|
|
if (!currentInterviewId) return;
|
|
|
|
initInterviewerSigChannel();
|
|
|
|
// Notify backend that call session is active
|
|
fetch(`{{ route('interview.call-status', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ call_status: 'active' })
|
|
});
|
|
|
|
const handleStream = (stream) => {
|
|
interviewerLocalStream = stream;
|
|
const selfVid = document.getElementById('interviewer-self-video');
|
|
if (selfVid) {
|
|
selfVid.muted = true;
|
|
selfVid.srcObject = stream;
|
|
selfVid.play().catch(e => console.log(e));
|
|
}
|
|
document.getElementById('self-video-placeholder').style.display = 'none';
|
|
|
|
document.getElementById('btn-toggle-interviewer-mic').style.display = 'inline-block';
|
|
document.getElementById('btn-toggle-interviewer-cam').style.display = 'inline-block';
|
|
document.getElementById('btn-start-call').style.display = 'none';
|
|
document.getElementById('btn-leave-call').style.display = 'inline-block';
|
|
document.getElementById('btn-end-all-call').style.display = 'inline-block';
|
|
|
|
// Broadcast interviewer joined to candidate
|
|
if (interviewerSigChannel) {
|
|
interviewerSigChannel.postMessage({ type: 'interviewer_joined', sender: 'interviewer' });
|
|
}
|
|
|
|
// PeerJS fallback
|
|
const panelistPeerId = 'interviewer_' + currentInterviewId + '_' + Math.floor(Math.random() * 10000);
|
|
if (interviewerPeer) {
|
|
try { interviewerPeer.destroy(); } catch(e) {}
|
|
}
|
|
|
|
interviewerPeer = new Peer(panelistPeerId, {
|
|
config: {
|
|
iceServers: [
|
|
{ urls: 'stun:stun.l.google.com:19302' },
|
|
{ urls: 'stun:stun1.l.google.com:19302' },
|
|
{ urls: 'stun:stun2.l.google.com:19302' }
|
|
]
|
|
}
|
|
});
|
|
|
|
interviewerPeer.on('open', () => {
|
|
const candPeerId = 'cand_' + currentInterviewId;
|
|
activeCall = interviewerPeer.call(candPeerId, stream);
|
|
|
|
if (activeCall) {
|
|
activeCall.on('stream', candRemoteStream => {
|
|
const candVid = document.getElementById('interviewer-cand-video');
|
|
const placeholder = document.getElementById('cand-video-placeholder');
|
|
if (candVid) {
|
|
candVid.srcObject = candRemoteStream;
|
|
candVid.play().catch(e => console.log(e));
|
|
}
|
|
if (placeholder) placeholder.style.display = 'none';
|
|
|
|
document.getElementById('interviewer-call-status').innerText = 'CONNECTED (LIVE)';
|
|
document.getElementById('interviewer-call-status').style.background = 'rgba(16,185,129,0.3)';
|
|
document.getElementById('interviewer-call-status').style.color = '#34d399';
|
|
});
|
|
|
|
activeCall.on('close', () => {
|
|
leaveInterviewerCall();
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// Non-blocking camera/mic permissions fallback
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
|
|
.then(handleStream)
|
|
.catch(() => {
|
|
navigator.mediaDevices.getUserMedia({ video: false, audio: true })
|
|
.then(handleStream)
|
|
.catch(() => {
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
|
|
.then(handleStream)
|
|
.catch(() => {
|
|
handleStream(new MediaStream());
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function leaveInterviewerCall() {
|
|
if (interviewerLocalStream) {
|
|
interviewerLocalStream.getTracks().forEach(t => t.stop());
|
|
interviewerLocalStream = null;
|
|
}
|
|
if (activeCall) {
|
|
activeCall.close();
|
|
activeCall = null;
|
|
}
|
|
|
|
document.getElementById('cand-video-placeholder').style.display = 'flex';
|
|
document.getElementById('self-video-placeholder').style.display = 'flex';
|
|
|
|
document.getElementById('btn-start-call').innerText = '📞 Join Call';
|
|
document.getElementById('btn-start-call').style.display = 'inline-block';
|
|
document.getElementById('btn-start-call').style.background = '#6366f1';
|
|
document.getElementById('btn-leave-call').style.display = 'none';
|
|
document.getElementById('btn-end-all-call').style.display = 'none';
|
|
|
|
document.getElementById('btn-toggle-interviewer-mic').style.display = 'none';
|
|
document.getElementById('btn-toggle-interviewer-cam').style.display = 'none';
|
|
|
|
document.getElementById('interviewer-call-status').innerText = 'LEFT CALL';
|
|
document.getElementById('interviewer-call-status').style.background = 'rgba(234,179,8,0.2)';
|
|
document.getElementById('interviewer-call-status').style.color = '#fde047';
|
|
}
|
|
|
|
function endCallForAll() {
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
title: '🛑 End Call for All Participants?',
|
|
text: 'This will terminate the 2-way call session for the candidate and all panelists.',
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
cancelButtonColor: '#475569',
|
|
confirmButtonText: 'Yes, End Call for All'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
if (currentInterviewId) {
|
|
fetch(`{{ route('interview.call-status', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ call_status: 'ended' })
|
|
});
|
|
}
|
|
|
|
leaveInterviewerCall();
|
|
document.getElementById('interviewer-call-status').innerText = 'CALL ENDED FOR ALL';
|
|
document.getElementById('interviewer-call-status').style.background = 'rgba(239,68,68,0.2)';
|
|
document.getElementById('interviewer-call-status').style.color = '#fca5a5';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function toggleInterviewerMic() {
|
|
if (!interviewerLocalStream) return;
|
|
const audioTracks = interviewerLocalStream.getAudioTracks();
|
|
if (audioTracks.length > 0) {
|
|
isInterviewerMicOn = !isInterviewerMicOn;
|
|
audioTracks[0].enabled = isInterviewerMicOn;
|
|
const btn = document.getElementById('btn-toggle-interviewer-mic');
|
|
btn.innerText = isInterviewerMicOn ? '🎤 Mic On' : '🔇 Mic Muted';
|
|
btn.style.background = isInterviewerMicOn ? 'rgba(255,255,255,0.1)' : 'rgba(239,68,68,0.3)';
|
|
}
|
|
}
|
|
|
|
function toggleInterviewerCam() {
|
|
const selfPlaceholder = document.getElementById('self-video-placeholder');
|
|
const selfVid = document.getElementById('interviewer-self-video');
|
|
|
|
isInterviewerCamOn = !isInterviewerCamOn;
|
|
const btn = document.getElementById('btn-toggle-interviewer-cam');
|
|
btn.innerText = isInterviewerCamOn ? '📷 Cam On' : '🚫 Cam Off';
|
|
btn.style.background = isInterviewerCamOn ? 'rgba(255,255,255,0.1)' : 'rgba(239,68,68,0.3)';
|
|
|
|
if (interviewerLocalStream) {
|
|
const videoTracks = interviewerLocalStream.getVideoTracks();
|
|
if (videoTracks.length > 0) {
|
|
videoTracks[0].enabled = isInterviewerCamOn;
|
|
}
|
|
} else if (isInterviewerCamOn) {
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
|
|
.then(stream => {
|
|
interviewerLocalStream = stream;
|
|
if (selfVid) {
|
|
selfVid.muted = true;
|
|
selfVid.srcObject = stream;
|
|
selfVid.play().catch(e => console.log(e));
|
|
}
|
|
if (selfPlaceholder) selfPlaceholder.style.display = 'none';
|
|
})
|
|
.catch(err => console.log('Interviewer cam preview:', err));
|
|
return;
|
|
}
|
|
if (selfPlaceholder) selfPlaceholder.style.display = isInterviewerCamOn ? 'none' : 'flex';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|