@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">
                                            
                                        </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 type="button" onclick="getMyCoursesList(1)"
                                                                class="bs-btn typ-loadmore d-inline-block">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>
                                            </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">
                                                
                                            </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 type="button" onclick="getMyMasterClasses()"
                                                                    class="bs-btn typ-loadmore d-inline-block">Load
                                                                    More</a>
                                                            </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>
                                                </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">
                                              
                                            </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 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">

                                                      
                                                       
                                                    </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 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">
                                          
                                        </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 type="button" onclick="getMyCoursesList(1)"
                                                                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>
                                            </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 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">
                                                            <div class="col-md-6 col-xl-3">
                                                                <div class="bs-card h-100">
                                                                    <div class="typ-mc">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/user-profile/finance.jpg"
                                                                                alt="job">
                                                                            <span class="label typ-theme">Finance</span>
                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="flex11auto">
                                                                                <h3 class="title">Intensive Guitar
                                                                                    Mastery Bootcamp</h3>
                                                                                <p class="subtext twoLineText">
                                                                                    Master Excel for forensic data
                                                                                    analysis and audit, covering
                                                                                    visualization,
                                                                                    trend analysis...
                                                                                </p>
                                                                            </div>
                                                                            <div class="status mrgB24">
                                                                                <div class="time">
                                                                                    <span class="icon icon-time"></span>
                                                                                    <span
                                                                                        class="timeHours">4hr:<span>20m</span></span>
                                                                                </div>
                                                                                <span class="line">|</span>
                                                                                <div class="time">
                                                                                    <img src="assets/images/svg/video-cam.svg"
                                                                                        alt="Lessons">
                                                                                    <span class="timeHours">25
                                                                                        Lessons</span>
                                                                                </div>
                                                                                <span class="line">|</span>
                                                                                <div class="time">
                                                                                    <img src="assets/images/svg/advance.svg"
                                                                                        alt="intermediate">
                                                                                    <span
                                                                                        class="timeHours">Advanced</span>
                                                                                </div>
                                                                            </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-mc">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/user-profile/lifestyle.jpg"
                                                                                alt="job">
                                                                            <span
                                                                                class="label typ-orange">Lifestyle</span>
                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="flex11auto">
                                                                                <h3 class="title">Modern Culinary
                                                                                    Techniques</h3>
                                                                                <p class="subtext twoLineText">
                                                                                    Master Excel for forensic data
                                                                                    analysis and audit, covering
                                                                                    visualization,
                                                                                    trend analysis...
                                                                                </p>
                                                                            </div>
                                                                            <div class="status mrgB24">
                                                                                <div class="time">
                                                                                    <span class="icon icon-time"></span>
                                                                                    <span
                                                                                        class="timeHours">4hr:<span>20m</span></span>
                                                                                </div>
                                                                                <span class="line">|</span>
                                                                                <div class="time">
                                                                                    <img src="assets/images/svg/video-cam.svg"
                                                                                        alt="Lessons">
                                                                                    <span class="timeHours">25
                                                                                        Lessons</span>
                                                                                </div>
                                                                                <span class="line">|</span>
                                                                                <div class="time">
                                                                                    <img src="assets/images/svg/advance.svg"
                                                                                        alt="intermediate">
                                                                                    <span
                                                                                        class="timeHours">Advanced</span>
                                                                                </div>
                                                                            </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-mc">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/user-profile/account.jpg"
                                                                                alt="job">
                                                                            <span
                                                                                class="label typ-purple">Accounting</span>
                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="flex11auto">
                                                                                <h3 class="title">Intensive Guitar
                                                                                    Mastery Bootcamp</h3>
                                                                                <p class="subtext twoLineText">
                                                                                    Master Excel for forensic data
                                                                                    analysis and audit, covering
                                                                                    visualization,
                                                                                    trend analysis...
                                                                                </p>
                                                                            </div>
                                                                            <div class="status mrgB24">
                                                                                <div class="time">
                                                                                    <span class="icon icon-time"></span>
                                                                                    <span
                                                                                        class="timeHours">4hr:<span>20m</span></span>
                                                                                </div>
                                                                                <span class="line">|</span>
                                                                                <div class="time">
                                                                                    <img src="assets/images/svg/video-cam.svg"
                                                                                        alt="Lessons">
                                                                                    <span class="timeHours">25
                                                                                        Lessons</span>
                                                                                </div>
                                                                                <span class="line">|</span>
                                                                                <div class="time">
                                                                                    <img src="assets/images/svg/advance.svg"
                                                                                        alt="intermediate">
                                                                                    <span
                                                                                        class="timeHours">Advanced</span>
                                                                                </div>
                                                                            </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-mc">
                                                                        <div class="img-area">
                                                                            <img class="img-fluid"
                                                                                src="assets/images/user-profile/data.jpg"
                                                                                alt="job">
                                                                            <span class="label typ-theme">Data
                                                                                Science</span>
                                                                        </div>
                                                                        <div class="card-text">
                                                                            <div class="flex11auto">
                                                                                <h3 class="title">Modern Culinary
                                                                                    Techniques</h3>
                                                                                <p class="subtext twoLineText">
                                                                                    Master Excel for forensic data
                                                                                    analysis and audit, covering
                                                                                    visualization,
                                                                                    trend analysis...
                                                                                </p>
                                                                            </div>
                                                                            <div class="status mrgB24">
                                                                                <div class="time">
                                                                                    <span class="icon icon-time"></span>
                                                                                    <span
                                                                                        class="timeHours">4hr:<span>20m</span></span>
                                                                                </div>
                                                                                <span class="line">|</span>
                                                                                <div class="time">
                                                                                    <img src="assets/images/svg/video-cam.svg"
                                                                                        alt="Lessons">
                                                                                    <span class="timeHours">25
                                                                                        Lessons</span>
                                                                                </div>
                                                                                <span class="line">|</span>
                                                                                <div class="time">
                                                                                    <img src="assets/images/svg/advance.svg"
                                                                                        alt="intermediate">
                                                                                    <span
                                                                                        class="timeHours">Advanced</span>
                                                                                </div>
                                                                            </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">
                                                                <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">
                                              
                                            </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 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">

                                                       
                                                        
                                                    </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 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-->

  

    </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();



        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 getMyMasterClasses() {
            masterClassCount=masterClassCount+4;

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

            var fragment = document.createDocumentFragment();

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

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

            fetch("{{ route('getSavedMasterClasses') }}", {
                    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();

                    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>";

                    }

                    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);

                        // Calculate the difference in milliseconds
                        var difference = endDate.getTime() - startDate.getTime();

                        // Convert milliseconds to hours and minutes
                        var remainingHours = Math.floor(difference / (1000 * 60 * 60));
                        var remainingMinutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));

                        // Display the remaining time
                        console.log("Remaining time:", remainingHours + "hr:" + remainingMinutes + "m");
                       
                        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);

                        var div = document.createElement('div');
                        div.className = 'col-md-6 col-xl-3';
                        div.innerHTML = '<a href="{{ route('showMasterClasses', '') }}/' + masterClass.id +
                            '" class="bs-card h-100">' +
                            ' <div class="typ-mc">' +
                            ' <div class="img-area">' +
                            '     <img class="img-fluid img-widthmaster" src="' + masterClass.banner_image +
                            '" alt="masterclass">' +
                            '     <span class="label '+label+'">' + masterClass.department_name + '</span>' +
                            ' </div>' +
                            ' <div class="card-text">' +
                            '     <h3 class="title">' + masterClass.title + '</h3>' +
                            '     <p class="descriptionText twoLineText">' + truncatedDescription + '</p>' +
                            '     <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>' +
                            '</a>';
                        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));


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

                })
        }



        function getMyVWEPList() {
            vwepCount=vwepCount+4;

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

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

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

            fetch("{{ route('getSavedVWEP') }}", {
                    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();

                    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];

                        var div = document.createElement('div');
                        div.className = 'class="col-md-6 col-xl-3';
                        div.innerHTML = '<a href="{{route('vwepShow','')}}/'+vwep.id+'" class="bs-card h-100">' +
                            '<div class="typ-evp">' +
                            '<div class="img-area">' +
                            '<img class="img-fluid img-widthmaster" src="' + vwep.image + '" alt="job">' +
                            '<!-- <span class="label">Banking  Finance</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>' +
                            '</div>' +
                            '</div>' +
                            '</a>';
                        fragment.appendChild(div);

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

                }).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 + 4;

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

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

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

            fetch("{{ route('getSavedCourses') }}", {
                    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();

                    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 div = document.createElement('div');
                        div.className = 'class="col-md-6 col-xl-3';
                        div.innerHTML = '<a href="{{route('cource.detail','')}}/'+course.slug+'" 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>' +
                            '</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>' +
                        '</a>';
                        fragment.appendChild(div);

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


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

                })
        }


        function getMyApplicationsList() {
            jobCount=jobCount+4;
            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('getSavedJobApplications') }}", {
                    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>' +
                            '<a href="{{route('job.detail','')}}/'+application.slug+'" class="title">' +
                            '<h3 class="name">' + application.company_name + '</h3>' +
                            '<h2 class="position">' + application.title + '</h2>' +
                            '</a>' +
                            '</div>' +
                            '<div class="icon-section">' +
                            '<span onclick="saveJob('+application.id+')" class="icon icon-save-fill"></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)); 
                    document.getElementById('my-application-content').append(fragment.cloneNode(true));



                }).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();
        });




     function saveJob(id) {
    var jobID = id;
    console.log("jobID>>>",jobID);
    const token='{{csrf_token()}}';
    $.ajax({
      url: "{{ route('job.save') }}",
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': token
      },
      data: { jobID: jobID },
      success: function (response) {
        getMyApplicationsList();
        console.log(' save course.');

      },
      error: function (error) {
      console.error('AJAX error:', error);
      }
      });
      }
        
    </script>
@endsection