@extends('frontend.layouts.main')

@section('content')

<style>
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
  },
</style>
<main class="home ">
    <!-- Banner section -->
    <section class="bs-banner typ-ongoing-course ">
        <div class="container">
            <div class="row align-item-center">
                <div class="col-lg-7 col-md-6 align-self-center">
                    <div class="content-wrapper">
                        <h2 class="title  max-800 wow fadeInUp" data-wow-duration="0.2s"><span
                                class="typ-yellow">Tracking
                                success</span>, one milestone at a time

                        </h2>
                        <p class="para  wow fadeInUp" data-wow-duration="0.4s">Visualize your journey and achievements
                            with our
                            Dashboard
                        </p>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 align-self-center">
                    <div class="img-section">
                        <div class="img-area">
                            <picture>
                                <source srcset="assets/images/user-profile/ongoing.png" media="(max-width: 767px)" />
                                <img class="img-fluid wow fadeIn" data-wow-duration="1s"
                                    src="{{ asset('assets/images/user-profile/ongoing.png') }}" alt="banner">
                            </picture>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Banner section -->
    <!-- tab section -->
    <section class="lyt-section pb-0">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="bs-tab typ-horizontal">
                        <div class="tab-wrapper-horizontal">
                            <ul class="nav nav-pills tabs" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-all-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-all" type="button" role="tab" aria-controls="pills-all"
                                        aria-selected="true">All</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-my-course-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-my-course" type="button" role="tab"
                                        aria-controls="pills-my-course" aria-selected="false">My Course</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-my-masterclass-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-my-masterclass" type="button" role="tab"
                                        aria-controls="pills-my-masterclass" aria-selected="false">My
                                        MasterClass</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-my-vep-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-my-vep" type="button" role="tab"
                                        aria-controls="pills-my-vep" aria-selected="false">My Virtual Experience
                                        Program</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-my-application-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-my-application" type="button" role="tab"
                                        aria-controls="pills-my-application" aria-selected="false">My Application
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="bs-tab typ-horizontal">
                        <div class="tab-content-wrapper-horizontal">
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-all" role="tabpanel"
                                    aria-labelledby="pills-all-tab" tabindex="0">
                                    <div class="innter-tabs">
                                        <div class="card-data-title">
                                            <div class="title-section">
                                                <h2 class="hd mb-0">My Courses</h2>
                                            </div>
                                        </div>
                                        <ul class="nav nav-pills inner-btn-tab" id="pills-tab1" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link active" id="pills-upcoming-tab"
                                                    data-bs-toggle="pill" data-bs-target="#pills-upcoming" type="button"
                                                    role="tab" aria-controls="pills-upcoming"
                                                    aria-selected="true">Upcoming</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="pills-complete-tab" data-bs-toggle="pill"
                                                    data-bs-target="#pills-complete" type="button" role="tab"
                                                    aria-controls="pills-complete"
                                                    aria-selected="false">Completed</button>
                                            </li>
                                        </ul>
                                        <div class="tab-content" id="pills-tab1Content">
                                            <div class="tab-pane fade show active" id="pills-upcoming" role="tabpanel"
                                                aria-labelledby="pills-upcoming-tab" tabindex="0">
                                                <div class="card-data-details">
                                                    <div class="row mrgB50" id="my-courses-content-1">

                                                    </div>
                                                    <div class="row ">
                                                        <div class="col-md-12 text-center">
                                                            <button id="my-courses-load-1" type="button" onclick="getMyCoursesList()"
                                                                class="bs-btn typ-loadmore d-inline-block my-courses-load-1">Load
                                                                More</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="pills-complete" role="tabpanel"
                                                aria-labelledby="pills-complete-tab" tabindex="0">
                                                <div class="card-data-details">
                                                    <div class="row mrgB50" id="course_complete_1">
                                                        
                                                      
                                                   
                                                       
                                                    </div>
                                                    <div class="row ">
                                                        <div class="col-md-12 text-center">
                                                            <button id="my-courses-load-2" type="button" onclick="getMyCoursesList()" class="bs-btn typ-loadmore d-inline-block">Load More</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="innter-tabs">
                                        <div class="card-data-title">
                                            <div class="title-section">
                                                <h2 class="hd mb-0">My MasterClass</h2>
                                            </div>
                                            <ul class="nav nav-pills inner-btn-tab" id="pills-tab2" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link active" id="pills-inprogress-tab"
                                                        data-bs-toggle="pill" data-bs-target="#pills-inprogress"
                                                        type="button" role="tab" aria-controls="pills-inprogress"
                                                        aria-selected="true">In
                                                        progress</button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="pills-complete1-tab"
                                                        data-bs-toggle="pill" data-bs-target="#pills-complete1"
                                                        type="button" role="tab" aria-controls="pills-complete1"
                                                        aria-selected="false">Completed</button>
                                                </li>
                                            </ul>
                                            <div class="tab-content" id="pills-tab2Content">
                                                <div class="tab-pane fade show active" id="pills-inprogress"
                                                    role="tabpanel" aria-labelledby="pills-inprogress-tab" tabindex="0">
                                                    <div class="card-data-details">
                                                        <div class="row mrgB50" id="my-master-class-cotent-2">


                                                        </div>
                                                        <div class="row ">
                                                            <div class="col-md-12 text-center">
                                                                <button id="my-master-class-load-1" type="button" onclick="getMyMasterClasses()"
                                                                    class="bs-btn typ-loadmore d-inline-block">Load
                                                                    More</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-complete1" role="tabpanel"
                                                    aria-labelledby="pills-complete1-tab" tabindex="0">
                                                    <div class="card-data-details">

                                                        <div class="row mrgB50" id="my-master-class-cotent-3">
                                                          
                                                           
                                                        
                                                      
                                                        </div>
                                                        <div class="row ">
                                                            <div class="col-md-12 text-center">
                                                            <button id="my-master-class-load-2" type="button" onclick="getMyMasterClasses()"
                                                                    class="bs-btn typ-loadmore d-inline-block">Load
                                                                    More</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="innter-tabs">
                                        <div class="card-data-title">
                                            <div class="title-section">
                                                <h2 class="hd mb-0">My Virtual Experience Program </h2>
                                            </div>
                                            <ul class="nav nav-pills inner-btn-tab" id="pills-tab3" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link active" id="pills-inprogress2-tab"
                                                        data-bs-toggle="pill" data-bs-target="#pills-inprogress2"
                                                        type="button" role="tab" aria-controls="pills-inprogress2"
                                                        aria-selected="true">In
                                                        progress</button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="pills-complete2-tab"
                                                        data-bs-toggle="pill" data-bs-target="#pills-complete2"
                                                        type="button" role="tab" aria-controls="pills-complete2"
                                                        aria-selected="false">Completed</button>
                                                </li>
                                            </ul>
                                            <div class="tab-content" id="pills-tab3Content">
                                                <div class="tab-pane fade show active" id="pills-inprogress2"
                                                    role="tabpanel" aria-labelledby="pills-inprogress2-tab"
                                                    tabindex="0">
                                                    <div class="card-data-details">
                                                        <div class="row mrgB50" id="virtual-exp-content-2">

                                                        </div>
                                                        <div class="row ">
                                                            <div class="col-md-12 text-center">
                                                                <button id="virtual-exp-load-1" type="button" onclick="getMyVWEPList()"
                                                                    class="bs-btn typ-loadmore d-inline-block">Load
                                                                    More</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-complete2" role="tabpanel"
                                                    aria-labelledby="pills-complete2-tab" tabindex="0">
                                                    <div class="card-data-details 123k">

                                                        <div class="row mrgB50" id="vwep_complete_1">
                                                            <div class="col-md-6 col-xl-3">
                                                                <div class="bs-card h-100">
                                                                    <div class="typ-evp">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/bank-finance.jpg"
                                                                                alt="job">
                                                                            <!-- <span class="label">Banking  Finance</span> -->

                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="logo-btn">
                                                                                <img src="assets/images/jp-morgan.png"
                                                                                    alt="logo">
                                                                            </div>
                                                                            <div class="flex11auto">
                                                                                <h4 class="brand-name">J.P.Morgan</h4>
                                                                                <h3 class="title">Investment Banking
                                                                                    Challenge</h3>
                                                                                <p class="subtext">Banking & Financial
                                                                                    Service</p>
                                                                            </div>
                                                                            <div class="btn-section">
                                                                                <span
                                                                                    class="bs-btn typ-resume gap-16"><span
                                                                                        class="icon icon-download"></span>
                                                                                    Certificate</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 col-xl-3">
                                                                <div class="bs-card h-100">
                                                                    <div class="typ-evp">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/bank-finance.jpg"
                                                                                alt="job">
                                                                            <!-- <span class="label">Banking  Finance</span> -->

                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="logo-btn">
                                                                                <img src="assets/images/ibm.png"
                                                                                    alt="logo">
                                                                            </div>
                                                                            <div class="flex11auto">
                                                                                <h4 class="brand-name">IBM Security
                                                                                </h4>
                                                                                <h3 class="title">Cybersecurity
                                                                                    Mastery Simulations</h3>
                                                                                <p class="subtext">Banking & Financial
                                                                                    Service</p>
                                                                            </div>
                                                                            <div class="btn-section">
                                                                                <span
                                                                                    class="bs-btn typ-resume gap-16"><span
                                                                                        class="icon icon-download"></span>
                                                                                    Certificate</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 col-xl-3">
                                                                <div class="bs-card h-100">
                                                                    <div class="typ-evp">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/bank-finance.jpg"
                                                                                alt="job">
                                                                            <!-- <span class="label">Banking  Finance</span> -->

                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="logo-btn">
                                                                                <img src="assets/images/jp-morgan.png"
                                                                                    alt="logo">
                                                                            </div>
                                                                            <div class="flex11auto">
                                                                                <h4 class="brand-name">J.P.Morgan</h4>
                                                                                <h3 class="title">Investment Banking
                                                                                    Challenge</h3>
                                                                                <p class="subtext">Banking & Financial
                                                                                    Service</p>
                                                                            </div>
                                                                            <div class="btn-section">
                                                                                <span
                                                                                    class="bs-btn typ-resume gap-16"><span
                                                                                        class="icon icon-download"></span>
                                                                                    Certificate</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 col-xl-3">
                                                                <div class="bs-card h-100">
                                                                    <div class="typ-evp">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/bank-finance.jpg"
                                                                                alt="job">
                                                                            <!-- <span class="label">Banking  Finance</span> -->

                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="logo-btn">
                                                                                <img src="assets/images/ibm.png"
                                                                                    alt="logo">
                                                                            </div>
                                                                            <div class="flex11auto">
                                                                                <h4 class="brand-name">IBM Security
                                                                                </h4>
                                                                                <h3 class="title">Cybersecurity
                                                                                    Mastery Simulations</h3>
                                                                                <p class="subtext">Banking & Financial
                                                                                    Service</p>
                                                                            </div>
                                                                            <div class="btn-section">
                                                                                <span
                                                                                    class="bs-btn typ-resume gap-16"><span
                                                                                        class="icon icon-download"></span>
                                                                                    Certificate</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row ">
                                                            <div class="col-md-12 text-center">
                                                                <button id="virtual-exp-load-2" type="button" onclick="getMyVWEPList()" class="bs-btn typ-loadmore d-inline-block">Load
                                                                    More</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="innter-tabs">
                                        <div class="card-data-title">
                                            <div class="title-section">
                                                <h2 class="hd mb-0">My Application</h2>
                                            </div>
                                            <div class="card-data-details">
                                                <div class="row mrgB50 " id="my-application-content-1">

                                                    <section class="lyt-section">
                                                        <div class="notfound">
                                                            <div class="content-wrapper">
                                                                <h2>Data Not Found!</h2>
                                                                <img class=" img-fluid"
                                                                    src="assets/images/not-found.png" alt="not-found">
                                                            </div>
                                                        </div>
                                                    </section>

                                                </div>
                                                <div class="row mrgB32">
                                                    <div class="col-md-12 text-center">
                                                        <button id="my-application-load-1" type="button" onclick="getMyApplicationsList()"
                                                            class="bs-btn typ-loadmore d-inline-block">Load More</a>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-my-course" role="tabpanel"
                                    aria-labelledby="pills-my-course-tab" tabindex="0">
                                    <div class="innter-tabs">
                                        <div class="card-data-title">
                                            <div class="title-section">
                                                <h2 class="hd mb-0">My Courses</h2>
                                            </div>
                                        </div>
                                        <ul class="nav nav-pills inner-btn-tab" id="pills-tab4" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link active" id="pills-mc-1-tab"
                                                    data-bs-toggle="pill" data-bs-target="#pills-mc-1" type="button"
                                                    role="tab" aria-controls="pills-mc-1"
                                                    aria-selected="true">Upcoming</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="pills-mc-2-tab" data-bs-toggle="pill"
                                                    data-bs-target="#pills-mc-2" type="button" role="tab"
                                                    aria-controls="pills-mc-2" aria-selected="false">Completed</button>
                                            </li>
                                        </ul>
                                        <div class="tab-content" id="pills-tab4Content">
                                            <div class="tab-pane fade show active" id="pills-mc-1" role="tabpanel"
                                                aria-labelledby="pills-mc-1-tab" tabindex="0">
                                                <div class="card-data-details">
                                                    <div class="row mrgB50" id="my-courses-content-2">

                                                    </div>
                                                    <div class="row ">
                                                        <div class="col-md-12 text-center">
                                                            <button id="my-courses-load-3" type="button" onclick="getMyCoursesList()"
                                                                class="bs-btn typ-loadmore d-inline-block">Load
                                                                More</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="pills-mc-2" role="tabpanel"
                                                aria-labelledby="pills-mc-2-tab" tabindex="0">
                                                <div class="card-data-details">
                                                    <div class="row mrgB50" id="course_complete_2">
                                                       
                                                        
                                                      
                                                    </div>
                                                    <div class="row ">
                                                        <div class="col-md-12 text-center">
                                                        <button id="my-courses-load-4" type="button" onclick="getMyCoursesList()"
                                                                class="bs-btn typ-loadmore d-inline-block">Load
                                                                More</button>                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-my-masterclass" role="tabpanel"
                                    aria-labelledby="pills-my-masterclass-tab" tabindex="0">
                                    <div class="innter-tabs">
                                        <div class="card-data-title">
                                            <div class="title-section">
                                                <h2 class="hd mb-0">My MasterClass</h2>
                                            </div>
                                            <ul class="nav nav-pills inner-btn-tab" id="pills-tab5" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link active" id="pills-mclass-1-tab"
                                                        data-bs-toggle="pill" data-bs-target="#pills-mclass-1"
                                                        type="button" role="tab" aria-controls="pills-mclass-1"
                                                        aria-selected="true">In progress</button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="pills-mclass-2-tab"
                                                        data-bs-toggle="pill" data-bs-target="#pills-mclass-2"
                                                        type="button" role="tab" aria-controls="pills-mclass-2"
                                                        aria-selected="false">Completed</button>
                                                </li>
                                            </ul>
                                            <div class="tab-content" id="pills-tab5Content">
                                                <div class="tab-pane fade show active" id="pills-mclass-1"
                                                    role="tabpanel" aria-labelledby="pills-mclass-1-tab" tabindex="0">
                                                    <div class="card-data-details">

                                                        <div class="row mrgB50" id="my-master-class-cotent-1">

                                                        </div>
                                                        <div class="row ">
                                                            <div class="col-md-12 text-center">
                                                                <button id="my-master-class-load-3" type="button" onclick="getMyMasterClasses()"
                                                                    class="bs-btn typ-loadmore d-inline-block">Load
                                                                    More</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-mclass-2" role="tabpanel"
                                                    aria-labelledby="pills-mclass-2-tab" tabindex="0">
                                                    <div class="card-data-details">

                                                        <div class="row mrgB50" id="my-master-class-cotent-4">
                                                           
                                                         
                                                        
                                                        </div>
                                                        <div class="row ">
                                                            <div class="col-md-12 text-center">
                                                                <a class="bs-btn typ-loadmore d-inline-block">Load
                                                                    More</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-my-vep" role="tabpanel"
                                    aria-labelledby="pills-my-vep-tab" tabindex="0">
                                    <div class="innter-tabs">
                                        <div class="card-data-title">
                                            <div class="title-section">
                                                <h2 class="hd mb-0">My Virtual Experience Program</h2>
                                            </div>
                                            <ul class="nav nav-pills inner-btn-tab" id="pills-tab6" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link active" id="pills-vep-1-tab"
                                                        data-bs-toggle="pill" data-bs-target="#pills-vep-1"
                                                        type="button" role="tab" aria-controls="pills-vep-1"
                                                        aria-selected="true">In progress</button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="pills-vep-2-tab" data-bs-toggle="pill"
                                                        data-bs-target="#pills-vep-2" type="button" role="tab"
                                                        aria-controls="pills-vep-2"
                                                        aria-selected="false">Completed</button>
                                                </li>
                                            </ul>
                                            <div class="tab-content" id="pills-tab6Content">
                                                <div class="tab-pane fade show active" id="pills-vep-1" role="tabpanel"
                                                    aria-labelledby="pills-vep-1-tab" tabindex="0">
                                                    <div class="card-data-details">

                                                        <div class="row mrgB50" id="virtual-exp-content-1">


                                                        </div>
                                                        <div class="row ">
                                                            <div class="col-md-12 text-center">
                                                                <button id="virtual-exp-load-3" type="button" onclick="getMyVWEPList()"
                                                                    class="bs-btn typ-loadmore d-inline-block">Load
                                                                    More</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-vep-2" role="tabpanel"
                                                    aria-labelledby="pills-vep-2-tab" tabindex="0">
                                                    <div class="card-data-details 13">

                                                        <div class="row mrgB50" id="vwep_complete_2">
                                                            <div class="col-md-6 col-xl-3">
                                                                <div class="bs-card h-100">
                                                                    <div class="typ-evp">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/bank-finance.jpg"
                                                                                alt="job">
                                                                            <!-- <span class="label">Banking  Finance</span> -->

                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="logo-btn">
                                                                                <img src="assets/images/jp-morgan.png"
                                                                                    alt="logo">
                                                                            </div>
                                                                            <div class="flex11auto">
                                                                                <h4 class="brand-name">J.P.Morgan</h4>
                                                                                <h3 class="title">Investment Banking
                                                                                    Challenge</h3>
                                                                                <p class="subtext">Banking & Financial
                                                                                    Service</p>
                                                                            </div>
                                                                            <div class="btn-section">
                                                                                <span
                                                                                    class="bs-btn typ-resume gap-16"><span
                                                                                        class="icon icon-download"></span>
                                                                                    Certificate</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 col-xl-3">
                                                                <div class="bs-card h-100">
                                                                    <div class="typ-evp">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/bank-finance.jpg"
                                                                                alt="job">
                                                                            <!-- <span class="label">Banking  Finance</span> -->

                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="logo-btn">
                                                                                <img src="assets/images/ibm.png"
                                                                                    alt="logo">
                                                                            </div>
                                                                            <div class="flex11auto">
                                                                                <h4 class="brand-name">IBM Security
                                                                                </h4>
                                                                                <h3 class="title">Cybersecurity
                                                                                    Mastery Simulations</h3>
                                                                                <p class="subtext">Banking & Financial
                                                                                    Service</p>
                                                                            </div>
                                                                            <div class="btn-section">
                                                                                <span
                                                                                    class="bs-btn typ-resume gap-16"><span
                                                                                        class="icon icon-download"></span>
                                                                                    Certificate</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 col-xl-3">
                                                                <div class="bs-card h-100">
                                                                    <div class="typ-evp">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/bank-finance.jpg"
                                                                                alt="job">
                                                                            <!-- <span class="label">Banking  Finance</span> -->

                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="logo-btn">
                                                                                <img src="assets/images/jp-morgan.png"
                                                                                    alt="logo">
                                                                            </div>
                                                                            <div class="flex11auto">
                                                                                <h4 class="brand-name">J.P.Morgan</h4>
                                                                                <h3 class="title">Investment Banking
                                                                                    Challenge</h3>
                                                                                <p class="subtext">Banking & Financial
                                                                                    Service</p>
                                                                            </div>
                                                                            <div class="btn-section">
                                                                                <span
                                                                                    class="bs-btn typ-resume gap-16"><span
                                                                                        class="icon icon-download"></span>
                                                                                    Certificate</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 col-xl-3">
                                                                <div class="bs-card h-100">
                                                                    <div class="typ-evp">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/bank-finance.jpg"
                                                                                alt="job">
                                                                            <!-- <span class="label">Banking  Finance</span> -->

                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="logo-btn">
                                                                                <img src="assets/images/ibm.png"
                                                                                    alt="logo">
                                                                            </div>
                                                                            <div class="flex11auto">
                                                                                <h4 class="brand-name">IBM Security
                                                                                </h4>
                                                                                <h3 class="title">Cybersecurity
                                                                                    Mastery Simulations</h3>
                                                                                <p class="subtext">Banking & Financial
                                                                                    Service</p>
                                                                            </div>
                                                                            <div class="btn-section">
                                                                                <span
                                                                                    class="bs-btn typ-resume gap-16"><span
                                                                                        class="icon icon-download"></span>
                                                                                    Certificate</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row ">
                                                            <div class="col-md-12 text-center">
                                                                <button id="virtual-exp-load-4" type="button" onclick="getMyVWEPList()" class="bs-btn typ-loadmore d-inline-block">Load
                                                                    More</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-my-application" role="tabpanel"
                                    aria-labelledby="pills-my-application-tab" tabindex="0">
                                    <div class="innter-tabs">
                                        <div class="card-data-title">
                                            <div class="title-section">
                                                <h2 class="hd mb-0">My Application</h2>
                                            </div>
                                            <div class="card-data-details">
                                                <div class="row mrgB50 " id="my-application-content">


                                                </div>
                                                <div class="row mrgB32">
                                                    <div class="col-md-12 text-center">
                                                        <button id="my-application-load-2" type="button" onclick="getMyApplicationsList()"
                                                            class="bs-btn typ-loadmore d-inline-block">Load
                                                            More</button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- tab section end-->


    <!--=========================== rating modal================== -->

    <div class="modal fade" id="ratingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header rateuspopup">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="bs-stars rate-uspopup">
                        <ul class="rate" id="starRating">
                            <li><span class="icon ratestar icon-star-blank" onclick="selectRating(1)"></span></li>
                            <li><span class="icon ratestar icon-star-blank" onclick="selectRating(2)"></span></li>
                            <li><span class="icon ratestar icon-star-blank" onclick="selectRating(3)"></span></li>
                            <li><span class="icon ratestar icon-star-blank" onclick="selectRating(4)"></span></li>
                            <li><span class="icon ratestar icon-star-blank" onclick="selectRating(5)"></span></li>
                        </ul>
                    </div>
                    <span class="error" id="ratingError"></span>

                    <textarea class="form-control" placeholder="Type here...." id="description" name="description"
                     rows="3" style="height: 78px;margin-top: 30px;"></textarea>
                     <span class="error" id="descError"></span>
                    </div>

                <div class="modal-footer rateuspopup">
                    <div class="row ">
                        <div class="col-md-12 text-center">
                            <button type="button" onclick="submitEventFeedback()"
                                class="bs-btn typ-loadmore d-inline-block">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    const noDataFound = `<section class="lyt-section">
      <div class="notfound">
        <div class="content-wrapper">
            <h2>Data Not Found!</h2>
            <img class="img-fluid" src="{{ asset('assets/images/not-found.png') }}" alt="not-found">
        </div>
      </div>
     </section>`;


    const loadingDiv = `<div> <h4>Loading....</h4> </div>`;


    var vwepCount = 0;
    var courseCount = 0;
    var masterClassCount = 0;
    var jobCount = 0;

    getMyMasterClasses();
    getMyVWEPList();
    getMyCoursesList();
    getMyApplicationsList();



    let selectedRating = 0;
    let selectedProduct = "";
    let selectedCourse = 0;

    function selectRating(rating) {
        selectedRating = rating;

        generateStarRating(rating);

    }


    // Function to generate star rating dynamically
    function generateStarRating(rating) {
        let starsHTML = '';
        const fullStars = Math.floor(rating);
        const halfStar = rating - fullStars >= 0.5;

        // Add full stars
        for (let i = 0; i < fullStars; i++) {
            starsHTML += '<li><span class="icon ratestar icon-star-fill" onclick="selectRating(' + (i + 1) + ')"></span></li>';
        }

        // Add empty stars to complete 5 stars
        const remainingStars = 5 - Math.ceil(rating);
        for (let i = 0; i < remainingStars; i++) {
            starsHTML += '<li><span class="icon ratestar icon-star-blank" onclick="selectRating(' + (Math.ceil(rating) + 1) + ')"></span></li>';
        }

        const starRatingElement = document.getElementById('starRating');
        starRatingElement.innerHTML = starsHTML;

    }

    // Example usage




    function submitEventFeedback() {
        const token = '{{csrf_token()}}';

        var description = document.getElementById('description').value;
        var descError = document.getElementById('descError');
        var ratingError = document.getElementById('ratingError');

        if(description.trim()==""){
            descError.textContent="Please enter message";
            return;
        }else if(selectedRating<=0){
            ratingError.textContent="Please select rating";
            return;
        }else{
            descError.textContent="";
            ratingError.textContent="";
        }

        var courseRoute = "";
        if (selectedProduct === "COURSE") {
            courseRoute = "{{ route('eventFeedback.store') }}";
        } else if (selectedProduct === "VWEP") {
            // courseRoute = "{{ route('vwepFeedback.store') }}";
        } else if (selectedProduct ==="MASTERCLASS") {
            courseRoute = "{{ route('masterClassFeedback.store') }}";

        }

        if (courseRoute) {
            fetch(courseRoute, {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': token
                },
                body: JSON.stringify({
                    'rating': selectedRating,
                    'description': description,
                    'event_id': selectedCourse
                }),
            }).then(response => response.json())
                .then((data) => {

                    if (data.status === 200) {
                        $('#ratingModal').modal('hide');

                    if (selectedProduct === "COURSE") {
                            getMyCoursesList();
                     }else if (selectedProduct ==="MASTERCLASS") {
                            getMyMasterClasses();
                     }
                  }

                  selectedRating=0;
                }).catch((error) => {
                    console.log("error", error)
                })
        }
    }




    function getMyMasterClasses() {

        masterClassCount = masterClassCount + 8;

        const token = '{{ csrf_token() }}';

        var fragment = document.createDocumentFragment();
        var fragment1 = document.createDocumentFragment();

        var datasElement1 = $('#my-master-class-cotent-1');
        var datasElement2 = $('#my-master-class-cotent-2');
        var datasElement3 = $('#my-master-class-cotent-3');
        var datasElement4 = $('#my-master-class-cotent-4');

        document.getElementById('my-master-class-cotent-1').innerHTML = loadingDiv;
        document.getElementById('my-master-class-cotent-2').innerHTML = loadingDiv;

        fetch("{{ route('getMyMasterClasses') }}", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': token
            },
            body: JSON.stringify({
                'completed': true,
                'count': masterClassCount
            }),
        }).then(response => response.json())
            .then((data) => {

                datasElement1.empty();
                datasElement2.empty();
                datasElement3.empty();
                datasElement4.empty();

                if (data.data.length < 1) {
                    document.getElementById('my-master-class-cotent-1').innerHTML = "<div class='m-2 mt-4'>NO DATA FOUND </div>";
                    document.getElementById('my-master-class-cotent-2').innerHTML = "<div class='m-2 mt-4'>NO DATA FOUND </div>";
                    document.getElementById('my-master-class-cotent-3').innerHTML = "<div class='m-2 mt-4'>NO DATA FOUND </div>";
                    document.getElementById('my-master-class-cotent-4').innerHTML = "<div class='m-2 mt-4'>NO DATA FOUND </div>";
                }


                const labels=['label','typ-yellow','typ-blue'];

                for (var i = 0; i < data.data.length; i++) {
                    const masterClass = data.data[i];
                    const label = labels[i % labels.length];

                    var svgname="";                                       
                    if(masterClass.difficulty_level=="Advance"){
                        svgname="advance.svg";
                    }else if(masterClass.difficulty_level=="Intermediate"){
                        svgname="intermediate.svg";
                    }else{
                        svgname="begin.svg";
                    }

                    var plainTextDescription = masterClass.description.replace(/<[^>]*>?/gm, '');
                    var truncatedDescription = plainTextDescription.length > 180 ? plainTextDescription.substring(0, 180) + '...' : plainTextDescription;
                   
                    var startDate = new Date();
                    var endDate = new Date(masterClass.end_date);

                    var total_lectures=masterClass.lectures_count;
                    var watched_lectures=masterClass.watched_lectures;
                    var total_progress=formatNumber(watched_lectures/total_lectures*100);


                    var totalNumber = masterClass.total_feedbacks * 5;
                    var averageRating = totalNumber>0 ? masterClass.rating / totalNumber * 5 : 0;
                    var fullStars = Math.floor(averageRating);
                    var halfStar = averageRating - fullStars >= 0.5 ? 1 : 0;
                    averageRating=formatNumber(averageRating);

                    if(total_progress==100){
                        var div = document.createElement('div');
                    div.className = 'col-md-6 col-xl-3';
                    div.innerHTML = '<div ' +
                        '" class="bs-card h-100">' +
                        ' <div class="typ-mc">' +
                        ' <div class="img-area">' +
                        '     <img class="img-fluid img-widthmasterongoing" src="' + masterClass.banner_image +
                        '" alt="masterclass">' +
                        '     <span class="label '+label+'">' + masterClass.department_name + '</span>' +
                        // ' </div>' +


                        '<div class="bs-circle-progress typ-position">'+
                              '<div class="progress mx-auto" data-value='+total_progress+'>'+
                                  '<span class="progress-left">'+
                                              '<span class="progress-bar"></span>'+
                                  '</span>'+
                                  '<span class="progress-right">'+
                                              '<span class="progress-bar"></span>'+
                                  '</span>'+
                                  '<div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">'+
                                  '<div class="count">'+total_progress+'<span class="">%</span></div>'+
                                  '</div>'+
                              '</div>'+
                          '</div>'+

                        '<span class="rateusmaster'+((masterClass.has_given_feedback==1) ? 'd-none' : '')+ '" onclick="selectedCourse=' + masterClass.id + ', selectedProduct=\'MASTERCLASS\'" data-bs-toggle="modal" data-bs-target="#ratingModal">Rate us!</span>' +

                        '</div>' +

                        ' <div class="card-text flexColumn">' +
                        '<div class="flex11auto">'+
                        '    <a class="title" href="{{ route('showMasterClasses', '') }}/' + masterClass.id+'> <h3 class="title">' + masterClass.title + '</h3> </a>' +
                        '     <p class="descriptionText twoLineText">' + truncatedDescription + '</p>' +
                       '</div>'+
                        '     <div class="status mrgB24">' +
                        '         <div class="time">' +
                        '   <span class="icon icon-time"></span>' +
                        '            <span class="timeHours">' + masterClass.duration + '</span>' +
                        '         </div>' +
                        '         <span class="line">|</span>' +
                        '         <div class="time">' +
                        '             <img src="{{ asset('assets/images/svg/video-cam.svg') }}" alt="Lessons">' +
                            '             <span class="timeHours">' + masterClass.lectures_count + ' Lessons</span>' +
                            '         </div>' +
                            '         <span class="line">|</span>' +
                            '         <div class="time">' +
                            '             <img src="{{ asset('assets/images/svg/') }}/'+svgname+'" alt="intermediate">' +
                                '             <span class="timeHours">' + masterClass.difficulty_level + '</span>' +
                                '         </div>' +
                                '     </div>' +
                               
                                   '<div class="btn-section">'+
                                       
                                    '<a href="{{ route('downloadMasterClassCertificate', '') }}/'+masterClass.id+'" class="bs-btn typ-resume gap-16""><span class="icon icon-download"></span>Certificates</a>'+
                                   '</div>'+
                                ' </div>' +
                               
                                '</div>' +
                                '</div>';
                    fragment1.appendChild(div);
                    }else{
                        var div = document.createElement('div');
                    div.className = 'col-md-6 col-xl-3';
                    div.innerHTML = '<div ' +
                        '" class="bs-card h-100">' +
                        ' <div class="typ-mc">' +
                        ' <div class="img-area">' +
                        '     <img class="img-fluid img-widthmasterongoing" src="' + masterClass.banner_image +
                        '" alt="masterclass">' +
                        '     <span class="label '+label+'">' + masterClass.department_name + '</span>' +
                        // ' </div>' +


                        '<div class="bs-circle-progress typ-position">'+
                              '<div class="progress mx-auto" data-value="'+total_progress+'">'+
                                  '<span class="progress-left">'+
                                              '<span class="progress-bar"></span>'+
                                  '</span>'+
                                  '<span class="progress-right">'+
                                              '<span class="progress-bar"></span>'+
                                  '</span>'+
                                  '<div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">'+
                                  '<div class="count">'+total_progress+'<span class="">%</span></div>'+
                                  '</div>'+
                              '</div>'+
                          '</div>'+

                        '<span class="rateusmaster'+((masterClass.has_given_feedback==1) ? 'd-none' : '')+ '" onclick="selectedCourse=' + masterClass.id + ', selectedProduct=\'MASTERCLASS\'" data-bs-toggle="modal" data-bs-target="#ratingModal">Rate us!</span>' +

                        '</div>' +

                        ' <div class="card-text flexColumn">' +
                        '<div class="flex11auto">'+
                        '    <a class="title" href="{{ route('showMasterClasses', '') }}/' + masterClass.id+'> <h3 class="title">' + masterClass.title + '</h3> </a>' +
                        '     <p class="descriptionText twoLineText">' + truncatedDescription + '</p>' +
                       '</div>'+
                        '     <div class="status">' +
                        '         <div class="time">' +
                        '   <span class="icon icon-time"></span>' +
                        '            <span class="timeHours">' + masterClass.duration  + '</span>' +
                        '         </div>' +
                        '         <span class="line">|</span>' +
                        '         <div class="time">' +
                        '             <img src="{{ asset('assets/images/svg/video-cam.svg') }}" alt="Lessons">' +
                            '             <span class="timeHours">' + masterClass.lectures_count + ' Lessons</span>' +
                            '         </div>' +
                            '         <span class="line">|</span>' +
                            '         <div class="time">' +
                            '             <img src="{{ asset('assets/images/svg/') }}/'+svgname+'" alt="intermediate">' +
                                '             <span class="timeHours">' + masterClass.difficulty_level + '</span>' +
                                '         </div>' +
                                '     </div>' +
                                ' </div>' +
                             
                                '</div>' +
                                '</div>';
                    fragment.appendChild(div);
                    }
                    

                }
                document.getElementById('my-master-class-cotent-1').append(fragment.cloneNode(true));
                document.getElementById('my-master-class-cotent-2').append(fragment.cloneNode(true));
                document.getElementById('my-master-class-cotent-3').append(fragment1.cloneNode(true));
                document.getElementById('my-master-class-cotent-4').append(fragment1.cloneNode(true));
                initializeProgressCircle();

            }).catch(() => {
                this.message = 'Ooops! Something went wrong!';

            })
    }

    function formatNumber(number) {
    if (Number.isInteger(number)) {
        return number.toString(); // Return as string without decimal part
    } else {
        return number.toFixed(1); // Return with one decimal place
    }
}


    function getMyVWEPList() {
        vwepCount = vwepCount + 8;

        const token = '{{ csrf_token() }}';
        var fragment = document.createDocumentFragment();
        var fragment1 = document.createDocumentFragment();

        var progress=0;

        var datasElement1 = $('#virtual-exp-content-1');
        var datasElement2 = $('#virtual-exp-content-2');
        var vwepComplete1 = $('#vwep_complete_1');
        var vwepComplete2 = $('#vwep_complete_2');

        document.getElementById('virtual-exp-content-1').innerHTML = loadingDiv;
        document.getElementById('virtual-exp-content-2').innerHTML = loadingDiv;

        fetch("{{ route('getMyVWEP') }}", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': token
            },
            body: JSON.stringify({
                'completed': true,
                'count': vwepCount
            }),
        }).then(response => response.json())
            .then((data) => {

                datasElement1.empty();
                datasElement2.empty();
                vwepComplete1.empty();
                vwepComplete2.empty();

                if (data.data.length < 1) {
                    document.getElementById('virtual-exp-content-1').innerHTML ="<div class='m-2 mt-4'>NO DATA FOUND </div>";
                    document.getElementById('virtual-exp-content-2').innerHTML = "<div class='m-2 mt-4'>NO DATA FOUND </div>";

                }

                for (var i = 0; i < data.data.length; i++) {
                    const vwep = data.data[i];

                   progress=vwep.lear_response/vwep.learns*100;
                   totalProgress=formatNumber(progress)
                   console.log("progress",totalProgress=formatNumber(progress))

                    if(progress ===100){

                        var div = document.createElement('div');
                    div.className = 'class="col-md-6 col-xl-3';
                    div.innerHTML = '<div class="bs-card h-100">'+
                                      '<div class="typ-evp">'+
                                          '<div class="img-area">'+
                                          '<img class="img-fluid outsour-heightmanage" src="' + vwep.image + '" alt="job">' +
                                        //   '<span class="label" onclick="selectedCourse=' + vwep.id + ', selectedProduct=\'VWEP\'" data-bs-toggle="modal" data-bs-target="#ratingModal">Rate Us!</span>'+
                                      ' </div>'+
                                       '<div class="card-text">'+
                                           '<div class="logo-btn">'+
                                           '<img src="' + vwep.logo + '" alt="logo">' +
                                           '</div>'+
                                           '<div class="flex11auto">'+
                                           ' <h4 class="brand-name">' + vwep.company_name + '</h4>' +
                                           '<h3 class="title">' + vwep.title + '</h3>' +
                                           '<p class="subtext">' + vwep.department_name + '</p>' +
                                           '</div>'+
                                           '<div class="btn-section">'+
                                           ((vwep.has_certificate===1) ? 
                                           
                                           '<a href="{{ route('downloadVwepCertificate', '') }}/'+vwep.id+'" class="bs-btn typ-resume gap-16""><span class="icon icon-download"></span>Certificate</a>' 
                                           :
                                           '<span  class="bs-btn typ-resume gap-16"">In Verification</span>'

                                        )+
                                           '</div>'+
                                       '</div>'+
                                   '</div>'+
                               '</div>' +
                        '</div>';
                        fragment1.appendChild(div);
                  
                    }else{
                    var div = document.createElement('div');
                    div.className = 'class="col-md-6 col-xl-3';
                    div.innerHTML = '<div class="bs-card h-100">' +
                        '<div class="typ-evp">' +
                        '<div class="img-area">' +
                        '<img class="img-fluid outsour-heightmanage" src="' + vwep.image + '" alt="job">' +
                        '<!-- <span class="label">Banking  Finance</span> -->' +
                        // '<span class="label" onclick="selectedCourse=' + vwep.id + ', selectedProduct=\'VWEP\'" data-bs-toggle="modal" data-bs-target="#ratingModal">Rate Us!</span>'+

                        '<div class="bs-circle-progress typ-position">'+
                              '<div class="progress mx-auto" data-value='+totalProgress+'>'+
                                  '<span class="progress-left">'+
                                              '<span class="progress-bar"></span>'+
                                  '</span>'+
                                  '<span class="progress-right">'+
                                              '<span class="progress-bar"></span>'+
                                  '</span>'+
                                  '<div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">'+
                                  '<div class="count">'+totalProgress+'<span class="">%</span></div>'+
                                  '</div>'+
                              '</div>'+
                          '</div>'+

                        '</div>' +
                        '<div class="card-text">' +
                        '<div class="logo-btn">' +
                        '<img src="' + vwep.logo + '" alt="logo">' +
                        '</div>' +
                        '<div class="flex11auto">' +
                        ' <h4 class="brand-name">' + vwep.company_name + '</h4>' +
                        '<h3 class="title">' + vwep.title + '</h3>' +
                        '<p class="subtext">' + vwep.department_name + '</p>' +
                        '</div>' +
                        '<div class="btn-section">' +
                        '<a href="{{ route('vwepTask', '') }}/' + vwep.id + '" ><span class="bs-btn typ-resume"> Resume Now</span></a>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>';
                    fragment.appendChild(div);
                   
                    
                    }

                    

                }
                document.getElementById('vwep_complete_1').append(fragment1.cloneNode(true));
                   document.getElementById('vwep_complete_2').append(fragment1.cloneNode(true));
                document.getElementById('virtual-exp-content-1').append(fragment.cloneNode(true));
                   document.getElementById('virtual-exp-content-2').append(fragment.cloneNode(true));
                   initializeProgressCircle();


            }).catch(() => {
                this.message = 'Ooops! Something went wrong!';

            })
    }


    function formatstartDate(dateString) {
        var date = new Date(dateString);
        var options = {
            month: 'long',
            day: 'numeric'
        };
        return date.toLocaleDateString('en-US', options);
    }

    function formatendDate(dateString) {
        var date = new Date(dateString);
        var options = {
            month: 'long',
            day: 'numeric',
            year: 'numeric'
        };
        return date.toLocaleDateString('en-US', options);
    }

    function getMyCoursesList(count) {

        courseCount = courseCount + 8;

        const token = '{{ csrf_token() }}';
        var fragment = document.createDocumentFragment();
        var fragment1 = document.createDocumentFragment();


        var datasElement1 = $('#my-courses-content-1');
        var datasElement2 = $('#my-courses-content-2');
        var course_complete_1 = $('#course_complete_1');
        var course_complete_2 = $('#course_complete_2');


        document.getElementById('my-courses-content-1').innerHTML = loadingDiv;
        document.getElementById('my-courses-content-2').innerHTML = loadingDiv;

        fetch("{{ route('getMyCourses') }}", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': token
            },
            body: JSON.stringify({
                'completed': true,
                'count': courseCount
            }),
        }).then(response => response.json())
            .then((data) => {

                datasElement1.empty();
                datasElement2.empty();
                course_complete_1.empty();
                course_complete_2.empty();

                if (data.data.length < 1) {
                    document.getElementById('my-courses-content-1').innerHTML ="<div class='m-2 mt-4'>NO DATA FOUND </div>";
                    document.getElementById('my-courses-content-2').innerHTML ="<div class='m-2 mt-4'>NO DATA FOUND </div>";

                }



                for (var i = 0; i < data.data.length; i++) {
                    const course = data.data[i];
                    var plainTextDescription = course.description.replace(/<[^>]*>?/gm, '');
                    var truncatedDescription = plainTextDescription.length > 180 ? plainTextDescription.substring(0, 180) + '...' : plainTextDescription;
                    
                    var today=new Date();
                    if(course.completed===true){
                    var div = document.createElement('div');
                    div.className = 'class="col-md-6 col-xl-3';
                    div.innerHTML = ' <div class="bs-card h-100 ">'+
                              '<div class="typ-job typ-rating typ-opportunities typ-onboarding-card">'+
                                  '<div class="img-area">'+
                                  '<img class="img-fluid img-widthmaster" src="' + course.banner_image +
                                     '" alt="investment">' +
                                     '<span class="label typ-theme">' + course.name + '</span>' +
                                     '<a class="rateus'+((course.rating !=null) ? ' d-none' : '')+'" onclick="selectedCourse=' + course.id + ', selectedProduct=\'COURSE\'" data-bs-toggle="modal" data-bs-target="#ratingModal">Rate us!</a>' +
                                  '</div>'+
                                  '<div class="card-text flex-adjust">'+
                                      '<div class="flex11auto">'+
                                          '<div class="date-time">'+
                                              '<div class="date">'+
                                                  '<span class="icon icon-calender"></span>'+
                                                  '<span class="date-range">' + formatstartDate(course.start_date) + ' - ' + formatendDate(
                                                 course.end_date) + '</span>' +
                                             '</div>'+
                                              '<div class="days">'+
                                              '<span class="days-pending">' + course.remaining_days + ' Days Left</span>' +
                                                  '<span class="icon icon-time-filter"></span>'+
                                              '</div>'+
                                          '</div>'+
                                          '<h3 class="title">' + course.title + '</h3>' +
                                          '<div class="truncate">'+
                                           '<p class="subtext  twoLineText ">' + truncatedDescription + '</p>' +
                                           '</div>'+
                                           ((course.is_online) ?
                                          '<div class="status mrgB24">'+
                                              '<div class="online">'+
                                                  '<span class="icon icon-dot"></span>'+
                                                  '<span class="text">Live Online</span>'+
                                              '</div>'+
                                              '<span class="line">|</span>'+
                                              '<div class="img-section">'+
                                                  '<img class="img-fluid" src="{{ asset('assets/images/zoom.svg') }}" alt="zoom">'+
                                              '</div>'+
                                          '</div>'
                                          :
                                          '<div class="status">' +
                                          '<div class="online typ-blue">' +
                                          '<span class="icon icon-dot"></span>' +
                                          '<span class="text">Classroom/offline</span>' +
                                          '</div>' +
                                          '<span class="line">|</span>' +
                                          '<div class="online typ-blue">' +
                                          '<span class="icon icon-map-icon"></span>' +
                                          '<span class="text">' + course.city_name + '</span>' +
                                          '</div>' +
                                          '</div>'
                                        )+

                                      '</div>'+
                                      '<div class="btn-section mt-1">'+
                                      '<a href="{{ route('downloadCourseCertificate', '') }}/'+course.id+'" class="bs-btn typ-resume gap-16""><span class="icon icon-download"></span>Certificate</a>'+
                                          
                                      '</div>'+
                                  '</div>'+
                              '</div>'+
                           '</div>'+
                          '</div>';
                      fragment.appendChild(div);
                      
                }else{
                    var div = document.createElement('div');
                    div.className = 'class="col-md-6 col-xl-3';
                    div.innerHTML = '<div class="bs-card h-100 ">' +
                        '<div class="typ-job typ-rating typ-opportunities  typ-onboarding-card">' +
                        '<div class="img-area">' +
                        '<img class="img-fluid img-widthmaster" src="' + course.banner_image +
                        '" alt="investment">' +
                        '<span class="label typ-theme">' + course.name + '</span>' +
                        '<a class="rateus'+((course.rating !=null) ? ' d-none' : '')+'" onclick="selectedCourse=' + course.id + ', selectedProduct=\'COURSE\'" data-bs-toggle="modal" data-bs-target="#ratingModal">Rate us!</a>' +
                        '</div>' +
                        '<div class="card-text">' +
                        '<div class="date-time">' +
                        '<div class="date">' +
                        '<span class="icon icon-calender"></span>' +
                        '<span class="date-range">' + formatstartDate(course.start_date) + ' - ' + formatendDate(
                            course.end_date) + '</span>' +
                        '</div>' +
                        '<div class="days">' +
                        '<span class="days-pending">' + course.remaining_days + ' Days Left</span>' +
                        '<span class="icon icon-time-filter"></span>' +
                        '</div>' +
                        '</div>' +
                        '<h3 class="title">' + course.title + '</h3>' +
                        '<div class="truncate">'+
                        '<p class="subtext  twoLineText ">' + truncatedDescription + '</p>' +
                        '</div>'+
                        ((course.is_online) ?
                            '<div class="status">' +
                            '<div class="online typ-blue">' +
                            '<span class="icon icon-dot"></span>' +
                            '<span class="text">Classroom/offline</span>' +
                            '</div>' +
                            '<span class="line">|</span>' +
                            '<div class="online typ-blue">' +
                            '<span class="icon icon-map-icon"></span>' +
                            '<span class="text">' + course.city_name + '</span>' +
                            '</div>' +
                            '</div>' :
                            '<div class="status">' +
                            '<div class="online">' +
                            '<span class="icon icon-dot"></span>' +
                            '<span class="text">Live Online</span>' +
                            '</div>' +
                            '<span class="line">|</span>' +
                            '<div class="img-section">' +
                            '<img class="img-fluid" src="{{ asset('assets/images/zoom.svg') }}" alt="zoom">' +
                                '</div>' +
                                '</div>')
                      '</div>' +
                          '</div>' +
                          '</div>';
                      fragment1.appendChild(div);
                    
                }
               

    }
                     document.getElementById('my-courses-content-1').append(fragment1.cloneNode(true));
                      document.getElementById('my-courses-content-2').append(fragment1.cloneNode(true));
                      document.getElementById('course_complete_1').append(fragment.cloneNode(true));
                      document.getElementById('course_complete_2').append(fragment.cloneNode(true));
   

    initializeProgressCircle();

                }).catch (() => {
        this.message = 'Ooops! Something went wrong!';

    })
        }


    function getMyApplicationsList() {

        jobCount = jobCount + 8

        const token = '{{ csrf_token() }}';
        var fragment = document.createDocumentFragment();


        var datasElement1 = $('#my-application-content-1');
        var datasElement2 = $('#my-application-content');

        document.getElementById('my-application-content-1').innerHTML = loadingDiv;
        document.getElementById('my-application-content').innerHTML = loadingDiv;



        fetch("{{ route('getMyJobApplications') }}", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': token
            },
            body: JSON.stringify({
                'count': jobCount
            }),
        }).then(response => response.json())
            .then((data) => {

                datasElement1.empty();
                datasElement2.empty();

                if (data.data.length < 1) {
                    document.getElementById('my-application-content-1').innerHTML = "<div class='m-2 mt-4'>NO DATA FOUND </div>";
                    document.getElementById('my-application-content').innerHTML = "<div class='m-2 mt-4'>NO DATA FOUND </div>";

                }



                for (var i = 0; i < data.data.length; i++) {

                    const application = data.data[i];

                    var plainTextDescription = application.description.replace(/<[^>]*>?/gm, '');
                    var truncatedDescription = plainTextDescription.length > 180 ? plainTextDescription.substring(0, 180) + '...' : plainTextDescription;

                    var div = document.createElement('div');
                    div.className = 'class="col-lg-6 col-md-6';
                    div.innerHTML = '<div class="bs-card typ-job-list">' +
                        '<div class="card-body">' +
                        '<div class="logo-section">' +
                        '<div class="img-title">' +
                        '<div class="img-section"><img class="img-fluid"' +
                        'src="' + application.logo + '" alt="logo"> </div>' +
                        '<div class="title">' +
                        '<h3 class="name">' + application.company_name + '</h3>' +
                        '<h2 class="position">' + application.title + '</h2>' +
                        '</div>' +
                        '</div>' +
                        '<div class="icon-section">' +
                        // '<span  class="icon icon-save11"></span>' +
                        '</div>' +
                        '</div>' +
                        '<div class="icon-section max425">' +
                        '<ul>' +
                        '<li>' +
                        '<span class="icon-name"><span class="icon icon-map-new"></span>' +
                        application.city_name + '</span>' +
                        '</li>' +
                        '<li class="dot-sec">' +
                        '<span class="dot"></span>' +
                        '</li>' +
                        '<li>' +
                        '<span class="icon-name"><img src="{{asset('assets/images/svg/bag1.svg')}}" alt="bagss"> <span' +
                        'class="path1"></span><span class="path2"></span><span' +
                        'class="path3"></span><span class="path4"></span><span' +
                        'class="path5"></span></span>' + application.experience + ' Yrs</span>' +
                        '</li>' +
                        '<li class="dot-sec">' +
                        '<span class="dot"></span>' +
                        '</li>' +
                        '<li>' +
                        '<span class="icon-name"><span class="icon icon-clock"></span>' + application.name +
                        '</span>' +
                        '</li>' +
                        '<li class="dot-sec">' +
                        '<span class="dot"></span>' +
                        '</li>' +
                        '<li>' +
                        '<span class="icon-name"><span class="">₹</span> ' + application.salary_from + '-' +
                        application.salary_to + ' LPA</span>' +
                        '</li>' +
                        '</ul>' +
                        '</div>' +
                        '<div class="description">' +
                        '<p>' +truncatedDescription+ ' </p>' +
                        '</div>' +
                        '</div>' +
                        '<div class="card-footer">' +
                        '<div class="last-date w-auto">' +
                        '<span class="icon icon-calender1"></span> Last date- ' + formatendDate(application
                            .end_date) +
                        '</div>' +
                        '</div>' +
                        '</div>';
                    fragment.appendChild(div);
                }
                document.getElementById('my-application-content-1').append(fragment.cloneNode(
                    true)); // Append a clone to my-application-content-1
                document.getElementById('my-application-content').append(fragment.cloneNode(true));

                initializeProgressCircle();


            }).catch(() => {
                this.message = 'Ooops! Something went wrong!';

            })
    }

    $('#pills-my-masterclass-tab').focus(function () {
        $(this).click();
    });

    $('#pills-my-vep-tab').focus(function () {
        $(this).click();
    });

    $('#pills-my-course-tab').focus(function () {
        $(this).click();
    });
    $('#pills-my-application-tab').focus(function () {
        $(this).click();
    });

    $(document).ready(function() {
    $('#ratingModal').on('hidden.bs.modal', function (e) {
        document.getElementById('description').value="";

        var icons=document.querySelectorAll('.ratestar');
        icons.forEach(function(item) {
            item.className = '';
            item.classList.add('icon');
            item.classList.add('ratestar');
            item.classList.add('icon-star-blank');
            
            });
    });
});
  

</script>
@endsection