976 lines
56 KiB
PHP
976 lines
56 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>
|
|
|
|
<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>
|
|
</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>
|
|
<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>
|
|
</div>
|
|
</td>
|
|
<td style="text-align: right; white-space: nowrap;">
|
|
<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;">
|
|
<!-- 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;">
|
|
🔑 Regenerate 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 Candidate & IP
|
|
</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 2-Way Call
|
|
</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 Initials Avatar when Cam is Off) -->
|
|
<div style="position: relative; background: #050811; border-radius: 12px; border: 1.5px solid var(--card-border); overflow: hidden; height: 220px;">
|
|
<video id="interviewer-cand-video" autoplay playsinline style="width: 100%; height: 100%; object-fit: cover;"></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 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
|
|
</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 -->
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 2.5fr 1fr; gap: 20px;">
|
|
<!-- Left Column: Tab Content (Code Solution, Notepad, or Canvas Drawing) -->
|
|
<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>
|
|
</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>
|
|
|
|
<!-- Silent Warning Form -->
|
|
<div style="background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); border-radius: 12px; padding: 12px;">
|
|
<div style="font-size: 0.75rem; color: #fca5a5; font-weight: 600; margin-bottom: 6px;">Send Message to Candidate:</div>
|
|
<input type="text" id="warning-input" placeholder="e.g. Please walk me through your logic." class="form-input" style="font-size: 0.75rem; margin-bottom: 8px;">
|
|
<button onclick="sendSilentWarning()" class="btn-nav" style="width: 100%; background: #ef4444; color: white; border: none; font-size: 0.75rem; font-weight: 600; padding: 6px; cursor: pointer;">
|
|
💬 Send Message
|
|
</button>
|
|
</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;">SOS CHEATING DETECTED</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;
|
|
|
|
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-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';
|
|
}
|
|
|
|
function openReviewModal(id, name, uid) {
|
|
currentInterviewId = id;
|
|
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, 4000);
|
|
}
|
|
|
|
function pollReviewData() {
|
|
if (!currentInterviewId) return;
|
|
fetch(`{{ route('interview.poll', ':id') }}`.replace(':id', currentInterviewId))
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
document.getElementById('modal-code-lang').innerText = (data.submitted_language || 'UNKNOWN').toUpperCase();
|
|
document.getElementById('modal-code-display').innerText = data.submitted_code || '// Candidate has not submitted 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';
|
|
}
|
|
|
|
let logsHtml = '';
|
|
let cheatingDetected = false;
|
|
activeViolations = [];
|
|
|
|
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') {
|
|
cheatingDetected = true;
|
|
activeViolations.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;
|
|
|
|
const sosBtn = document.getElementById('sos-alert-btn');
|
|
if (cheatingDetected) {
|
|
sosBtn.style.display = 'inline-block';
|
|
} else {
|
|
sosBtn.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
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');
|
|
const sosBtn = document.getElementById('sos-alert-btn');
|
|
if (sosBtn) {
|
|
sosBtn.style.animation = 'none';
|
|
sosBtn.innerText = '✅ SOS Acknowledged';
|
|
sosBtn.style.background = '#475569';
|
|
}
|
|
}
|
|
|
|
function regenerateCandidatePassword() {
|
|
if (!currentInterviewId) return;
|
|
if (!confirm('Are you sure you want to regenerate candidate temporary password?')) return;
|
|
|
|
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) {
|
|
alert('New Candidate Temporary Password Generated: ' + res.new_password);
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
|
|
function blockCandidateAction() {
|
|
if (!currentInterviewId) return;
|
|
if (!confirm('CRITICAL ACTION: Block this candidate email and client IP address permanently?')) return;
|
|
|
|
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) {
|
|
alert(res.message);
|
|
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
|
|
const screenPeerId = 'interviewer_screen_' + currentInterviewId;
|
|
screenReceiverPeer = new Peer(screenPeerId);
|
|
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 startInterviewerCall() {
|
|
if (!currentInterviewId) return;
|
|
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
|
|
.then(stream => {
|
|
interviewerLocalStream = stream;
|
|
document.getElementById('interviewer-self-video').srcObject = stream;
|
|
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').innerText = '🔴 End Call';
|
|
document.getElementById('btn-start-call').style.background = '#ef4444';
|
|
document.getElementById('btn-start-call').onclick = endInterviewerCall;
|
|
|
|
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;
|
|
if (placeholder) placeholder.style.display = 'none';
|
|
|
|
document.getElementById('interviewer-call-status').innerText = 'CONNECTED';
|
|
document.getElementById('interviewer-call-status').style.background = 'rgba(16,185,129,0.3)';
|
|
document.getElementById('interviewer-call-status').style.color = '#34d399';
|
|
});
|
|
|
|
activeCall.on('close', () => {
|
|
endInterviewerCall();
|
|
});
|
|
}
|
|
})
|
|
.catch(err => alert('Camera/Mic permission is required to start 2-Way Call.'));
|
|
}
|
|
|
|
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');
|
|
if (interviewerLocalStream) {
|
|
const videoTracks = interviewerLocalStream.getVideoTracks();
|
|
if (videoTracks.length > 0) {
|
|
isInterviewerCamOn = !isInterviewerCamOn;
|
|
videoTracks[0].enabled = 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 (selfPlaceholder) selfPlaceholder.style.display = isInterviewerCamOn ? 'none' : 'flex';
|
|
}
|
|
} else {
|
|
isInterviewerCamOn = !isInterviewerCamOn;
|
|
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 msg = document.getElementById('warning-input').value.trim();
|
|
if (!msg || !currentInterviewId) 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 => {
|
|
if (res.success) {
|
|
alert('Message sent to candidate!');
|
|
document.getElementById('warning-input').value = '';
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|