1575 lines
89 KiB
PHP
1575 lines
89 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: rgba(255, 255, 255, 0.4);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Instrument Sans', sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-main);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.navbar {
|
|
height: 70px;
|
|
background: rgba(15, 23, 42, 0.8);
|
|
backdrop-filter: blur(16px);
|
|
border-bottom: 1px solid var(--card-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 4%;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.btn-nav {
|
|
color: #e5e7eb;
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--card-border);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.btn-nav:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: white;
|
|
}
|
|
|
|
.assessment-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 20px;
|
|
padding: 28px;
|
|
backdrop-filter: blur(20px);
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.users-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.85rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.users-table th {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--card-border);
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.users-table td {
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
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: 900px;
|
|
padding: 28px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 8px;
|
|
color: white;
|
|
font-size: 0.85rem;
|
|
outline: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header Navbar -->
|
|
<header class="navbar">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<div style="width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #6366f1 0%, #0078d4 100%); display: flex; align-items: center; justify-content: center; font-weight: 700;">
|
|
⚡
|
|
</div>
|
|
<div>
|
|
<h1 style="font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 700; color: white; margin: 0;">Candidate Live Assessment Portal</h1>
|
|
<div style="font-size: 0.7rem; color: var(--text-muted);">Proctored IDE & Code Submissions</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) => in_array($l['type'] ?? '', ['gaze_anomaly', 'gaze_fixed_staring'])));
|
|
$lowerGaze = count(array_filter($logs, fn($l) => ($l['type'] ?? '') === 'gaze_lower_device'));
|
|
$questionRepeat = count(array_filter($logs, fn($l) => in_array($l['type'] ?? '', ['question_repeat_lower', 'question_repetition'])));
|
|
$externalAi = count(array_filter($logs, fn($l) => ($l['type'] ?? '') === 'external_ai_detected'));
|
|
@endphp
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<strong style="color: white; font-size: 0.9rem;">{{ $inv->candidate_name }}</strong>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);">{{ $inv->candidate_email }} • {{ $inv->candidate_phone }}</div>
|
|
<div style="margin-top: 4px; display: flex; flex-direction: column; gap: 4px;">
|
|
<div style="font-size: 0.75rem; color: #a7f3d0; background: rgba(16,185,129,0.1); padding: 2px 8px; border-radius: 6px; display: inline-block;">
|
|
🔑 Temp Pass: <strong>{{ $inv->temp_password }}</strong>
|
|
</div>
|
|
<div style="font-size: 0.7rem; color: #38bdf8;">
|
|
🌐 Login URL: <a href="{{ route('interview.candidate.login') }}" target="_blank" style="color: #38bdf8; text-decoration: underline;">{{ route('interview.candidate.login') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<code style="background: rgba(255,255,255,0.06); padding: 4px 8px; border-radius: 6px; color: #38bdf8; font-size: 0.75rem;">
|
|
{{ $inv->submission_unique_id }}
|
|
</code>
|
|
</td>
|
|
<td>
|
|
@if($inv->isExpired())
|
|
<span class="badge" style="background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3);">
|
|
EXPIRED
|
|
</span>
|
|
@elseif($inv->status === 'completed')
|
|
<span class="badge" style="background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3);">
|
|
COMPLETED
|
|
</span>
|
|
@elseif($inv->isActiveTimeline())
|
|
<span class="badge" style="background: rgba(16,185,129,0.2); color: #34d399; border: 1px solid rgba(16,185,129,0.4);">
|
|
⚡ TIMELINE LIVE
|
|
</span>
|
|
@else
|
|
<span class="badge" style="background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3);">
|
|
SCHEDULED
|
|
</span>
|
|
@endif
|
|
<div style="font-size: 0.7rem; color: var(--text-muted); margin-top: 4px;">
|
|
Timeline: {{ ($inv->scheduled_at ?? $inv->created_at)->format('M d, H:i') }} – {{ $inv->expires_at->format('H:i') }}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge" style="background: rgba(255,255,255,0.05); color: white; border: 1px solid var(--card-border); text-transform: uppercase;">
|
|
{{ $inv->language }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div style="display: flex; flex-direction: column; gap: 2px; font-size: 0.75rem;">
|
|
<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>
|
|
@if($lowerGaze > 0)
|
|
<span style="color: #ef4444; font-weight: 700;">
|
|
📱 Lower Gaze (>10s): {{ $lowerGaze }}
|
|
</span>
|
|
@endif
|
|
@if($questionRepeat > 0)
|
|
<span style="color: #f43f5e; font-weight: 700;">
|
|
🗣️ Question Repetition: {{ $questionRepeat }}
|
|
</span>
|
|
@endif
|
|
@if($externalAi > 0)
|
|
<span style="color: #ef4444; font-weight: 800; background: rgba(239,68,68,0.2); padding: 2px 6px; border-radius: 4px;">
|
|
🤖 Parakeet / External AI: {{ $externalAi }}
|
|
</span>
|
|
@endif
|
|
</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 interview sessions found. Click "+ Schedule Candidate Interview" above to create one.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Modal: Schedule Candidate Interview -->
|
|
<div id="create-interview-modal" class="admin-modal">
|
|
<div class="admin-modal-content" style="max-width: 600px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h3 style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; color: white; margin: 0;">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 style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;">
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Candidate Name <span style="color:#ef4444;">*</span></label>
|
|
<input type="text" name="candidate_name" required placeholder="e.g. John Doe" class="form-input">
|
|
</div>
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Candidate Email <span style="color:#ef4444;">*</span></label>
|
|
<input type="email" name="candidate_email" required placeholder="john@gmail.com" class="form-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px;">
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Phone Number <span style="color:#ef4444;">*</span></label>
|
|
<input type="text" name="candidate_phone" required placeholder="9876543210" class="form-input">
|
|
</div>
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Start Time (Timeline)</label>
|
|
<input type="datetime-local" name="scheduled_at" value="{{ now()->format('Y-m-d\TH:i') }}" class="form-input" style="background: #151b2c;">
|
|
</div>
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Access Duration <span style="color:#ef4444;">*</span></label>
|
|
<select name="valid_hours" required class="form-input" style="background: #151b2c;">
|
|
<option value="1">1 Hour</option>
|
|
<option value="2" selected>2 Hours</option>
|
|
<option value="4">4 Hours</option>
|
|
<option value="12">12 Hours</option>
|
|
<option value="24">24 Hours</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 14px;">
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Coding Language <span style="color:#ef4444;">*</span></label>
|
|
<select name="language" required class="form-input" style="background: #151b2c;">
|
|
<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 style="margin-bottom: 16px;">
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Assign Internal Interviewers / Panelists</label>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 120px; overflow-y: auto; background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px; border: 1px solid var(--card-border);">
|
|
@foreach($interviewers as $usr)
|
|
<label style="display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: white; cursor: pointer;">
|
|
<input type="checkbox" name="assigned_interviewers[]" value="{{ $usr->id }}" style="accent-color: #6366f1;">
|
|
{{ $usr->name }} ({{ $usr->email }})
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
|
|
<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); color: white; border-color: transparent; font-weight: 600;">Create Session & Password</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;">
|
|
<!-- TOGGLE SOS AUTO-TRIGGER ON/OFF FOR SESSION -->
|
|
<button id="sos-toggle-btn" onclick="toggleSosAutoTrigger()" class="btn-nav" style="background: rgba(99,102,241,0.15); color: #818cf8; border-color: #6366f1; font-size: 0.75rem; font-weight: 600;" title="Panelists can turn off automatic SOS popups for this session">
|
|
🔔 SOS Auto-Trigger: ON
|
|
</button>
|
|
|
|
<!-- GENERATE PDF REPORT BUTTON -->
|
|
<button onclick="openReportPage()" class="btn-nav" style="background: rgba(16,185,129,0.15); color: #34d399; border-color: #10b981; font-size: 0.75rem; font-weight: 600;">
|
|
📄 Generate PDF Report
|
|
</button>
|
|
|
|
<!-- 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;">
|
|
🚨 candidate might cheating
|
|
</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-start-recording" onclick="startCallRecording()" class="btn-nav" style="background: rgba(239,68,68,0.2); border-color: #ef4444; color: #fca5a5; font-weight: 700; padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;">
|
|
⏺️ Record Call (Silent)
|
|
</button>
|
|
<button id="btn-stop-recording" onclick="stopCallRecording()" class="btn-nav" style="display: none; background: #ef4444; color: white; border: none; font-weight: 700; padding: 6px 14px; cursor: pointer; animation: pulse 1s infinite alternate;">
|
|
⏹️ Stop & Save Recording
|
|
</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 2-Way 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>
|
|
|
|
<!-- LARGE CARD: CANDIDATE IDE & SYNCED NOTEBOOK / DRAWING INSPECTOR (Visible by default even if Screen Share is OFF) -->
|
|
<div style="background: #090d16; border: 1.5px solid var(--accent-primary); border-radius: 16px; padding: 20px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 10px;">
|
|
<div style="display: flex; align-items: center; gap: 10px;">
|
|
<span style="font-size: 1.2rem;">💻</span>
|
|
<strong style="color: white; font-size: 1.05rem;">Candidate Live IDE & Workspace Inspector</strong>
|
|
<span id="modal-code-lang" class="badge" style="background: rgba(99,102,241,0.2); color: #818cf8; font-size: 0.7rem;">PYTHON</span>
|
|
<span style="font-size: 0.7rem; color: #34d399;">● Live Synced</span>
|
|
</div>
|
|
|
|
<!-- Tab Switcher for Code Solution, Notepad, Drawing, Saved Profile Video Recordings -->
|
|
<div style="display: flex; gap: 6px;">
|
|
<button id="tab-btn-code" onclick="switchIdeTab('code')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: #6366f1; color: white; border: none; font-weight: 700;">💻 Live IDE Code</button>
|
|
<button id="tab-btn-notes" onclick="switchIdeTab('notes')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: rgba(255,255,255,0.05); color: #94a3b8; border: 1px solid var(--card-border);">📝 Candidate Notepad</button>
|
|
<button id="tab-btn-drawing" onclick="switchIdeTab('drawing')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: rgba(255,255,255,0.05); color: #94a3b8; border: 1px solid var(--card-border);">🎨 Candidate Drawing</button>
|
|
<button id="tab-btn-recordings" onclick="switchIdeTab('recordings')" class="btn-nav" style="padding: 5px 14px; font-size: 0.75rem; background: rgba(255,255,255,0.05); color: #94a3b8; border: 1px solid var(--card-border);">📹 Saved Recordings (.MP4)</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 2.5fr 1fr; gap: 20px;">
|
|
<!-- Left Column: Tab Content (Code Solution, Notepad, Canvas Drawing, or Saved Video Recordings) -->
|
|
<div>
|
|
<!-- Tab 1: Live Code Solution & Terminal Output -->
|
|
<div id="tab-content-code" style="display: block;">
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Current Code Solution (Visible even if candidate does not share screen):</div>
|
|
<pre id="modal-code-display" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 16px; font-family: monospace; font-size: 0.85rem; color: #38bdf8; min-height: 200px; max-height: 280px; overflow-y: auto; white-space: pre-wrap; margin-bottom: 12px;"></pre>
|
|
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Execution Stdout / Stderr Output:</div>
|
|
<pre id="modal-output-display" style="background: #02040a; border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; font-family: monospace; font-size: 0.75rem; color: #34d399; max-height: 90px; overflow-y: auto; white-space: pre-wrap;"></pre>
|
|
</div>
|
|
|
|
<!-- Tab 2: Candidate Notepad Content -->
|
|
<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>
|
|
|
|
<!-- Tab 4: Saved Candidate Profile Video Recordings & MP4 Downloads -->
|
|
<div id="tab-content-recordings" style="display: none;">
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; font-weight: 600;">Saved Candidate Video Sessions (Downloadable in MP4 format):</div>
|
|
<div id="modal-recordings-container" style="background: #050811; border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; min-height: 250px; max-height: 350px; overflow-y: auto;">
|
|
<div style="color: #94a3b8; font-size: 0.8rem; text-align: center; padding-top: 40px;">No video recordings saved for this candidate yet.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Proctoring Audit & Silent Warning Form -->
|
|
<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: 200px; overflow-y: auto; margin-bottom: 14px; font-size: 0.7rem; color: var(--text-muted);">
|
|
No violations recorded.
|
|
</div>
|
|
|
|
<!-- 2-Way Real-Time Chat Box in Review Modal -->
|
|
<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: white; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px;">
|
|
💬 2-Way Live Chat History:
|
|
</div>
|
|
<div id="interviewer-chat-history" style="background: #050811; border: 1px solid var(--card-border); border-radius: 8px; padding: 8px; height: 130px; overflow-y: auto; font-size: 0.7rem; margin-bottom: 8px;">
|
|
<div style="color: #94a3b8; font-style: italic; text-align: center; padding-top: 40px;">No chat history. Send a message below.</div>
|
|
</div>
|
|
<div style="display: flex; gap: 6px;">
|
|
<input type="text" id="warning-input" placeholder="Type message to candidate..." onkeydown="if(event.key==='Enter') sendSilentWarning()" class="form-input" style="font-size: 0.75rem; background: #0b0f19; padding: 6px 10px; flex: 1;">
|
|
<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;">
|
|
<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" style="z-index: 9999;">
|
|
<div class="admin-modal-content" style="max-width: 520px; border: 2px solid #ef4444; background: #0f172a; box-shadow: 0 0 40px rgba(239,68,68,0.8);">
|
|
<div style="display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(239,68,68,0.3); padding-bottom: 12px; margin-bottom: 14px;">
|
|
<div style="font-size: 2.2rem;">🚨</div>
|
|
<div>
|
|
<h3 style="color: #fca5a5; font-size: 1.25rem; font-weight: 800; margin: 0;">candidate might cheating</h3>
|
|
<div style="font-size: 0.72rem; color: #94a3b8;">Proctoring engine flagged candidate cheating activity!</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sos-violation-list" style="background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 12px; padding: 14px; font-size: 0.8rem; color: #fca5a5; margin-bottom: 18px; max-height: 180px; overflow-y: auto;">
|
|
Violation details loading...
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 10px; justify-content: flex-end;">
|
|
<button onclick="stopSosAlarm()" class="btn-nav" style="background: #ef4444; color: white; border: none; font-weight: 800; padding: 8px 16px; cursor: pointer;">
|
|
🔕 Acknowledge & Stop SOS Alarm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes sosPulse {
|
|
0% { transform: scale(1); box-shadow: 0 0 10px rgba(239,68,68,0.5); }
|
|
100% { transform: scale(1.05); box-shadow: 0 0 25px rgba(239,68,68,1); }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let currentInterviewId = null;
|
|
let interviewerPeer = null;
|
|
let screenReceiverPeer = null;
|
|
let interviewerLocalStream = null;
|
|
let activeCall = null;
|
|
let isInterviewerMicOn = true;
|
|
let isInterviewerCamOn = true;
|
|
let screenZoomLevel = 1.0;
|
|
|
|
function getInitials(name) {
|
|
if (!name) return 'CD';
|
|
let parts = name.trim().split(/\s+/);
|
|
if (parts.length >= 2) {
|
|
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
|
|
}
|
|
let str = name.trim();
|
|
if (str.length >= 2) {
|
|
return (str[0] + str[str.length - 1]).toUpperCase();
|
|
}
|
|
return str.toUpperCase();
|
|
}
|
|
|
|
function zoomScreen(delta) {
|
|
screenZoomLevel = Math.max(0.5, Math.min(3.0, screenZoomLevel + delta));
|
|
const screenVid = document.getElementById('interviewer-screen-video');
|
|
const badge = document.getElementById('zoom-level-badge');
|
|
if (screenVid) {
|
|
screenVid.style.transform = `scale(${screenZoomLevel})`;
|
|
}
|
|
if (badge) {
|
|
badge.innerText = `(${Math.round(screenZoomLevel * 100)}%)`;
|
|
}
|
|
}
|
|
|
|
function resetZoomScreen() {
|
|
screenZoomLevel = 1.0;
|
|
zoomScreen(0);
|
|
}
|
|
|
|
function toggleFullscreenScreen() {
|
|
const wrapper = document.getElementById('screen-wrapper');
|
|
if (!wrapper) return;
|
|
if (!document.fullscreenElement) {
|
|
wrapper.requestFullscreen().catch(err => console.log(err));
|
|
} else {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
|
|
let activeViolations = [];
|
|
let sosPollInterval = null;
|
|
let acknowledgedViolationCount = 0;
|
|
let sosDismissed = false;
|
|
let sosAutoTriggerDisabled = false;
|
|
|
|
function toggleSosAutoTrigger() {
|
|
sosAutoTriggerDisabled = !sosAutoTriggerDisabled;
|
|
const btn = document.getElementById('sos-toggle-btn');
|
|
if (sosAutoTriggerDisabled) {
|
|
btn.innerText = '🔕 SOS Auto-Trigger: OFF';
|
|
btn.style.background = 'rgba(239,68,68,0.15)';
|
|
btn.style.color = '#fca5a5';
|
|
btn.style.borderColor = '#ef4444';
|
|
} else {
|
|
btn.innerText = '🔔 SOS Auto-Trigger: ON';
|
|
btn.style.background = 'rgba(99,102,241,0.15)';
|
|
btn.style.color = '#818cf8';
|
|
btn.style.borderColor = '#6366f1';
|
|
}
|
|
}
|
|
|
|
function openReportPage() {
|
|
if (!currentInterviewId) return;
|
|
const reportUrl = `{{ route('interview.report', ':id') }}`.replace(':id', currentInterviewId);
|
|
window.open(reportUrl, '_blank');
|
|
}
|
|
|
|
function switchIdeTab(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-content-recordings').style.display = (tab === 'recordings') ? 'block' : 'none';
|
|
|
|
document.getElementById('tab-btn-code').style.background = (tab === 'code') ? '#6366f1' : 'rgba(255,255,255,0.05)';
|
|
document.getElementById('tab-btn-code').style.color = (tab === 'code') ? 'white' : '#94a3b8';
|
|
|
|
document.getElementById('tab-btn-notes').style.background = (tab === 'notes') ? '#6366f1' : 'rgba(255,255,255,0.05)';
|
|
document.getElementById('tab-btn-notes').style.color = (tab === 'notes') ? 'white' : '#94a3b8';
|
|
|
|
document.getElementById('tab-btn-drawing').style.background = (tab === 'drawing') ? '#06b6d4' : 'rgba(255,255,255,0.05)';
|
|
document.getElementById('tab-btn-drawing').style.color = (tab === 'drawing') ? 'white' : '#94a3b8';
|
|
|
|
document.getElementById('tab-btn-recordings').style.background = (tab === 'recordings') ? '#10b981' : 'rgba(255,255,255,0.05)';
|
|
document.getElementById('tab-btn-recordings').style.color = (tab === 'recordings') ? 'white' : '#94a3b8';
|
|
}
|
|
|
|
function openReviewModal(id, name, uid) {
|
|
currentInterviewId = id;
|
|
acknowledgedViolationCount = 0;
|
|
sosDismissed = false;
|
|
|
|
document.getElementById('modal-cand-name').innerText = name;
|
|
document.getElementById('modal-cand-uid').innerText = 'Unique Submission ID: ' + uid;
|
|
|
|
const candInitials = getInitials(name);
|
|
const avatarCircle = document.getElementById('modal-cand-avatar-circle');
|
|
const avatarName = document.getElementById('cand-avatar-name');
|
|
if (avatarCircle) avatarCircle.innerText = candInitials;
|
|
if (avatarName) avatarName.innerText = name;
|
|
|
|
document.getElementById('review-modal').classList.add('active');
|
|
resetZoomScreen();
|
|
initInterviewerPeer();
|
|
switchIdeTab('code');
|
|
|
|
pollReviewData();
|
|
clearInterval(sosPollInterval);
|
|
sosPollInterval = setInterval(pollReviewData, 2000);
|
|
}
|
|
|
|
function pollReviewData() {
|
|
if (!currentInterviewId) return;
|
|
fetch(`{{ route('interview.poll', ':id') }}`.replace(':id', currentInterviewId), {
|
|
headers: { 'Accept': 'application/json' }
|
|
})
|
|
.then(r => {
|
|
if (!r.ok) return null;
|
|
const contentType = r.headers.get('content-type');
|
|
if (!contentType || !contentType.includes('application/json')) return null;
|
|
return r.json();
|
|
})
|
|
.then(data => {
|
|
if (!data) return;
|
|
document.getElementById('modal-code-lang').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 Candidate Saved Video Recordings in Profile Modal
|
|
const recContainer = document.getElementById('modal-recordings-container');
|
|
if (recContainer) {
|
|
const recPath = data.recording_path;
|
|
const recList = data.recordings || [];
|
|
if (recPath || recList.length > 0) {
|
|
let recHtml = '';
|
|
let allRecs = recList.length > 0 ? recList : [{ url: recPath, created_at: new Date().toISOString() }];
|
|
allRecs.forEach((r, idx) => {
|
|
const videoUrl = typeof r === 'string' ? r : (r.url || recPath);
|
|
const dateStr = r.created_at ? new Date(r.created_at).toLocaleTimeString() : 'Session Recording';
|
|
const downloadUrl = `{{ route('interview.download-recording', ':id') }}`.replace(':id', currentInterviewId) + `?index=${idx}`;
|
|
|
|
recHtml += `<div style="background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; margin-bottom: 10px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
|
<strong style="color: white; font-size: 0.8rem;">📹 Video Session Recording #${idx + 1} (${dateStr})</strong>
|
|
<a href="${downloadUrl}" target="_blank" download class="btn-nav" style="background: #10b981; color: white; border: none; font-size: 0.75rem; font-weight: 700; padding: 4px 12px; text-decoration: none;">
|
|
📥 Download MP4 Video
|
|
</a>
|
|
</div>
|
|
<video src="${videoUrl}" controls style="width: 100%; max-height: 200px; border-radius: 8px; background: #000; outline: none;"></video>
|
|
</div>`;
|
|
});
|
|
recContainer.innerHTML = recHtml;
|
|
} else {
|
|
recContainer.innerHTML = '<div style="color: #94a3b8; font-size: 0.8rem; text-align: center; padding-top: 40px;">No video recordings saved for this candidate yet.</div>';
|
|
}
|
|
}
|
|
|
|
const chatHistory = document.getElementById('interviewer-chat-history');
|
|
if (chatHistory && data.warnings && data.warnings.length > 0) {
|
|
let chatHtml = '';
|
|
data.warnings.forEach(w => {
|
|
const isInterviewer = w.sent_by !== null;
|
|
const senderName = isInterviewer ? (w.sender ? w.sender.name : 'You (Interviewer)') : (data.candidate_name || '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: 500; line-height:1.4;">${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' || l.type === 'gaze_fixed_staring') icon = '👁️';
|
|
if (l.type === 'gaze_lower_device') icon = '📱';
|
|
if (l.type === 'question_repeat_lower' || l.type === 'question_repetition') icon = '🗣️';
|
|
if (l.type === 'external_ai_detected') icon = '🤖';
|
|
|
|
if (['paste_event', 'tab_switch', 'focus_lost', 'gaze_anomaly', 'gaze_fixed_staring', 'gaze_lower_device', 'question_repeat_lower', 'question_repetition', 'external_ai_detected'].includes(l.type)) {
|
|
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 ON NEW CHEATING EVENTS (IF NOT MUTED BY PANEL)
|
|
if (totalViolations > acknowledgedViolationCount && !sosAutoTriggerDisabled) {
|
|
sosDismissed = false;
|
|
sosBtn.style.animation = 'sosPulse 1.2s infinite alternate';
|
|
sosBtn.innerText = '🚨 candidate might cheating';
|
|
sosBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)';
|
|
openSosModal();
|
|
}
|
|
} else {
|
|
sosBtn.style.display = 'none';
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
function openSosModal() {
|
|
let html = '';
|
|
if (activeViolations.length > 0) {
|
|
activeViolations.forEach(v => {
|
|
html += `<div style="margin-bottom: 8px;">
|
|
<strong>🚨 ${v.type.toUpperCase()}:</strong> ${v.details || 'Suspicious candidate behavior detected.'}
|
|
<div style="font-size: 0.65rem; color: #94a3b8;">Timestamp: ${new Date(v.timestamp).toLocaleTimeString()}</div>
|
|
</div>`;
|
|
});
|
|
} 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 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';
|
|
});
|
|
});
|
|
}
|
|
|
|
let candVidZoomLevel = 1.0;
|
|
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)}%)`;
|
|
}
|
|
|
|
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 === 'violation_occurred') {
|
|
pollReviewData();
|
|
}
|
|
|
|
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();
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
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(err => console.log('WebRTC Stream init:', err));
|
|
});
|
|
});
|
|
}
|
|
|
|
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';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// --- SILENT CALL RECORDING ENGINE FOR INTERVIEWERS & ADMINS ---
|
|
let adminMediaRecorder = null;
|
|
let adminRecordedChunks = [];
|
|
|
|
function startCallRecording() {
|
|
if (!currentInterviewId) {
|
|
alert('Please open an active candidate interview session first.');
|
|
return;
|
|
}
|
|
|
|
const candVid = document.getElementById('interviewer-cand-video');
|
|
let streamToRecord = null;
|
|
|
|
if (candVid && candVid.srcObject) {
|
|
streamToRecord = candVid.srcObject;
|
|
} else if (interviewerLocalStream) {
|
|
streamToRecord = interviewerLocalStream;
|
|
}
|
|
|
|
if (!streamToRecord) {
|
|
alert('No active video/audio stream available to record. Please click "Start / Join Call" first.');
|
|
return;
|
|
}
|
|
|
|
adminRecordedChunks = [];
|
|
try {
|
|
const options = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
|
|
? { mimeType: 'video/webm;codecs=vp9' }
|
|
: (MediaRecorder.isTypeSupported('video/webm') ? { mimeType: 'video/webm' } : {});
|
|
|
|
adminMediaRecorder = new MediaRecorder(streamToRecord, options);
|
|
|
|
adminMediaRecorder.ondataavailable = function(e) {
|
|
if (e.data && e.data.size > 0) {
|
|
adminRecordedChunks.push(e.data);
|
|
}
|
|
};
|
|
|
|
adminMediaRecorder.onstop = function() {
|
|
if (adminRecordedChunks.length === 0) return;
|
|
const blob = new Blob(adminRecordedChunks, { type: 'video/webm' });
|
|
uploadRecordedBlob(blob);
|
|
};
|
|
|
|
adminMediaRecorder.start(1000);
|
|
|
|
document.getElementById('btn-start-recording').style.display = 'none';
|
|
document.getElementById('btn-stop-recording').style.display = 'inline-flex';
|
|
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
icon: 'info',
|
|
title: 'Recording Started',
|
|
text: 'Interview call recording is active (silent mode - candidate is not notified).',
|
|
toast: true,
|
|
position: 'top-end',
|
|
timer: 3000,
|
|
showConfirmButton: false
|
|
});
|
|
}
|
|
} catch(e) {
|
|
alert('Recording failed to initialize: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function stopCallRecording() {
|
|
if (adminMediaRecorder && adminMediaRecorder.state !== 'inactive') {
|
|
adminMediaRecorder.stop();
|
|
}
|
|
|
|
document.getElementById('btn-start-recording').style.display = 'inline-flex';
|
|
document.getElementById('btn-stop-recording').style.display = 'none';
|
|
}
|
|
|
|
function uploadRecordedBlob(blob) {
|
|
if (!currentInterviewId) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append('video', blob, `interview_${currentInterviewId}_${Date.now()}.mp4`);
|
|
formData.append('_token', '{{ csrf_token() }}');
|
|
|
|
fetch(`{{ route('interview.upload-recording', ':id') }}`.replace(':id', currentInterviewId), {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Recording Saved!',
|
|
text: 'Call recording saved successfully under Candidate Profile and Report.',
|
|
toast: true,
|
|
position: 'top-end',
|
|
timer: 3500,
|
|
showConfirmButton: false
|
|
});
|
|
}
|
|
pollReviewData();
|
|
}
|
|
})
|
|
.catch(err => console.log('Recording upload error:', err));
|
|
}
|
|
|
|
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.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';
|
|
}
|
|
|
|
function endInterviewerCall() {
|
|
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('screen-video-placeholder').style.display = 'flex';
|
|
document.getElementById('self-video-placeholder').style.display = 'flex';
|
|
|
|
document.getElementById('btn-start-call').innerText = '📞 Start 2-Way Call';
|
|
document.getElementById('btn-start-call').style.background = '#10b981';
|
|
document.getElementById('btn-start-call').onclick = startInterviewerCall;
|
|
|
|
document.getElementById('btn-toggle-interviewer-mic').style.display = 'none';
|
|
document.getElementById('btn-toggle-interviewer-cam').style.display = 'none';
|
|
|
|
document.getElementById('interviewer-call-status').innerText = 'DISCONNECTED';
|
|
document.getElementById('interviewer-call-status').style.background = 'rgba(99,102,241,0.2)';
|
|
document.getElementById('interviewer-call-status').style.color = '#818cf8';
|
|
}
|
|
|
|
function closeReviewModal() {
|
|
clearInterval(sosPollInterval);
|
|
endInterviewerCall();
|
|
document.getElementById('review-modal').classList.remove('active');
|
|
}
|
|
|
|
function sendSilentWarning() {
|
|
const input = document.getElementById('warning-input');
|
|
const msg = input.value.trim();
|
|
if (!msg || !currentInterviewId) return;
|
|
|
|
input.value = '';
|
|
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 => {
|
|
if (res.success) {
|
|
pollReviewData();
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|