{{-- ========================================= --}}
{{-- SmartCBT Professional Header --}}
{{-- ========================================= --}}

<div class="exam-header rounded-4 shadow-sm mb-4 p-3 p-lg-4">

    <div class="row align-items-center gy-4">

        {{-- Logo --}}
        <div class="col-lg-2 col-md-6 col-12">

            <div class="d-flex align-items-center">

                <div class="logo-circle me-3">

                    <i class="bi bi-mortarboard-fill"></i>

                </div>

                <div>

                    <h2 class="logo-text mb-0">

                        Smart<span>CBT</span>

                    </h2>

                    <small class="text-white-50">

                        Professional Examination System

                    </small>

                </div>

            </div>

        </div>

        {{-- Exam --}}
        <div class="col-lg-3 col-md-6 text-center">

            <h4 class="exam-title mb-1">

                {{ $examAttempt->examBatch?->examType?->name ?? 'Practice Test' }}

            </h4>

            <small class="text-white">

                {{ $examAttempt->examBatch?->subject?->name
                    ?? $examAttempt->practiceBatch?->subject?->name }}

                @if($examAttempt->examBatch?->year)

                    • {{ $examAttempt->examBatch->year->name }}

                @endif

            </small>

        </div>

        {{-- Professional Timer --}}
        <div class="col-lg-2 col-md-4">

            <div
                id="timer-box"
                class="timer-box mx-auto"
                data-duration="{{ $examAttempt->duration_minutes * 60 }}"
                data-started="{{ optional($examAttempt->started_at)->timestamp }}"
            >

                <small>

                    <i class="bi bi-clock-history"></i>

                    Time Remaining

                </small>

                <h2 id="exam-timer">

                    {{ gmdate('H:i:s',$examAttempt->time_remaining) }}

                </h2>

            </div>

        </div>

        {{-- Shortcuts --}}
        <div class="col-lg-3 col-md-4">

            <div class="row">

                <div class="col-6">

    <button
        type="button"
        class="shortcut border-0 bg-transparent w-100"
        data-bs-toggle="modal"
        data-bs-target="#calculatorModal">

        <i class="bi bi-calculator"></i>

        <span>Calculator</span>

    </button>

</div>

                <div class="col-6">

                   <button
    type="button"
    class="shortcut border-0 bg-transparent w-100"
    data-bs-toggle="modal"
    data-bs-target="#formulaSheetModal">

    <i class="bi bi-journal-bookmark-fill"></i>

    <span>Formula</span>

</button>

                </div>

            </div>

        </div>

        {{-- Candidate --}}
        <div class="col-lg-2 col-md-4">

            <div class="candidate-box">

                <div class="candidate-avatar">

                    <i class="bi bi-person-fill"></i>

                </div>

                <div class="candidate-name">

                    <strong>

                        {{ $examAttempt->student->name }}

                    </strong>

                    <small>

                        Candidate

                    </small>

                </div>

            </div>

        </div>

    </div>

</div>

{{-- ========================================= --}}
{{-- Anti Cheating Status --}}
{{-- ========================================= --}}

<div
    id="security-banner"
    class="alert alert-success d-flex justify-content-between align-items-center mb-4">

    <div>

        <i class="bi bi-shield-lock-fill"></i>

        <strong>

            Secure Exam Mode Active

        </strong>

    </div>

    <div>

        Tab Switches :

        <span
            id="tab-switch-count"
            class="badge bg-dark">

            0

        </span>

    </div>
    <!-- ========================================= -->
<!-- SmartCBT Toast Notification -->
<!-- ========================================= -->

<div class="position-fixed top-0 end-0 p-3" style="z-index:99999;">

    <div
        id="exam-toast"
        class="toast align-items-center text-bg-warning border-0"
        role="alert"
        aria-live="assertive"
        aria-atomic="true">

        <div class="d-flex">

            <div
                id="toast-message"
                class="toast-body fw-semibold">

                Warning

            </div>

            <button
                type="button"
                class="btn-close btn-close-white me-2 m-auto"
                data-bs-dismiss="toast">

            </button>

        </div>

    </div>

</div>

</div>

<style>

.exam-header{

    background:linear-gradient(90deg,#081d4d,#10367f);

}

.logo-circle{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

}

.logo-circle i{

    font-size:32px;

    color:#0d6efd;

}

.logo-text{

    color:#fff;

    font-weight:700;

}

.logo-text span{

    color:#19d3ff;

}

.exam-title{

    color:#fff;

    font-weight:700;

}

.timer-box{

    background:rgba(255,255,255,.08);

    border:2px solid rgba(255,255,255,.2);

    border-radius:18px;

    text-align:center;

    color:#fff;

    padding:12px;

    transition:.3s;

}

.timer-box h2{

    margin:0;

    color:#FFD43B;

    font-weight:700;

    letter-spacing:2px;

}

.timer-warning{

    background:#ffc107!important;

    color:#000!important;

}

.timer-danger{

    background:#dc3545!important;

    color:#fff!important;

    animation:pulse .8s infinite;

}

.timer-danger h2{

    color:#fff!important;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

.shortcut{

    color:#fff;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

}

.shortcut i{

    font-size:28px;

}

.shortcut:hover{

    color:#FFD43B;

}

.candidate-box{

    display:flex;

    align-items:center;

}

.candidate-avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#0d6efd;

    font-size:28px;

}

.candidate-name{

    margin-left:12px;

    color:#fff;

}

#security-banner{

    border-left:6px solid #198754;

    font-weight:600;

}

.security-warning{

    background:#fff3cd!important;

    color:#856404!important;

}

.security-danger{

    background:#f8d7da!important;

    color:#842029!important;

}

@media(max-width:768px){

    .exam-title{

        font-size:18px;

    }

}

</style>


{{-- ========================================= --}}
{{-- Statistics Card --}}
{{-- ========================================= --}}

<div class="card border-0 shadow-sm rounded-4 mb-4">

    <div class="card-body py-4">

        <div class="row g-3 align-items-center">

            {{-- Candidate --}}
            <div class="col-12 col-lg-3">

                <div class="d-flex align-items-center">

                    <div class="stats-icon rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center">

                        <i class="bi bi-person-fill text-primary"></i>

                    </div>

                    <div class="ms-2">

                        <small class="text-muted d-block">
                            Candidate
                        </small>

                        <h6 class="fw-bold mb-0">
                            {{ $examAttempt->student->name }}
                        </h6>

                    </div>

                </div>

            </div>

            {{-- Exam --}}
            <div class="col-12 col-lg-3">

                <div class="d-flex align-items-center">

                    <div class="stats-icon rounded-circle bg-info bg-opacity-10 d-flex align-items-center justify-content-center">

                        <i class="bi bi-journal-text text-info"></i>

                    </div>

                    <div class="ms-2">

                        <small class="text-muted d-block">
                            Exam
                        </small>

                        <h6 class="fw-bold mb-0">

                            {{ $examAttempt->examBatch?->examType?->name ?? 'Practice' }}

                            -

                            {{ $examAttempt->examBatch?->subject?->name
                                ?? $examAttempt->practiceBatch?->subject?->name }}

                        </h6>

                    </div>

                </div>

            </div>

            {{-- Total --}}
            <div class="col-6 col-md-3 col-lg-1 text-center">

                <small class="text-muted d-block">

                    Total

                </small>

                <h4 class="fw-bold mb-0">

                    {{ $totalQuestions }}

                </h4>

            </div>

            {{-- Answered --}}
            <div class="col-6 col-md-3 col-lg-1 text-center">

                <small class="text-muted d-block">

                    Answered

                </small>

                <h4
                    id="answered-count"
                    class="fw-bold text-primary mb-0">

                    {{ $answeredQuestions }}

                </h4>

            </div>

            {{-- Remaining --}}
            <div class="col-6 col-md-3 col-lg-1 text-center">

                <small class="text-muted d-block">

                    Remaining

                </small>

                <h4
                    id="remaining-count"
                    class="fw-bold text-warning mb-0">

                    {{ $examAttempt->unanswered_questions }}

                </h4>

            </div>

            {{-- Correct --}}
            <div class="col-6 col-md-3 col-lg-1 text-center">

                <small class="text-muted d-block">

                    Correct

                </small>

                <h4
                    id="correct-count"
                    class="fw-bold text-success mb-0">

                    {{ $examAttempt->correct_answers }}

                </h4>

            </div>

            {{-- Wrong --}}
            <div class="col-6 col-md-3 col-lg-1 text-center">

                <small class="text-muted d-block">

                    Wrong

                </small>

                <h4
                    id="wrong-count"
                    class="fw-bold text-danger mb-0">

                    {{ $examAttempt->wrong_answers }}

                </h4>

            </div>

            {{-- Flagged --}}
            <div class="col-6 col-md-3 col-lg-1 text-center">

                <small class="text-muted d-block">

                    Flagged

                </small>

                <h4
                    id="flagged-count"
                    class="fw-bold text-secondary mb-0">

                    {{ $flaggedQuestions }}

                </h4>

            </div>

        </div>

        {{-- Progress --}}

        <div class="mt-4">

            <div class="d-flex justify-content-between mb-2">

                <span class="fw-semibold">

                    Progress

                </span>

                <span
                    id="percentage"
                    class="fw-bold">

                    {{ $examAttempt->percentage }}%

                </span>

            </div>

            <div
                class="progress"
                style="height:10px;">

                <div
                    id="progress-bar"
                    class="progress-bar bg-success"
                    role="progressbar"
                    style="width: {{ $examAttempt->percentage }}%;">

                </div>

            </div>

        </div>

        {{-- End Exam --}}

        <div class="text-end mt-4">

            <button
                class="btn btn-outline-danger px-4"
                data-bs-toggle="modal"
                data-bs-target="#submitExamModal">

                <i class="bi bi-power me-2"></i>

                End Exam

            </button>

        </div>

    </div>

</div>

<style>

.stats-icon{

    width:60px;
    height:60px;
    flex-shrink:0;

}

.stats-icon i{

    font-size:28px;

}

@media (max-width:768px){

    .stats-icon{

        width:46px;
        height:46px;

    }

    .stats-icon i{

        font-size:20px;

    }

    .card-body h4{

        font-size:20px;

    }

    .card-body h6{

        font-size:15px;

    }

    .card-body small{

        font-size:12px;

    }

}

</style>


<style>

.navbar{

    border-radius:20px;

}

.progress{

    background:#e9ecef;

}

.progress-bar{

    transition:width .4s ease;

}

@media(max-width:991px){

    .navbar-brand .fw-bold{

        font-size:24px !important;

    }

    .navbar h2{

        font-size:22px !important;

        margin:20px 0;

    }

}

@media(max-width:768px){

    #exam-timer{

        font-size:30px;

    }

    .card h4{

        font-size:20px;

    }

}


</style>