@extends('user.index')

@section('content')
    <div id="container">
        @include('user.navbar')
        <div class="header-holder"></div>
        <div>
            <div class="text-right">
                <p class="ng-star-inserted">
                    <span class="subheader-text">Logged in as {{ Auth::user()->first_name }}
                        {{ Auth::user()->last_name }}</span>
                    <span class="subheader-text" style="cursor: pointer"
                        onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</span>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf
                </form>
                </p>
            </div>
            <br /><br />
            <div class="row">
                <div class="col-sm-12">
                    <div id="examInfo">
                        <h3 style="color: #0772ba" class="left">
                            Available Assessments
                        </h3>
                        <p id="assessmentCounts" class="left">
                            <span class="ng-star-inserted">
                                The following assessments are available to you. Please select an assessment to begin
                            </span>
                        </p>
                        <p class="left">
                            If you have multiple assessments available, you will be returned to this page at the end of each
                            assessment.
                        </p>
                        <div id="examOptions">
                            <div class="text-center" id="sessionArea">
                                @forelse ($examQuizzes as $exam)
                                    <div class="ng-star-inserted">
                                        <a href="#" class="ng-star-inserted text-decoration-none load-exam"
                                            data-exam-id="{{ $exam->id }}">
                                            <div class="input-button">
                                                <b>
                                                    {{ $exam->title }} ({{ ucfirst($exam->type) }})
                                                    <span>({{ count($exam->questions) }} Questions)</span>
                                                </b>
                                            </div>
                                        </a>
                                        <br />
                                    </div>
                                @empty
                                    <p class="text-muted">No assessments available at this time.</p>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12"></div>
            </div>
        </div>
    @endsection

    @section('styles')
        <style>
            .text-right {
                text-align: right !important;
            }

            ion-icon {
                visibility: hidden;
            }

            .hydrated {
                visibility: inherit;
            }

            #version {
                position: fixed;
                bottom: 0;
                right: 34px;
                z-index: 99999;
                background: white;
                border: 1px solid lightslategrey;
                padding: 2px;
                font-size: 12px;
                color: lightslategrey;
            }

            #container {
                margin-right: 30px;
                margin-left: 30px;
                background-color: #fafafa;
                box-shadow: #aaa 0 0 30px;
                padding-left: 30px;
                padding-right: 30px;
                min-height: 100vh;
                font-family: Arial, sans-serif !important;
                font-size: 12px !important;
            }

            #examInfo {
                border: 1px solid #ccc;
                padding: 15px;
                background: #fff;
            }

            .header-main {
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                text-align: center;
                font-weight: 400;
                font-size: 75px;
                font-family: "Yanone Kaffeesatz", sans-serif;
                color: #0772ba;
                margin-top: 40px;
            }

            .header-holder {
                width: 100%;
                height: 180px;
            }

            .input-button {
                cursor: pointer;
                color: #f9fafe;
                text-align: center;
                border-radius: 2px;
                border: 1px solid #486fb2;
                background: linear-gradient(to bottom, #99c3e9, #5271b4) rgba(0, 0, 0, 0);
                max-width: 700px;
                margin: 0 auto;
                padding: 6px 20px;
            }

            .subheader-text {
                font-size: 16px;
                color: #0772ba;
                margin-left: 20px;
            }

            h3 {
                font-weight: 400;
                font-family: "Yanone Kaffeesatz", sans-serif;
            }

            #progrssBar {
                float: left;
                width: 85%;
                height: 35px;
                background-color: #e5e5e5;
                border: 1px solid #0772ba;
                position: relative;
            }

            #progress {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
            }

            #navigationprogressbox {
                user-select: none;
                font-weight: 400;
                vertical-align: middle;
                padding: 8px;
                float: left;
                border: 1px solid #0772ba;
                background-color: #0772ba;
                color: #fff;
                text-align: center;
                height: 35px;
                width: 15%;
            }

            #welcomeHeader {
                color: red;
                margin-top: 50px;
                font-size: 14px;
            }

            #content {
                margin-top: 35px;
            }

            .hide {
                display: none;
            }

            #btnContinue,
            #startBtn {
                background: #597eba;
                color: #fff;
                border-radius: 5px;
                padding: 10px;
                font-weight: 700;
                cursor: pointer;
                border: 1px solid #597eba;
                width: 120px;
            }

            body {
                width: 100%;
                height: 100%;
            }

            #container.exam-container {
                font-weight: 400 !important;
                line-height: 1.5 !important;
                color: #222cd0 !important;
                background: #fff7f0 !important;
                font-size: 14px !important;
            }

            .text-right {
                text-align: right !important;
            }
        </style>
    @endsection

    @section('scripts')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function() {
                $('.load-exam').on('click', function(e) {
                    e.preventDefault();
                    const examId = $(this).data('exam-id');

                    $.ajax({
                        url: '{{ route('user.exam', ['id' => ':id']) }}'.replace(':id', examId),
                        method: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            loadExamContent(response, examId);
                        },
                        error: function(xhr) {
                            alert('Failed to load the exam. Please try again.');
                        }
                    });
                });

                function loadExamContent(examData, examId) {
                    const examTitle = examData.title || 'Untitled Assessment';
                    const examHtml = `
                    <div class="row">
                        <div class="col-md-12 examsection">
                            <div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-4"><img id="logo" src="{{ asset('images/logo.png') }}"></div>
                                            <div class="col-md-5 offset-md-3"><br>
                                                <p>${examTitle}<br>Equipment (Combined Surface and Subsea)</p>
                                                <div id="progrssBar"><span id="progress"></span></div>
                                                <div id="navigationprogressbox">0%</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-4 offset-md-8">
                                                <div id="timerSection"><br>
                                                    <p>Time Remaining <span style="border: 1px solid #222cd0; padding: 3px;">00:00:00</span></p>
                                                </div>
                                            </div>
                                            <div class="col-md-4 offset-md-8">
                                                <div id="candidateDetails">
                                                    <p><span>Candidate: {{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</span><span>(CR-000000)</span><br><span>Language: English</span></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div><br><br>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div id="content" class="left">
                                            <p id="welcomeHeader">Welcome to your ${examTitle} Assessment</p><br>
                                            <p id="cvrText">Welcome to the upedia demo for digital assessments.</p>
                                            <p id="startText" class="mt-5">Please select the Start Exam button below to begin</p>
                                            <div id="btns"><button class="input-button start-exam" data-exam-id="${examId}">Start Exam</button></div>
                                        </div>
                                    </div>
                                </div><br><br>
                                <div class="row">
                                    <div class="col-sm-12 text-right"><a class="footer-light" disabled="disabled">© eCom Scotland 2018</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                    $('#container').removeClass('exam-container').html(examHtml).addClass('exam-container');

                    $('.start-exam').on('click', function(e) {
                        e.preventDefault();
                        const examId = $(this).data('exam-id');
                        $.ajax({
                            url: '{{ route('user.start-exam') }}',
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'Content-Type': 'application/json'
                            },
                            data: JSON.stringify({
                                examId: examId
                            }),
                            success: function(response) {
                                if (response.success) {
                                    window.location.href =
                                        '{{ route('user.questions', ['examId' => ':id']) }}'
                                        .replace(':id', examId);
                                } else {
                                    alert('Exam start failed. Please try again.');
                                }
                            },
                            error: function(xhr) {
                                alert('Failed to start the exam. Please try again.');
                            }
                        });
                    });
                }
            });
        </script>
    @endsection