@extends('layouts/blankLayout')

@section('title', 'EGC Job Interview')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
'resources/assets/vendor/libs/select2/select2.scss',
'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss',
'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/dropzone/dropzone.scss',
'resources/assets/vendor/libs/tagify/tagify.scss',
])
@endsection

@section('vendor-script')
@vite([
'resources/assets/vendor/libs/select2/select2.js',
'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js',
'resources/assets/vendor/libs/dropzone/dropzone.js',
])
@endsection

@section('page-script')
@vite(['resources/assets/js/forms_date_time_pickers.js'])
@endsection
<style>
    body {
        background: #f7f7f7;
        font-family: 'Roboto', sans-serif;
    }

    /* .permission-modal{
        position:fixed; inset:0;
        background:#000000cc;
        display:flex; align-items:center; justify-content:center;
        z-index:9999;
    } */

    .permission-check-box{
        background:#fff; padding:30px; border-radius:12px;
        max-width:400px; text-align:center;
    }
    .permission-box{
        background:#fff; padding:30px; border-radius:12px;
        max-width:400px; text-align:center;
    }

    .try-again{
        cursor:pointer;
    }
    .try-again:hover{
        text-decoration:underline;
    }

    /* Page Wrapper */
    .interview-page {
        max-width: 720px;
        margin: 0 auto;
        padding: 1rem;
    }

    /* Question Section (NO CARD) */
    .question-section {
        margin-bottom: 1rem;
    }

    .question-count {
        font-size: 0.85rem;
        font-weight: 600;
        color: #666;
    }

    .question-text {
        font-size: 1rem;
        font-weight: 600;
        margin: 0.5rem 0;
    }

    .question-meta {
        font-size: 0.8rem;
        color: #888;
    }

    /* ✅ Answer Card ONLY */
    .answer-card {
        background: #fff;
        border-radius: 14px;
        padding: 0.5rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }

    .thinking_time_container {
        position: absolute;
        inset: 0;
        background: #000;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    /* Center content */
    .thinking_time {
        position: relative;
        width: 120px;
        height: 120px;
    }

    /* SVG Ring */
    .progress-ring__circle {
        stroke-dasharray: 327;
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 1s linear;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }

    /* Text */
    .thinking_time_text {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fba919;
        font-weight: 600;
    }

    .thinking_time_text small {
        font-size: 0.75rem;
        color: #aaa;
    }

    .thinking_time_text span {
        font-size: 2rem;
    }
    #video_interview{
        width: 100%;
        min-height: 260px;
    }

    .answer-textarea {
        width: 100%;
        min-height: 260px;
        border: none;
        outline: none;
        resize: none;
        font-size: 0.95rem;
    }

    .char-count {
        text-align: right;
        font-size: 0.75rem;
        color: #aaa;
    }

    /* Timer */
    .remaining-time {
        text-align: center;
        margin: 0.8rem 0;
        font-size: 0.85rem;
        color: #555;
    }

    /* Button */
    .btn-next {
        width: 100%;
    }


    .interview-container{
        padding:0 15px;
    }
    video { 
        width: 100%; 
        border-radius: 10px; 
        min-height: 260px;
        max-height: 480px;
        background: #000; 
    }
    #audio_container{
        width: 100%; 
         min-height: 160px;
    }
    audio { 
        width: 100%; 
        border-radius: 10px; 
        background: #000; 
    }

    /* #audioWaveform {
        width: 100%;
        height: 120px;
        background: linear-gradient(180deg,#fafafa,#f1f1f1);
        border-radius: 10px;
    } */

        #audioWaveform {
            width: 100%;
            height: 120px;
            background: linear-gradient(180deg,#0b0b0b,#1a1a1a);
            border-radius: 12px;
        }

    #audio_container audio {
        background: transparent;
    }

   .spectrum {
        display: flex;
        align-items: flex-end;
        height: 260px;
        gap: 4px;
        padding: 10px;
        background: linear-gradient(180deg,#0b0b0b,#1a1a1a);
        border-radius: 12px;
        overflow: hidden;
    }

    .spectrum-bar {
        flex: 1;
        height: 10%;
        border-radius: 6px;
        background: linear-gradient(
            180deg,
            #fcb439ff 0%,
            #fba919 55%,
            #ab2b22ff 85%,
            #ab2b22 100%
        );
        transition: height 0.06s linear;
        box-shadow:
            0 0 10px rgba(255, 47, 47, 0.4),
            0 0 18px rgba(255,61,0,.4);
    }

    .permission-modal {
        position: fixed;
        inset: 0;
        background: rgba(248, 249, 250, 0.95);
        display: none;               /* 🔥 IMPORTANT */
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .check-item {
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }
    .bg-light-success {
        background-color: #e8f5e9;
        border-color: #c8e6c9 !important;
    }

    .upload-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        backdrop-filter: blur(6px);
        background: rgba(0,0,0,0.45);
        align-items: center;
        justify-content: center;
    }

    .upload-box {
        background: #fff;
        padding: 30px 35px;
        border-radius: 14px;
        width: 320px;
        text-align: center;
        box-shadow: 0 20px 50px rgba(0,0,0,.3);
    }

    .system-alert-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    backdrop-filter: blur(6px);
    background: rgba(0,0,0,0.45);
    align-items: center;
    justify-content: center;
}

.system-alert-card {
    background: #ffffff;
    padding: 28px 32px;
    border-radius: 16px;
    width: 380px;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
    animation: scaleIn 0.25s ease;
}

.system-alert-card h5 {
    font-weight: 600;
    margin-top: 10px;
}

.system-alert-card p {
    font-size: 14px;
    color: #555;
    margin-top: 8px;
}

.alert-icon {
    font-size: 38px;
}

@keyframes scaleIn {
    from {
        transform: scale(0.92);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


    /* Desktop */
    @media (min-width: 768px) {
        .answer-textarea {
            min-height: 320px;
        }

        .btn-next {
            width: 100%;
        }

        video { 
            width: 100%; 
            border-radius: 10px; 
            min-height: 260px;
            max-height: 480px;
            background: #000; 
        }
    }
    .image-container {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }
    .app-header .logo-wrapper img {
        max-width: 150px; /* Reduced logo size for mobile */
        padding: 0 0 10px 0;
    }


    
</style>
@section('content')
<div class="interview-page" id="interview_page" style="display:none;">
    <div class="app-header w-full d-flex justify-content-start">
            <div class="header-content" id="desktop_device">
                <div class="logo-wrapper">
                    <div class="image-container">
                        <img src="{{ asset('assets/common/logo_full.png') }}" alt="Company Logo" class="img-fluid">
                    </div>
                </div>
            </div>
    </div>
    <div class="interview-container">
        <!-- Question Info -->
        <div class="question-section">
            <span class="question-count">Question 1 of 3</span>

            <p class="question-text">
                1). Can you provide an example of a time when you had to learn a
                new skill quickly to meet job requirements?
            </p>

            <p class="question-meta">
                <span>No Description</span><br>
                <span>Text Response</span> •
                <span><span id="allow_time">10</span> seconds</span> •
                <span><span id="retake_count">0</span> takes</span>
            </p>
        </div>

        <!-- ✅ Answer Card ONLY -->
        <div class="answer-card position-relative">
            <div id="text_interview" style ="display:none;">
                <textarea
                    class="answer-textarea border rounded p-2"
                    id="answerTextarea_1"
                    placeholder="Type your answer here..."
                    disabled
                oninput=handleNextBtn(1,this.value)></textarea>
                <div class="char-count">0/1000</div>
            </div>
            <div id="video_interview" style ="display:none;">
                <video id="preview" autoplay muted></video>
                <video id="recorded" controls class="d-none mt-3"></video>
            </div>
            <div id="audio_interview" style ="display:none;">
                <div id="audio_container">
                    <audio id="preview_audio" autoplay muted></audio>
                    <!-- <div class="spectrum" id="spectrum"> -->
                        <!-- Bars will be injected by JS -->
                         <canvas id="audioWaveform" width="600" height="120"></canvas>
                    </div>
                    <audio id="recorded_audio" controls class="d-none mt-3"></audio>
                </div>

            </div>
            <div id="thinkingOverlay" class="thinking_time_container" style="">
                <div class="thinking_time">
                    <svg class="progress-ring" width="120" height="120">
                        <circle
                            class="progress-ring__background"
                            stroke="#ffffffff"
                            stroke-width="8"
                            fill="transparent"
                            r="52"
                            cx="60"
                            cy="60"
                        />
                        <circle
                            class="progress-ring__circle"
                            stroke="#fba919"
                            stroke-width="8"
                            fill="transparent"
                            r="52"
                            cx="60"
                            cy="60"
                        />
                    </svg>

                    <div class="thinking_time_text">
                        <small>Starts in</small>
                        <span id="thinkingTimer">25</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Timer -->
        <div class="remaining-time">
            Remaining time <strong id="remaining_time">00:00</strong>
        </div>

        <!-- Button -->
        <div class="button" >
            <div class="" id ="record_start" style ="display:none;">
                <button type="button" class="btn btn-light text-success btn-success me-2 recordStart w-100"><span class="mdi mdi-play"></span> Start Recording</button>
            </div>
            <div class="" id ="record_stop" style ="display:none;">
                <button type="button" class="btn btn-light text-danger me-2 recordStop w-100"><span class="mdi mdi-stop"></span>Stop Recording</button>
            </div>
            
            <div class="d-flex gap-1 " id="record_vid_audio" > 
                <div class="w-100" id ="record_reset" style ="display:none;">
                    <button type="button" class="btn btn-warning recordReset w-100"><span class="mdi mdi-refresh"></span>Retake</button>
                </div>
                <div class="w-100" id ="next_btn" style ="">
                    <button type="button" class="btn btn-primary btn-next fw-bold" id="question_btn_1" onclick="startInterview()" >
                        <div id="ans_submit_btn">Start</div> 
                    </button>
                </div>
            </div>
            
        </div>
        <div class="bg-label-danger mt-2 resetInfo p-3" style ="display:none;">
            This is your final retake. Take a breath and give it your best
        </div>
    </div>

</div>
<div id="permissionModal"
     class="permission-modal align-items-center justify-content-center">
    <div class="permission-card p-4 shadow-lg rounded bg-white" style="max-width: 450px; width: 100%;">
        <h4 class="fw-bold mb-4 text-center">System Check</h4>
        <p class="text-muted small mb-4 text-center">Please wait while we verify your system requirements for the interview.</p>

        <div class="d-flex flex-column text-start gap-2">
            <div class="check-item d-flex align-items-center p-2 rounded mb-2" id="check_net">
                <div class="status-icon-container me-3">
                    <span class="spinner-border spinner-border-sm text-primary"></span>
                    <i class="mdi mdi-check-circle text-success fs-4 d-none"></i>
                    <i class="mdi mdi-close-circle text-danger fs-4 d-none"></i>
                </div>
                <span class="fw-semibold">Stable Internet Connection</span>
            </div>

            <div class="check-item d-flex align-items-center p-2 rounded mb-2" id="check_cam">
                <div class="status-icon-container me-3">
                    <span class="spinner-border spinner-border-sm text-primary d-none"></span>
                    <i class="mdi mdi-check-circle text-success fs-4 d-none"></i>
                    <i class="mdi mdi-close-circle text-danger fs-4 d-none"></i>
                </div>
                <span class="fw-semibold text-muted">Camera Access Permission</span>
            </div>

            <div class="check-item d-flex align-items-center p-2 rounded mb-2" id="check_mic">
                <div class="status-icon-container me-3">
                    <span class="spinner-border spinner-border-sm text-primary d-none"></span>
                    <i class="mdi mdi-check-circle text-success fs-4 d-none"></i>
                    <i class="mdi mdi-close-circle text-danger fs-4 d-none"></i>
                </div>
                <span class="fw-semibold text-muted">Microphone Access Permission</span>
            </div>
        </div>

        <div id="failureBlock" class="mt-4 d-none">
            <div class="alert alert-danger small py-2">
                Verification failed. Please check permissions in your browser settings.
            </div>
            <button onclick="location.reload()" class="btn btn-primary w-100 fw-bold">Try Again</button>
        </div>
    </div>
</div>
<div id="uploadModal" class="upload-modal">
    <div class="upload-box">
        <div class="spinner-border text-warning mb-3"></div>
        <p class="mb-2">Uploading answer…</p>

        <div class="progress w-100">
            <div id="uploadProgress" class="progress-bar bg-warning" style="width:0%"></div>
        </div>
    </div>
</div>

<div id="systemAlertModal" class="system-alert-modal">
    <div class="system-alert-card">
        <div class="alert-icon" id="alertIcon">⚠️</div>
        <h5 id="alertTitle">Attention</h5>
        <p id="alertMessage">
            Please do not switch tabs during the interview.
        </p>

        <button class="btn btn-primary w-100 mt-3" onclick="closeSystemAlert()">
            I Understand
        </button>
    </div>
</div>



<script>
    // config
    const CHECK_KEY = 'interview_system_passed';
    const interviewType = @json($session->interview_mode_name ?? 'text'); // video, audio, text
    let currentQuestion = null;
    let THINKING_TIME = 0;
    let DEFAULT_THINKING_TIME = 3;
    let ANSWER_TIME = 0;
    let remainingRetakes = 0;
    let totalQuestions = 0;
    let currentQuestionNumber = 0;
    let remainingSeconds = 0;
    // state
    let stream = null;
    let recorder = null;
    let chunks = [];
    // let remainingRetakes = MAX_RETAKES;
    let autoSubmitTimer = null;
    let isRecording = false;
    // let remainingSeconds = ANSWER_TIME;
    let recordInterval = null;
    let thinkingInterval = null;
    let hasStarted = false;
    let access_permision = false;
    let isAutoStop = false;
    let currentQuestionIndex = 0;
    // let totalQuestions = 3;
    let audioCtx;
    let analyser;
    // let playbackSource;
    let micSource = null;
    let spectrumRAF;
    let isSpectrumActive = false;
    let spectrumBars = [];

    let waveformCanvas = document.getElementById('audioWaveform');
    let waveformCtx = waveformCanvas.getContext('2d');
    let waveformRAF = null;

    function drawWaveform() {
        if (!analyser) return;

        const bufferLength = analyser.fftSize;
        const dataArray = new Uint8Array(bufferLength);

        function draw() {
            waveformRAF = requestAnimationFrame(draw);

            analyser.getByteTimeDomainData(dataArray);

            waveformCtx.clearRect(0, 0, waveformCanvas.width, waveformCanvas.height);

            waveformCtx.lineWidth = 2;
            waveformCtx.strokeStyle = '#fba919';
            waveformCtx.beginPath();

            const sliceWidth = waveformCanvas.width / bufferLength;
            let x = 0;

            for (let i = 0; i < bufferLength; i++) {
                const v = dataArray[i] / 128.0; // center is 128
                const y = (v * waveformCanvas.height) / 2;

                if (i === 0) {
                    waveformCtx.moveTo(x, y);
                } else {
                    waveformCtx.lineTo(x, y);
                }
                x += sliceWidth;
            }

            waveformCtx.lineTo(waveformCanvas.width, waveformCanvas.height / 2);
            waveformCtx.stroke();
        }

        draw();
    }

    function stopWaveform() {
        if (waveformRAF) {
            cancelAnimationFrame(waveformRAF);
            waveformRAF = null;
        }
        waveformCtx.clearRect(0, 0, waveformCanvas.width, waveformCanvas.height);
    }
    // elements
    const modal = document.getElementById('permissionModal');
    const permissionCheck = document.querySelector('.permission-check-box');
    const permissionDenied = document.querySelector('.permission-box');
    const page = document.querySelector('.interview-page');
    const overlay = document.getElementById('thinkingOverlay');
    const thinkingText = document.getElementById('thinkingTimer');
    const remaining = document.getElementById('remaining_time');
    const stopBtn = document.getElementById('record_stop');
    const nextBtn = document.getElementById('next_btn');
    const resetBtn = document.getElementById('record_reset');
    const textarea = document.getElementById('answerTextarea_1');
    const video = document.getElementById('preview');
    const audio = document.getElementById('preview_audio');

    // check camera & audio Access

    async function updateStatus(rowId, status) {
        const row = document.getElementById(rowId);
        const spinner = row.querySelector('.spinner-border');
        const success = row.querySelector('.mdi-check-circle');
        const danger = row.querySelector('.mdi-close-circle');
        const text = row.querySelector('span:not(.spinner-border)');

        // Reset
        spinner.classList.add('d-none');
        success.classList.add('d-none');
        danger.classList.add('d-none');

        if (status === 'loading') {
            spinner.classList.remove('d-none');
            text.classList.remove('text-muted');
        } else if (status === 'success') {
            success.classList.remove('d-none');
            row.classList.add('bg-light-success'); // Optional CSS class
        } else if (status === 'error') {
            danger.classList.remove('d-none');
            document.getElementById('failureBlock').classList.remove('d-none');
        }
    }


    async function startSystemCheck() {
        // 1. Check Internet
        await updateStatus('check_net', 'loading');
        await new Promise(r => setTimeout(r, 1000)); // Aesthetic delay
        if (navigator.onLine) {
            await updateStatus('check_net', 'success');
        } else {
            await updateStatus('check_net', 'error');
            return false;
        }

        // 2. Check Camera
        await updateStatus('check_cam', 'loading');
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
            stream.getTracks().forEach(t => t.stop());
            await updateStatus('check_cam', 'success');
        } catch (e) {
            await updateStatus('check_cam', 'error');
            return false;
        }

        // 3. Check Microphone
        await updateStatus('check_mic', 'loading');
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            stream.getTracks().forEach(t => t.stop());
            await updateStatus('check_mic', 'success');
        } catch (e) {
            await updateStatus('check_mic', 'error');
            return false;
        }

        // If all pass
        sessionStorage.setItem(CHECK_KEY, 'true');
        return true;
    }

    async function checkPermission() {
        try {
            const s = await navigator.mediaDevices.getUserMedia({
                video: interviewType === 'Video',
                // audio: false
                audio: interviewType !== 'text'
            });
            s.getTracks().forEach(t => t.stop());
            access_permision= true;
            return true;
        } catch {
            access_permision= false;
            permissionCheck.style.display="none";
            permissionDenied.style.display="block";
            return false;
        }
    }

    const circle = document.querySelector('.progress-ring__circle');
    const radius = 52;
    const circumference = 2 * Math.PI * radius;

    circle.style.strokeDasharray = circumference;
    circle.style.strokeDashoffset = circumference;

    function setProgress(current, total) {
        const offset = circumference - (current / total) * circumference;
        circle.style.strokeDashoffset = offset;
    }

    function initAudioEngine() {
        if (!audioCtx) {
            audioCtx = new (window.AudioContext || window.webkitAudioContext)({
                latencyHint: 'interactive'
            });
            analyser = audioCtx.createAnalyser();
            analyser.fftSize = 512;
        }

        if (audioCtx.state === 'suspended') {
            audioCtx.resume();
        }
    }


    // function initSpectrum(barCount = 50) {
    //     const container = document.getElementById('spectrum');
    //     container.innerHTML = '';
    //     spectrumBars = [];

    //     for (let i = 0; i < barCount; i++) {
    //         const bar = document.createElement('div');
    //         bar.className = 'spectrum-bar';
    //         container.appendChild(bar);
    //         spectrumBars.push(bar);
    //     }
    // }

    // function connectMicToSpectrum(stream) {
    //     initAudioEngine();

    //     if (micSource) micSource.disconnect();
    //     micSource = audioCtx.createMediaStreamSource(stream);
    //     micSource.connect(analyser);

    //     startSpectrum();
    // }



    // function connectPlaybackToSpectrum(audioEl) {
    //     initAudioEngine();

    //     const source = audioCtx.createMediaElementSource(audioEl);
    //     source.connect(analyser);
    //     analyser.connect(audioCtx.destination);

    //     audioEl._mediaSource = source; // optional reference
    // }

    // function connectPlaybackToSpectrum(audioEl) {
    //     initAudioEngine();

    //     // Create the source
    //     const source = audioCtx.createMediaElementSource(audioEl);
        
    //     // Attach it to the element so we can find it during removeRecordedPreview()
    //     audioEl._mediaSource = source; 

    //     source.connect(analyser);
    //     analyser.connect(audioCtx.destination);
    // }




    // function startSpectrum() {
    //     if (isSpectrumActive) return;
    //     isSpectrumActive = true;

    //     const data = new Uint8Array(analyser.frequencyBinCount);

    //     function draw() {
    //         if (!isSpectrumActive) return;

    //         analyser.getByteFrequencyData(data);
    //         const step = Math.floor(data.length / spectrumBars.length);

    //         spectrumBars.forEach((bar, i) => {
    //             const v = data[i * step] / 255;
    //             bar.style.height = `${Math.max(v * 100, 6)}%`;
    //         });

    //         spectrumRAF = requestAnimationFrame(draw);
    //     }
    //     draw();
    // }

    // function stopSpectrum() {
    //     isSpectrumActive = false;
    //     cancelAnimationFrame(spectrumRAF);

    //     spectrumBars.forEach(bar => {
    //         bar.style.height = '6%';
    //     });
    // }



    // start Thinking Time
    // function startThinking(seconds = DEFAULT_THINKING_TIME) {
    //     console.log("interview Start")
    //     clearInterval(thinkingInterval);

    //     let t = seconds;
    //     overlay.style.display = 'flex';
    //     thinkingText.textContent = t;
    //     setProgress(t, seconds);

    //     thinkingInterval = setInterval(() => {
    //         t--;
    //         thinkingText.textContent = t;
    //         setProgress(t, seconds);

    //         if (t <= 0) {
    //             clearInterval(thinkingInterval);
    //             overlay.style.display = 'none';
    //             startAnswer();
    //         }
    //     }, 1000);
    // }

    function startThinking(seconds) {
        clearInterval(thinkingInterval);

        let t = seconds;
        overlay.style.display = 'flex';
        thinkingText.textContent = t;
        setProgress(t, seconds);

        thinkingInterval = setInterval(() => {
            t--;
            thinkingText.textContent = t;
            setProgress(t, seconds);

            if (t <= 0) {
                clearInterval(thinkingInterval);
                overlay.style.display = 'none';
                startAnswer();
            }
        }, 1000);
    }


    // start Answer Time
    function startAnswer() {
         $(`#ans_submit_btn`).text('Save & Next');
        if (interviewType === 'text') {
            textarea.disabled = false;
            textarea.focus();
            startTextTimer();
        } else {
            startRecording();
        }
    }

    function formatTime(seconds) {
        const m = Math.floor(seconds / 60);
        const s = seconds % 60;
        return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
    }

    function startTextTimer() {
        let t = ANSWER_TIME;
        const i = setInterval(() => {
            remaining.textContent = formatTime(t);
            if (--t < 0) {
                clearInterval(i);
                submit();
                 console.log("startTextTimer")
            }
        }, 1000);
    }

    function startInterview() {
        if (!hasStarted) {
            hasStarted = true;

            // Instant UX feedback
            document.getElementById('ans_submit_btn').innerText = 'Preparing...';

            startThinking(DEFAULT_THINKING_TIME);
            return;
        }

        if (document.getElementById('ans_submit_btn').innerText === 'Save & Next') {
            submit();
        }
    }


    function getSupportedMimeType() {
        const types = [
            'video/webm;codecs=vp9,opus',
            'video/webm;codecs=vp8,opus',
            'video/webm',
            'audio/webm;codecs=opus',
            'audio/webm'
        ];
        return types.find(t => MediaRecorder.isTypeSupported(t)) || '';
    }


    // start Auto Record
    async function startRecording() {
        stream = await navigator.mediaDevices.getUserMedia({
            video: interviewType === 'Video',
            // audio: {
            //     echoCancellation: false,
            //     noiseSuppression: false,
            //     autoGainControl: false,
            //     channelCount: 1
            // }
            // audio:false
            audio: {
                echoCancellation: true,
                noiseSuppression: true,
                autoGainControl: true,
                channelCount: 1,
                sampleRate: 44100
            }
        });

        /* LIVE PREVIEW */
        if (interviewType === 'Video') {
            video.srcObject = stream;
            video.muted = true;
            video.playsInline = true;
            video.classList.remove('d-none');
            video.play();
        } else {
           audio.srcObject = stream;
            audio.muted = true;
            await audio.play();

            initAudioEngine();

            micSource = audioCtx.createMediaStreamSource(stream);
            micSource.connect(analyser);

            drawWaveform();
            // connectMicToSpectrum(stream);
        }

        

        chunks = [];
        // recorder = new MediaRecorder(stream);
        recorder = new MediaRecorder(stream, {
            mimeType: getSupportedMimeType(),
            audioBitsPerSecond: 128000,
            videoBitsPerSecond: 2500000
        });


        recorder.ondataavailable = e => chunks.push(e.data);
        recorder.onstop = handleStop;

        recorder.start();
        startRecordTimer();

        
        document.getElementById('record_stop').style.display = 'block';
        document.getElementById('next_btn').style.display = 'none';
    }


    function startRecordTimer() {
        clearInterval(recordInterval);
        remainingSeconds = ANSWER_TIME;

        recordInterval = setInterval(() => {
            remaining.textContent = formatTime(remainingSeconds);

            remainingSeconds--;

            if (remainingSeconds < 0) {
                clearInterval(recordInterval);
                isAutoStop = true; //  AUTO STOP
                if (recorder && recorder.state === 'recording') {
                     console.log("auto stop recorder");
                    recorder.stop();
                }
            }
        }, 1000);
    }


    stopBtn.onclick = () => {
        if (recorder && recorder.state === 'recording') {
            clearInterval(recordInterval);
            console.log("stop recorder");
            isAutoStop = false; // 
            recorder.stop();
            
        }
    };


    function handleStop() {
        clearInterval(recordInterval);

        const blob = new Blob(chunks, { type: recorder.mimeType });
        const url = URL.createObjectURL(blob);

        stream.getTracks().forEach(t => t.stop());

        remaining.textContent =
           formatTime(remainingSeconds);

        if (interviewType === 'Video') {
            video.classList.add('d-none');
            const recorded = document.getElementById('recorded');
            video.srcObject = null;
            recorded.src = url;
            recorded.controls = true;
            recorded.classList.remove('d-none');
        }
        if (interviewType === 'Audio') {
            audio.srcObject = null;
            // stopSpectrum();

            // 1. Clean up existing one first
            removeRecordedPreview(); 

            // 2. Create a BRAND NEW audio element
            const recordedAudio = document.createElement('audio');
            recordedAudio.id = 'recorded_audio';
            recordedAudio.controls = true;
            recordedAudio.className = 'mt-3 w-100'; // Added width for better UI
            recordedAudio.src = url;

            document.getElementById('audio_container').appendChild(recordedAudio);

            initAudioEngine();

            const source = audioCtx.createMediaElementSource(recordedAudio);
            source.connect(analyser);
            analyser.connect(audioCtx.destination);

            recordedAudio._mediaSource = source;

            recordedAudio.onplay = async () => {
                if (audioCtx.state === 'suspended') await audioCtx.resume();
                drawWaveform();
            };

            recordedAudio.onpause = () => stopWaveform();
            recordedAudio.onended = () => stopWaveform();
            // 3. Connect spectrum safely
            // connectPlaybackToSpectrum(recordedAudio);

            // recordedAudio.onplay = async () => {
            //     if (audioCtx.state === 'suspended') await audioCtx.resume();
            //     // startSpectrum();
            // };

            // recordedAudio.onpause = () => stopSpectrum();
            // recordedAudio.onended = () => stopSpectrum();
        }
        // if (interviewType === 'audio') {
        //     audio.srcObject = null;
        //     stopSpectrum();

        //    const oldAudio = document.getElementById('recorded_audio');
        //     if (oldAudio) {
        //         oldAudio.pause();
        //         if (oldAudio.src) URL.revokeObjectURL(oldAudio.src);
        //         oldAudio.remove();
        //     }


        //     // Create a BRAND NEW audio element
        //     const recordedAudio = document.createElement('audio');
        //     recordedAudio.id = 'recorded_audio';
        //     recordedAudio.controls = true;
        //     recordedAudio.className = 'mt-3';
        //     recordedAudio.src = url;

        //     // Append it
        //     document.getElementById('audio_container').appendChild(recordedAudio);

        //     // Connect spectrum safely
        //     connectPlaybackToSpectrum(recordedAudio);

        //     recordedAudio.onplay = async () => {
        //         await audioCtx.resume();
        //         startSpectrum();
        //     };

        //     recordedAudio.onpause =
        //     recordedAudio.onended = () => stopSpectrum();
        // }



        
         $(`#ans_submit_btn`).text('Save & Next');
        // document.getElementById('record_stop').style.display = 'none';
        // document.getElementById('next_btn').style.display = 'block';
        document.getElementById('record_stop').style.display = 'none';
        document.getElementById('next_btn').style.display = 'block';
        document.getElementById('ans_submit_btn').innerText = 'Save & Next';


        if (remainingRetakes > 0) {
            resetBtn.style.display = 'block';
        } else {
            resetBtn.style.display = 'none';
        }
        updateRetakeUI();



        if (isAutoStop) {
            console.log("stop record")
            submit(); // only when time ends
        }
        
        // setTimeout(submit, 1000);
    }

    function cleanupMedia() {

        // stopSpectrum();
        stopWaveform();
        // Stop stream
        if (stream) {
            stream.getTracks().forEach(t => t.stop());
            stream = null;
        }

        // Reset LIVE preview
        if (video) {
            video.pause();
            video.srcObject = null;
            video.classList.add('d-none');
        }

        if (audio) {
            audio.pause();
            audio.srcObject = null;
        }

        // Remove RECORDED preview
        removeRecordedPreview();

        // Reset analyser
        if (micSource) {
            micSource.disconnect();
            micSource = null;
        }

        chunks = [];
    }


    function removeRecordedPreview() {
        // VIDEO CLEANUP
        const recordedVideo = document.getElementById('recorded');
        if (recordedVideo) {
            recordedVideo.pause();
            if (recordedVideo.src && recordedVideo.src.startsWith('blob:')) {
                URL.revokeObjectURL(recordedVideo.src);
            }
            recordedVideo.src = ""; // Use empty string instead of removeAttribute for better cleanup
            recordedVideo.load();
            recordedVideo.classList.add('d-none');
        }

        // AUDIO CLEANUP
        const recordedAudio = document.getElementById('recorded_audio');
        if (recordedAudio) {
            recordedAudio.pause();
            
            // DISCONNECT FROM AUDIO CONTEXT BEFORE REVOKING
            if (recordedAudio._mediaSource) {
                recordedAudio._mediaSource.disconnect();
                recordedAudio._mediaSource = null;
            }

            if (recordedAudio.src && recordedAudio.src.startsWith('blob:')) {
                const oldUrl = recordedAudio.src;
                // Use a slight timeout to ensure the browser has released the file handle
                setTimeout(() => URL.revokeObjectURL(oldUrl), 100);
            }
            
            recordedAudio.remove();
        }
    }
    // function removeRecordedPreview() {
    //     // VIDEO
    //     const recordedVideo = document.getElementById('recorded');
    //     if (recordedVideo) {
    //         recordedVideo.pause();
    //         if (recordedVideo.src) URL.revokeObjectURL(recordedVideo.src);
    //         recordedVideo.removeAttribute('src');
    //         recordedVideo.load();
    //         recordedVideo.classList.add('d-none');
    //     }

    //     // AUDIO
    //     const recordedAudio = document.getElementById('recorded_audio');
    //     if (recordedAudio) {
    //         recordedAudio.pause();
    //         if (recordedAudio.src) URL.revokeObjectURL(recordedAudio.src);
    //         recordedAudio.remove();
    //     }
    // }

    // retake
    resetBtn.onclick = () => {
        if (remainingRetakes <= 0) return;
        $(`#ans_submit_btn`).text('Start');
        cleanupMedia(); // removes old recorded video/audio

        remainingRetakes--;
        updateRetakeUI();

        clearInterval(recordInterval);
        remaining.textContent = formatTime(ANSWER_TIME);

        hasStarted = false;
        isAutoStop = false;
        chunks = [];

        resetBtn.style.display = 'none';

        startThinking(DEFAULT_THINKING_TIME);
    };

    function updateRetakeUI() {
        document.getElementById('retake_count').innerText = remainingRetakes;

        if (remainingRetakes <= 0) {
            resetBtn.style.display = 'none';
            document.querySelector('.resetInfo').style.display = 'block';
        } else {
            resetBtn.style.display = 'block';
            document.querySelector('.resetInfo').style.display = 'none';
        }
    }

 

    // submit answer
    // function submit() {
    //     console.log('ANSWER SAVED FOR QUESTION', currentQuestionIndex + 1);

    //     // send answer to backend here (AJAX / fetch)
    //     const formData = new FormData();
    //     formData.append('question_id', currentQuestionIndex);
    //     formData.append('type', interviewType);

    //     if (interviewType === 'text') {
    //         formData.append('answer', textarea.value);
    //     } else {
    //         const blob = new Blob(chunks, { type: recorder.mimeType });
    //         formData.append('answer', blob);
    //     }

    //     // fetch('/interview/save-answer', {
    //     //     method: 'POST',
    //     //     body: formData,
    //     //     headers: {
    //     //         'X-CSRF-TOKEN': '{{ csrf_token() }}'
    //     //     }
    //     // }).then(() => {
    //     //     if (currentQuestionIndex < totalQuestions - 1) {
    //     //         loadNextQuestion();
    //     //     } else {
    //     //         finalizeInterview();
    //     //     }
    //     // });

    //     if (currentQuestionIndex < totalQuestions - 1) {
    //         loadNextQuestion();
    //         // console.log('LOADING NEXT QUESTION');
    //     } else {
    //         finalizeInterview();
    //     }
    // }


    // function loadNextQuestion() {
    //     cleanupMedia()
    //     currentQuestionIndex++;

    //     console.log('LOADING QUESTION', currentQuestionIndex + 1);

    //     // // 🔁 RESET UI
    //     resetQuestionUI();

    //     // 🔽 FETCH NEXT QUESTION FROM BACKEND
    //     // fetch(`/interview/question/${currentQuestionIndex}`)
    // }

    function finalizeInterview() {
        cleanupMedia()
        console.log('FINAL SUBMIT');
        // redirect / thank you page
    }


    function resetQuestionUI() {
        clearInterval(recordInterval);
        clearInterval(thinkingInterval);
        remainingSeconds = ANSWER_TIME;
        remaining.textContent = formatTime(ANSWER_TIME);
        hasStarted = false;
        isAutoStop = false;

        chunks = [];
        // remainingRetakes = MAX_RETAKES;
        updateRetakeUI();

        document.getElementById('recorded').classList.add('d-none');
        document.getElementById('ans_submit_btn').innerText = 'Start';
    }


    // Refresh Guard
    function preventRefresh(block) {
        window.onbeforeunload = block ? () => true : null;
    }

    // initial 
    // document.addEventListener('DOMContentLoaded', async () => {
    //     const modal = document.getElementById('permissionModal');
    //     const pageContent = document.getElementById('page');
    //     // initSpectrum();
    //     // if (sessionStorage.getItem(CHECK_KEY) === 'true') {
    //     //     modal.style.setProperty('display', 'none', 'important');
    //     //     page.style.display = 'block';
    //     //     remaining.textContent = formatTime(ANSWER_TIME);
    //     //     // remainingRetakes = MAX_RETAKES;
    //     //     updateRetakeUI();
    //     //     loadNextQuestion();
    //     //     // Initialize your interview logic here
    //     //     // startThinking(DEFAULT_THINKING_TIME); 
    //     //     return;
    //     // }

    //     const allPassed = await startSystemCheck();

    //     if (allPassed) {
    //         setTimeout(() => {
    //             modal.style.setProperty('display', 'none', 'important');
    //             // pageContent.style.display = 'block';
    //             page.style.display = 'block';
    //             remaining.textContent = formatTime(ANSWER_TIME);
    //             // remainingRetakes = MAX_RETAKES;
    //             updateRetakeUI();
    //             // startThinking(DEFAULT_THINKING_TIME);
    //         }, 800); // Small delay to let user see the final checkmark
    //     }
    //     // const ok = await checkPermission();
    //     // if (!ok) {
    //     //     modal.style.display = 'flex';
    //     //     page.style.display = 'none';
    //     //     return;
    //     // }

    //     // modal.style.display = 'none';
    //     // page.style.display = 'block';

    //     // remaining.textContent = `00:${ANSWER_TIME}`;
    //     // remainingRetakes = MAX_RETAKES;
    //     // updateRetakeUI();
           
    //     // startThinking(DEFAULT_THINKING_TIME);
        
    // });

    document.addEventListener('DOMContentLoaded', async () => {
    const modal = document.getElementById('permissionModal');
    const page  = document.getElementById('interview_page');

    // Always re-check on refresh
    sessionStorage.removeItem(CHECK_KEY);

    modal.style.display = 'flex';
    page.style.display  = 'none';

    const allPassed = await startSystemCheck();

    if (!allPassed) {
        modal.style.display = 'flex';
        page.style.display  = 'none';
        return;
    }

    // ✅ SUCCESS
    modal.style.display = 'none';
    page.style.display  = 'block';

    remaining.textContent = formatTime(ANSWER_TIME);
    updateRetakeUI();
    loadNextQuestion();
});


    async function loadNextQuestion() {
        const res = await fetch(
            '/interview/question/next?session_token={{ $session->session_token }}'
        );
        const data = await res.json();

        if (data.completed) {
            finalizeInterview();
            return;
        }

        currentQuestion = data.question;

        // 🔹 DYNAMIC VALUES FROM DB
        THINKING_TIME     = parseInt(currentQuestion.thinking_time || 0);
        ANSWER_TIME       = parseInt(currentQuestion.allowed_time || 60);
        remainingRetakes  = parseInt(currentQuestion.retakes || 0);

        // UI
        document.querySelector('.question-count').innerText =
            `Question ${data.progress.current} of ${data.progress.total}`;

        document.querySelector('.question-text').innerText =
            currentQuestion.field_name;

        document.getElementById('allow_time').innerText = ANSWER_TIME;
        document.getElementById('retake_count').innerText = remainingRetakes;

        remainingSeconds = ANSWER_TIME;
        remaining.textContent = formatTime(ANSWER_TIME);

        resetQuestionUI();

        // ✅ START THINKING WITH DB VALUE
        startThinking(THINKING_TIME);
    }


function submit() {

    if (!isOnline()) {
        toastr.error(
            'No internet connection. Please reconnect and try again.',
            'Connection Lost'
        );
        return; 
    }

     if (!currentQuestion || !currentQuestion.question_id) {
        console.error('❌ submit called before question loaded');
        showSystemAlert({
            title: 'System Error',
            message: 'Question not loaded yet. Please wait.',
            type: 'error'
        });
        return;
    }
    const formData = new FormData();
    formData.append('session_token', '{{ $session->session_token }}');
    formData.append('question_id', currentQuestion.question_id);
    formData.append('answer_type', interviewType.toLowerCase());
    formData.append('time_taken', ANSWER_TIME - remainingSeconds);
    formData.append('retake_count', (currentQuestion.retakes - remainingRetakes));

    if (interviewType === 'text') {
        formData.append('answer_text', textarea.value);
    } else {
        const blob = new Blob(chunks, { type: recorder.mimeType });
        formData.append('answer_file', blob);
    }

    // SHOW MODAL
    const modal = document.getElementById('uploadModal');
    modal.style.display = 'flex';

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/interview/answer/save', true);
    xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');

    xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
            const percent = Math.round((e.loaded / e.total) * 100);
            document.getElementById('uploadProgress').style.width = percent + '%';
        }
    };

    xhr.onload = function () {
        modal.style.display = 'none';
        cleanupMedia();
        loadNextQuestion();
    };

    xhr.onerror = function () {
        modal.style.display = 'none';
        // alert('Upload failed. Please retry.');
        showSystemAlert({
            title: 'Upload Failed',
            message: 'We could not upload your answer due to a network issue. Please retry.',
            type: 'error'
        });
        document.getElementById('next_btn').style.display = 'block';
        document.getElementById('ans_submit_btn').innerText = 'Save & Next';

    };

    xhr.send(formData);
}

function showSystemAlert({ title, message, type = 'warning' }) {
    const modal = document.getElementById('systemAlertModal');
    const icon  = document.getElementById('alertIcon');

    document.getElementById('alertTitle').innerText = title;
    document.getElementById('alertMessage').innerText = message;

    // Icon based on type
    if (type === 'error') icon.innerText = '❌';
    else if (type === 'info') icon.innerText = 'ℹ️';
    else icon.innerText = '⚠️';

    modal.style.display = 'flex';
}

function closeSystemAlert() {
    document.getElementById('systemAlertModal').style.display = 'none';
}


let tabSwitchCount = 0;

document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        tabSwitchCount++;

        // OPTIONAL: log to backend
        fetch('/interview/tab-switch', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                session_token: '{{ $session->session_token }}'
            })
        });

        showTabWarning();
    }
});

function showTabWarning() {
    showSystemAlert({
        title: 'Interview Rule Violation',
        message: 'Please do not switch tabs or applications during the interview. Repeated actions may lead to disqualification.',
        type: 'warning'
    });
}

function isOnline() {
    return navigator.onLine;
}


window.addEventListener('offline', () => {
    toastr.warning(
        'You are offline. Answers will not submit until connection is restored.',
        'Network Disconnected'
    );
});

window.addEventListener('online', () => {
    toastr.success(
        'Internet connection restored.',
        'Back Online'
    );
});



    
</script>

<script>
    let recordingTimer = null;
    // Clean up on page exit (production safety)
   window.addEventListener('beforeunload', () => {
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
        }
    });
    if (interviewType === 'Video') {
        document.getElementById('video_interview').style.display = 'block';
    }
    if (interviewType === 'Audio') {
        document.getElementById('audio_interview').style.display = 'block';
    }
    if (interviewType === 'text') {
        document.getElementById('answerTextarea_1').disabled = false;
    }

</script>

@endsection