@extends('student-panel.layouts.pre_ielts')

@section('css')
    {{-- For Header File --}}
    <link rel="stylesheet"
        href="{{ asset('frontend') }}/assets-desktop/css/ielts-mock-test.css?v={{ env('ASSETS_VERSION') }}">
    <link rel="stylesheet"
        href="{{ asset('frontend') }}/assets-desktop/css/level-assessment-report.css?v={{ env('ASSETS_VERSION') }}">
@endsection
@section('main')
    <section class="score-section">
        <div class="container-fluid">
            <div class="score-div">
                <div class="left-score-card">
                    <img class="test-report-logo"
                        src="{{ asset('frontend') }}/assets-desktop/images/mock-test/test-report-logo.png" alt="">
                    <p class="report-desc">Pre-Test Report Form</p>
                    <div class="rating">
                    </div>
                    <div class="report-detail">
                        <span class="student-greet">
                            Hi {{ ucfirst(auth()->user()->name) }},
                        </span>
                        Thank you for taking IELTS Pre-test.
                        Your score is
                        <span class="yellow average_band_score">{{ @$average_band_score }}</span>
                        ☹️ However based on your evaluation by Experts, you are more likely to <span class="yellow">
                            score 8+ Bands</span>
                        in such test.
                    </div>
                    <a href="{{ route('dashboard.studyPlans') }}" class="help-achieve-band">Help Me Achieve 8+ Band</a>
                    <div class="report-card">
                        {{-- <p class="card-title">Your Test Report</p> --}}
                        <div class="card">
                            <p class="card-head">
                                Evaluated Band Score
                            </p>
                            <div class="single-card-parent">
                                <div class="single-card">
                                    <p class="single-card-head">
                                        Writing
                                        <span class="card-arrow">
                                            <svg width="6" height="11" viewBox="0 0 6 11" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M5.16797 5.80371L0.667969 10.9999L0.667969 0.607559L5.16797 5.80371Z"
                                                    fill="#393939" />
                                            </svg>
                                        </span>
                                    </p>
                                    <p class="band-score @php if(@$report->writing_band < 4) {echo 'red';} else if (@$report->writing_band >= 4 && @$report->writing_band <= 6.5) {echo 'yellow';} else { echo 'green';} @endphp">
                                        <span class="writing_band">@if(isset($report->writing_band) && $report->writing_band !== '') {{ $report->writing_band }} @endif </span> Band
                                    </p>
                                </div>
                                <div class="single-card">
                                    <p class="single-card-head">
                                        Reading
                                        <span class="card-arrow">
                                            <svg width="6" height="11" viewBox="0 0 6 11" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M5.16797 5.80371L0.667969 10.9999L0.667969 0.607559L5.16797 5.80371Z"
                                                    fill="#393939" />
                                            </svg>
                                        </span>
                                    </p>
                                    <p class="band-score @php if(@$report->reading_band < 4) {echo 'red';} else if (@$report->reading_band >= 4 && @$report->reading_band <= 6.5) {echo 'yellow';} else { echo 'green';} @endphp">
                                        <span class="reading_band">@if(isset($report->reading_band) && $report->reading_band !== '') {{ $report->reading_band }} @endif </span> Band
                                    </p>
                                </div>
                                <div class="single-card">
                                    <p class="single-card-head">
                                        Listening
                                        <span class="card-arrow">
                                            <svg width="6" height="11" viewBox="0 0 6 11" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M5.16797 5.80371L0.667969 10.9999L0.667969 0.607559L5.16797 5.80371Z"
                                                    fill="#393939" />
                                            </svg>
                                        </span>
                                    </p>
                                    <p class="band-score @php if(@$report->listening_band < 4) {echo 'red';} else if (@$report->listening_band >= 4 && @$report->listening_band <= 6.5) {echo 'yellow';} else { echo 'green';} @endphp">
                                        <span class="listening_band">@if(isset($report->listening_band) && $report->listening_band !== '') {{ $report->listening_band }} @endif </span> Band
                                    </p>
                                </div>
                                <div class="single-card">
                                    <p class="single-card-head">
                                        Speaking
                                        <span class="card-arrow">
                                            <svg width="6" height="11" viewBox="0 0 6 11" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M5.16797 5.80371L0.667969 10.9999L0.667969 0.607559L5.16797 5.80371Z"
                                                    fill="#393939" />
                                            </svg>
                                        </span>
                                    </p>
                                    <p class="band-score @php if(@$report->speaking_band < 4) {echo 'red';} else if (@$report->speaking_band >= 4 && @$report->speaking_band <= 6.5) {echo 'yellow';} else { echo 'green';} @endphp">
                                        <span class="speaking_band">@if(isset($report->speaking_band) && $report->speaking_band !== '') {{ $report->speaking_band }} @endif </span> Band
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-score-card">
                    <div class="test-report-analysis">
                        <div class="test-report-card">
                            <div class="report-highlight">
                                <p class="report-analysis-time">
                                    Test taken at <span class="test_taken_date">{{ formatTime(@$report->created_at) }}</span>
                                </p>
                                @php
                                    $id = auth()->user()->id * 25 + 817;
                                    $id = base64_encode($id);
                                @endphp
                                <a href="{{ route('mock-test.downloadReport', ['user_id' => $id]) }}" id="export" class="download-report action-btn">
                                    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="17.6565" cy="17.5784" r="17.4592" fill="#066AC9"/>
                                        <g clip-path="url(#clip0_545_3343)">
                                        <path d="M24.4296 18.0303C24.2912 18.0302 24.1542 18.0574 24.0263 18.1103C23.8985 18.1632 23.7823 18.2408 23.6844 18.3387C23.5866 18.4365 23.509 18.5527 23.4561 18.6806C23.4031 18.8084 23.3759 18.9455 23.376 19.0838V22.2446H10.7331V19.0838C10.7331 18.8044 10.6221 18.5364 10.4245 18.3389C10.227 18.1413 9.95898 18.0303 9.67955 18.0303C9.40013 18.0303 9.13215 18.1413 8.93456 18.3389C8.73698 18.5364 8.62598 18.8044 8.62598 19.0838V23.2981C8.6259 23.4365 8.6531 23.5736 8.70602 23.7014C8.75893 23.8293 8.83654 23.9455 8.93439 24.0433C9.03224 24.1412 9.14841 24.2188 9.27627 24.2717C9.40413 24.3246 9.54117 24.3518 9.67955 24.3517H24.4296C24.568 24.3518 24.705 24.3246 24.8329 24.2717C24.9607 24.2188 25.0769 24.1412 25.1748 24.0433C25.2726 23.9455 25.3502 23.8293 25.4031 23.7014C25.4561 23.5736 25.4833 23.4365 25.4832 23.2981V19.0838C25.4833 18.9455 25.4561 18.8084 25.4031 18.6806C25.3502 18.5527 25.2726 18.4365 25.1748 18.3387C25.0769 18.2408 24.9607 18.1632 24.8329 18.1103C24.705 18.0574 24.568 18.0302 24.4296 18.0303Z" fill="white"/>
                                        <path d="M16.31 19.8287C16.4078 19.9265 16.5239 20.0041 16.6517 20.0571C16.7795 20.1101 16.9165 20.1373 17.0549 20.1373C17.1932 20.1373 17.3302 20.1101 17.4581 20.0571C17.5859 20.0041 17.702 19.9265 17.7998 19.8287L20.9605 16.6679C21.1572 16.4702 21.2674 16.2025 21.267 15.9236C21.2666 15.6447 21.1557 15.3774 20.9585 15.1802C20.7613 14.983 20.4939 14.872 20.215 14.8716C19.9361 14.8712 19.6685 14.9814 19.4707 15.1781L18.1085 16.5403V10.6551C18.1085 10.3757 17.9975 10.1077 17.7999 9.91015C17.6023 9.71256 17.3343 9.60156 17.0549 9.60156C16.7755 9.60156 16.5075 9.71256 16.3099 9.91015C16.1123 10.1077 16.0013 10.3757 16.0013 10.6551V16.5403L14.6391 15.1781C14.4413 14.9814 14.1737 14.8712 13.8948 14.8716C13.6159 14.872 13.3485 14.983 13.1513 15.1802C12.9541 15.3774 12.8432 15.6447 12.8428 15.9236C12.8424 16.2025 12.9526 16.4702 13.1493 16.6679L16.31 19.8287Z" fill="white"/>
                                        </g>
                                        <defs>
                                        <clipPath id="clip0_545_3343">
                                        <rect width="16.8572" height="16.8572" fill="white" transform="translate(8.62598 8.54785)"/>
                                        </clipPath>
                                        </defs>
                                    </svg>                                        
                                </a>
                                {{-- <a href="javascript:;" class="share-report action-btn copy-link" id="copyButton" onclick="copyCurrentLink()">
                                    <svg width="36" height="36" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="16.8216" cy="16.5794" r="16.2552" fill="#066AC9"/>
                                        <path d="M10.6186 18.9651C11.3145 18.963 11.984 18.6988 12.4938 18.2252L17.4739 21.0709C17.3071 21.7229 17.3806 22.4133 17.6812 23.0155C17.9817 23.6178 18.489 24.0916 19.1104 24.3503C19.7317 24.6091 20.4254 24.6354 21.0646 24.4244C21.7037 24.2135 22.2455 23.7794 22.5908 23.2016C22.936 22.6239 23.0616 21.9411 22.9446 21.2783C22.8276 20.6155 22.4757 20.017 21.9535 19.5924C21.4313 19.1678 20.7736 18.9455 20.1009 18.9661C19.4281 18.9868 18.7854 19.2491 18.2902 19.7049L13.31 16.8592C13.3625 16.6603 13.3911 16.4543 13.3959 16.2482L18.2886 13.4519C18.7597 13.8805 19.3639 14.134 19.9998 14.17C20.6357 14.206 21.2646 14.0222 21.7811 13.6494C22.2975 13.2766 22.67 12.7376 22.8362 12.1227C23.0023 11.5079 22.9519 10.8546 22.6935 10.2724C22.435 9.69031 21.9842 9.21478 21.4167 8.92561C20.8492 8.63644 20.1996 8.55124 19.5767 8.68429C18.9538 8.81734 18.3957 9.16056 17.9959 9.65635C17.5961 10.1521 17.3789 10.7704 17.3809 11.4073C17.384 11.6364 17.4151 11.8647 17.4739 12.0859L12.952 14.6691C12.6898 14.2634 12.3265 13.9329 11.8979 13.7101C11.4693 13.4873 10.9901 13.3798 10.5074 13.3982C10.0247 13.4166 9.55507 13.5603 9.14469 13.8151C8.73431 14.0699 8.39729 14.4271 8.16673 14.8516C7.93617 15.2761 7.82001 15.7533 7.82966 16.2362C7.83931 16.7192 7.97444 17.1914 8.22177 17.6063C8.4691 18.0212 8.82013 18.3647 9.24036 18.6029C9.66059 18.8411 10.1356 18.9659 10.6186 18.9651Z" fill="white"/>
                                    </svg>   
                                    <span id="copyButtonText" class="copy-link-span">Copy link</span>                                     
                                </a> --}}
                                <a id="copyUrl" class="share-report action-btn" href="javascript:;"
                                        onclick="copyClipboard(); showClipboard();"
                                        aria-label="forward">
                                        <svg width="36" height="36" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <circle cx="16.8216" cy="16.5794" r="16.2552" fill="#066AC9"/>
                                            <path d="M10.6186 18.9651C11.3145 18.963 11.984 18.6988 12.4938 18.2252L17.4739 21.0709C17.3071 21.7229 17.3806 22.4133 17.6812 23.0155C17.9817 23.6178 18.489 24.0916 19.1104 24.3503C19.7317 24.6091 20.4254 24.6354 21.0646 24.4244C21.7037 24.2135 22.2455 23.7794 22.5908 23.2016C22.936 22.6239 23.0616 21.9411 22.9446 21.2783C22.8276 20.6155 22.4757 20.017 21.9535 19.5924C21.4313 19.1678 20.7736 18.9455 20.1009 18.9661C19.4281 18.9868 18.7854 19.2491 18.2902 19.7049L13.31 16.8592C13.3625 16.6603 13.3911 16.4543 13.3959 16.2482L18.2886 13.4519C18.7597 13.8805 19.3639 14.134 19.9998 14.17C20.6357 14.206 21.2646 14.0222 21.7811 13.6494C22.2975 13.2766 22.67 12.7376 22.8362 12.1227C23.0023 11.5079 22.9519 10.8546 22.6935 10.2724C22.435 9.69031 21.9842 9.21478 21.4167 8.92561C20.8492 8.63644 20.1996 8.55124 19.5767 8.68429C18.9538 8.81734 18.3957 9.16056 17.9959 9.65635C17.5961 10.1521 17.3789 10.7704 17.3809 11.4073C17.384 11.6364 17.4151 11.8647 17.4739 12.0859L12.952 14.6691C12.6898 14.2634 12.3265 13.9329 11.8979 13.7101C11.4693 13.4873 10.9901 13.3798 10.5074 13.3982C10.0247 13.4166 9.55507 13.5603 9.14469 13.8151C8.73431 14.0699 8.39729 14.4271 8.16673 14.8516C7.93617 15.2761 7.82001 15.7533 7.82966 16.2362C7.83931 16.7192 7.97444 17.1914 8.22177 17.6063C8.4691 18.0212 8.82013 18.3647 9.24036 18.6029C9.66059 18.8411 10.1356 18.9659 10.6186 18.9651Z" fill="white"/>
                                        </svg>
                                        <div id="snackbar">Link is Copied..</div>
                                    </a>
                            </div>
                            <div class="report-detail">
                                <p class="report-detail-title">Your IELTS Pre-Test Report Analysis</p>
                                <p class="report-detail-desc">You can now download and share this report with your family
                                    and friends. You can now get a personalized feedback from our experts for FREE!</p>
                            </div>
                        </div>
                        <a href="{{ route('dashboard.studyPlans') }}" class="achieve-btn">View Training Plan
                            <p class="filter-blur"></p>
                        </a>
                    </div>
                    <div class="card-tab">
                        <a href="javascript:;" class="single-tab resultlinks active"
                            onclick="openTab(event, 'listening')">Listening</a>
                        <a href="javascript:;" class="single-tab resultlinks"
                            onclick="openTab(event, 'reading')">Reading</a>
                        <a href="javascript:;" class="single-tab resultlinks"
                        onclick="openTab(event, 'writing')">Writing</a>
                        <a href="javascript:;" class="single-tab resultlinks"
                            onclick="openTab(event, 'speaking')">speaking</a>
                    </div>

                    <div class="result-card resultcontent" id="reading" style="display: none">
                        <p class="result-card-title">
                            <span class="title-svg">
                                <img src="{{ asset('frontend') }}/assets-desktop/images/ielts-exam-cat/notebook.svg"
                                    alt="">
                            </span>
                            Reading Section Analysis & Feedback
                        </p>
                        <a href="javascript:;" class="band-cta @php if(@$report->reading_band < 4) {echo 'red';} else if (@$report->reading_band >= 4 && @$report->reading_band <= 6.5) {echo 'yellow';} else { echo 'green';} @endphp">
                            <p class="band-score reading_band">@if(isset($report->reading_band) && $report->reading_band !== '') {{ $report->reading_band }} @endif </p>
                            <span class="band-desc">Current Bands</span>
                        </a>
                        <a href="javascript:;" class="band-cta desired-cta green">
                            <p class="band-score">8+</p>
                            <span class="band-desc">Desired Bands for top Universities</span>
                        </a>
                        @if(!empty($report->reading_report))
                            {!! @$report->reading_report !!}
                        @else
                        <div class="result-accordion">
                            <div class="single-accordion">
                                <div class="visible-accordion active">Task Achievement
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        <span class="mistake-improvement">Mistakes</span>
                                        Failing to address all aspects of a task.
                                    </p>
                                    <p class="accordion-content">
                                        <span class="mistake-improvement green">improvement</span>
                                        Ensure a balanced discussion and express a clear opinion.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Coherence and Cohesion
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        Your browser does not support the audio element.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Lexical Resource
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        <span class="mistake-improvement">Mistakes</span>
                                        Failing to address all aspects of a task.
                                    </p>
                                    <p class="accordion-content">
                                        <span class="mistake-improvement green">improvement</span>
                                        Ensure a balanced discussion and express a clear opinion.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Grammatical Range and Accuracy
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        Your browser does not support the audio element.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Sentence Structure
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        <span class="mistake-improvement">Mistakes</span>
                                        Failing to address all aspects of a task.
                                    </p>
                                    <p class="accordion-content">
                                        <span class="mistake-improvement green">improvement</span>
                                        Ensure a balanced discussion and express a clear opinion.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Punctuation
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        Your browser does not support the audio element.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Paragraphing
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        <span class="mistake-improvement">Mistakes</span>
                                        Failing to address all aspects of a task.
                                    </p>
                                    <p class="accordion-content">
                                        <span class="mistake-improvement green">improvement</span>
                                        Ensure a balanced discussion and express a clear opinion.
                                    </p>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>


                    <div class="result-card resultcontent" id="writing" style="display: none">
                        <p class="result-card-title">
                            <span class="title-svg">
                                <img src="{{ asset('frontend') }}/assets-desktop/images/ielts-exam-cat/notebook.svg"
                                    alt="">
                            </span>
                            Writing Section Analysis & Feedback
                        </p>
                        <div class="writing-content">
                            <a href="javascript:;" class="band-cta @php if(@$report->writing_band < 4) {echo 'red';} else if (@$report->writing_band >= 4 && @$report->writing_band <= 6.5) {echo 'yellow';} else { echo 'green';} @endphp">
                                <p class="band-score writing_band">@if(isset($report->writing_band) && $report->writing_band !== '') {{ $report->writing_band }} @endif </p>
                                <span class="band-desc">Current Bands</span>
                            </a>
                            <a href="javascript:;" class="band-cta desired-cta green">
                                <p class="band-score">8+</p>
                                <span class="band-desc">Desired Bands for top Universities</span>
                            </a>
                            @if(!empty($report->writing_report))
                                {!! @$report->writing_report !!}
                            @else
                            <div class="result-accordion">
                                <div class="single-accordion">
                                    <div class="visible-accordion active">Task Achievement
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            <span class="mistake-improvement">Mistakes</span>
                                            Failing to address all aspects of a task.
                                        </p>
                                        <p class="accordion-content">
                                            <span class="mistake-improvement green">improvement</span>
                                            Ensure a balanced discussion and express a clear opinion.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Coherence and Cohesion
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            Your browser does not support the audio element.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Lexical Resource
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            <span class="mistake-improvement">Mistakes</span>
                                            Failing to address all aspects of a task.
                                        </p>
                                        <p class="accordion-content">
                                            <span class="mistake-improvement green">improvement</span>
                                            Ensure a balanced discussion and express a clear opinion.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Grammatical Range and Accuracy
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            Your browser does not support the audio element.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Sentence Structure
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            <span class="mistake-improvement">Mistakes</span>
                                            Failing to address all aspects of a task.
                                        </p>
                                        <p class="accordion-content">
                                            <span class="mistake-improvement green">improvement</span>
                                            Ensure a balanced discussion and express a clear opinion.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Punctuation
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            Your browser does not support the audio element.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Paragraphing
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            <span class="mistake-improvement">Mistakes</span>
                                            Failing to address all aspects of a task.
                                        </p>
                                        <p class="accordion-content">
                                            <span class="mistake-improvement green">improvement</span>
                                            Ensure a balanced discussion and express a clear opinion.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>


                    <div class="result-card resultcontent" id="listening" >
                        <p class="result-card-title">
                            <span class="title-svg">
                                <img src="{{ asset('frontend') }}/assets-desktop/images/ielts-exam-cat/notebook.svg"
                                    alt="">
                            </span>
                            Listening Section Analysis & Feedback
                        </p>
                        <a href="javascript:;" class="band-cta @php if(@$report->listening_band < 4) {echo 'red';} else if (@$report->listening_band >= 4 && @$report->listening_band <= 6.5) {echo 'yellow';} else { echo 'green';} @endphp">
                            <p class="band-score listening_band">@if(isset($report->listening_band) && $report->listening_band !== '') {{ $report->listening_band }} @endif </p>
                            <span class="band-desc">Current Bands</span>
                        </a>
                        <a href="javascript:;" class="band-cta desired-cta green">
                            <p class="band-score">8+</p>
                            <span class="band-desc">Desired Bands for top Universities</span>
                        </a>
                        @if(!empty($report->listening_report))
                            {!! @$report->listening_report !!}
                        @else
                        <div class="result-accordion">
                            <div class="single-accordion">
                                <div class="visible-accordion active">Task Achievement
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        <span class="mistake-improvement">Mistakes</span>
                                        Failing to address all aspects of a task.
                                    </p>
                                    <p class="accordion-content">
                                        <span class="mistake-improvement green">improvement</span>
                                        Ensure a balanced discussion and express a clear opinion.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Coherence and Cohesion
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        Your browser does not support the audio element.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Lexical Resource
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        <span class="mistake-improvement">Mistakes</span>
                                        Failing to address all aspects of a task.
                                    </p>
                                    <p class="accordion-content">
                                        <span class="mistake-improvement green">improvement</span>
                                        Ensure a balanced discussion and express a clear opinion.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Grammatical Range and Accuracy
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        Your browser does not support the audio element.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Sentence Structure
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        <span class="mistake-improvement">Mistakes</span>
                                        Failing to address all aspects of a task.
                                    </p>
                                    <p class="accordion-content">
                                        <span class="mistake-improvement green">improvement</span>
                                        Ensure a balanced discussion and express a clear opinion.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Punctuation
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        Your browser does not support the audio element.
                                    </p>
                                </div>
                            </div>
                            <div class="single-accordion">
                                <div class="visible-accordion">Paragraphing
                                    <p class="accordion-btn"></p>
                                </div>
                                <div class="expanded-accordion">
                                    <p class="accordion-content">
                                        <span class="mistake-improvement">Mistakes</span>
                                        Failing to address all aspects of a task.
                                    </p>
                                    <p class="accordion-content">
                                        <span class="mistake-improvement green">improvement</span>
                                        Ensure a balanced discussion and express a clear opinion.
                                    </p>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>


                    <div class="result-card resultcontent" id="speaking" style="display: none">
                        <p class="result-card-title">
                            <span class="title-svg">
                                <img src="{{ asset('frontend') }}/assets-desktop/images/ielts-exam-cat/notebook.svg"
                                    alt="">
                            </span>
                            Speaking Section Analysis & Feedback
                        </p>
                        <div class="speaking-content">
                            <a href="javascript:;" class="band-cta @php if(@$report->speaking_band < 4) {echo 'red';} else if (@$report->speaking_band >= 4 && @$report->speaking_band <= 6.5) {echo 'yellow';} else { echo 'green';} @endphp">
                                <p class="band-score speaking_band">@if(isset($report->speaking_band) && $report->speaking_band !== '') {{ $report->speaking_band }} @endif </p>
                                <span class="band-desc">Current Bands</span>
                            </a>
                            <a href="javascript:;" class="band-cta desired-cta green">
                                <p class="band-score">8+</p>
                                <span class="band-desc">Desired Bands for top Universities</span>
                            </a>
                            @if(!empty($report->speaking_report))
                                {!! @$report->speaking_report !!}
                            @else
                            <div class="result-accordion">
                                <div class="single-accordion">
                                    <div class="visible-accordion active">Task Achievement
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            <span class="mistake-improvement">Mistakes</span>
                                            Failing to address all aspects of a task.
                                        </p>
                                        <p class="accordion-content">
                                            <span class="mistake-improvement green">improvement</span>
                                            Ensure a balanced discussion and express a clear opinion.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Coherence and Cohesion
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            Your browser does not support the audio element.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Lexical Resource
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            <span class="mistake-improvement">Mistakes</span>
                                            Failing to address all aspects of a task.
                                        </p>
                                        <p class="accordion-content">
                                            <span class="mistake-improvement green">improvement</span>
                                            Ensure a balanced discussion and express a clear opinion.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Grammatical Range and Accuracy
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            Your browser does not support the audio element.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Sentence Structure
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            <span class="mistake-improvement">Mistakes</span>
                                            Failing to address all aspects of a task.
                                        </p>
                                        <p class="accordion-content">
                                            <span class="mistake-improvement green">improvement</span>
                                            Ensure a balanced discussion and express a clear opinion.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Punctuation
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            Your browser does not support the audio element.
                                        </p>
                                    </div>
                                </div>
                                <div class="single-accordion">
                                    <div class="visible-accordion">Paragraphing
                                        <p class="accordion-btn"></p>
                                    </div>
                                    <div class="expanded-accordion">
                                        <p class="accordion-content">
                                            <span class="mistake-improvement">Mistakes</span>
                                            Failing to address all aspects of a task.
                                        </p>
                                        <p class="accordion-content">
                                            <span class="mistake-improvement green">improvement</span>
                                            Ensure a balanced discussion and express a clear opinion.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <div class="progress-popup" style="display:none ">
        <div class="progress-box">
            <p class="popup-head">Please wait! Our Experts are analyzing your responses</p>
            {{-- <div id='progress-bars' class='progress-bars'>
  
                <input type="checkbox" id="progress-bar-view-0" class='header'>
                  <div id="progress-bar-container-0" class="progress-bar-container">
                  
                  <div class="progress-bar">
                    
                    <div class="circle done">
                      <span class="label"></span>
                      <span class="title">Reading</span>
                    </div>
                    
                    <span class="bar done"></span>
                    <div class="circle done">
                      <span class="label"></span>
                      <span class="title">Writing</span>
                    </div>
                    
                    <span class="bar half"></span>
                    <div class="circle active">
                      <span class="label"></span>
                      <span class="title">Listening</span>
                    </div>
                    
                    <span class="bar"></span>
                    <div class="circle">
                      <span class="label"></span>
                      <span class="title">Speaking</span>
                    </div>
                    
                  </div>
                </div>
            </div>       --}}



            <div class="step-1" id="checkout-progress" data-current-step="1">
                <div class="progress-bar">
                    <div class="step step-1 active"><span></span>
                        <div class="fa fa-check opaque"></div>
                        <div class="step-label"> Reading</div>
                        <div class="status">Pending</div>
                    </div>
                    <div class="step step-2"><span> </span>
                        <div class="fa fa-check opaque"></div>
                        <div class="step-label"> Writing</div>
                        <div class="status">Pending</div>
                    </div>
                    <div class="step step-3"><span></span>
                        <div class="fa fa-check opaque"></div>
                        <div class="step-label"> Listening</div>
                        <div class="status">Pending</div>
                    </div>
                    <div class="step step-4"><span></span>
                        <div class="fa fa-check opaque"></div>
                        <div class="step-label"> Speaking</div>
                        <div class="status">Pending</div>
                    </div>

                </div>
            </div>
            <div class="button-container">
                <div class="btn btn-prev disabled"> previous step</div>
                <div class="btn btn-next"> next step</div>
                <div class="btn btn-submit" style="display:none;">Submit</div>
            </div>
            <button type="button" disabled class="view-report-button" onclick="showPayment()" style="display: none">Generating Report...
                <div class="video-timer-button">
                    <div id="countdown" class="countdown-timer">
                        <div id="countdown-number-button" class="countdown-number"></div>
                        <svg>
                            <circle r="13" cx="18" cy="18"></circle>
                        </svg>
                    </div>
                </div>
            </button>
        </div>
    </div>
    <div class="ready-report-popup" style="display:none ">
        <div class="popup-body">
            <p class="popup-head">Congratulations! Your <span class="green">Report is Ready</span></p>
            <div class="single-video" id="img-body">
                <div class="img-body">
                    <img class="test-report-bg"
                        src="{{ asset('frontend') }}/assets-desktop/images/mock-test/test-report-bg.png" alt="">
                    <div class="video-timer" style="display: none">
                        <p class="video-starts-tag">Video Starts In</p>
                        <div id="countdown" class="countdown-timer">
                            <div id="countdown-number" class="countdown-number"></div>
                            <svg>
                                <circle r="18" cx="20" cy="20"></circle>
                            </svg>
                        </div>
                    </div>
                </div>

                <a href="javascript:;" class="play-btn" id="play-btn" onclick="replaceWithVideo()">
                    <svg width="70" height="71" viewBox="0 0 70 71" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <rect y="0.675781" width="70" height="70" rx="35"
                            fill="url(#paint0_linear_1058_3451)" />
                        <rect x="5" y="5.67578" width="60" height="60" rx="30" fill="white"
                            fill-opacity="0.92" />
                        <g clip-path="url(#clip0_1058_3451)">
                            <path
                                d="M27.501 29.5751V42.8464C27.501 45.5644 30.5654 47.2701 33.0112 45.9111L38.9817 42.5967L44.9524 39.2685C47.3981 37.9095 47.3981 34.5119 44.9524 33.1529L38.9817 29.8247L33.0112 26.5104C30.5654 25.1514 27.501 26.8432 27.501 29.5751Z"
                                fill="#3D80BF" />
                        </g>
                        <defs>
                            <linearGradient id="paint0_linear_1058_3451" x1="6.49664" y1="0.359594" x2="76.6848"
                                y2="14.5489" gradientUnits="userSpaceOnUse">
                                <stop stop-color="white" stop-opacity="0.46" />
                                <stop offset="1" stop-color="white" stop-opacity="0.13" />
                            </linearGradient>
                            <clipPath id="clip0_1058_3451">
                                <rect x="5" y="5.67578" width="60" height="60" rx="16.0714" fill="white" />
                            </clipPath>
                        </defs>
                    </svg>

                </a>
                <div class="video-box" style="display:none;">
                    <a class="boxclose" id="boxclose" onclick="lightbox_close()">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M7 7L17 17" stroke="#2B3340" stroke-width="2" stroke-linecap="round"></path>
                            <path d="M17 7L7 17" stroke="#2B3340" stroke-width="2" stroke-linecap="round"></path>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="benefit-box">
                <p class="benefit-desc">
                    Kindly Pay Just <b>₹199/-</b> to unlock all the below benefits:-
                </p>
                <p class="benefit-list">
                    <span class="checkmark">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M14.1264 0.637695C17.3872 0.637695 19.5707 2.92698 19.5707 6.33204V14.1916C19.5707 17.5861 17.3872 19.8754 14.1264 19.8754H5.78688C2.5261 19.8754 0.333008 17.5861 0.333008 14.1916V6.33204C0.333008 2.92698 2.5261 0.637695 5.78688 0.637695H14.1264ZM13.9725 7.37088C13.6455 7.04384 13.1068 7.04384 12.7798 7.37088L8.8072 11.3435L7.1239 9.66016C6.79686 9.33312 6.25821 9.33312 5.93117 9.66016C5.60413 9.9872 5.60413 10.5162 5.93117 10.8529L8.22045 13.1326C8.38397 13.2961 8.59558 13.373 8.8072 13.373C9.02843 13.373 9.24004 13.2961 9.40356 13.1326L13.9725 8.56361C14.2995 8.23657 14.2995 7.70753 13.9725 7.37088Z"
                                fill="#23BD33" />
                        </svg>
                    </span>
                    <span class="green">Detailed Report Card</span> with Feedback
                </p>
                <p class="benefit-list">
                    <span class="checkmark">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M14.1264 0.637695C17.3872 0.637695 19.5707 2.92698 19.5707 6.33204V14.1916C19.5707 17.5861 17.3872 19.8754 14.1264 19.8754H5.78688C2.5261 19.8754 0.333008 17.5861 0.333008 14.1916V6.33204C0.333008 2.92698 2.5261 0.637695 5.78688 0.637695H14.1264ZM13.9725 7.37088C13.6455 7.04384 13.1068 7.04384 12.7798 7.37088L8.8072 11.3435L7.1239 9.66016C6.79686 9.33312 6.25821 9.33312 5.93117 9.66016C5.60413 9.9872 5.60413 10.5162 5.93117 10.8529L8.22045 13.1326C8.38397 13.2961 8.59558 13.373 8.8072 13.373C9.02843 13.373 9.24004 13.2961 9.40356 13.1326L13.9725 8.56361C14.2995 8.23657 14.2995 7.70753 13.9725 7.37088Z"
                                fill="#23BD33" />
                        </svg>
                    </span>
                    <span class="green">1-on-1 </span> Live Discussion with Expert
                </p>
            </div>
            <div class="validity-box">
                <p class="validity-title green">Pay Now and Get FREE Mock test worth ₹499/- in exact IELTS Environment</p>
                <div class="validity-timer">
                    <p class="timer-title">OFFER VALIDITY</p>
                    <p class="timer offer-timer">
                        <span class="timer-sec timer-minutes">--</span>:
                        <span class="timer-sec timer-seconds">--</span>
                    </p>
                </div>
            </div>
            <a href="{{ route('mock-test.levelAsessmentTestReport') }}" class="pay-cta" onclick="takePayment('{{ $plan->id }}' ,this); event.preventDefault();">Pay ₹199/-</a>
        </div>
    </div>
     {{-- Loader after test submitted & move to the next page in between --}}
     <div class="generic-loader" style="display: ">
        <div class="generic-body">
            <lottie-player class="popup-lottie" src="{{ asset('frontend') }}/assets-desktop/js/grad-loader.json"
                background="transparent" speed="3" width="100%" hight="100%" loop autoplay></lottie-player>
        </div>
    </div>
    {{-- Sticky achive btn --}}
    <div class="sticky-achieve-btn" style="display: none">
        <a href="{{ route('dashboard.studyPlans') }}" class="achieve-btn">View Training Plan
            <p class="filter-blur"></p>
        </a>
    </div>
    @include('website.desktop.pages.payment.paymentButton')
    @include('website.desktop.partials.whatsapp-bottom')
    @include('mock-test.report')
@endsection




@section('script')

<script src="https://www.youtube.com/iframe_api"></script>
    <script>
        function appendAccordionContent(report, type) {
            $('#' + type + ' .result-accordion').html(report);
        }


        // Sample data for accordion content (initialize with empty data)
        var accordionData = {};
    </script>

    <script>
        // tooltip
        // copy to clipboard function
        
        function copyClipboard() {
            var url = window.location.href;
            var textarea = document.createElement("textarea");
            textarea.value = url;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand("copy");
            document.body.removeChild(textarea);

            // var tooltip = document.getElementById("myTooltip");
            // tooltip.innerHTML = "Link is Copied";
        }

        function showClipboard(){
            var x = document.getElementById("snackbar")
            // Add the "show" class to DIV
            x.className = "show";
            // After 3 seconds, remove the show class from DIV
            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
        }
        // Slidetoggle The result of speaking
        $(document).on('click', '.visible-accordion', function(e) {
            e.preventDefault();
            $(this).toggleClass('active').siblings('.expanded-accordion').slideToggle();
            $(this).parent().siblings().find('.visible-accordion').removeClass('active').siblings(
                '.expanded-accordion').slideUp();
        });
        // Score card 

        var ieltsBand = '{{ @$average_band_score }}';
        if(ieltsBand !== null) {
            setIeltsBand()
        }
        function setIeltsBand() {
            const ratings = document.querySelectorAll(".rating");

            ratings.forEach((rating) => {
                const ratingContent = rating.innerHTML;
                const ratingScore = ieltsBand;

                const scoreClass =
                    ratingScore < 4 ? "bad" : ratingScore < 6.5 ? "moderate" : "good";
    
                rating.classList.add(scoreClass);

                const ratingColor = window.getComputedStyle(rating).backgroundColor;

                const gradient =
                    `background: conic-gradient(${ratingColor} ${ratingScore * 10}%, transparent 0 100%)`; // Scale the ratingScore to be out of 100

                rating.setAttribute("style", gradient);

                rating.innerHTML = `<span class='score-count'>${ieltsBand} ${
                    ratingContent.indexOf("%") >= 0 ? "<small>%</small>" : ""
                }</span>
                <span class="total-score">/9</span>`;
            });
        }

        // Tab nav Script 
        document.getElementById("defaultOpen").click();

        function openTab(evt, cityName) {
            var i, resultcontent, resultlinks;
            resultcontent = document.getElementsByClassName("resultcontent");
            for (i = 0; i < resultcontent.length; i++) {
                resultcontent[i].style.display = "none";
            }
            resultlinks = document.getElementsByClassName("resultlinks");
            for (i = 0; i < resultlinks.length; i++) {
                resultlinks[i].className = resultlinks[i].className.replace(" active", "");
            }
            document.getElementById(cityName).style.display = "block";
            if (evt.constructor === PointerEvent) {
                evt.currentTarget.className += " active";
            }
            // evt.currentTarget.className += " active";

        }
    </script>
    <script>
        // Progress Counter

        // Define the time interval in milliseconds
        // var intervalTime = 3000; // 5 seconds

        // // Function to move to the next step
        // function moveToNextStep() {
        //     var currentStepNum = $('#checkout-progress').data('current-step');
        //     var nextStepNum = (currentStepNum + 1);
        //     if (nextStepNum > 5) {
        //         clearInterval(timer);
        //         return;
        //     }
        //     var currentStep = $('.step.step-' + currentStepNum);
        //     var nextStep = $('.step.step-' + nextStepNum);
        //     var progressBar = $('#checkout-progress');
        //     $('.btn-prev').removeClass('disabled');
        //     $('#section' + currentStepNum).toggle();
        //     $('#section' + nextStepNum).toggle();
        //     if (nextStepNum == 4) {
        //         $('.btn-next').toggle();
        //         $('.btn-submit').toggle();

        //     }
        //     if (nextStepNum == 5) {
        //         $('.view-report-button').prop('disabled', false);
        //     }
        //     $('.checkout-progress').removeClass('.step-' + currentStepNum).addClass('.step-' + (currentStepNum + 1));

        //     currentStep.removeClass('active').addClass('valid');
        //     currentStep.find('span').addClass('opaque');
        //     currentStep.find('.fa.fa-check').removeClass('opaque');

        //     nextStep.addClass('active');
        //     progressBar.removeAttr('class').addClass('step-' + nextStepNum).data('current-step', nextStepNum);
        // }

        // // Start the timer
        // var timer = setInterval(moveToNextStep, intervalTime);

        // // Function to reset the timer
        // function resetTimer() {
        //     clearInterval(timer);
        //     timer = setInterval(moveToNextStep, intervalTime);
        // }
        var completeProcess = false;
        var intervalTime = 5000; 

        // Function to move to the next step
        function moveToNextStep() {
            var currentStepNum = $('#checkout-progress').data('current-step');
            var nextStepNum = (currentStepNum + 1);
            if (nextStepNum > 5) {
                nextStepNum = 5;
                if(completeProcess) {
                    clearInterval(timer);
                }
            }
            var currentStep = $('.step.step-' + currentStepNum);
            var nextStep = $('.step.step-' + nextStepNum);
            var progressBar = $('#checkout-progress');
            $('.btn-prev').removeClass('disabled');
            $('#section' + currentStepNum).toggle();
            $('#section' + nextStepNum).toggle();
            if (nextStepNum == 4) {
                $('.btn-next').toggle();
                $('.btn-submit').toggle();
                // Update status of step-4 to "Done"
                $('.step.step-4 .status').text('Done');
            }
            if (nextStepNum == 5) {
                if(completeProcess) {

                }
            } else {
                $('.checkout-progress').removeClass('.step-' + currentStepNum).addClass('.step-' + (currentStepNum + 1));
                currentStep.removeClass('active').addClass('valid');
                currentStep.find('span').addClass('opaque');
                currentStep.find('.fa.fa-check').removeClass('opaque');

                nextStep.addClass('active');
            }
            if (nextStepNum == 5) {
                $('.view-report-button').prop('disabled', false).text('View Detailed Report');
            }


            // $('.step .status').text(function () {
            //     if ($(this).closest('.step').hasClass('valid')) {
            //         return 'Done';
            //     } else if ($(this).closest('.step').hasClass('active')) {
            //         return 'In Progress';
            //     } else {
            //         return 'Pending';
            //     }
            // });
            $('.step .status').text(function() {
                var step = $(this).closest('.step');

                if (step.hasClass('valid')) {
                    $(this).removeClass('in-progress pending').addClass('done');
                    return 'Done';
                } else if (step.hasClass('active')) {
                    $(this).removeClass('done pending').addClass('in-progress');
                    return 'In Progress';
                } else {
                    $(this).removeClass('done in-progress').addClass('pending');
                    return 'Pending';
                }
                
            });
            $('.step .status').text(function() {
                var step = $(this).closest('.step');

                if (step.hasClass('valid')) {
                    if($(this).hasClass('step-3')){
                        if(completeProcess) {
                            $(this).removeClass('in-progress pending').addClass('done');
                        } else {
                            $(this).removeClass('in-progress pending').addClass('done');
                        }
                    }
                    return 'Done';
                } else if (step.hasClass('active')) {
                    $(this).removeClass('done pending').addClass('in-progress');
                    return 'In Progress';
                } else {
                    $(this).removeClass('done in-progress').addClass('pending');
                    return 'Pending';
                }
            });
            progressBar.removeAttr('class').addClass('step-' + nextStepNum).data('current-step', nextStepNum);
        }

        // Start the timer
        var timer = setInterval(moveToNextStep, intervalTime);

        // Function to reset the timer
        function resetTimer() {
            clearInterval(timer);
            timer = setInterval(moveToNextStep, intervalTime);
        }
    


        function replaceWithVideo() {

            $('.test-report-bg').hide();
            $('.youtubeVideo').show();
            $('#play-btn').hide();
            $('.video-timer').hide();

            timeout = null;
            playVideo = true;
            var blogFigure = document.getElementById('img-body');
            var player;
            blogFigure.innerHTML = '<div id="player"></div>';
            player = new YT.Player('player', {
                height: '215',
                width: '100%',
                videoId: 'LZcaTojsKE8',
                playerVars: {
                    'autoplay': 1,
                    'rel': 0,
                },
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.ENDED) {
                var blogFigure = $('#img-body');
                blogFigure.html(`<div class="img-body">
                    <img class="test-report-bg"
                        src="{{ asset('frontend') }}/assets-desktop/images/mock-test/test-report-bg.png" alt="">
                    <div class="video-timer" style="display: none">
                        <p class="video-starts-tag">Video Starts In</p>
                        <div id="countdown" class="countdown-timer">
                            <div id="countdown-number" class="countdown-number"></div>
                            <svg>
                                <circle r="18" cx="20" cy="20"></circle>
                            </svg>
                        </div>
                    </div>
                </div>

                <a href="javascript:;" class="play-btn" id="play-btn" onclick="replaceWithVideo()">
                    <svg width="70" height="71" viewBox="0 0 70 71" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <rect y="0.675781" width="70" height="70" rx="35"
                            fill="url(#paint0_linear_1058_3451)" />
                        <rect x="5" y="5.67578" width="60" height="60" rx="30" fill="white"
                            fill-opacity="0.92" />
                        <g clip-path="url(#clip0_1058_3451)">
                            <path
                                d="M27.501 29.5751V42.8464C27.501 45.5644 30.5654 47.2701 33.0112 45.9111L38.9817 42.5967L44.9524 39.2685C47.3981 37.9095 47.3981 34.5119 44.9524 33.1529L38.9817 29.8247L33.0112 26.5104C30.5654 25.1514 27.501 26.8432 27.501 29.5751Z"
                                fill="#3D80BF" />
                        </g>
                        <defs>
                            <linearGradient id="paint0_linear_1058_3451" x1="6.49664" y1="0.359594" x2="76.6848"
                                y2="14.5489" gradientUnits="userSpaceOnUse">
                                <stop stop-color="white" stop-opacity="0.46" />
                                <stop offset="1" stop-color="white" stop-opacity="0.13" />
                            </linearGradient>
                            <clipPath id="clip0_1058_3451">
                                <rect x="5" y="5.67578" width="60" height="60" rx="16.0714" fill="white" />
                            </clipPath>
                        </defs>
                    </svg>

                </a>
                <div class="video-box" style="display:none;">
                    <a class="boxclose" id="boxclose" onclick="lightbox_close()">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M7 7L17 17" stroke="#2B3340" stroke-width="2" stroke-linecap="round"></path>
                            <path d="M17 7L7 17" stroke="#2B3340" stroke-width="2" stroke-linecap="round"></path>
                        </svg>
                    </a>
                </div>`);
            }
        }

        function showPayment() {
            $('.progress-popup').hide()
            if('{{ @$order }}' == 'unpaid') {
                $('.ready-report-popup').show();
                $('body').addClass('no-scroll');
                var countdownNumberEl = document.getElementById('countdown-number');
                var countdown = 5;
    
                countdownNumberEl.textContent = countdown;
    
                var interval = setInterval(function() {
                    countdown = --countdown <= 0 ? countdown = 0 : countdown;
    
                    countdownNumberEl.textContent = countdown;
    
                    if (countdown === 0) {
                        clearInterval(interval);
                        // replaceWithVideo();
                    }
                }, 1000);
    
                // Get the timer elements
                var timerMinElement = document.querySelector('.timer-minutes');
                var timerSecElement = document.querySelector('.timer-seconds');
    
                // Retrieve timer value from local storage
                var timerValue = localStorage.getItem('timerValue');
    
                // Reverse the timer if it exists in local storage, otherwise set it to 30 minutes
                if (timerValue !== null) {
                    var parts = timerValue.split(':');
                    var minutes = parseInt(parts[0]);
                    var seconds = parseInt(parts[1]);
                } else {
                    var minutes = 30;
                    var seconds = 0;
                }
    
                // Update the timer display
                timerMinElement.textContent = minutes < 10 ? '0' + minutes : minutes;
                timerSecElement.textContent = seconds < 10 ? '0' + seconds : seconds;
    
                // Start the reverse timer
                var intervalId = setInterval(function() {
                    if (seconds > 0) {
                        seconds--;
                    } else {
                        if (minutes > 0) {
                            minutes--;
                            seconds = 59;
                        } else {
                            // Timer reached zero, clear the interval
                            clearInterval(intervalId);
                            $('.validity-box').hide();
                            localStorage.removeItem('timerValue');
                        }
                    }
    
                    // Update the timer display
                    timerMinElement.textContent =  minutes < 10 ? '0' + minutes : minutes;
                    timerSecElement.textContent = seconds < 10 ? '0' + seconds : seconds;
    
                    // Store the timer value in local storage
                    localStorage.setItem('timerValue', minutes + ':' + seconds);
                }, 1000);
            }

        }

        // $(document).ready(function(){
        if ('{{ @$order }}' == 'unpaid') {
            var timerValue = localStorage.getItem('timerValue');
            $('.generic-loader').hide();
                showPayment()
        } else {
            if ("{{ is_null($report->speaking_band) || $report->speaking_band === '' }}" || 
                "{{ is_null($report->listening_band) || $report->listening_band === '' }}" || 
                "{{ is_null($report->reading_band) || $report->reading_band === '' }}" || 
                "{{ is_null($report->writing_band) || $report->writing_band === '' }}" || 
                "{{ is_null($report->speaking_report) || $report->speaking_report === '' }}" || 
                "{{ is_null($report->writing_report) || $report->writing_report === '' }}" || 
                "{{ is_null($report->reading_report) || $report->reading_report === '' }}" || 
                "{{ is_null($report->listening_report) || $report->listening_report === '' }}") {
                    $('.progress-popup').show();
                    $('body').addClass('no-scroll');
                    $('.generic-loader').hide();

                    $.ajax({
                        type: 'POST',
                        url: '{{ route('mock-test.getReportCard') }}',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: (res) => {
                            if (res.status) {
                                
                                $('#checkout-progress').addClass('step-5');
                                completeProcess = true;
                                for(var i = 0; i<=4; i++) {
                                    $('.step.step-'+ i + ' .status').text('Done');
                                    $('.checkout-progress').removeClass('.step-'+ i).addClass('.step-5');
                                    $('.step-'+ i).removeClass('active').addClass('valid');
                                    $('.step-'+ i).find('span').addClass('opaque');
                                    $('.step-'+ i).find('.fa.fa-check').removeClass('opaque');
                                    $('.step-'+ i).addClass('active');
                                }
        
        
                                var writingReport = res.test.writing_report;
                                var speakingReport = res.test.speaking_report;
                                var readingReport = res.test.reading_report;
                                var listeningReport = res.test.listening_report;
        
                                if (writingReport) {
                                    appendAccordionContent(writingReport, 'writing');
                                }
                                if (speakingReport) {
                                    appendAccordionContent(speakingReport, 'speaking');
                                }
        
                                if(readingReport) {
                                    appendAccordionContent(readingReport, 'reading');
                                }
        
                                if(listeningReport) {
                                    appendAccordionContent(listeningReport, 'listening');
                                }
        
                                $('.speaking_band').text(res.test.speaking_band);
                                $('.writing_band').text(res.test.writing_band);
                                $('.listening_band').text(res.test.listening_band);
                                $('.reading_band').text(res.test.reading_band);
                                $('.average_band_score').text(res.average_band_score);
                                ieltsBand = res.average_band_score;
                                setIeltsBand()
        
                                $('.band-score, .band-cta').each(function() {
                                    var score = parseFloat($(this).text());
                                    if (score < 4) {
                                        $(this).addClass('red');
                                    } else if (score >= 4 && score < 6.5) {
                                        $(this).addClass('yellow');
                                    } else {
                                        $(this).addClass('green');
                                    }
                                });
                            
                                let dateTimeString = res.test.created_at;
                                let date = new Date(dateTimeString);
        
                                let formattedDate = date.toLocaleDateString('en-US', {
                                    year: 'numeric',
                                    month: 'short',
                                    day: 'numeric'
                                });
        
                                let formattedTime = date.toLocaleTimeString('en-US', {
                                    hour: 'numeric',
                                    minute: '2-digit'
                                });
        
                                $('.test_taken_date').text(formattedDate + ' | ' + formattedTime);
                            }
                            setTimeout(() => {
                                $('.generic-loader').hide();
                                $('.progress-popup').hide()
                                $('body').removeClass('no-scroll');
                            }, 1000);
                        },
                        error: function(xhr, status, error) {
                            // Handle error if necessary
                            createToast('error', 'Unable to Get Report Card. Try Again After 1 Minute');
                        }
                    });
                }

            $(window).on('load', function(){
                $('.generic-loader').hide();
            })
        }
        // })
        // sticky ielts btn
        $(window).scroll(function() {
            var sticky = $('.sticky-achieve-btn'),
                scroll = $(window).scrollTop();

                if (scroll >= 550) sticky.addClass('f-show');
            else sticky.removeClass('f-show');
        });
    </script>
@endsection