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

@php
    @$candidate_id = @$user->candidate->id;
    @$email = @$user->email;
    @$profile_complete = @$user->candidate->profile_complete;
    function dateMonth($dateString)
    {
        if (isset($dateString)) {
            $date = new DateTime($dateString);
            $dayOfWeek = date('D', strtotime($dateString));
            $month = date('M', strtotime($dateString));
            $dayOfMonth = $date->format('d');

            return ' ' . $dayOfMonth . ' ' . $month;
        }
        return '';
    }

    $currentHour = date('G');

    if ($currentHour < 12) {
        $greeting = "Good Morning";
    } elseif ($currentHour < 18) {
        $greeting = "Good Afternoon";
    } else {
        $greeting = "Good Evening";
    }

@endphp
@section('main')
    <input type="hidden" class="user-email" value="{{ $email }}">
    <div class="welcome-user">
        <p class="user-name">Hello {{ $user->name }}!</p>
        <p class="user-greet">Welcome to Gradding</p>
    </div>
    <div class="dashboard container-fluid">
        <div class="left">
            <div class="card-list">
                <div class="card" id="step3">
                    <div class="card-top">
                        <img src="{{ asset('student-panel') }}/images/dashboard/profile-image.svg" alt="image"
                            width="100%" height="100%">
                        <ul class="list-wrpr">
                            <li class="list-name">
                                @if ($profile_complete == 100)
                                    {{ @$user->admin->name != null ? @$user->admin->name : 'N/A (waiting for counselor to be assigned)' }}
                                @else
                                    {{ @$user->admin->name != null ? @$user->admin->name : 'N/A (waiting for profile completion)' }}
                                @endif
                            </li>
                            <li class="list-type">COUNSELLOR</li>
                        </ul>
                    </div>
                    <div class="detail">
                        <p class="text">
                            <img src="{{ asset('student-panel') }}/images/dashboard/call-icon.svg" alt="call-icon"
                                width="100%" height="100%">
                            <span
                                class="mb-no">{{ @$website_setting->counsellor_number != 0 ? @$website_setting->counsellor_number : '-' }}</span>
                        </p>
                        @if ($user->assign_to != null)
                            <a href="javascript:;" data-id="{{ @$user->assign_to != null ? @$user->assign_to : '' }}"
                                class="book-meet-btn appendAssignTo">Book Meeting</a>
                        @endif
                    </div>
                </div>
                <div class="card" id="step2">
                    <div class="card-top">
                        <img src="{{ asset('student-panel') }}/images/dashboard/profile-image.svg" alt="image"
                            width="100%" height="100%">
                        <ul class="list-wrpr">
                            <li class="list-name">
                                {{ @$user->admin_rm->name != null ? @$user->admin_rm->name : 'N/A (waiting for profile completion)' }}
                            </li>
                            <li class="list-type">RELATIONSHIP MANAGER</li>
                        </ul>
                    </div>
                    <div class="detail">
                        <p class="text">
                            <img src="{{ asset('student-panel') }}/images/dashboard/call-icon.svg" alt="call-icon"
                                width="100%" height="100%">
                            <span class="mb-no">{{ @$website_setting->phone }}</span>
                        </p>
                        @if ($user->assigned_rm != null)
                            <a href="javascript:;" data-id="{{ @$user->assigned_rm != null ? @$user->assigned_rm : '' }}"
                                class="book-meet-btn appendAssignTo">Book Meeting</a>
                        @endif
                    </div>
                </div>
            </div>
            @if (empty(@$mocktest))
                <div class="mid-banner">
                    <div class="banner-detail">
                        <p class="head">Intake time is running out! Find your dream University now</p>
                        <span class="sub-head">Start applying to the interested colleges and universities to get an
                            admit on
                            time. Find courses and universities from our advanced AI tools</span>
                        <p class="btns">
                            <a href="{{ route('dashboard.finder', ['slug' => 'course']) }}"
                                class="common-btn banner-btn">Find Course</a>
                        </p>
                    </div>
                    <div class="lottie-gif">
                        <lottie-player class="lottie-play" src="{{ asset('student-panel') }}/json/time.json"
                            background="transparent" speed="1" width="100%" hight="100%"
                            style="width: 127px; height: 146px;" loop autoplay></lottie-player>
                    </div>
                </div>               
            @else
                @if(!$testStatus)
                    <div class="mid-banner">
                        <div class="banner-detail">
                            <p class="head">Get Access to Your IELTS Mock Tests & Start Preparing!</p>
                            <span class="sub-head">Why to let any delay in preparation. Get access to numerous mock tests
                                carefully and strategically designed by industry experts to help you prepare for the main IELTS
                                exam.</span>
                            <p class="btns">
                                <a href="{{ route('website.test-preparation.ieltsDemoClass') }}"
                                    class="common-btn banner-btn">Take Your Test Now!</a>                           
                            </p>
                        </div>
                        <div class="lottie-gif">
                            <lottie-player class="lottie-play" src="{{ asset('student-panel') }}/json/mock-test.json"
                                background="transparent" speed="1" width="100%" hight="100%" loop
                                autoplay></lottie-player>
                        </div>
                    </div>
                @else
                    <div class="mid-banner">
                        <div class="banner-detail">
                            <p class="head">Intake time is running out! Find your dream University now</p>
                            <span class="sub-head">Start applying to the interested colleges and universities to get an
                                admit on
                                time. Find courses and universities from our advanced AI tools</span>
                            <p class="btns">
                                <a href="{{ route('dashboard.finder', ['slug' => 'course']) }}"
                                    class="common-btn banner-btn">Find Course</a>
                            </p>
                        </div>
                        <div class="lottie-gif">
                            <lottie-player class="lottie-play" src="{{ asset('student-panel') }}/json/time.json"
                                background="transparent" speed="1" width="100%" hight="100%"
                                style="width: 127px; height: 146px;" loop autoplay></lottie-player>
                        </div>
                    </div>
                @endif
            @endif
            <div class="chat-box hide" id="step5">
                <div class="chat-head">
                    <span class="icon"><img src="{{ asset('student-panel') }}/images/headphone.svg" alt="image"
                            width="100%" height="100%"></span>
                    <p class="text">Communications
                        <span class="coun-name"><span
                                class="active"></span>{{ @$user->admin->name != null ? @$user->admin->name : 'N/A (waiting for counselor to be assigned)' }}</span>
                    </p>
                </div>


                <div class="chat-body">
                    <p class="tabs">
                        <span class="ticket-tab active" data-key="1">Active</span>
                        <span class="ticket-tab" data-key="2">Closed</span>
                    </p>

                    <!--Active-->
                    <div class="tab-panels 1">
                        <div class="msg">
                            <p class="date">12 August 2022</p>
                            <div class="left-msg">
                                <p class="msg-text">Hello, I want to make enquiries about your product</p>
                                <span class="time">12:55 am</span>
                            </div>

                            <div class="right-msg">
                                <p class="msg-text">What do you need to know?</p>
                                <p class="time-box"><span class="time">12:57 am</span><span class="read"></span></p>
                            </div>

                            <p class="date">Today</p>
                            <div class="left-msg">
                                <p class="msg-text" id="step1">Hi, My name is Gaurav, your relationship manager. Our
                                    Expert counselors are evaluating your profile and will get back to you with University
                                    suggestions. Meanwhile, feel free to explore universities and courses using our tool.
                                    For any urgent query, you can call me (9:30 AM - 6 PM)</p>
                                <span class="time">12:58 am</span>
                            </div>
                            <div class="right-msg uploaded-file-msg">
                                <p class="msg-text">
                                    <span class="file-upload-icon">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M18.3334 8.33341V12.5001C18.3334 16.6667 16.6667 18.3334 12.5001 18.3334H7.50008C3.33341 18.3334 1.66675 16.6667 1.66675 12.5001V7.50008C1.66675 3.33341 3.33341 1.66675 7.50008 1.66675H11.6667"
                                                stroke="white" stroke-width="1.25" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M18.3334 8.33341H15.0001C12.5001 8.33341 11.6667 7.50008 11.6667 5.00008V1.66675L18.3334 8.33341Z"
                                                stroke="white" stroke-width="1.25" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path d="M5.83325 10.8333H10.8333" stroke="white" stroke-width="1.25"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M5.83325 14.1667H9.16659" stroke="white" stroke-width="1.25"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </span>What do you need to know?
                                </p>
                                <p class="time-box"><span class="time">12:57 am</span><span class="read"></span></p>
                            </div>
                        </div>

                        <div class="chat-bottom">
                            <p class="add-btn">
                                <input type="file" class="file-input" name="" id="">
                                <img src="{{ asset('student-panel') }}/images/dashboard/add-icon.svg" alt="image"
                                    width="100%" height="100%">
                            </p>
                            <div class="file-uploaded-result" style="display:none;">
                                <span class="file-upload-icon"><svg width="18" height="19" viewBox="0 0 18 19"
                                        fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M16.5 8V11.75C16.5 15.5 15 17 11.25 17H6.75C3 17 1.5 15.5 1.5 11.75V7.25C1.5 3.5 3 2 6.75 2H10.5"
                                            stroke="#1C1D22" stroke-width="1.25" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path d="M16.5 8H13.5C11.25 8 10.5 7.25 10.5 5V2L16.5 8Z" stroke="#1C1D22"
                                            stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M5.25 10.25H9.75" stroke="#1C1D22" stroke-width="1.25"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M5.25 13.25H8.25" stroke="#1C1D22" stroke-width="1.25"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </span>
                                <span class="file-name">10th Marksheet.pdf</span>
                                <span class="close-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11"
                                        viewBox="0 0 11 11" fill="none">
                                        <path d="M1.5625 1.5625L9.57351 9.46099" stroke="#8B8D97" stroke-width="1.2"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M9.57349 1.5625L1.56248 9.46099" stroke="#8B8D97" stroke-width="1.2"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </span>
                            </div>

                            <input type="text" class="text-input" value="" id=""
                                placeholder="Your message">

                            {{-- <p class="emoji-btn">
                                    <img src="{{ asset('student-panel') }}/images/dashboard/smile.svg" alt="image" width="100%"
                                        height="100%">
                                </p> --}}

                            <button class="send-btn" onclick="sendMessage()" aria-label="Send">Send
                                <img src="{{ asset('student-panel') }}/images/dashboard/Send.svg" alt="image"
                                    width="100%" height="100%">
                            </button>
                        </div>
                    </div>

                    <!--Closed-->
                    <div class="tab-panels 2">
                        <div class="closed-box">
                            <div class="acc-section">
                                <div class="acc-head active">
                                    <ul class="acc-head-list">
                                        <li class="list-item">Ticket no.
                                            <span class="value">#2072</span>
                                        </li>
                                        <li class="list-item">Subject
                                            <span class="value">#2072</span>
                                        </li>
                                        <li class="list-item">Assigned to
                                            <span class="value">Nisha Dubey</span>
                                        </li>
                                        <li class="list-item">Created Date
                                            <span class="value">30 Oct, 2023</span>
                                        </li>
                                    </ul>
                                </div>

                                <div class="acc-body">
                                    <div class="msg">
                                        <div class="left-msg">
                                            <p class="msg-text">Hello, I want to make enquiries about your product</p>
                                            <span class="time">12:55 am</span>
                                        </div>

                                        <div class="right-msg">
                                            <p class="msg-text">What do you need to know?</p>
                                            <p class="time-box"><span class="time">12:57 am</span><span
                                                    class="read"></span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="acc-section">
                                <div class="acc-head">
                                    <ul class="acc-head-list">
                                        <li class="list-item">Ticket no.
                                            <span class="value">#2072</span>
                                        </li>
                                        <li class="list-item">Subject
                                            <span class="value">#2072</span>
                                        </li>
                                        <li class="list-item">Assigned to
                                            <span class="value">Nisha Dubey</span>
                                        </li>
                                        <li class="list-item">Created Date
                                            <span class="value">30 Oct, 2023</span>
                                        </li>
                                    </ul>
                                </div>

                                <div class="acc-body">
                                    <div class="msg">
                                        <div class="left-msg">
                                            <p class="msg-text">Hello, I want to make enquiries about your product</p>
                                            <span class="time">12:55 am</span>
                                        </div>

                                        <div class="right-msg">
                                            <p class="msg-text">What do you need to know?</p>
                                            <p class="time-box"><span class="time">12:57 am</span><span
                                                    class="read"></span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="right">
            @if (@$showUpgradePlan)
                <div class="acc-deactive">
                    <div class="lottie-gif">
                        <lottie-player class="lottie-play" src="{{ asset('student-panel') }}/json/deactive-spinner.json"
                            background="transparent" speed="1" width="100%" hight="100%"
                            style="width: 74px; height: 74px;" loop autoplay></lottie-player>
                    </div>
                    <p class="text">
                        {{ $date_difference == 0 ? 'Plan Expired! Upgrade plan for unlimited access.' : "Only {$date_difference} day left! Upgrade plan for unlimited access." }}
                        <a href="{{ route('dashboard.studyPlans') }}" class="upgrade-btn">Upgrade Plan</a>
                    </p>
                </div>
            @endif

            <div class="info-user">
                <ul class="detail-list">
                    <li class="list-item">{{ @$user->name }} {{ @$user->last_name }}</li>
                    @if (!empty($user->phone))
                        <li class="list-item"> <img src="{{ asset('student-panel') }}/images/dashboard/phone.svg"
                                alt="phone" width="100%"
                                height="100%">{{ @$user->country_code ? '+' . @$user->country_code : '' }}
                            {{ @$user->phone }}
                        </li>
                    @endif
                    @if (!empty($user->email))
                        <li class="list-item"> <img src="{{ asset('student-panel') }}/images/dashboard/message-text.svg"
                                alt="message-text" width="100%" height="100%">{{ @$user->email }}</li>
                    @endif
                </ul>
                @if (@$profile_complete != 100)
                    <div class="incomplete-box">
                        <div class="profile-progress">
                            <span class="sub-head">Profile Completed</span><span class="progress-value"
                                id="progress-value"></span>
                            <div id="data_progress_bar" class="progress-line" data-progress="">
                                <span class="filled-line"></span>
                            </div>
                        </div>

                        <p class="msg">Complete your profile and start with personalized study abroad journey!</p>

                        <a href="{{ route('dashboard.profile') }}" class="common-btn update-btn">Update Profile</a>
                    </div>
                @endif
            </div>

            <div class="application-detail detail-box">
                <p class="head">
                    <img src="{{ asset('student-panel') }}/images/doc-icon.svg" alt="doc-icon" width="100%"
                        height="100%">
                    Application Manager
                </p>

                <ul class="status-list">
                    <li class="single-status">Shortlisted<span class="app-num">{{ $courseShortlist }}</span></li>
                    <li class="single-status">Applied<span class="app-num">{{ $applicationsCount }}</span></li>
                </ul>
                <a href="{{ route('dashboard.applicationManager') }}" class="app-btn">Go to Application Manager</a>
            </div>

            <div class="small-banner">
                <p class="head">One Step Closer</p>
                <span class="sub-head">Get the exam score you need, Guaranteed!</span>
                <div class="list-type">
                    <a href="javascript:;" class="list-item" aria-label="IELTS"><img
                            src="{{ asset('student-panel') }}/images/dashboard/ielts.png" alt="IELTS" width="100%"
                            height="100%"></a>
                    <a href="javascript:;" class="list-item" aria-label="GMAT"><img
                            src="{{ asset('student-panel') }}/images/dashboard/gmat.png" alt="GMAT" width="100%"
                            height="100%"></a>
                    <a href="javascript:;" class="list-item" aria-label="Pearson"><img
                            src="{{ asset('student-panel') }}/images/dashboard/pte.png" alt="Pearson" width="100%"
                            height="100%"></a>
                    <a href="javascript:;" class="list-item" aria-label="TOEFL"><img
                            src="{{ asset('student-panel') }}/images/dashboard/toefl.png" alt="TOEFL" width="100%"
                            height="100%"></a>
                </div>
                {{-- <a href="javascript:;" class="common-link">Know More</a> --}}
            </div>
            <form class="subscribeWebinar" id="subscribeWebinar">
                @csrf
                <div class="webinar" id="step6">
                    <p class="top">Upcoming Webinars
                        {{-- <a href="javascript:;" class="common-link">View All</a> --}}
                    </p>
                    <input type="hidden" name="user_id" class="user_id" value="{{ $user->id }}">
                    {{-- <p class="date-time"><span class="small-text">Wed, Aug 28</span> • <span class="small-text">4:30 PM -
                            5:30PM</span> </p>
                    <p class="webinar-name">Interactive session for students applying</p>
                    <a href="javascript:;" class="common-link book-seat">Book a Free Seat</a> --}}
                </div>
            </form>


            <div class="detail-box timeline-detail hide">
                <p class="head">
                    <img src="{{ asset('student-panel') }}/images/dashboard/timeline-icon.svg" alt="timeline-icon"
                        width="100%" height="100%">
                    My Timeline
                </p>


                <div class="timeline-list">
                    @foreach ($timeline as $key => $stage)
                        @if ($stage['created_date'] != 'Not Started')
                            @if ($key === array_key_last($timeline))
                                <div class="timeline-item active completed">
                                    <p class="date">{{ dateMonth($stage['created_date']) }}</p>
                                    <p class="status"><span class="circle"></span></p>
                                    <p class="t-name">{{ $stage['name'] }}</p>
                                </div>
                            @else
                                <div class="timeline-item active completed">
                                    <p class="date">{{ dateMonth($stage['created_date']) }}</p>
                                    <p class="status"><span class="circle"></span><span class="line"></span></p>
                                    <p class="t-name">{{ $stage['name'] }}</p>
                                </div>
                            @endif
                        @else
                            @if ($key === array_key_last($timeline))
                                <div class="timeline-item">
                                    <p class="date">pending</p>
                                    <p class="status"><span class="circle"></span></p>
                                    <p class="t-name">{{ $stage['name'] }}</p>
                                </div>
                            @else
                                <div class="timeline-item">
                                    <p class="date">pending</p>
                                    <p class="status"><span class="circle"></span><span class="line"></span></p>
                                    <p class="t-name">{{ $stage['name'] }}</p>
                                </div>
                            @endif
                        @endif
                    @endforeach
                    {{-- <div class="timeline-item active">
                        <p class="date">22 NOV</p>
                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                        <p class="t-name">Documents Received</p>
                    </div>

                    <div class="timeline-item">
                        <p class="date">22 NOV</p>
                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                        <p class="t-name">Universities Suggested</p>
                    </div>

                    <div class="timeline-item">
                        <p class="date">22 NOV</p>
                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                        <p class="t-name">Application Ready</p>
                    </div>

                    <div class="timeline-item">
                        <p class="date">22 NOV</p>
                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                        <p class="t-name">Application Submitted</p>
                    </div>

                    <div class="timeline-item">
                        <p class="date">22 NOV</p>
                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                        <p class="t-name">Admission Letter Pending</p>
                    </div>

                    <div class="timeline-item">
                        <p class="date">22 NOV</p>
                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                        <p class="t-name">Initial Fee / Tuition Fee Deposit</p>
                    </div>

                    <div class="timeline-item">
                        <p class="date">22 NOV</p>
                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                        <p class="t-name">Admitted</p>
                    </div>

                    <div class="timeline-item">
                        <p class="date">22 NOV</p>
                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                        <p class="t-name">Visa in Process</p>
                    </div>

                    <div class="timeline-item">
                        <p class="date">22 NOV</p>
                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                        <p class="t-name">Visa Accepted</p>
                    </div>

                    <div class="timeline-item">
                        <p class="date">22 NOV</p>
                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                        <p class="t-name">Offer Issued</p>
                    </div>

                    <div class="timeline-item">
                        <p class="date">22 NOV</p>
                        <p class="status"><span class="circle"></span></p>
                        <p class="t-name">Offer Accepted</p>
                    </div> --}}
                </div>

            </div>
        </div>
    </div>

    <!--Add / Edit Application Popup-->
    <div class="add-app-popup">
        <p class="top">
            <span class="head">Add Application</span> <!--For Edit Change text to Edit Application-->
            <svg class="close-icon close-app-popup" width="24" height="24" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M13.2329 11.9993L18.7414 6.4989C18.906 6.33424 18.9985 6.11091 18.9985 5.87804C18.9985 5.64517 18.906 5.42184 18.7414 5.25717C18.5767 5.09251 18.3534 5 18.1206 5C17.8877 5 17.6644 5.09251 17.4998 5.25717L12 10.7663L6.50024 5.25717C6.33559 5.09251 6.11228 5 5.87944 5C5.64659 5 5.42328 5.09251 5.25864 5.25717C5.09399 5.42184 5.00149 5.64517 5.00149 5.87804C5.00149 6.11091 5.09399 6.33424 5.25864 6.4989L10.7671 11.9993L5.25864 17.4996C5.17668 17.5809 5.11164 17.6776 5.06725 17.7842C5.02285 17.8907 5 18.005 5 18.1205C5 18.2359 5.02285 18.3502 5.06725 18.4568C5.11164 18.5633 5.17668 18.66 5.25864 18.7413C5.33992 18.8233 5.43663 18.8884 5.54318 18.9327C5.64972 18.9771 5.76401 19 5.87944 19C5.99486 19 6.10915 18.9771 6.2157 18.9327C6.32225 18.8884 6.41895 18.8233 6.50024 18.7413L12 13.2322L17.4998 18.7413C17.581 18.8233 17.6778 18.8884 17.7843 18.9327C17.8909 18.9771 18.0051 19 18.1206 19C18.236 19 18.3503 18.9771 18.4568 18.9327C18.5634 18.8884 18.6601 18.8233 18.7414 18.7413C18.8233 18.66 18.8884 18.5633 18.9328 18.4568C18.9771 18.3502 19 18.2359 19 18.1205C19 18.005 18.9771 17.8907 18.9328 17.7842C18.8884 17.6776 18.8233 17.5809 18.7414 17.4996L13.2329 11.9993Z"
                    fill="#24292D" />
            </svg>
        </p>

        <form action="" class="application-form">
            <div class="form-fields">
                <!--University Name and Course Name Will be Can't be edited-->

                <div class="single-block">
                    <div class="single-input">
                        <label for="university_Name" class="field-label">University you want to add</label>
                        <input type="text" class="input-field" name="university-name" id="university_Name"
                            placeholder="University you want to add" value="" aria-label="university-name">
                        <svg class="search-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M15.7372 14.4753L12.7159 11.463C13.6907 10.2211 14.2196 8.68756 14.2176 7.10882C14.2176 5.70283 13.8007 4.32841 13.0196 3.15937C12.2385 1.99033 11.1282 1.07918 9.82925 0.54113C8.53028 0.0030801 7.10094 -0.137698 5.72196 0.136597C4.34299 0.410893 3.07631 1.08794 2.08213 2.08213C1.08794 3.07631 0.410893 4.34299 0.136597 5.72196C-0.137698 7.10094 0.0030801 8.53028 0.54113 9.82925C1.07918 11.1282 1.99033 12.2385 3.15937 13.0196C4.32841 13.8007 5.70283 14.2176 7.10882 14.2176C8.68756 14.2196 10.2211 13.6907 11.463 12.7159L14.4753 15.7372C14.5579 15.8204 14.6562 15.8865 14.7645 15.9317C14.8728 15.9768 14.9889 16 15.1062 16C15.2236 16 15.3397 15.9768 15.448 15.9317C15.5563 15.8865 15.6545 15.8204 15.7372 15.7372C15.8204 15.6545 15.8865 15.5563 15.9317 15.448C15.9768 15.3397 16 15.2236 16 15.1062C16 14.9889 15.9768 14.8728 15.9317 14.7645C15.8865 14.6562 15.8204 14.5579 15.7372 14.4753ZM1.77721 7.10882C1.77721 6.05433 2.0899 5.02352 2.67575 4.14674C3.26159 3.26996 4.09428 2.58659 5.0685 2.18305C6.04273 1.77952 7.11474 1.67393 8.14897 1.87965C9.1832 2.08538 10.1332 2.59316 10.8788 3.3388C11.6245 4.08444 12.1323 5.03444 12.338 6.06868C12.5437 7.10291 12.4381 8.17492 12.0346 9.14914C11.6311 10.1234 10.9477 10.9561 10.0709 11.5419C9.19413 12.1277 8.16332 12.4404 7.10882 12.4404C5.69479 12.4404 4.33867 11.8787 3.3388 10.8788C2.33893 9.87897 1.77721 8.52286 1.77721 7.10882Z"
                                fill="#747579" />
                        </svg>
                        <p class="error-msg" style="display: none;">Enter University Name</p>
                    </div>

                    <ul class="search-list">
                        <li class="search-item">Simon Fraser University</li>
                        <li class="search-item">Auburn University at Montgomery</li>
                        <li class="search-item">Monash University</li>
                        <li class="search-item">California State Polytechnic University, Pomona</li>
                        <li class="search-item">University of Montreal</li>
                        <li class="search-item">University of Montana</li>
                        <li class="search-item">Montclair State University</li>
                    </ul>
                </div>

                <!--Show when university name is Selected-->
                <div class="single-input field-not-empty" style="display: none;">
                    <label for="university_country" class="field-label">University Country</label>
                    <input type="text" class="input-field" name="university-country" id="university_country"
                        placeholder="University Country" value="" aria-label="university-country" readonly>
                    <p class="msg"><img src="{{ asset('student-panel') }}/images/dashboard/green-detail-icon.svg"
                            alt="detail.icon">This country
                        preference will be added to your profile</p>
                </div>

                <div class="single-block">
                    <div class="single-input">
                        <label for="course_name" class="field-label">Course you want to study</label>
                        <input type="text" class="input-field" name="course-name" id="course_name"
                            placeholder="Course you want to study" value="" aria-label="course-name">
                        <svg class="search-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M15.7372 14.4753L12.7159 11.463C13.6907 10.2211 14.2196 8.68756 14.2176 7.10882C14.2176 5.70283 13.8007 4.32841 13.0196 3.15937C12.2385 1.99033 11.1282 1.07918 9.82925 0.54113C8.53028 0.0030801 7.10094 -0.137698 5.72196 0.136597C4.34299 0.410893 3.07631 1.08794 2.08213 2.08213C1.08794 3.07631 0.410893 4.34299 0.136597 5.72196C-0.137698 7.10094 0.0030801 8.53028 0.54113 9.82925C1.07918 11.1282 1.99033 12.2385 3.15937 13.0196C4.32841 13.8007 5.70283 14.2176 7.10882 14.2176C8.68756 14.2196 10.2211 13.6907 11.463 12.7159L14.4753 15.7372C14.5579 15.8204 14.6562 15.8865 14.7645 15.9317C14.8728 15.9768 14.9889 16 15.1062 16C15.2236 16 15.3397 15.9768 15.448 15.9317C15.5563 15.8865 15.6545 15.8204 15.7372 15.7372C15.8204 15.6545 15.8865 15.5563 15.9317 15.448C15.9768 15.3397 16 15.2236 16 15.1062C16 14.9889 15.9768 14.8728 15.9317 14.7645C15.8865 14.6562 15.8204 14.5579 15.7372 14.4753ZM1.77721 7.10882C1.77721 6.05433 2.0899 5.02352 2.67575 4.14674C3.26159 3.26996 4.09428 2.58659 5.0685 2.18305C6.04273 1.77952 7.11474 1.67393 8.14897 1.87965C9.1832 2.08538 10.1332 2.59316 10.8788 3.3388C11.6245 4.08444 12.1323 5.03444 12.338 6.06868C12.5437 7.10291 12.4381 8.17492 12.0346 9.14914C11.6311 10.1234 10.9477 10.9561 10.0709 11.5419C9.19413 12.1277 8.16332 12.4404 7.10882 12.4404C5.69479 12.4404 4.33867 11.8787 3.3388 10.8788C2.33893 9.87897 1.77721 8.52286 1.77721 7.10882Z"
                                fill="#747579" />
                        </svg>
                    </div>

                    <ul class="search-list">
                        <li class="search-item">Bachelors in Computer Science</li>
                        <li class="search-item">Bachelors in Commerce</li>
                        <li class="search-item">BBA in Business Administration</li>
                        <li class="search-item">Bachelors in Biomedical Sciences</li>
                        <li class="search-item">Bachelors in Computer Science (Honours)</li>
                        <li class="search-item">Bachelors in Computer Science (Honours)</li>
                    </ul>
                </div>

                <div class="app-status">
                    <p class="head">Your Application Status</p>
                    <ul class="status-list">
                        <li class="single-status"><input class="hide-radio" type="radio" name="status"
                                id="" aria-label="Shortlisted"><span class="status-name">Shortlisted</span></li>
                        <li class="single-status"><input class="hide-radio" type="radio" name="status"
                                id="" aria-label="Applied"><span class="status-name">Applied</span></li>
                        <li class="single-status"><input class="hide-radio" type="radio" name="status"
                                id="" aria-label="Admit"><span class="status-name">Admit</span></li>
                        <li class="single-status"><input class="hide-radio" type="radio" name="status"
                                id="" aria-label="Reject"><span class="status-name">Reject</span></li>
                        <li class="single-status"><input class="hide-radio" type="radio" name="status"
                                id="" aria-label="Waitlist"><span class="status-name">Waitlist</span></li>
                        <li class="single-status"><input class="hide-radio" type="radio" name="status"
                                id="" aria-label="Final"><span class="status-name">Final</span></li>
                    </ul>
                </div>

                <!--Show when status is Applied,Admit,Reject,Waitlist,final-->
                <div class="date">
                    <div class="single-input applied-date">
                        <p class="head">Applied Date <span class="small-text">(Optional)</span></p>
                        <input type="text" class="input-field" name="applied_date" id="" value=""
                            placeholder="Select Date" aria-label="Applied Date" readonly>
                    </div>

                    <!--Show when status is Admit,Reject,Waitlist,final-->
                    <div class="single-input decision-date">
                        <p class="head">Decision Date <span class="small-text">(Optional)</span></p>
                        <input type="text" class="input-field" name="decision_date" id="" value=""
                            placeholder="Select Date" aria-label="Decision Date" readonly>
                    </div>
                </div>

                <!--Show when University Name, Course Name and Status Name is Selected -->
                <div class="selected-list">
                    <div class="selected-item">
                        <p class="head">Groups you’ll be added to</p>
                        <p class="detail">University of Cambridge | Bachelors in Mathematics</p>
                    </div>
                </div>
            </div>

            <button type="submit" class="add-btn">Add Application</button>
            <!--For Edit Change text to Update Application-->
        </form>
    </div>

    <!--Remove Application Popup-->
    <div class="remove-app-popup">
        <p class="top">
            <span class="head">Move to archive</span>
            <svg class="close-icon close-remove" width="24" height="24" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M13.2329 11.9993L18.7414 6.4989C18.906 6.33424 18.9985 6.11091 18.9985 5.87804C18.9985 5.64517 18.906 5.42184 18.7414 5.25717C18.5767 5.09251 18.3534 5 18.1206 5C17.8877 5 17.6644 5.09251 17.4998 5.25717L12 10.7663L6.50024 5.25717C6.33559 5.09251 6.11228 5 5.87944 5C5.64659 5 5.42328 5.09251 5.25864 5.25717C5.09399 5.42184 5.00149 5.64517 5.00149 5.87804C5.00149 6.11091 5.09399 6.33424 5.25864 6.4989L10.7671 11.9993L5.25864 17.4996C5.17668 17.5809 5.11164 17.6776 5.06725 17.7842C5.02285 17.8907 5 18.005 5 18.1205C5 18.2359 5.02285 18.3502 5.06725 18.4568C5.11164 18.5633 5.17668 18.66 5.25864 18.7413C5.33992 18.8233 5.43663 18.8884 5.54318 18.9327C5.64972 18.9771 5.76401 19 5.87944 19C5.99486 19 6.10915 18.9771 6.2157 18.9327C6.32225 18.8884 6.41895 18.8233 6.50024 18.7413L12 13.2322L17.4998 18.7413C17.581 18.8233 17.6778 18.8884 17.7843 18.9327C17.8909 18.9771 18.0051 19 18.1206 19C18.236 19 18.3503 18.9771 18.4568 18.9327C18.5634 18.8884 18.6601 18.8233 18.7414 18.7413C18.8233 18.66 18.8884 18.5633 18.9328 18.4568C18.9771 18.3502 19 18.2359 19 18.1205C19 18.005 18.9771 17.8907 18.9328 17.7842C18.8884 17.6776 18.8233 17.5809 18.7414 17.4996L13.2329 11.9993Z"
                    fill="#24292D" />
            </svg>
        </p>

        <div class="popup-body">
            <img src="{{ asset('student-panel') }}/images/dashboard/archive.svg" alt="archive" width="100%"
                height="100%">
            <p class="small-head">
                Are you sure you want to archive “<span class="name">University of Oxford Engineering
                    Science</span>”
                application?
            </p>
            <p class="btns"><button class="btn-link close-remove">No</button><button class="btn-link">Yes</button>
            </p>
        </div>
    </div>

    <!--Meeting Popup-->
    <div class="meeting-popup">
        <div class="top">
            <svg class="close-popup close-meeting-popup" width="24" height="24" viewBox="0 0 24 24"
                fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M13.2329 11.9993L18.7414 6.4989C18.906 6.33424 18.9985 6.11091 18.9985 5.87804C18.9985 5.64517 18.906 5.42184 18.7414 5.25717C18.5767 5.09251 18.3534 5 18.1206 5C17.8877 5 17.6644 5.09251 17.4998 5.25717L12 10.7663L6.50024 5.25717C6.33559 5.09251 6.11228 5 5.87944 5C5.64659 5 5.42328 5.09251 5.25864 5.25717C5.09399 5.42184 5.00149 5.64517 5.00149 5.87804C5.00149 6.11091 5.09399 6.33424 5.25864 6.4989L10.7671 11.9993L5.25864 17.4996C5.17668 17.5809 5.11164 17.6776 5.06725 17.7842C5.02285 17.8907 5 18.005 5 18.1205C5 18.2359 5.02285 18.3502 5.06725 18.4568C5.11164 18.5633 5.17668 18.66 5.25864 18.7413C5.33992 18.8233 5.43663 18.8884 5.54318 18.9327C5.64972 18.9771 5.76401 19 5.87944 19C5.99486 19 6.10915 18.9771 6.2157 18.9327C6.32225 18.8884 6.41895 18.8233 6.50024 18.7413L12 13.2322L17.4998 18.7413C17.581 18.8233 17.6778 18.8884 17.7843 18.9327C17.8909 18.9771 18.0051 19 18.1206 19C18.236 19 18.3503 18.9771 18.4568 18.9327C18.5634 18.8884 18.6601 18.8233 18.7414 18.7413C18.8233 18.66 18.8884 18.5633 18.9328 18.4568C18.9771 18.3502 19 18.2359 19 18.1205C19 18.005 18.9771 17.8907 18.9328 17.7842C18.8884 17.6776 18.8233 17.5809 18.7414 17.4996L13.2329 11.9993Z"
                    fill="#24292D" />
            </svg>
        </div>

        <div class="popup-body">
            <!--Mobile-->
            <p class="head m-head">Oh no! You missed a call <br>
                from your <span class="primary">Gradding Advisor</span>
            </p>
            <div class="left-content">
                <!--Desktop-->
                <p class="head d-head">Oh no! You missed a call <br>
                    from your <span class="primary">Gradding Advisor</span>
                </p>

                <span class="small-head">What our Experts Provide:</span>

                <ul class="bnf-list">
                    <li class="list-item"><img src="{{ asset('student-panel') }}/images/dashboard/green-tick.svg"
                            alt="tick" width="100%" height="100%">Complete evaluation of your profile</li>
                    <li class="list-item"><img src="{{ asset('student-panel') }}/images/dashboard/green-tick.svg"
                            alt="tick" width="100%" height="100%">Your personalized roadmap to study abroad</li>
                    <li class="list-item"><img src="{{ asset('student-panel') }}/images/dashboard/green-tick.svg"
                            alt="tick" width="100%" height="100%">Get all the clarity about studying abroad</li>
                </ul>
            </div>
            <form class="right-form" novalidate>
                @csrf
                <p class="f-head">Make sure you are available this time</p>

                <div class="single-input date-select">
                    <label for="date" class="field-label">Date</label>
                    <input type="text" onfocus="this.type='date'" class="input-field dateField" id="date"
                        name="date" placeholder="Date">
                    <span class="date-error" style="color:red"></span>
                </div>

                <div class="single-input time-select">
                    <label for="time" class="field-label">Time</label>
                    <input type="text" onfocus="this.type='time'" class="input-field timeField" id="time"
                        name="slot" placeholder="Time">
                    <span class="time-error" style="color:red"></span>
                </div>
                <input type="hidden" id="meeting_assign_to" name="assign_to" value="">
                <input type="hidden" name="user_id" value="{{ $user->id }}">

                <button type="submit" class="common-btn book-meeting-btn">Book Meeting</button>
            </form>
        </div>
    </div>

    <!--Book Seat Popup-->
    <div class="book-seat-popup">
        <div class="top">
            <svg class="close-popup" width="24" height="24" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M13.2329 11.9993L18.7414 6.4989C18.906 6.33424 18.9985 6.11091 18.9985 5.87804C18.9985 5.64517 18.906 5.42184 18.7414 5.25717C18.5767 5.09251 18.3534 5 18.1206 5C17.8877 5 17.6644 5.09251 17.4998 5.25717L12 10.7663L6.50024 5.25717C6.33559 5.09251 6.11228 5 5.87944 5C5.64659 5 5.42328 5.09251 5.25864 5.25717C5.09399 5.42184 5.00149 5.64517 5.00149 5.87804C5.00149 6.11091 5.09399 6.33424 5.25864 6.4989L10.7671 11.9993L5.25864 17.4996C5.17668 17.5809 5.11164 17.6776 5.06725 17.7842C5.02285 17.8907 5 18.005 5 18.1205C5 18.2359 5.02285 18.3502 5.06725 18.4568C5.11164 18.5633 5.17668 18.66 5.25864 18.7413C5.33992 18.8233 5.43663 18.8884 5.54318 18.9327C5.64972 18.9771 5.76401 19 5.87944 19C5.99486 19 6.10915 18.9771 6.2157 18.9327C6.32225 18.8884 6.41895 18.8233 6.50024 18.7413L12 13.2322L17.4998 18.7413C17.581 18.8233 17.6778 18.8884 17.7843 18.9327C17.8909 18.9771 18.0051 19 18.1206 19C18.236 19 18.3503 18.9771 18.4568 18.9327C18.5634 18.8884 18.6601 18.8233 18.7414 18.7413C18.8233 18.66 18.8884 18.5633 18.9328 18.4568C18.9771 18.3502 19 18.2359 19 18.1205C19 18.005 18.9771 17.8907 18.9328 17.7842C18.8884 17.6776 18.8233 17.5809 18.7414 17.4996L13.2329 11.9993Z"
                    fill="#24292D" />
            </svg>
        </div>
        <div class="popup-body congratsPopup" style="display: none">
            <div class="lottie-img">
                <lottie-player class="popup-img" src="{{ asset('student-panel') }}/json/congrats.json"
                    background="transparent" speed="1" width="100%" hight="100%"
                    style="width: 102px; height: 102px;" loop autoplay></lottie-player>
            </div>
            <p class="head">Congratulations {{ $user->name }} You have successfully booked the seat.</p>
            <span class="sub-head">You will get a joining link before an hour via email</span>
            <p class="common-btn close-popup">Okay</p>
        </div>
        <div class="popup-body emailPopup">
            <!--show when not login and then thank you msg will show-->
            <form class="subscribeWebinar" onsubmit="return subscribeWebinar(event, this);">
                <p class="head">Fill your email id to get a meeting invite</p>
                <div class="single-input">
                    <label for="date" class="field-label">Email</label>
                    <input type="email" class="input-field" id="email" name="email"
                        placeholder="Enter your email id" required>
                    <span class="show-email-error"></span>
                    <input type="hidden" name="haveEmail" class="haveEmail" value="0">
                    <input type="hidden" name="webinar_id" class="webinar_id">
                    <input type="hidden" name="user_id" value={{ $user->id }}>
                </div>
                <button type="submit" class="common-btn">Submit</button>
            </form>

            <div class="msg-content" style="display: none;">
                <img src="{{ asset('student-panel') }}/images/green-tick.svg" alt="green-tick" width="100%"
                    height="100%">
                <p class="head">Thank You!!!</p>
                <span class="sub-head">You have Successfully Reserved your Seat</span>

                <span class="small-text">We’re dedicated to giving you the best experience possible. If you have any
                    query, feel free to get in touch.</span>

                <a href="javscript:;" class="common-btn">Contact Us</a>
            </div>
        </div>
    </div>

    <div class="notf-arrived">
        <div class="popup-body">
            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <rect width="24" height="24" rx="6" fill="url(#paint0_linear_1_1810)" />
                <path d="M8.5 12.5L10.5 14.5L15.5 9.5" stroke="white" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round" />
                <defs>
                    <linearGradient id="paint0_linear_1_1810" x1="12" y1="0" x2="12"
                        y2="24" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#48CA93" />
                        <stop offset="1" stop-color="#48BACA" />
                    </linearGradient>
                </defs>
            </svg>

            <p class="head">New Notification arrived!
                <span class="sub-head">University shortlisted</span>
            </p>

            <a href="javascript:;" class="view-btn">View</a>

            <svg class="close-not" width="18" height="19" viewBox="0 0 18 19" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M14 4.50004L4 14.5M3.99996 4.5L13.9999 14.5" stroke="#979FA9" stroke-width="1.5"
                    stroke-linecap="round" />
            </svg>


        </div>
    </div>

    <!--Success Message-->
    <p class="success-msg">
        <img src="{{ asset('student-panel') }}/images/green-tick.svg" alt="green-tick">
        Course Shortlisted and you are added to the groups
        <svg class="close-msg" width="14" height="14" viewBox="0 0 14 14" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
                d="M8.23286 6.99925L13.7414 1.4989C13.906 1.33424 13.9985 1.11091 13.9985 0.878038C13.9985 0.645168 13.906 0.421835 13.7414 0.257171C13.5767 0.0925073 13.3534 0 13.1206 0C12.8877 0 12.6644 0.0925073 12.4998 0.257171L7 5.76627L1.50024 0.257171C1.33559 0.0925073 1.11228 2.06752e-07 0.879436 2.08487e-07C0.646591 2.10222e-07 0.423282 0.0925073 0.258636 0.257171C0.0939896 0.421835 0.0014924 0.645168 0.0014924 0.878038C0.0014924 1.11091 0.0939896 1.33424 0.258636 1.4989L5.76714 6.99925L0.258636 12.4996C0.176683 12.5809 0.111635 12.6776 0.067245 12.7842C0.0228546 12.8907 0 13.005 0 13.1205C0 13.2359 0.0228546 13.3502 0.067245 13.4568C0.111635 13.5633 0.176683 13.66 0.258636 13.7413C0.33992 13.8233 0.436626 13.8884 0.543175 13.9327C0.649725 13.9771 0.764009 14 0.879436 14C0.994863 14 1.10915 13.9771 1.2157 13.9327C1.32225 13.8884 1.41895 13.8233 1.50024 13.7413L7 8.23224L12.4998 13.7413C12.581 13.8233 12.6778 13.8884 12.7843 13.9327C12.8909 13.9771 13.0051 14 13.1206 14C13.236 14 13.3503 13.9771 13.4568 13.9327C13.5634 13.8884 13.6601 13.8233 13.7414 13.7413C13.8233 13.66 13.8884 13.5633 13.9328 13.4568C13.9771 13.3502 14 13.2359 14 13.1205C14 13.005 13.9771 12.8907 13.9328 12.7842C13.8884 12.6776 13.8233 12.5809 13.7414 12.4996L8.23286 6.99925Z"
                fill="#24292D" />
        </svg>
    </p>
    {{-- Mobile View Dashboard --}}
    <div class="mobile-dash">
        @if($applicationsCount == 0)
            <div class="slider-list showOnLoad" style="display: none">
                <div class="slider-box course">
                    <div>
                        <p class="head">Find My Course</p>
                        <span class="sub-head">Find the ideal courses to pursue as per your interests with our experienced certified counsellors.</span>
                        <a href="{{ route('dashboard.finder', ['slug' => 'course']) }}" class="box-btn">Find Course/University</a>
                    </div>
                </div>

                <div class="slider-box offer">
                    <div>
                        <p class="head">Get Offer Letter in just 2 weeks!</p>
                        <span class="sub-head">Secure your university letter in just 2 weeks by starting your study abroad journey with us now.</span>
                        <a href="javascript:;" onclick="showPopup('connect-expert')" class="box-btn">Start Now</a>
                    </div>
                </div>

                <div class="slider-box test-prep">
                    <div>
                        <p class="head">Test Preparation</p>
                        <span class="sub-head">Crack any entrance test, IELTS, TOEFL, PTE, and other language proficiency test in your first attempt.</span>
                        <a href="{{env('TEST_PREP_DASHBOARD')}}" class="box-btn">Explore Courses</a>
                    </div>
                </div>
            </div>
        @endif
        <div class="container-fluid">
            @if($applicationsCount > 0)            
                <div class="welcome-strip">
                    <div class="add-app">
                        <p class="welcome-user-head">{{ $greeting }} {{ $user->name }}</p>
                        <a href="{{ route('dashboard.finder', ['slug' => 'course']) }}" class="add-app-btn">Add Application
                            <span class="plus-svg">
                                <svg width="17" height="16" viewBox="0 0 17 16" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="8.22412" cy="8" r="8" fill="white" />
                                    <path d="M8.22412 5.66663V10.3333" stroke="#002F5B" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M5.89062 8H10.5573" stroke="#002F5B" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </span>
                        </a>
                    </div>
                    <div class="app-count">
                        <p class="single-count">
                            {{ $courseShortlist }}
                            <span class="count-head">
                                Shortlisted
                            </span>
                        </p>
                        <p class="single-count">
                            {{ $applicationsCount }}
                            <span class="count-head">
                                Applied
                            </span>
                        </p>
                    </div>
                </div>
            @endif
            @if(!$testStatus)
                <div class="ielts-banner">
                    <p class="head">Predict Your IELTS Score with our <span class="red">IELTS</span> like Test
                        <span class="sub-head">Get your result evaluated 1:1</span>
                    </p>

                    <a href="{{ route('website.test-preparation.ieltsDemoClass') }}" class="test-btn">Take Test
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M1.44141 5.3C1.05481 5.3 0.741406 5.6134 0.741406 6C0.741406 6.3866 1.05481 6.7 1.44141 6.7L1.44141 5.3ZM13.6936 6.49498C13.967 6.22161 13.967 5.77839 13.6936 5.50503L9.23883 1.05025C8.96547 0.776886 8.52225 0.776886 8.24889 1.05025C7.97552 1.32362 7.97552 1.76684 8.24889 2.0402L12.2087 6L8.24888 9.9598C7.97552 10.2332 7.97552 10.6764 8.24888 10.9497C8.52225 11.2231 8.96547 11.2231 9.23883 10.9497L13.6936 6.49498ZM1.44141 6.7L13.1986 6.7L13.1986 5.3L1.44141 5.3L1.44141 6.7Z"
                                fill="#2D2D2D" />
                        </svg>
                    </a>
                </div>
            @endif
            <div class="offers-list">
                <div class="offer">
                    <p class="head">IELTS packages at lowest prices
                        <span class="sub-head">Get special offer on professional IELTS classes by joining today. </span>
                    </p>
                </div>
                <div class="offer">
                    <p class="head">Get 20% off on IELTS
                        <span class="sub-head">Hurry up and get amazing discounts on the IELTS packages.</span>
                    </p>
                </div>
            </div>
            @if (empty(@$mocktest))
                <a href="{{ route('dashboard.finder', ['slug' => 'course']) }}" class="mid-banner">
                    <div class="banner-detail">
                        <p class="head"> Intake time is running out! Secure your future now!</p>
                        <span class="sub-head">Apply to your dream universities before it's too late. Our AI tools will guide you to find the perfect match. Don't miss out!</span>
                    </div>
                    <div class="lottie-gif">
                        <lottie-player class="lottie-play" src="{{asset('/student-panel')}}/json/time.json"
                            background="transparent" speed="1" width="100%" hight="100%" loop=""
                            autoplay=""></lottie-player>
                    </div>
                </a>               
            @else
                @if(!$testStatus)
                    <a href="{{ route('website.test-preparation.ieltsDemoClass') }}" class="mid-banner">
                        <div class="banner-detail">
                            <p class="head">Ready to Ace your IELTS with ease?</p>
                            <span class="sub-head">Access numerous mock tests carefully and strategically designed by industry experts to help you prepare for the main IELTS exam.</span>
                        </div>
                        <div class="lottie-gif">
                            <lottie-player class="lottie-play" src="{{asset('/student-panel')}}/json/time.json"
                                background="transparent" speed="1" width="100%" hight="100%" loop=""
                                autoplay=""></lottie-player>
                        </div>
                    </a>
                @else
                    <a href="{{ route('dashboard.finder', ['slug' => 'course']) }}" class="mid-banner">
                        <div class="banner-detail">
                            <p class="head"> Intake time is running out! Secure your future now!</p>
                            <span class="sub-head">Apply to your dream universities before it's too late. Our AI tools will guide you to find the perfect match. Don't miss out!</span>
                        </div>
                        <div class="lottie-gif">
                            <lottie-player class="lottie-play" src="{{asset('/student-panel')}}/json/time.json"
                                background="transparent" speed="1" width="100%" hight="100%" loop=""
                                autoplay=""></lottie-player>
                        </div>
                    </a>
                @endif
            @endif
            <div class="quick-link-card">
                <a href="javascript:;" class="single-link" onclick="showPopup('connect-expert')">
                    <span class="link-svg link-yellow">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M10.05 2.53004L4.02999 6.46004C2.09999 7.72004 2.09999 10.54 4.02999 11.8L10.05 15.73C11.13 16.44 12.91 16.44 13.99 15.73L19.98 11.8C21.9 10.54 21.9 7.73004 19.98 6.47004L13.99 2.54004C12.91 1.82004 11.13 1.82004 10.05 2.53004Z"
                                stroke="#FF9E0C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                                d="M5.63 13.08L5.62 17.77C5.62 19.04 6.6 20.4 7.8 20.8L10.99 21.86C11.54 22.04 12.45 22.04 13.01 21.86L16.2 20.8C17.4 20.4 18.38 19.04 18.38 17.77V13.13"
                                stroke="#FF9E0C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M21.4 15V9" stroke="#FF9E0C" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </span>
                    <p class="link-title">Study Abroad</p>
                </a>
                <a href="{{route('dashboard.examCategories')}}" class="single-link">
                    <span class="link-svg link-green">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M22 16.7399V4.66994C22 3.46994 21.02 2.57994 19.83 2.67994H19.77C17.67 2.85994 14.48 3.92994 12.7 5.04994L12.53 5.15994C12.24 5.33994 11.76 5.33994 11.47 5.15994L11.22 5.00994C9.44 3.89994 6.26 2.83994 4.16 2.66994C2.97 2.56994 2 3.46994 2 4.65994V16.7399C2 17.6999 2.78 18.5999 3.74 18.7199L4.03 18.7599C6.2 19.0499 9.55 20.1499 11.47 21.1999L11.51 21.2199C11.78 21.3699 12.21 21.3699 12.47 21.2199C14.39 20.1599 17.75 19.0499 19.93 18.7599L20.26 18.7199C21.22 18.5999 22 17.6999 22 16.7399Z"
                                stroke="#0CBA72" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M12 5.48999V20.49" stroke="#0CBA72" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M7.75 8.48999H5.5" stroke="#0CBA72" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M8.5 11.49H5.5" stroke="#0CBA72" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </span>
                    <p class="link-title">Test Prep</p>
                </a>
                <a href="javascript:;" class="single-link" onclick="showPopup('connect-expert')">
                    <span class="link-svg link-blue">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M2.07 4.6C2.87 1.14 8.08 1.14 8.87 4.6C9.34 6.63 8.05 8.35 6.93 9.42C6.11 10.2 4.82 10.19 4 9.42C2.89 8.35 1.6 6.63 2.07 4.6Z"
                                stroke="#A175FF" stroke-width="1.5" />
                            <path
                                d="M15.07 16.6C15.87 13.14 21.11 13.14 21.91 16.6C22.38 18.63 21.09 20.35 19.96 21.42C19.14 22.2 17.84 22.19 17.02 21.42C15.89 20.35 14.6 18.63 15.07 16.6Z"
                                stroke="#A175FF" stroke-width="1.5" />
                            <path d="M12 5H14.68C16.53 5 17.39 7.29 16 8.51L8.01 15.5C6.62 16.71 7.48 19 9.32 19H12"
                                stroke="#A175FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M5.48622 5.5H5.49777" stroke="#A175FF" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M18.4862 17.5H18.4978" stroke="#A175FF" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </span>
                    <p class="link-title">Visa Services</p>
                </a>
                <a href="javascript:;" class="single-link" onclick="showPopup('connect-expert')">
                    <span class="link-svg link-pink">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M8 11.4C8 12.17 8.6 12.8 9.33 12.8H10.83C11.47 12.8 11.99 12.25 11.99 11.58C11.99 10.85 11.67 10.59 11.2 10.42L8.8 9.58001C8.32 9.41001 8 9.15001 8 8.42001C8 7.75001 8.52 7.20001 9.16 7.20001H10.66C11.4 7.21001 12 7.83001 12 8.60001"
                                stroke="#00A0B0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M10 12.85V13.59" stroke="#00A0B0" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M10 6.40997V7.18997" stroke="#00A0B0" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path
                                d="M9.99 17.98C14.4028 17.98 17.98 14.4028 17.98 9.99C17.98 5.57724 14.4028 2 9.99 2C5.57724 2 2 5.57724 2 9.99C2 14.4028 5.57724 17.98 9.99 17.98Z"
                                stroke="#00A0B0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                                d="M12.98 19.88C13.88 21.15 15.35 21.98 17.03 21.98C19.76 21.98 21.98 19.76 21.98 17.03C21.98 15.37 21.16 13.9 19.91 13"
                                stroke="#00A0B0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </span>
                    <p class="link-title">Loans</p>
                </a>
                <a href="javascript:;" class="single-link" onclick="showPopup('connect-expert')">
                    <span class="link-svg link-purple">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M9.02 2.83998L3.63 7.03998C2.73 7.73998 2 9.22998 2 10.36V17.77C2 20.09 3.89 21.99 6.21 21.99H17.79C20.11 21.99 22 20.09 22 17.78V10.5C22 9.28998 21.19 7.73998 20.2 7.04998L14.02 2.71998C12.62 1.73998 10.37 1.78998 9.02 2.83998Z"
                                stroke="#FF6161" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M12 17.99V14.99" stroke="#FF6161" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </span>
                    <p class="link-title">Accommodation</p>
                </a>
                <a href="javascript:;" class="single-link" onclick="showPopup('connect-expert')">
                    <span class="link-svg link-orange">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14" stroke="#FF9345"
                                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M22 10H18C15 10 14 9 14 6V2L22 10Z" stroke="#FF9345" stroke-width="1.5"
                                stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M7 13H13" stroke="#FF9345" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M7 17H11" stroke="#FF9345" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </span>
                    <p class="link-title">Document Prep</p>
                </a>
            </div>
            <div class="view-timeline-card">
                <div class="card-body">
                    <div class="timeline-list">
                        @foreach ($timeline as $key => $stage)
                            @if ($stage['created_date'] != 'Not Started')
                                @if ($key === array_key_last($timeline))
                                    <div class="timeline-item active completed">
                                        <p class="date">{{ dateMonth($stage['created_date']) }}</p>
                                        <p class="status"><span class="circle"></span></p>
                                        <p class="t-name">{{ $stage['name'] }}</p>
                                    </div>
                                @else
                                    <div class="timeline-item active completed">
                                        <p class="date">{{ dateMonth($stage['created_date']) }}</p>
                                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                                        <p class="t-name">{{ $stage['name'] }}</p>
                                    </div>
                                @endif
                            @else
                                @if ($key === array_key_last($timeline))
                                    <div class="timeline-item">
                                        <p class="date">pending</p>
                                        <p class="status"><span class="circle"></span></p>
                                        <p class="t-name">{{ $stage['name'] }}</p>
                                    </div>
                                @else
                                    <div class="timeline-item">
                                        <p class="date">pending</p>
                                        <p class="status"><span class="circle"></span><span class="line"></span></p>
                                        <p class="t-name">{{ $stage['name'] }}</p>
                                    </div>
                                @endif
                            @endif
                        @endforeach

                        {{-- <div class="timeline-item">
                            <p class="date">22 NOV</p>
                            <p class="status"><span class="circle"></span><span class="line"></span></p>
                            <p class="t-name">Documents Received</p>
                        </div>

                        <div class="timeline-item">
                            <p class="date">25 NOV</p>
                            <p class="status"><span class="circle"></span><span class="line"></span></p>
                            <p class="t-name">Universities Suggested</p>
                        </div>

                        <div class="timeline-item">
                            <p class="date">28 NOV</p>
                            <p class="status"><span class="circle"></span><span class="line"></span></p>
                            <p class="t-name">Application Ready</p>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>

        {{-- <div class="dashboard-footer">
            <a href="javascript:;" class="ft-btn call">
                <svg width="25" height="25" viewBox="0 0 25 25" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M22.47 18.83C22.47 19.19 22.39 19.56 22.22 19.92C22.05 20.28 21.83 20.62 21.54 20.94C21.05 21.48 20.51 21.87 19.9 22.12C19.3 22.37 18.65 22.5 17.95 22.5C16.93 22.5 15.84 22.26 14.69 21.77C13.54 21.28 12.39 20.62 11.25 19.79C10.1 18.95 9.01 18.02 7.97 16.99C6.94 15.95 6.01 14.86 5.18 13.72C4.36 12.58 3.7 11.44 3.22 10.31C2.74 9.17 2.5 8.08 2.5 7.04C2.5 6.36 2.62 5.71 2.86 5.11C3.1 4.5 3.48 3.94 4.01 3.44C4.65 2.81 5.35 2.5 6.09 2.5C6.37 2.5 6.65 2.56 6.9 2.68C7.16 2.8 7.39 2.98 7.57 3.24L9.89 6.51C10.07 6.76 10.2 6.99 10.29 7.21C10.38 7.42 10.43 7.63 10.43 7.82C10.43 8.06 10.36 8.3 10.22 8.53C10.09 8.76 9.9 9 9.66 9.24L8.9 10.03C8.79 10.14 8.74 10.27 8.74 10.43C8.74 10.51 8.75 10.58 8.77 10.66C8.8 10.74 8.83 10.8 8.85 10.86C9.03 11.19 9.34 11.62 9.78 12.14C10.23 12.66 10.71 13.19 11.23 13.72C11.77 14.25 12.29 14.74 12.82 15.19C13.34 15.63 13.77 15.93 14.11 16.11C14.16 16.13 14.22 16.16 14.29 16.19C14.37 16.22 14.45 16.23 14.54 16.23C14.71 16.23 14.84 16.17 14.95 16.06L15.71 15.31C15.96 15.06 16.2 14.87 16.43 14.75C16.66 14.61 16.89 14.54 17.14 14.54C17.33 14.54 17.53 14.58 17.75 14.67C17.97 14.76 18.2 14.89 18.45 15.06L21.76 17.41C22.02 17.59 22.2 17.8 22.31 18.05C22.41 18.3 22.47 18.55 22.47 18.83Z"
                        stroke="white" stroke-width="1.5" stroke-miterlimit="10" />
                    <path d="M19 9.5C19 8.9 18.53 7.98 17.83 7.23C17.19 6.54 16.34 6 15.5 6" stroke="white"
                        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M22.5 9.5C22.5 5.63 19.37 2.5 15.5 2.5" stroke="white" stroke-width="1.5"
                        stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </a>

            <a href="javascript:;" class="book-btn">
                <svg width="17" height="18" viewBox="0 0 17 18" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M7.89805 9.02991C10.1155 9.02991 11.913 7.23234 11.913 5.01495C11.913 2.79756 10.1155 1 7.89805 1C5.68068 1 3.88313 2.79756 3.88313 5.01495C3.88313 7.23234 5.68068 9.02991 7.89805 9.02991Z"
                        stroke="#066AC9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path
                        d="M1 17.0608C1 13.9532 4.09151 11.4399 7.89766 11.4399C8.66853 11.4399 9.41531 11.5443 10.1139 11.737"
                        stroke="#066AC9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path
                        d="M8.93871 16.6631C8.93871 16.7942 8.96786 16.929 9.02994 17.0602C9.09194 17.1913 9.17223 17.3151 9.278 17.4317C9.4568 17.6284 9.65381 17.7705 9.8763 17.8615C10.0952 17.9526 10.3324 18 10.5877 18C10.9599 18 11.3576 17.9126 11.7771 17.7341C12.1966 17.5555 12.6162 17.3151 13.0321 17.0128C13.4517 16.7068 13.8493 16.368 14.2288 15.9928C14.6046 15.6139 14.9439 15.2168 15.2467 14.8015C15.5458 14.3863 15.7866 13.971 15.9617 13.5594C16.1369 13.1441 16.2244 12.747 16.2244 12.3682C16.2244 12.1205 16.1806 11.8836 16.0931 11.6651C16.0055 11.4429 15.8669 11.2389 15.6736 11.0567C15.4401 10.8273 15.1846 10.7143 14.9147 10.7143C14.8125 10.7143 14.7104 10.7362 14.6192 10.7799C14.5243 10.8236 14.4404 10.8892 14.3747 10.9839L13.5284 12.1751C13.4627 12.2661 13.4152 12.35 13.3824 12.4301C13.3496 12.5066 13.3313 12.5831 13.3313 12.6523C13.3313 12.7397 13.3568 12.8272 13.408 12.9109C13.4553 12.9948 13.5247 13.0822 13.6122 13.1696L13.8895 13.4573C13.9296 13.4975 13.9479 13.5448 13.9479 13.6031C13.9479 13.6322 13.9443 13.6577 13.9369 13.6868C13.926 13.716 13.915 13.7379 13.9078 13.7598C13.8421 13.88 13.729 14.0366 13.5685 14.226C13.4043 14.4155 13.2292 14.6085 13.0394 14.8015C12.8424 14.9947 12.6527 15.1731 12.4593 15.337C12.2697 15.4974 12.1128 15.6067 11.9887 15.6722C11.9705 15.6795 11.9486 15.6904 11.923 15.7014C11.8939 15.7123 11.8647 15.716 11.8319 15.716C11.7698 15.716 11.7224 15.6941 11.6822 15.654L11.405 15.3808C11.3138 15.2897 11.2262 15.2205 11.1423 15.1768C11.0584 15.1258 10.9745 15.1003 10.8832 15.1003C10.814 15.1003 10.741 15.1149 10.6608 15.1477C10.5805 15.1805 10.4966 15.2278 10.4053 15.2897L9.19771 16.1458C9.10288 16.2113 9.03721 16.2878 8.99711 16.3789C8.9606 16.47 8.93871 16.561 8.93871 16.6631Z"
                        fill="#066AC9" />
                </svg>

                Book FREE 1-1 Session
            </a>

            <a href="javascript:;" class="ft-btn">
                <svg width="25" height="25" viewBox="0 0 25 25" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M7.1875 21.4583C8.75 22.3958 10.625 22.9166 12.5 22.9166C18.2292 22.9166 22.9167 18.2291 22.9167 12.5C22.9167 6.77081 18.2292 2.08331 12.5 2.08331C6.77083 2.08331 2.08333 6.77081 2.08333 12.5C2.08333 14.375 2.60417 16.1458 3.4375 17.7083L2.54213 21.1521C2.33929 21.9322 3.06138 22.6372 3.83644 22.4158L7.1875 21.4583Z"
                        stroke="white" stroke-width="1.5625" stroke-miterlimit="10" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <path
                        d="M17.1875 15.4672C17.1875 15.6359 17.1499 15.8094 17.0701 15.9781C16.9903 16.1469 16.8871 16.3063 16.7509 16.4563C16.5209 16.7094 16.2674 16.8922 15.981 17.0094C15.6993 17.1266 15.3942 17.1875 15.0656 17.1875C14.5867 17.1875 14.075 17.075 13.5351 16.8453C12.9953 16.6156 12.4554 16.3063 11.9202 15.9172C11.3804 15.5234 10.8686 15.0875 10.3804 14.6047C9.89688 14.1172 9.46028 13.6063 9.07064 13.0719C8.68568 12.5375 8.37585 12.0031 8.15051 11.4734C7.92517 10.9391 7.8125 10.4281 7.8125 9.94062C7.8125 9.62187 7.86883 9.31719 7.9815 9.03594C8.09417 8.75 8.27257 8.4875 8.52138 8.25313C8.82183 7.95781 9.15044 7.8125 9.49784 7.8125C9.62929 7.8125 9.76073 7.84063 9.8781 7.89688C10.0002 7.95313 10.1081 8.0375 10.1926 8.15938L11.2818 9.69219C11.3663 9.80938 11.4273 9.91719 11.4695 10.0203C11.5118 10.1188 11.5353 10.2172 11.5353 10.3063C11.5353 10.4188 11.5024 10.5312 11.4367 10.6391C11.3757 10.7469 11.2865 10.8594 11.1738 10.9719L10.817 11.3422C10.7654 11.3937 10.7419 11.4547 10.7419 11.5297C10.7419 11.5672 10.7466 11.6 10.756 11.6375C10.7701 11.675 10.7841 11.7031 10.7935 11.7312C10.878 11.8859 11.0236 12.0875 11.2301 12.3313C11.4414 12.575 11.6667 12.8234 11.9108 13.0719C12.1643 13.3203 12.4085 13.55 12.6573 13.7609C12.9014 13.9672 13.1032 14.1078 13.2629 14.1922C13.2863 14.2016 13.3145 14.2156 13.3474 14.2297C13.3849 14.2437 13.4225 14.2484 13.4647 14.2484C13.5445 14.2484 13.6056 14.2203 13.6572 14.1688L14.014 13.8172C14.1314 13.7 14.244 13.6109 14.352 13.5547C14.46 13.4891 14.5679 13.4562 14.6853 13.4562C14.7745 13.4562 14.8684 13.475 14.9717 13.5172C15.075 13.5594 15.1829 13.6203 15.3003 13.7L16.8542 14.8016C16.9762 14.8859 17.0607 14.9844 17.1124 15.1016C17.1593 15.2187 17.1875 15.3359 17.1875 15.4672Z"
                        stroke="white" stroke-width="1.5625" stroke-miterlimit="10" />
                </svg>
            </a>
        </div> --}}
    </div>
    {{-- Loader after test submitted & move to the next page in between --}}
    <div class="generic-loader" style="display:none ">
        <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>
    <div class="over-connect" id="connect-expert" style="display: none">
        <div class="connect-expert container-fluid"   >
            <span id="cross-btn" class="cross-btn"  onclick="closeModel('connect-expert')">
                <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>
            </span>
            
            <h2 class="connect-text">Connect with our experts and start your journey</h2>
        
        
            <a href="tel:{{$website_setting->counsellor_number}}">
                <div class="expert">
                    <div class="expert-icon">
                    <span><img src="{{ asset('student-panel') }}/images/exam-categories/expert.png" alt=""></span>
                        <div>
                            <h5 class="expert-name">{{ @$user->admin->name != null ? @$user->admin->name : 'No counsellor assigned yet' }}</h5>
                            <p class="expert-post">COUNSELLOR</p>
                        </div>
                    </div>
                    <div class="call-icon">
                    <img class="call"src="{{ asset('student-panel') }}/images/exam-categories/call.svg" alt="">
                    </div>
                </div></a>
        {{--     
                <a href="javascript:;">
                    <div class="expert">
                        <div class="expert-icon">
                        <span><img src="{{ asset('student-panel') }}/images/exam-categories/expert.png" alt=""></span>
                            <div>
                                <h5 class="expert-name">{{ @$user->admin->name != null ? @$user->admin->name : 'No counsellor assigned yet' }}</h5>
                                <p class="expert-post">COUNSELLOR</p>
                            </div>
                        </div>
                        <div class="call-icon">
                        <img class="call"src="{{ asset('student-panel') }}/images/exam-categories/call.svg" alt="">
                        </div>
                    </div></a> --}}
        </div>
        </div>
@endsection


@section('css')
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <link rel="stylesheet" href="{{ asset('student-panel') }}/css/dashboard.css?v={{ env('ASSETS_VERSION') }}">
@endsection

@section('script')
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ asset('student-panel') }}/js/dashboard.js?v={{ env('ASSETS_VERSION') }}"></script>
    <script src="{{ asset('student-panel') }}/js/pageintro.js?v={{ env('ASSETS_VERSION') }}"></script>
    <script src="{{ asset('student-panel') }}/js/common.js?v={{ env('ASSETS_VERSION') }}"></script>
    <script>
        $(document).ready(function() {

            $('.showOnLoad').show();

            if (!localStorage.getItem('showDashboardIntro')) {
                localStorage.setItem('showDashboardIntro', 1);
                dashboardIntroduction();
            }

            $.ajax({
                type: 'GET',
                url: "{{ url('/api/profile_complete', $candidate_id) }}",
                data: {
                    _token: '{{ csrf_token() }}',
                },
                cache: false,
                processData: false,
                contentType: false,
                success: (res) => {
                    progress = res.available_percentage;
                    $('#data_progress_bar').attr('data-progress', progress);
                    $(".progress-line").each(function() {
                        $(".filled-line").animate({
                                width: $(this).attr("data-progress") + "%",
                            },
                            2000
                        );

                        $('.progress-value').each(function() {
                            $(this).text('Counter', 0).animate({
                                Counter: $(this).next(".progress-line").attr(
                                    "data-progress")
                            }, {
                                duration: 2000,
                                easing: 'swing',
                                step: function(now) {
                                    $(this).text(Math.ceil(now) + "%");
                                }
                            });
                        });

                    });
                }
            });
        });

        $('.slider-list').slick({
            dots: true,
            autoplay: true,
            autoplaySpeed: 2000,
            prevArrow: false,
            nextArrow: false,
            centerMode: true,
            centerPadding: '25px',
            slidesToShow: 1,
        });

        function sendMessage() {
            $.ajax({
                type: 'GET',
                url: "{{ url('/api/sendMessage', [$user->phone]) }}",
                data: {
                    _token: '{{ csrf_token() }}',
                },
                cache: false,
                processData: false,
                contentType: false,
                success: (res) => {
                    console.log(res);
                }
            });
        }

        // Show popup
        function showPopup(id) {
            $("#" + id).show();
            $("#" + id).find(".model-content").show();
            $("#" + id).find(".close, .close-button").click(function() {
                $("#" + id).hide();
                $("#" + id).find(".model-content").show();
            });
        }


        function dashboardIntroduction() {
            // if (window.innerWidth >= 1024) {
            //     var options = {
            //         container: 'body',
            //         spacing: 20,
            //         actions: {
            //             next: {
            //                 text: 'Next',
            //                 class: 'next-btn'
            //             },
            //             finish: {
            //                 text: 'OK ! I know',
            //                 class: 'next-btn'
            //             }
            //         },
            //         entries: [
            //             // {
            //             //     selector: '#step1',
            //             //     text: ''
            //             // }, 
            //             {
            //                 selector: '#step2',
            //                 text: 'This is your Relationship Manager'
            //             }, {
            //                 selector: '#step3',
            //                 text: 'This is your dedicated Counsellor! In case of doubt, feel free to call'
            //             }, {
            //                 selector: '#step4',
            //                 text: 'Manage and upload all the necessary documents here!'
            //             },
            //             {
            //                 selector: '#step5',
            //                 text: 'You can chat here with the experts and track your process Next',
            //             }, {
            //                 selector: '#step6',
            //                 text: 'We always have live webinars ready for you! Feel free to book a seat.'
            //             }
            //         ]
            //     };
            //     PageIntro.init(options);
            //     PageIntro.start(); 
            // }
            // else{
            //     var options = {
            //         container: 'body',
            //         spacing: 20,
            //         actions: {
            //             next: {
            //                 text: 'Next',
            //                 class: 'next-btn'
            //             },
            //             finish: {
            //                 text: 'OK ! I know',
            //                 class: 'next-btn'
            //             }
            //         },
            //         entries: [
            //             // {
            //             //     selector: '#step1',
            //             //     text: ''
            //             // }
            //             , {
            //                 selector: '#step2',
            //                 text: 'This is your Relationship Manager'
            //             }, {
            //                 selector: '#step3',
            //                 text: 'This is your dedicated Counsellor! In case of doubt, feel free to call'
            //             },
            //             {
            //                 selector: '#step5',
            //                 text: 'You can chat here with the experts and track your process Next',
            //             }, {
            //                 selector: '#step6',
            //                 text: 'We always have live webinars ready for you! Feel free to book a seat.'
            //             }
            //         ]
            //     };
            //     PageIntro.init(options);
            //     PageIntro.start(); 
            // }
        }
    </script>
    <script>


        // show popup function
        function showPopup(id)
       {
           $("#"+id).show();
           $("body").css({"overflow":"hidden"});
           $("#"+id).css({"overflow":"hidden"});
       }
       function closeModel(id)
       {
           $("#"+id).hide();
           $("body").css({"overflow":""});
           $("#"+id).css({"overflow":""});
       }
       
       
       
       
       </script>
@endsection