@extends('frontend.layouts.main')

@section('content')

<main class="home ">
        <!-- Banner section -->
        <section class="bs-banner typ-course">
            <div class="container">
                <div class="row align-item-center">
                    <div class="col-md-7 align-self-center">
                        <div class="content-wrapper">
                            <h2 class="title typ-white typ-fnt40 mrgB10 wow fadeInUp" data-wow-duration="0.4s">
                                {{$cource->title}}
                            </h2>
                            <h3 class="para typ-fnt18 fnt-bold mrgB12 wow fadeInUp" data-wow-duration="0.6s">Description
                            </h3>
                            <div class="para typ-white fnt-light line-height140 typ-fnt18 mb-0 wow cource-bannerPara fadeInUp"
                                data-wow-duration="0.8s">{!! $cource->description !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="banner-stacks-section">
                            <h4 class="heading">Skills you will learn and practice:</h4>
                            <div class="stacks-section">
                                <div class="row">
                                    @foreach($skills as $skill)
                                    <div class="col-xxl-4 col-6">
                                        <span class="stacks">{{$skill}}</span>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="investment-banking">
                                <div class="price">
                                    <span class="title">{{$cource->title}}</span>
                                    @if($cource->discouned_amount == "")
                                    <div class="price-section"> 
                                    <span class="themecolor"><span
                                                class="ruppes">₹</span> {{$cource->amount}}</span>
                                    </div>
                                    <input type="hidden" id="paymentAmount" value="{{$cource->amount}}">
                                    @else
                                    <div class="price-section"> 
                                        <span class="grey">₹ {{$cource->amount}}</span><span class="themecolor"><span
                                                class="ruppes">₹</span> {{$cource->discouned_amount}}</span>
                                    </div>
                                    <input type="hidden" id="paymentAmount" value="{{$cource->discouned_amount}}">
                                    @endif

                                </div>
                                @if(auth()->check())
                                @if($registration)
                                <div class="buy-course"> 
                                <a href="#" class="saveBtn"><span class="icon icon-save-fill"></span></a>
                                    <span class="apply-btn bs-btn typ-green-arrow flex-grow-1" data-bs-toggle="modal">Already Purchased </span>
                                </div>
                                @else
                                @if($saveedCource)
                                <div class="buy-course">
                                    <a href="#" class="saveBtn active" onclick="saveCource()"><span class="icon icon-save-fill"></span></a>
                                    <a href="#" class="apply-btn bs-btn typ-apply-arrow flex-grow-1" data-bs-toggle="modal"  data-bs-target="#Financial-popup">Buy this Course</a>
                                </div>
                                @else
                                <div class="buy-course">
                                    <a href="#" class="saveBtn" onclick="saveCource()"><span class="icon icon-save-fill"></span></a>
                                    <a href="#" class="apply-btn bs-btn typ-apply-arrow flex-grow-1" data-bs-toggle="modal"  data-bs-target="#Financial-popup">Buy this Course</a>
                                </div>
                                @endif
                                @endif
                                @else
                                <div class="buy-course ">
                                    <a href="{{route('signin')}}" class="saveBtn"><span class="icon icon-save-fill"></span></a>
                                    <a href="{{route('signin')}}" class="apply-btn bs-btn typ-apply-arrow flex-grow-1">Buy this Course</a>
                                </div>
                                @endif
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Banner section -->

        <!-- course-details -->
        <section class="mod-course-details">
            <div class="container container-maxwidth">
                <div class="row">
                    <div class="col-md-3 icon-layout">
                        <div class="icon-details">
                            <div class="icon-section">
                                <span class="icon icon-calender1"></span>
                            </div>
                            <div class="text-details">
                                <h5 class="hd">Start Date</h5>
                                <p class="date">{{date('M d,Y', strtotime($cource->start_date))}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 icon-layout">
                        <div class="icon-details">
                            <div class="icon-section">
                                <span class="icon icon-calender1"></span>
                            </div>
                            <div class="text-details">
                                <h5 class="hd">End Date</h5>
                                <p class="date">{{date('M d,Y', strtotime($cource->end_date))}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 icon-layout">
                        <div class="icon-details">
                            <div class="icon-section">
                                <span class="icon icon-mode"></span>
                            </div>
                            @if($cource->is_online == 1)
                            <div class="text-details">
                                <h5 class="hd">Mode</h5>
                                <p class="date">Online</p>
                            </div>
                            @else
                            <div class="text-details">
                                <h5 class="hd">Mode</h5>
                                <p class="date">Classroom training</p>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-3 icon-layout">
                        <div class="icon-details">
                            <div class="icon-section">
                                <span class="icon icon-map-icon"></span>
                            </div>
                            <div class="text-details">
                                <h5 class="hd">Location</h5>
                                <p class="date">{{$cource->city_name}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- course-details end-->

        <!-- foundation-level -->
        <section class="lyt-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7 col-md-6">
                        <!-- <div class="bs-list-details typ-para typ-course">
                            <h5 class="title fnt18">Foundation Level</h5>
                            <p class="para fnt16 fntlight mb-0">Our leading edge curriculum covers fundamentals and more
                                complex data science and analytics concepts.</p>
                        </div> -->
                        <div class="bs-list-details bs-faq typ-course">
                            <div class="accordion" id="accordionExample">
                                @foreach($topics as $key => $topic) 
                                <div class="accordion-item wow fadeInUp" data-wow-duration="0.6s">
                                    <h2 class="accordion-header" id="faqTwo{{$key}}">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseTwo{{$key}}" aria-expanded="true"
                                            aria-controls="collapseTwo{{$key}}">
                                            {{$topic->title}}
                                        </button>
                                    </h2>
                                    <div id="collapseTwo{{$key}}" class="accordion-collapse collapse " aria-labelledby="faqTwo{{$key}}"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                        {!! $topic->description !!}
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                      
                    </div>
                    <div class="col-lg-5 col-md-6">
                        <div class="bs-list-details typ-form">
                            <h5 class="title fnt18">Have question? Contact us</h5>
                            <form class="row bs-form typ-course-form" id="contactEvent" method="post" role="form">
                                @csrf
                                <div class="col-md-12 mrgB18">
                                    <div class="form-field">
                                        <label for="name" class="form-label">Full Name*</label>
                                        <input type="text" class="form-control" name="name" id="name"
                                            placeholder="Full Name">
                                    </div>
                                    <div id="nameerr"></div>
                                </div>
                                <div class="col-md-12 mrgB18">
                                    <div class="form-field">
                                        <label for="email" class="form-label">Official Email
                                            ID*</label>
                                        <input type="text" class="form-control" name="email" id="email"
                                            placeholder="Email ID">
                                    </div>
                                    <div id="emailerr"></div>
                                </div>
                                <div class="col-md-12 mrgB18">
                                    <div class="form-field">
                                        <label for="phone" class="form-label">Mobile No.</label>
                                        <input id="phone" type="tel" name="phone" class="w-100 phoneInput"
                                            placeholder="Phone No*" />
                                        <input type="hidden" name="countrycode" id="countrycode" value="91" class="">
                                    </div>
                                    <div id="phoneerr"></div>
                                </div>

                                <div class="col-md-12 mrgB18">
                                    <div class="form-field">
                                        <label for="name" class="form-label">Location*</label>
                                        <input type="text" class="form-control" name="location" id="location"
                                            placeholder="location">
                                    </div>
                                </div>

                                <div class="col-md-12 mrgB18">
                                    <div class="form-field">
                                        <label for="name" class="form-label">Qualification*</label>
                                        <input type="text" class="form-control" name="qualification" id="qualification"
                                            placeholder="qualification">
                                    </div>
                                </div>

                                <div class="col-md-12 mrgB18">
                                    <div class="form-field">
                                        <div class="form-check padd-rmv">
                                           <div class="g-recaptcha" data-sitekey="6LfW-topAAAAAJGkoONWNKwrWieBet591B0100gE"></div>
                                            <div id="recaptchaErrorCources"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12 mrgB18">
                                    <div class="form-field">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="agree" id="agree"
                                                >
                                            <label class="form-check-label" for="terms">
                                                I accept the Terms & Conditions
                                            </label>
                                        </div>
                                        <div id="termserr"></div>
                                    </div>
                                </div>
                                <div class="col-md-12 mrgB18">
                                    <div class="form-field">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="whatsApp" id="whatsApp"
                                                >
                                            <label class="form-check-label" for="whatsApp">
                                                I agree to get program-related info on WhatsApp & SMS
                                            </label>
                                        </div>
                                        <div id="whatsApperr"></div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <button type="submit" id="submitButtonCources" class="btn bs-btn w-100 typ-theme-form">Submit Your Details</button>
                                </div>
                            </form>
                            <div id="thankyouevent" class="alert alert-info mt-3" role="alert"
                                        style="display: none; background-color: #DFF0D8; border: 2px solid #D6E9C6;">
                                        Thank you! We will get back to you soon
                                    </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- foundation-level end-->

        <!-- Job Simulations -->
        <section class="lyt-section dot-bg typ-work">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="heading-wrapper mb-0 typ-center">
                            <h2 class="bs-heading mrgB0 mob-mrgB20 wow fadeInUp" data-wow-duration="0.4s">
                                Our Alumni Work At
                            </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 atwork-next"></div>
                            <div class="swiper-button-prev atwork-prev"></div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="bs-swiper typ-logo wow fadeInUp" data-wow-duration="0.8s">
                            <div class="swiper atwork">
                                <div class="swiper-wrapper">
                                    @foreach($aluminis as $alumin)
                                    <div class="swiper-slide">
                                        <div class="logo-section">
                                            <img class="img-fluid" src="{{$alumin->logo}}"
                                                alt="deloitte">
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Job Simulations end -->
        <!-- How Will You Benefit? -->
        <section class="lyt-section typ-benifit">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="headingInter wow fadeInUp" data-wow-duration="0.4s">
                            How Will You Benefit?
                        </h2>
                    </div>
                </div>
                <div class="row custom-gap">
                    <div class="col-md-4">
                        <div class="benifit-wrapper wow fadeInUp" data-wow-duration="0.6s">
                            <div class="number typ-purple">
                                <span class="">01</span>
                            </div>
                            <h5>Enhanced Career Opportunities: </h5>
                            <p>Expand your job prospects and access lucrative roles in investment banking, finance, and
                                related fields.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="benifit-wrapper wow fadeInUp" data-wow-duration="0.7s">
                            <div class="number typ-orange">
                                <span class="">02</span>
                            </div>
                            <h5>Advanced Skills Development: </h5>
                            <p>Acquire in-demand skills such as financial modeling, valuation, and M&A analysis,
                                increasing your market value.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="benifit-wrapper wow fadeInUp" data-wow-duration="0.8s">
                            <div class="number typ-purple1">
                                <span class="">03</span>
                            </div>
                            <h5>Industry Insights: </h5>
                            <p>Learn from experienced professionals and industry experts, gaining valuable insights into
                                the latest trends and best practices.

                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="benifit-wrapper wow fadeInUp" data-wow-duration="0.9s">
                            <div class="number typ-yellow">
                                <span class="">04</span>
                            </div>
                            <h5>Practical Experience: </h5>
                            <p>Gain hands-on experience through real-world case studies and simulations, preparing you
                                for the challenges of the industry.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="benifit-wrapper wow fadeInUp" data-wow-duration="1s">
                            <div class="number typ-purple-dark">
                                <span class="">05</span>
                            </div>
                            <h5>Professional Growth: </h5>
                            <p>Propel your career forward with comprehensive knowledge, practical expertise, and a
                                competitive edge in the competitive finance industry.</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="benifit-wrapper wow fadeInUp" data-wow-duration="1.1s">
                            <div class="number typ-sucess">
                                <span class="">06</span>
                            </div>
                            <h5>Professional Growth: </h5>
                            <p>Propel your career forward with comprehensive knowledge, practical expertise, and a
                                competitive edge in the competitive finance industry.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- How Will You Benefit? end -->

        <section class="lyt-section typ-video padding72">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-lg-6 col-md-6 wow fadeInUp" data-wow-duration="0.2s">
                        <a href="{{$cource->intro_video}}" class="bs-thumbnil-video video-wrapper popup-youtube typ-mob-mrgB">
                            @if($cource->video_thumbnail_image)
                        <img class="video-bg  img-fluid w-100" src="{{$cource->video_thumbnail_image}}" alt="video-bg">
                        @else
                            <img class="video-bg  img-fluid w-100" src="{{ env('APP_URL') }}assets/images/vwep/video-bg.jpg" alt="video-bg">
                            @endif
                            <div class="icon-section">
                                <span class="border-stroke">
                                    <span class="icon icon-play"></span>
                                </span>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-5 col-md-6 align-self-center">
                        <div class="video-details ">
                            <h4 class="bs-heading typ-white mb-0 wow fadeInUp" data-wow-duration="0.2s">{{$cource->title}}</h4>
                            <p class="bs-para typ-white mrgB12 wow fadeInUp" data-wow-duration="0.4s">Unlocking Opportunities in {{$cource->title}}</p>
                            <p class="bs-para typ-white font-med letterSpace wow fadeInUp" data-wow-duration="0.6s">Instructor- {{$instructorsNames}}</p>
                            <p class="bs-para typ-white font-med letterSpace wow fadeInUp" data-wow-duration="0.6s">
                            {{ date('F j', strtotime($cource->start_date)) }} - {{ date('F j, Y', strtotime($cource->end_date)) }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Hear from our Students -->
        <section class="lyt-section typ-our-student dot-bg">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="heading-wrapper typ-center mob-mrgB20">
							<h2 class="bs-heading wow fadeInUp" data-wow-duration="0.4s">
								Hear from our Students
							</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">
									<div class="swiper-slide">
										<div class="bs-testimonial text-center position-relative">
											<div class="person-img">
												<img src="{{ env('APP_URL') }}assets/images/masterclass/testimonial/testimonial1.png"
													class="img-fluid" alt="">
											</div>
											<h2 class="bs-para">Shakshi Kankaria</h2>
											<p>The masterclass provided invaluable insights and practical skills. The interactive sessions and personalized attention helped me grasp complex concepts easily. Highly recommend!
                                            </p>

											<div class="quoat-img">
												<img src="{{ env('APP_URL') }}assets/images/quoat1.png" alt="">
											</div>
										</div>
									</div>
									<div class="swiper-slide">
										<div class="bs-testimonial text-center position-relative">
											<div class="person-img">
												<img src="{{ env('APP_URL') }}assets/images/masterclass/testimonial/testimonial1.png"
													class="img-fluid" alt="">
											</div>
											<h2 class="bs-para">Shakshi Kankaria</h2>
											<p>I'm impressed with the comprehensive curriculum and supportive instructors. The hands-on approach and networking opportunities have boosted my confidence and prepared me for real-world challenges.</p>

											<div class="quoat-img">
												<img src="{{ env('APP_URL') }}assets/images/quoat1.png" alt="">
											</div>
										</div>
									</div>
									<div class="swiper-slide">
										<div class="bs-testimonial text-center position-relative">
											<div class="person-img">
												<img src="{{ env('APP_URL') }}assets/images/masterclass/testimonial/testimonial1.png"
													class="img-fluid" alt="">
											</div>
											<h2 class="bs-para">Shakshi Kankaria</h2>
											<p>The masterclass provided invaluable insights and practical skills. The
												interactive sessions and personalized attention helped me grasp complex
												concepts easily. Highly recommend!
											</p>

											<div class="quoat-img">
												<img src="{{ env('APP_URL') }}assets/images/quoat1.png" alt="">
											</div>
										</div>
									</div>
									<div class="swiper-slide">
										<div class="bs-testimonial text-center position-relative">
											<div class="person-img">
												<img src="{{ env('APP_URL') }}assets/images/masterclass/testimonial/testimonial1.png"
													class="img-fluid" alt="">
											</div>
											<h2 class="bs-para">Shakshi Kankaria</h2>
											<p>The masterclass provided invaluable insights and practical skills. The
												interactive sessions and personalized attention helped me grasp complex
												concepts easily. Highly recommend!
											</p>

											<div class="quoat-img">
												<img src="{{ env('APP_URL') }}assets/images/quoat1.png" alt="">
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
        <!-- Hear from our Students end -->
        <!-- Certificate of compleation -->
        <section class="lyt-section typ-certificate padding72">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="img-section wow fadeInUp" data-wow-duration="0.2s">
                            <img class="img-fluid" src="{{ env('APP_URL') }}assets/images/courses/certificate.png" alt="certificate">
                        </div>
                    </div>
                    <div class="col-md-6 align-self-center">
                        <div class="certificate-details ">
                            <h4 class="bs-heading typ-white mb-0 wow fadeInUp" data-wow-duration="0.2s">Certificate of compleation</h4>
                            <p class="bs-para typ-white mrgB24 fnt18 wow fadeInUp" data-wow-duration="0.4s">Enhance your expertise and remain industry-relevant by finishing these professional courses, offering certification upon accomplishment, to advance your career trajectory.</p>
                            <!-- <a class="btn bs-btn typ-white padding18 wow fadeInUp" data-wow-duration="0.6s">Apply Now</a> -->
                        </div>
                    </div>
                </div> 
            </div>
        </section>
        <!-- Certificate of compleation end -->

        <!-- Know your Instructor -->
        <section class="lyt-section borderBottom">
			<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.2s">
								Know your Instructor
							</h2>
						</div>
					</div>
				</div>

				<div class="row">
                    @foreach($instructors as $instructor)
					<div class="col-lg-6 cource-card-mrgb">
						<div class="bs-box h-100 wow fadeInUp" data-wow-duration="0.4s">
							<div class="profile">
								<div class="profile-img">
									<img src="{{$instructor->photo}}"
										class="img-fluid" alt="">
								</div>
								<div class="profile-content">
									<p class="bs-para typ24 typ-grey8 typ-semi">{{$instructor->name}}</p>
									<p class="bs-para typ16 typ-grey9 typ-medium">{{$instructor->designation}} </p>
								</div>
							</div>

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

        <!-- faq -->
        @if($faqs->isNotEmpty())
        <section class="lyt-section padding72">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="heading-wrapper typ-center mob-50">
                            <h2 class="bs-heading typ-black wow fadeInUp" data-wow-duration="0.2s">
                                Frequently Asked Questions
                            </h2>
                            <p class="bs-heading typ-subhd typ-link wow fadeInUp" data-wow-duration="0.2s">Still you have any questions? Contact our Team via <a class="" href="mailto:support@unocuepro.com">support@unocuepro.com</a></p>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="bs-faq">
                            <div class="accordion" id="accordionExample">
                                @foreach($faqs as $key => $faq)
                                    <div class="accordion-item wow fadeInUp" data-wow-duration="1.6s">
                                        <h2 class="accordion-header" id="faq{{$key}}">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$key}}" aria-expanded="false" aria-controls="collapse{{$key}}">
                                                {{$faq->question}}
                                            </button>
                                        </h2>
                                        <div id="collapse{{$key}}" class="accordion-collapse collapse" aria-labelledby="faq{{$key}}" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                <p class="text-para">{!! $faq->answer !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif

<!-- faq end -->
@if($relatedCources->isNotEmpty())
<div class="lyt-section typ-job  typ-masterclass typ-opportunities bg-theme typ-similar">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="heading-wrapper typ-center">
            <h2 class="bs-heading max-tab-margB0 typ-white wow fadeInUp" data-wow-duration="1.0s">
                Browse Similar Courses
            </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="1.3s">
            <div class="swiper-button-next opportunities-next"></div>
            <div class="swiper-button-prev opportunities-prev"></div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="bs-swiper typ-opportunities-swiper  wow fadeInUp" data-wow-duration="1.4s">
            <div class="swiper opportunities">
              <div class="swiper-wrapper">
                @foreach($relatedCources as $relatedCource)
                <div class="swiper-slide">
                    <a href="{{ route('cource.detail',[$relatedCource->slug])}}">
                  <div class="bs-card h-100">
                    <div class="typ-job typ-rating typ-opportunities">
                      <div class="img-area">
                        <img class="img-fluid" src="{{$relatedCource->banner_image}}" alt="job">
                        <span class="label">{{$relatedCource->category_name}}</span>
                      </div>
                      <div class="card-text">
                        <div class="date-time">
                          <div class="date">
                            <span class="icon icon-calender"></span>
                            <span class="date-range">{{ date('F j', strtotime($relatedCource->start_date)) }} - {{ date('F j, Y', strtotime($relatedCource->end_date)) }}</span>
                          </div>
                          <div class="days">
                            <span class="days-pending">{{$relatedCource->remaining_days}} Left</span>
                            <span class="icon icon-time-filter"></span>
                          </div>
                        </div>
                        <h3 class="title">{{$relatedCource->title}}</h3>
                        @if($relatedCource->is_online == 1)
                                            <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="{{ env('APP_URL') }}assets/images/zoom.svg" alt="zoom">
                                                </div>
                                            </div>
                                            @else
                                            <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">{{$relatedCource->city_name}}</span>
                                                </div>
                                            </div>
                                            @endif
                      </div>
                      <div class="card-footer">
                        <div class="price-rating-section">
                          <div class="price">
                            <span class="orange">₹ {{$relatedCource->amount}}</span>
                            <span class="grey">₹ 699</span>
                          </div>
                          <div class="review">
                            <div class="bs-stars">
                              <span class="count">3.5</span>
                              <ul class="rate">
                               <li><span class="icon-star-fill"></span></li>
                               <li><span class="icon-star-fill"></span></li>
                               <li><span class="icon-star-fill"></span></li>
                               <li><span class="icon-star-half"></span></li>
                               <li><span class="icon-star-blank"></span></li>
                              </ul>
                          </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
</a>
                </div>
                @endforeach
              </div>              
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 text-center">
          <a href="{{route('cource.listing')}}" class="btn bs-btn typ-white typ-black-text wow fadeInUp" data-wow-duration="1.6s">Explore More <span class="icon icon-right-arrow"></span></a>
        </div>
      </div>
    </div>
  </div>  
  @endif
    </main>

    <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="{{env('APP_URL')}}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">
                            @if($cource->discouned_amount == "")
                                <h2 class="bs-heading typ-big-heading" data-wow-duration="0.6s">
                                    ₹ {{$cource->amount}} <span>full access</span>
                                </h2>
                                @else
                                <h2 class="bs-heading typ-big-heading" data-wow-duration="0.6s">
                                    ₹ {{$cource->discouned_amount}} <span>full access</span>
                                </h2>
                                @endif
                                <h2 class="bs-heading typ-white mrgB19">
                                {{$cource->title}}
                                </h2>
                                <p class="bs-para typ18">
                                    Comprehensive Training in {{$cource->title}}
                                </p>
                                <div class="row">
                                    <div class="col-md-12 text-center">
                                        <a class="btn bs-btn typ-cta typ-buy" id="buyCource">BUY NOW</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>


    
		document.getElementById('buyCource').addEventListener('click', function() {
            // alert("vsd");

				const token='{{csrf_token()}}'
                const paymentAmount = document.getElementById('paymentAmount').value;
                console.log("paymentAmount>>",paymentAmount);
                const amountInPaisa = (paymentAmount * 100).toFixed(2);
                console.log(amountInPaisa);

			var options = {
                key: '{{ env('RAZORPAY_KEY') }}',
                amount: amountInPaisa, 
                currency: 'INR',
                name: 'Unocue',
                description: 'Payment for cource',
                image: '{{ asset('assets/images/logo.svg') }}',
                handler: function(response) {

					var paymentData = {
					 razorpay_payment_id: response.razorpay_payment_id,
                      product_type: "COURSE",
					  product_id:'{{$cource->id}}'
                    };
					showLoadingScreen();
                    fetch('https://unocuepro.com/unocue-backend/public/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();

						if(data.status===200){
							// hideLoadingScreen();
                            window.location.href = "https://unocuepro.com/unocue-backend/public/cource-succes/{{$cource->id}}";
						}

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

 
});


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


            function saveCource() {
                var courceID = {{$cource->id}};
                console.log("courceID>>>",courceID);
                const token='{{csrf_token()}}';
                $.ajax({
                    url: "{{ route('cource.save') }}",
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': token
                    },
                    data: { courceID: courceID },
                    success: function (response) {
                        if (response.status == 200) {
                            $('.saveBtn').toggleClass('active');
                        } else {
                            console.log('Failed to save course.');
                        }
                    },
                    error: function (error) {
                        console.error('AJAX error:', error);
                    }
                });
            }


	</script>
@endsection