@extends('frontend.layouts.main')
@section('head')
@section('og:title', $master_class->title . " | Masterclass")

    @section('og:description', $master_class->description)
    @section('og:image', $master_class->image)
    @section('og:image:width', '1200')
    @section('og:image:height', '630')
    @section('og:type', 'website')
@endsection
@section('content')
@section('content')

<style>
    .apply-btn-group {
           cursor:pointer;
            display: inline-flex;
            gap: 12px;
            .saveBtn {
              border-radius: 50%;
              background: #EFEFEF;
              width: 56px;
              height: 56px;
              display: flex;
              justify-content: center;
              align-items: center;
              .icon {
                &::before {
                  font-size: 18px;
                  color: #141414;
                }
              }
              &:hover {
                background: $clr-theme;
                .icon {
                  &::before {
                    color: $clr-white;
                  }
                }
              }
              &.active {
                background: $clr-theme;
                .icon {
                  &::before {
                    color: $clr-white;
                  }
                }
              }
            }
          }
</style>
    <main class="home">
        <!-- Banner section -->
        <section class="bs-banner  typ-learning-banner set-bg" data-img="{{$master_class->image}}">
            <div class="container">
                <div class="row align-item-center">
                    <div class="col-12">
                        <h2 class="bs-heading typ-white megB0 wow fadeInUp" data-wow-duration="0.8s">
                            {{ $master_class->title }}</h2>
                        <div class="bs-para typ-white maxw950 mb-2 learn-paraclr wow fadeInUp" style="text-align:justify" data-wow-duration="1s">
                            {!! $master_class->description !!}
                        </div>
                    </div>
                    <div class="detail-box d-flex flex-wrap wow fadeInUp" data-wow-duration="1.2s">
                        <div class="box d-flex align-items-center">
                            <div class="icon">
                                <span class="icon-students"></span>
                            </div>
                            <div class="content">
                                <p class="bs-para typ-white">{{ $master_class_users_count }} students</p>
                            </div>
                        </div>
                        <div class="box d-flex align-items-center">
                            <div class="icon">
                                <span class="icon-star-fill"></span>
                            </div>
                            <div class="content">
                                <p class="bs-para typ-white">{{ number_format($rating, 1) }} Rating</p>
                            </div>
                        </div>
                        <div class="box d-flex align-items-center">
                            <div class="icon">
                                <span class="icon-time"></span>
                            </div>
                            <div class="content">
                                <p class="bs-para typ-white">{{ $master_class->duration }}</p>
                            </div>
                        </div>
                        <div class="box d-flex align-items-center">
                            <div class="icon">
                                <span class="icon-translate"></span>
                            </div>
                            <div class="content">
                                <p class="bs-para typ-white">{{ $master_class->language }}</p>
                            </div>
                        </div>
                        <div class="box d-flex align-items-center">
                            <div class="icon">
                                <span class="icon-ean"></span>
                            </div>
                            <div class="content">
                                <p class="bs-para typ-white">{{ $master_class->cc_language }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Banner section -->

            <!-- Toast -->
            <div class="bs-toast d-none " id="masterSuccess" style="position: fixed; top: 50px; left: 0; right: 10px; z-index: 9999;">
                        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
                            <div class="toast-header">
                                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                <div class="img">
                                    <img src="{{asset('assets/images/toastersvg.svg')}}" alt="toastersvg">
                                </div>
                                <div class="txt-wrapper" style="display: block;">
                                    <h5 class="me-auto">Successful</h5>
                                    <p id="master-message"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Toaster end -->


        <section class="lyt-section padding33 typ-level-up">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-7 col-12">
                        <div class="left-box">
                            <p class="bs-para typ-grey typ24 wow fadeInUp" data-wow-duration="0.8s">Level Up Your
                                Skills: Invest in Your Future Today!</p>
                        </div>
                    </div>
                    <div class="col-lg-5 col-12">
                        <div class="right-box d-flex align-items-center justify-content-end wow fadeInUp"
                            data-wow-duration="0.8s">
                            @if($master_class->pricing=='PREMIUM')
                            <div class="bs-price">
                                <span class="grey">₹ {{ $master_class->price }}</span>
                                <span class="orange">₹ {{ $master_class->discouted_price }}</span>
                            </div>
                            @endif
                            
                            @if (Auth::user())
                                <!-- <div id="save-button"
                                    class="icon setbg-icon {{ !$masterClassSavedValue ? 'active' : ''}}  m-3 mt-0 mb-0" onclick="toggleValue()">
                                    <p class="bs-para typ18">

                                        <span id="save-button" class="icon icon-save1" ></span>                                       
                
                                    </p>
                                </div> -->

                                <div class="apply-btn-group " >
                                            <a id="save-button" onclick="toggleValue()" class="icon setbg-icon m-3 mt-0 mb-0 mobile-mrgL0 {{ $masterClassSavedValue ? 'active' : ''}} "><span class="icon icon-save1"></span></a>

                                </div>


                                <!-- <div class="apply-btn-group ">
                                            <a id="unsave-button" onclick="toggleValue()" class="saveBtn {{ $masterClassSavedValue ? 'active' : 'd-none active'}} "><span class="icon icon-save1"></span></a>
                                             <a id="save-button" onclick="toggleValue()" class="saveBtn {{  $masterClassSavedValue ? 'd-none' : ' '}}"><span class="icon icon-save1"></span></a>
                             </div>          -->
                            @endif
                            <div class="skip-btn-section">
                                @if (Auth::user())
                                    @if ($master_class_user)
                                        @php
                                            $status="";

                                            if($masterClassLectures === $masterClassWatchedLecturesCount){
                                                $status="Completed";
                                            }else if($masterClassWatchedLecturesCount >0){
                                                $status="In progress";
                                            }else{
                                                $status="Start learning";
                                            }
                                        @endphp
                                    
                                        <a href="{{ route('masterClassPlayVideo', $master_class->id) }}"
                                            class="bs-btn typ-pdf typ-pdf-bg mb-0">{{$status}}</a>
                                    @elseif ($master_class->pricing == "FREE")
                                        <a href="{{ route('masterClassPlayVideo', $master_class->id) }}"
                                            class="bs-btn typ-pdf typ-pdf-bg mb-0">Start Learning</a>
                                    @else
                                        <button id="open-payment-btn" class="bs-btn typ-theme-V2 typ-130">Buy Course</button>
                                    @endif
                                @else
                                    <a href="{{ route('signin') }}" class="bs-btn typ-theme-V2">Register Now</a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="lyt-section padding33 typ-invest-future">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-12">

                        <div class="left-box">
                            <div class="bs-list-details bs-faq typ-learn typ-course">
                                @foreach ($master_class->master_class_topics as $index=> $master_class_topic)
                                    <div class="accordion my-2" id="accordionExample1">
                                        <div class="accordion-item wow fadeInUp" data-wow-duration="0.6s">
                                            <h2 class="accordion-header" id="faqone">
                                                <button class="accordion-button collapsed" type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#collapseone{{ $master_class_topic->id }}"
                                                    aria-expanded="true" aria-controls="collapseone">
                                                    {{ str_pad($loop->index + 1, 2, '0', STR_PAD_LEFT) }}.
                                                    {{ $master_class_topic->title }}
                                                </button>
                                            </h2>
                                            <div id="collapseone{{ $master_class_topic->id }}"
                                                class="accordion-collapse collapse " aria-labelledby="faqone"
                                                data-bs-parent="#accordionExample1">
                                                <div class="accordion-body accordian-bodyMaster">
                                                    <div class="accordion-item-description-wrapper">
                                                        @foreach ($master_class_topic->master_class_lectures as $key => $lecture)
                                                            <div class="accordion-item-description">
                                                                <div class="box row align-items-center {{ ($index ==0 && $key==0) ? 'unlock' : ''}}">
                                                                    <div class="col-12"
                                                                       >
                                                                        <div class="d-flex align-items-center open-video">
                                                                            @if (Auth::user())
                                                                                
                                                                                    
                                                                                <a class="play-icon" href="{{ route('masterClassPlayVideo', $master_class->id) }}">
                                                                                    <span class="icon icon-play"></span>
                                                                                    </a>
                                                                            @else
                                                                                {{-- Show signup link for other loop iterations --}}
                                                                                <a href="{{ route('signin') }}">
                                                                                    <div class="play-icon">
                                                                                        <span class="icon icon-play"></span>
                                                                                    </div>
                                                                                </a>
                                                                            @endif
                                                                            <div class="icon-wiyh-text">
                                                                                <div class="text-area">
                                                                                    <p class="title mb-2">
                                                                                        {{ $lecture->title }}</p>
                                                                                    <div class="d-flex">
                                                                                        <p
                                                                                            class="title typ-400 typ-grey mb-0 me-3">
                                                                                            Lesson
                                                                                            {{ $key + 1 }}
                                                                                        </p>
                                                                                        <p
                                                                                            class="title typ-400 typ-grey mb-0">
                                                                                            <span
                                                                                                class="icon icon-clock me-2"></span>{{ $lecture->duration_hour }}
                                                                                            hr&nbsp;{{ $lecture->duration_minutes }}
                                                                                            mn
                                                                                        </p>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            @if (!$loop->first || (!$loop->parent->first && $loop->parent->index != 0) )
                                                                                @if(!$master_class_user && $master_class->pricing=="PREMIUM")
                                                                                <div class="lock">
                                                                                    <span class="icon icon-lock1"></span>
                                                                                </div>
                                                                                @endif
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach

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

                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12 mt-lg-0 mt-4">
                        <p class="bs-para typ16 margB-12"><strong>Description</strong></p>
                        {!! $master_class->long_description !!}
                    </div>
                </div>
            </div>
        </section>

        <section class="lyt-section typ-analysis-sec">
            <div class="container position-relative">
                <div class="row">
                    <div class="col-md-12">
                        <div class="heading-wrapper typ-center mob-50">
                            <h2 class="bs-heading fnt-32 wow fadeInUp" data-wow-duration="0.4s"
                                style="visibility: visible; animation-duration: 0.4s; animation-name: fadeInUp;">
                                UNOCUE Masterclass
                            </h2>
                            <p class="bs-para typ-green typ-medium typ-max-770 wow fadeInUp" data-wow-duration="0.6s"
                                style="visibility: visible; animation-duration: 0.6s; animation-name: fadeInUp;">
                                {{$master_class->title}} </p>
                        </div>
                    </div>
                </div>
                
                <div class="video-wrapper mt-lg-3 mt-md-5 mt-0 wow fadeInUp" data-wow-duration="0.8s">
                    <div
                        class="bs-thumbnil-video video-wrapper ">
                        <video class="video-bg img-fluid" src="{{$master_class->video}}" alt="video-bg"></video>
                        <!-- <img class="video-bg img-fluid"
                            src="{{ asset('assets/images/masterclass/learning/thumbnil1.jpg') }}" alt="video-bg"> -->
                        <div class="icon-section" id="video_play_icon">
                            <span class="border-stroke">
                                <span class="icon icon-play"></span>
                            </span>
                        </div>
                     </div>
                </div>

                <div class="fixed-img">
                    <div class="img1 wow fadeInUp" data-wow-duration="0.8s">
                        <img src="{{ asset('assets/images/masterclass/learning/vec1.png') }}" class="img-fluid"
                            alt="logo">
                    </div>
                    <div class="img2 wow fadeInUp" data-wow-duration="0.8s">
                        <img src="{{ asset('assets/images/masterclass/learning/vec2.png') }}" class="img-fluid"
                            alt="logo">
                    </div>
                    <div class="img3 wow fadeInUp" data-wow-duration="0.8s">
                        <img src="{{ asset('assets/images/masterclass/learning/vec3.png') }}" class="img-fluid"
                            alt="logo">
                    </div>
                    <div class="img4 wow fadeInUp" data-wow-duration="0.8s">
                        <img src="{{ asset('assets/images/masterclass/learning/vec4.png') }}" class="img-fluid"
                            alt="logo">
                    </div>
                </div>
            </div>
        </section>

        <section class="lyt-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="heading-wrapper typ-center mob-50">
                            <h2 class="bs-heading text-center wow fadeInUp" data-wow-duration="0.4s"
                                style="visibility: visible; animation-duration: 0.4s; animation-name: fadeInUp;">
                                Know your Instructor
                            </h2>
                        </div>
                    </div>
                </div>

                <div class="row wow fadeInUp" data-wow-duration="0.8s">

                    @foreach ($instructors_data as $instructor)
                        <div class="col-lg-6 mt-lg-0 mt-4 cource-card-mrgb">
                            <div class="bs-box h-100">
                                <div class="profile">
                                    <div class="profile-img">
                                        <img src="{{ $instructor->instructor->photo }}" class="img-fluid" alt="logo">
                                    </div>
                                    <div class="profile-content">
                                        <p class="bs-para typ24 typ-grey8 typ-semi">{{ $instructor->instructor->name }}</p>
                                        <p class="bs-para typ16 typ-grey9 typ-medium">{{ $instructor->designation }}</p>
                                    </div>
                                </div>

                                <div class="d-flex list">
                                    <li>{{ $instructor->instructor->rating }} Instructor rating</li>
                                    <li>{{ $instructor->instructor->review_count }} Reviews</li>
                                    <li>{{ $instructor->instructor->student_count }} Students</li>
                                    <li>{{ $instructor->instructor->course_count }} Courses</li>
                                </div>
                                <p class="mb-0">{!! $instructor->instructor->description !!}</p>
                            </div>

                        </div>
                    @endforeach

                    {{-- <div class="col-lg-6 mt-lg-0 mt-4">
                        <div class="bs-box h-100">
                            <div class="profile">
                                <div class="profile-img">
                                    <img src="{{ asset('assets/images/masterclass/learning/instructor/profile1.png') }}" class="img-fluid"
                            alt="logo">
                                </div>
                                <div class="profile-content">
                                    <p class="bs-para typ24 typ-grey8 typ-semi">Heenal Gada</p>
                                    <p class="bs-para typ16 typ-grey9 typ-medium">Heenal Gada</p>
                                </div>
                            </div>

                            <div class="d-flex list">
                                <li>4.5 Instructor rating</li>
                                <li>1000 Reviews</li>
                                <li>1500 Students</li>
                                <li>4 Courses</li>
                            </div>
                            <p class="mb-0">Heenal Gada is an Equity Research Analyst at ICICI Securities -
                                Institutional Equities. Prior to this, she was associated with Motilal Oswal Financial
                                Securities and Ambit Capital. She has an experience of 2+ years covering ~25 equity
                                scrips within sectors of Technology, Internet and Staffing. Heenal has also been
                                actively involved in IPOs of Nykaa, Latent View and Zomato. On the academic front,
                                Heenal has cleared all three levels of CFA and is also a Chartered Accountant.</p>
                        </div>
                    </div> --}}
                </div>
            </div>
        </section>

        <section class="lyt-section typ-resource typ-greydot-bg typ-our-student">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="heading-wrapper typ-center mb-0">
                            <h2 class="bs-heading wow fadeInUp" data-wow-duration="0.4s"
                                style="visibility: visible; animation-duration: 0.4s; animation-name: fadeInUp;">
                                Hear from Our Masterclass Alumni
                            </h2>
                        </div>
                    </div>
                </div>


                <div class="row swiper-reverse-margin">
                    <div class="col-md-12">
                        <div class="custom-navigation margB wow fadeInUp" data-wow-duration="0.8s">
                            <div class="swiper-button-next top-next"></div>
                            <div class="swiper-button-prev top-prev"></div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="bs-swiper typ-opp wow fadeInUp" data-wow-duration="0.8s">
                            <div class="swiper our-student">
                                <div class="swiper-wrapper">
                                    
                                    @foreach($masterClassFeedbacks as $masterClassFeedback)
                                    <div class="swiper-slide">
                                        <div class="bs-testimonial master-testmonial text-center position-relative">
                                            <div class="person-img">
                                                @if($masterClassFeedback->user->student && $masterClassFeedback->user->student->profile_image)
                                                <img src="{{$masterClassFeedback->user->student->profile_image }}"
                                                    class="img-fluid" alt="">
                                                    @else
                                                    <img src="{{asset('assets/images/user-profile/upload-photo.png')}}"
                                                    class="img-fluid" alt="">
                                                 @endif   
                                            </div>
                                            <h2 class="bs-para">{{$masterClassFeedback->user->username}}</h2>
                                            <p>{{$masterClassFeedback->description}}
                                            </p>

                                            <div class="quoat-img">
                                                <img src="{{ asset('assets/images/quoat1.png') }}" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    


                                       
                                        </div>
                                    </div>
                                    
                                          
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Modal -->
    <div class="bs-modal typ-applied modal fade" id="myModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="background-color: transparent; border: none;">
                <div class="modal-body d-flex justify-content-center align-items-center">
                    <div class="nav-content">
                        <video id="myPlayerID" class="video-js" controls="" preload="auto" width="640"
                            height="450" data-setup="{}">
                            <source src="https://www.youtube.com/watch?v=48POqJsCC2M" type="video/mp4" />
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <!-- <style>
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            /* semi-transparent white background */
            z-index: 9999;
            /* ensure it's on top of everything */
            display: none;
            /* Initially hidden */
        }

        .spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            border: 3px solid #ccc;
            border-top-color: #333;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>

    <div id="loading-overlay">
        <div class="spinner"></div>
    </div> -->

    <!-- Button trigger modal -->


    <!-- <div class="overflow-hidden" data-bs-toggle="modal" data-bs-target="#Financial-popup">
                                                                                              <div class="row mt-4">
                                                                                               <div class="col-md-12 text-center">
                                                                                                <a class="btn bs-btn typ-cta  wow fadeInUp" data-wow-duration="1.2s">View More <span
                                                                                                  class="icon icon-down-arrow"></span></a>
                                                                                               </div>
                                                                                              </div>
                                                                                             </div> -->


    <div class="bs-modal typ-financial-popup modal fade " id="Financial-popup" tabindex="-1"
        aria-labelledby="filterAppliedLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-hd d-flex justify-content-between">
                        <img src="assets/images/popup-logo.png" class="img-fluid" alt="">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            <span class="icon icon-close"></span>
                        </button>
                    </div>
                    <div class="model-content-custoum">
                        <div class="row text-center">
                            <div class="col-md-12">
                                <div class="heading-wrapper typ-center mob-50">
                                    <h2 class="bs-heading typ-big-heading" data-wow-duration="0.6s">
                                        ₹ 2,000 <span>full access</span>
                                    </h2>
                                    <p class="bs-para typ24">
                                        Excel-Based Audit and Forensic Data Analysis
                                    </p>
                                    <p class="bs-para typ18">
                                        Comprehensive Training in Financial Analysis
                                    </p>
                                    <div class="row">
                                        <div class="col-md-12 text-center">
                                            <a href="{{ route('masterClassProceedpayment', $master_class->id) }}"
                                                class="btn bs-btn typ-cta typ-buy">BUY NOW</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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



    <!-- <div class="overflow-hidden" data-bs-toggle="modal" data-bs-target="#payment-success-popup">
                                                                                              <div class="row mt-4">
                                                                                               <div class="col-md-12 text-center">
                                                                                                <a class="btn bs-btn typ-cta  wow fadeInUp" data-wow-duration="1.2s">View More <span
                                                                                                  class="icon icon-down-arrow"></span></a>
                                                                                               </div>
                                                                                              </div>
                                                                                             </div> -->


    <div class="bs-modal typ-payment-success-popup modal fade " id="payment-success-popup" tabindex="-1"
        aria-labelledby="filterAppliedLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-hd text-center">
                        <div class="icon-box ">
                            <!-- <span class="pulse1 icon icon-green-check"><span class="path1"></span><span
                                                                                                     class="path2"></span><span class="path3"></span><span class="path4"></span></span> -->
                            <span class="pulse1 icon icon-gwcheck"></span>
                        </div>
                        <p class="bs-para">Payment Success!</p>
                    </div>
                    <div class="model-content-custoum">
                        <div class="row" id="payment-response">
                            <div class="col-12 ">
                                <div class="box d-flex justify-content-between">
                                    <p class="grey">References Number</p>
                                    <p class="black">000085752257</p>
                                </div>
                                <div class="box d-flex justify-content-between">
                                    <p class="grey">Date</p>
                                    <p class="black">Mar 22, 2023</p>
                                </div>
                                <div class="box d-flex justify-content-between">
                                    <p class="grey">Time</p>
                                    <p class="black">07:80 AM</p>
                                </div>
                                <div class="box d-flex justify-content-between">
                                    <p class="grey">Payment Method</p>
                                    <p class="black">Credit Card</p>
                                </div>

                                <div class="box d-flex justify-content-between final">
                                    <p class="black">Amount</p>
                                    <p class="black final-ammount bs-para typ16">RS.2,00,000</p>
                                </div>
                            </div>
                        </div>

                        <div class="btn-box">
                            <div class="row">
                                <div class="col-12">
                                    <a href="{{ route('downloadReceipt', $master_class->id) }}"
                                        class="bs-btn typ-pdf"><span class="icon icon-pdf-nw"></span>Get
                                        PDF
                                        Receipt</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <a href="{{ route('masterClassPlayVideo', $master_class->id) }}"
                                        class="bs-btn typ-pdf typ-pdf-bg mb-0">Start Learning</a>
                                </div>
                            </div>
                        </div>
                    </div>

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








   

    <script>
       




        document.addEventListener('DOMContentLoaded', function () {
    var videoWrapper = document.querySelector('.video-wrapper');
    var video = videoWrapper.querySelector('.video-bg');

    videoWrapper.addEventListener('click', function () {
        if (video.paused) {
            video.play();
            videoWrapper.classList.add('playing');
            $('#video_play_icon').hide();
        } else {
            video.pause();
            videoWrapper.classList.remove('playing');
            $('#video_play_icon').show();

        }
    });
});
    </script>

    <script>
        const currentDate = new Date();

        const formattedDate = currentDate.toLocaleString('en-US', {
            month: 'long',
            day: 'numeric',
            year: 'numeric'
        });

        const formattedTime = currentDate.toLocaleString('en-US', {
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        });

        document.getElementById('open-payment-btn').addEventListener('click', function() {

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

            var amount={{ $master_class->discouted_price }} * 100;

            var options = {
                key: '{{ env('RAZORPAY_KEY') }}',
                amount: amount,
                currency: 'INR',
                name: 'Unocue',
                description: 'Payment for master class',
                image: 'https://unocuepro.com/unocue-backend/public/assets/images/logo.svg',
                handler: function(response) {
                    // console.log("Payment response is >>", response);

                    var paymentData = {
                        razorpay_payment_id: response.razorpay_payment_id,
                        product_type: "MASTER_CLASS",
                        product_id: '{{ $master_class->id }}'
                    };
                    showLoadingScreen();
                    fetch("{{route('payment.store')}}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-Token': token
                        },
                        body: JSON.stringify(paymentData),
                    }).then(async (response) => {

                        const data = await response.json();
                        // console.log("Razorpay data is >>>", data);
                        var date = new Date(data.data.created_at);
                        var formattedDate = date.toLocaleString('en-US', {
                            month: 'long',
                            day: 'numeric',
                            year: 'numeric'
                        });

                        var formattedTime = date.toLocaleString('en-US', {
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: true
                        });

                        document.getElementById('payment-response').innerHTML = `
                            <div class="col-12 ">
                                <div class="box d-flex justify-content-between">
                                    <p class="grey">References Number</p>
                                    <p class="black">${data.data.payment_id}</p>
                                </div>
                                <div class="box d-flex justify-content-between">
                                    <p class="grey">Date</p>
                                    <p class="black">${formattedDate}</p>
                                </div>
                                <div class="box d-flex justify-content-between">
                                    <p class="grey">Time</p>
                                    <p class="black">${formattedTime}</p>
                                </div>
                                <div class="box d-flex justify-content-between">
                                    <p class="grey">Payment Method</p>
                                    <p class="black">${data.data.payment_method}</p>
                                </div>

                                <div class="box d-flex justify-content-between final">
                                    <p class="black">Amount</p>
                                    <p class="black final-ammount bs-para typ16">${data.data.payment_amount}</p>
                                </div>
                            </div>
                            `;
                        if (data.status === 200) {

                            hideLoadingScreen();
                        }

                        // console.log(data);
                    }).catch(function(error) {
                        console.error(error);
                    });
                },
                prefill: {
                    name: '{{ Auth::user() ? Auth::user()->username : '' }}',
                    email: '{{ Auth::user() ? Auth::user()->email : '' }}',
                },
                notes: {
                    productType: "MASTER_CLASS"
                }
            };
            var rzp = new Razorpay(options);
            rzp.open();


        });


        function showLoadingScreen() {
            document.getElementById('loading-overlay').style.display = 'block';
        }

        function hideLoadingScreen() {
            document.getElementById('loading-overlay').style.display = 'none';
            $('#payment-success-popup').modal('show');

        }

        function toggleValue() {
            var id = ;
            $.ajax({
                url: "{{ route('masterClass.save') }}", // Route to update the value
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "value": id
                },
                success: function(response) {
                    // console.log("response is >>>", response);

                    var toaster=document.getElementById("masterSuccess");
                    toaster.className="bs-toast";

                    var message=document.getElementById("master-message");
                    if(response.saved==true){
                    message.innerText="Saved Masterclass"; 

                
                    var unsaveButton=document.getElementById("save-button");
                    unsaveButton.className="icon setbg-icon active m-3 mt-0 mb-0";

                    }else{
                        message.innerText="Unsaved Masterclass"; 
                       

                  var unsaveButton=document.getElementById("save-button");
                  unsaveButton.className="icon setbg-icon m-3 mt-0 mb-0";

               
                    }

                    setTimeout(function() {
                          toaster.className = "bs-toast d-none";
                      }, 5000);

                    // location.reload();
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }
    </script>
@endsection