@extends('layouts.app')
@section('content')

@include('layouts.partial.menuHome')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />


<!-- HERO ================================================== -->
<style type="text/css">
.dkbtn{
    z-index: 9;
}
    @media screen and(min-width: 568px) {
        .h2_font{
    font-size: 39px;
   }
}
   @media screen and  (max-width: 568px){
    .h2_font{
    font-size: 30px;
   }
}
   /* @media only screen and (max-width:767px) {

   } */
   
    .select2-container .select2-selection--single {
    height: 48px;
    border: 0 !important;
}

.course_title_heading{
    max-height: 56px;
    overflow-y: hidden;
}
/* .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 60px;
} */
    /* .popular_course{
        background-image: url('img/Sprinkle.svg');
    background-size: contain;
    background-position: center;
    } */

    /* .card.border.p-6.lift-md.testimonials123 {
    background: #f2eeff;
    position: relative;
    z-index: 99;
    background-image: url('img/Sprinkle.svg');
    background-size: contain;
    background-position: center;
}
.testimonials123:after{
    content: '';
    box-shadow: 1px 1px 1px 1px #2c1975;
    width: 2%;
    height: 100%;
position: absolute;
background-color: #2c1975;

top: 0;
right: 0;
z-index: -1;

}
.testimonials123:hover:after{
    width: 100%;
    transition: .5s ease-in-out;
    color: white;
}
.testimonials123:hover .card-footer .dots,.testimonials123:hover .media-body, .testimonials123:hover .media-body h5,.testimonials123:hover .review-box button {
    color: white!important;
}
.review-box button{
    padding: 5px;
    border-radius: 4px;
    color: #2c1975;
    font-weight: 600;
    background-color: transparent;
} */
    /* .box-all {
    padding: 15px 40px;
    background-color: white;
}
.box-all img {
    width: 70px;
} */
    .total_heading{
        background: #f2eeff;
    color: black;
    border-radius: 38px;
    margin-bottom: 30px;
    }



 /* .counter_sets .col-md-4:hover {
    box-shadow: 2px 2px 5px 1px #8268e4;
} */

/* .counter_sets .col-md-4:hover~.col-md-4{
    border: 0px!important;
    border-right: 0px;
    border-left: 0px;
} */
    .cert_solutions_forms {
        /* background-image: url('img/books_elements-remove.png'); */
        /* background-image: url('http://174.138.76.229/hrcenteral/demo1/assets/images/background.png'); */
        
        background-image: url('img/Wave1.2.svg'); 

        background-position: center;
        background-repeat: no-repeat;
        background: 0.5s;
        background-attachment: fixed;
        background-size: cover;
        background-blend-mode: difference;
        background-position: right;
    }
    .fs_30{
font-size: 30px;
    }

    .fs_22 {
        font-size: 22px;
    }

    .owl-nav {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .owl-carousel .owl-dots.disabled,
    .owl-carousel .owl-nav.disabled {
        display: none;
    }

    .owl-carousel .owl-nav {
        display: block !important;
    }

    .fs_18 {
        font-size: 18px;
    }

    .fw_600 {
        font-weight: 600;
    }

    .fs_14 {
        font-size: 14px;
    }

    .bg_primary_2 {
        background-color: #f2eeff;
    }

    .popular_Courses {
        width: 100%;
        height: 136px;
    }

    .popular_Courses img {
        width: 100%;
        height: 100%;
    }

  .card-zoom img{
    height: 140px;
  }




    .cert_solutions_forms .form-select {
        display: flex;
        width: 100%;
        padding: 0.5rem 3.75rem 0.5rem 1.25rem;
    }

    .cards_icon {
        position: relative;
        border-radius: 8px;
        text-align: center;
        padding: 16px 47px !important;
    }

    .cards_icon .icon {
        text-align: center;
        display: inline-block;
        padding: 5px 15px;
        background: #44318d;
        border-radius: 9px;
        box-shadow: 0px 1px 0px 0px;
        top: -24px;
        transform: translateX(0px);
        margin-bottom: 3px;
    }

    .fs_12 {
        font-size: 12px;
    }

    .cert_solutions_forms i {
        color: white;
    }

    .bg_yellow {
        background: #fea942;
    }

    .certzip-bttn {
        background-color: #44318d !important;
        border: 1px solid #ffa941 !important;
        color: #fff !important;
        padding: 10px;
    }
    .display-2 {
        display: block !important;
    }

    /*#cat-courses{height:fit-content!important;*/
    .get-trained a.nav-link {
        border: 1px solid #44318d;
        border-radius: 27px;
        margin: 10px;
        font-size: 14px;
        color: #000;
        cursor: pointer;
    }

 

    .get-trained a.nav-link.active,
    .get-trained a.nav-link:hover {
        background-color: #5100a5;
        color: #fff;
    }

    /* input[type=search] {
        color: #fff !important;
    } */

    @media(max-width: 767px) {
        .get-trained li.nav-item {
            /* display: block; */
            width: 100%;
        }
.card-zoom img{
    height: 110px;
  }
    }
    .fs_32{
font-size: 37px!important;
    } .fw_600{
        font-weight: 600!important;
    }
    .fs_20{
        font-size: 20px;
    }
    @media screen and (max-width: 568px){
    /* .pb_42{
        padding-bottom: 70px!important;
    } */
    .fs_32{
font-size: 25px!important;
    }
    .fs_20{
        font-size: 15px;
    }
}
</style>
<section class="mt-n12 " id="slider-view12">
    <div class="flickity-page-dots-vertical flickity-page-dots-md flickity-page-dots-white position-static"
        data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "center", "wrapAround": true, "freeScroll": true, "autoPlay": true,  "imagesLoaded": true}'>
        <div class="w-100">
            <div class="bg-cover position-relative overlay overlay-custom mobbanner"
                style="background-image: url({{ url('img/Untitled-5.png') }}) ">
                <div class="container position-static pt-9 pt-md-12 pb-8 py-lg-0">
                    <div class="mx-lg-n5">
                        <div class=" row gx-0 mx-auto">
                            <div class="col-12 col-md-12 col-lg-12 order-md-1 banner-title1 px-md-5 mx-md-5 px-0 mx-0 text-center">
                                <!-- Heading -->
                                <h2 class="display-2 text-white mb-6 aos-init aos-animate h2_font fs_32 fw_600" data-aos="fade-left" data-aos-duration="150">
                                    GET CERTIFIED, STAY AHEAD <br>
                                </h2>
                                <span class="display-1 text-white fs_20">Transforming Organizations and Individuals Worldwide</span>
                                <div class="d-flex justify-content-center mb-5 mt-5 pb_42 pb-5">
                                    <a href="{{ route('top-courses') }}" class="btn btn-blue dkbtn nav-link p-2 text-white text-center">
                                        Explore In-Demand Courses
                                    </a>
                                </div>
                                <!-- Text -->

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-100">
            <div class=" bg-cover position-relative overlay overlay-custom mobbanner"
                style="background-image: url({{ url('img/Untitled-4.png') }})">
                <div class="container position-static pt-9 pt-md-12 pb-8 py-lg-0">
                    <div class="mx-lg-n5">
                        <div class="row gx-0 mx-auto">
                            <div class="col-12 col-md-12 col-lg-12 order-md-1 banner-title1 text-center px-md-5 mx-md-5 px-0 mx-0">
                                <!-- Heading -->
                                <h2 class="display-2 text-white mb-6 aos-init aos-animate h2_font fs_32 fw_600" data-aos="fade-left" data-aos-duration="150" style="display: block!important;">
                                    Choose the Right Course to Build Your Future<br>
                                </h2>
                                <span class="display-1 text-white fs_20">Over 200+ Courses to expand your knowledge</span>
                                <div class="d-flex justify-content-center  mb-5 mt-5 pb-5">
                                    <a href="{{ route('top-courses') }}" class="btn btn-blue dkbtn nav-link p-2 text-white text-center">
                                        Explore In-Demand Courses
                                    </a>
                                </div>
                                <!-- Text -->

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

    </div>
</section>

<section class="btn-blue border-top border-bottom get-trained">
    <h3 class="text-center text-white pt-3" style="font-size: 14px; padding: 0px 20px;">Empowering Organizations and Individuals Globally</h3>
</section>
<section class="py-9 py-md-5 border-top border-bottom get-trained">
    <div class="container">
        <div class="text-center mb-5 mb-md-8">
            <h1 class="mb-1 certzip-heading-color">FIND THE RIGHT COURSE FOR YOUR GOAL</h1>
            <p class="font-size-lg text-capitalize">EXPLORE FROM OVER 100 + COURSES</p>
        </div>

        <div class="tabs_forcourses">
            <div class="d-flex align-items-center ">
              <ul class="nav nav-pills mb-5" id="pills-tab" role="tablist">
                @foreach($mnu as $m)
                <li class="nav-item" role="presentation">
                  <button class="nav-link searchby-cat filderdk" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#{{$m->id}}" type="button" role="tab" aria-controls="{{$m->id}}" aria-selected="true">{{$m->name}}</button>
                </li>
                 @endforeach
              </ul>
            </div>
            <div class="tab-content mt-5" id="pills-tabContent">
              <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                <div class="contain">
                    <div id="dktabs" ></div>
                  <div  class="owl-carousel owl-course_1" id="check">
                

                @php $allcourses = getAllCourses(0); @endphp
                @if(count($allcourses))
                @foreach($allcourses as $courses)
                @php
                    $coursename = $courses->name;
                    $coursestring = str_replace(' ', '-', $coursename);
                @endphp
                <a href="{{ route('courseDetail',$courses->slug) }}">
                    <div class="item"  >
                      <!-- itmes -->
                      <div class="courses_tabs_design_box ">
                        <div class="popular_Courses">
                          <img src="{{url('/uploads/course').'/'.$courses->image}}" alt="">
                          </div>
                         <div class="card p-2">
                            <div class="fs_18 fw_600 course_title_heading">{{$courses->name}}</div>
                            <div class="fs_14">Reviews</div>
                        @if($courses->rating!=null)   @endif
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="rating full-star-row">
                                <div class="empty-star">
                                <span class="far fa-star"></span>
                                <span class="far fa-star"></span>
                                <span class="far fa-star"></span>
                                <span class="far fa-star"></span>
                                <span class="far fa-star"></span>
                                </div>
                                <div class="overlay-star" style="width:100%;"  ></div>
                                <div class="fill-star">
                                <span class="fas fa-star"></span>
                                <span class="fas fa-star"></span>
                                <span class="fas fa-star"></span>
                                <span class="fas fa-star"></span>
                                <span class="fas fa-star"></span>
                                </div>
                            </div>
                             <div class="font-size-xs data-rating-1 ms-lg-3">
                                    <span>{{number_format((float)$courses->rating, 1, '.', '')}} ({{ $courses->r_count }})</span>
                            </div>
                        </div>
                 
                            <div class="d-flex align-items-center justify-content-between">
                              <div>{{ Config::get('app.currency_icon') }}{{ $courses->price }}</div>
                              <div class="offers">{{ Config::get('app.currency_icon') }}{{ $courses->price_diff }} off</div>
                            </div>
                        </div>
                        </div>
                       <!-- itmes -->
                    </div>
                    </a>
                @endforeach
            @endif

                  </div>
                </div>
                <div class="d-flex gap-3 mb-3">
            
                </div>
              </div>
            </div>
        </div>

        <div class="text-center" style="margin-top: 66px;">
            <a href="{{ route('allCources') }}" class="btn btn_custom btn-outline-primary p-3 px-5 rounded-pill">Explore All Courses</a>
        </div>
    </div>


</section>

<section class="pt-5 pb-9 py-5 bg_primary_2 popular_course">
    <div class="container">
        <div class="row align-items-end mb-7">
            <div class="col-xl mb-5 mb-xl-0 text-center">
                <h2 class="mb-1 certzip-heading-color">Popular Courses</h2>
                <p class="font-size-lg text-capitalize mb-0">At Cert solution, we believe that education can unlock opportunities.

                </p>
            </div>
            {{-- <div class="col-xl-auto">
                    <a href="#" class="d-flex align-items-center fw-medium">
                        Browse All &nbsp; <i class="fas fa-angle-right"></i>
                    </a>
                </div> --}}
        </div>
        <!-- Items -->
        <div class=" mb-3 px-md-5 px-0">
            <div id="owl-course_2" class="owl-carousel owl-course_2">
                @if(count($topProduct) > 0)
                @foreach($topProduct as $top)
                <a href="{{ url('course/' .$top->slug) }}">
                <div class="item">
                    <div class="courses_tabs_design_box_top">
                    <div class="popular_Courses"><img src="{{url('/uploads/course').'/'.$top->image}}" alt=""></div>
                    <div class="card p-2">
                        <div class="fs_18 fw_600 course_title_heading">{{ $top->name }}</div>
                        <div class="fs_14 mb-3">Reviews</div>
                        @if($top->rating!=null)   @endif
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="rating full-star-row">
                                <div class="empty-star">
                                <span class="far fa-star"></span>
                                <span class="far fa-star"></span>
                                <span class="far fa-star"></span>
                                <span class="far fa-star"></span>
                                <span class="far fa-star"></span>
                                </div>
                                <div class="overlay-star" style="width:100%;"  ></div>
                                <div class="fill-star">
                                <span class="fas fa-star"></span>
                                <span class="fas fa-star"></span>
                                <span class="fas fa-star"></span>
                                <span class="fas fa-star"></span>
                                <span class="fas fa-star"></span>
                                </div>
                            </div>
                            <div class="font-size-xs ms-lg-3">
                                    <span>{{number_format((float)$top->rating, 1, '.', '')}} ({{ $top->r_count }})</span>
                            </div> 
                        </div> 
                        <div class="d-flex align-items-center justify-content-between">
                           <div>{{ Config::get('app.currency_icon') }}{{ $top->price }}</div>
                           <div class="offers">{{ Config::get('app.currency_icon') }}{{ $top->price_diff }} off</div>
                        </div>
                    </div>
                    </div>
                </div>
                </a>
                @endforeach
                @endif
            </div>

        </div>
        <div class="text-center" style="margin-top: 66px;">
            <a href="{{ route('top-courses') }}" class="btn btn_custom btn-outline-primary p-3 px-5 rounded-pill">Explore All Top Courses</a>
        </div>
    </div>
</section>

<section class="py-5 py-md-11 cert_solutions_forms">
    <div class="container">
        <div class="text-center mb-8">
            <h2 class="mb-1 certzip-heading-color">Cert Solution key reasons to choose us.</h2>
            <p class="font-size-lg mb-0 text-capitalize">Expert guidance, comprehensive resources, and unwavering support every step of the way</p>
        </div>
        <div class="row align-items-center">
            <div class="col-md-7">
                <div class="mx-0 px-0 mx-md-5 px-md-5">
                    <div class="border p-3 mb-4  cards_icon h-100 bg-white bg_animate_popular">
                        <div class="icon"><i class="fa-solid fa-chalkboard"></i></div>
                        <div class="fs_18 mb-1 fw_600">Expert-Led Courses</div>
                        <div class="fs_12">Learn from industry pros with real-world experience, ensuring practical, current knowledge.</div>
                    </div>
                </div>
                <div class="mx-0 px-0 mx-md-5 px-md-5">
                    <div class="border p-3 mb-4  cards_icon h-100 bg-white bg_animate_popular">
                        <div class="icon"><i class="fa-solid fa-certificate"></i></div>
                        <div class="fs_18 mb-1 fw_600">Cert Solution Guarantee</div>
                        <div class="fs_12">We're committed to your success—if you don't pass, we offer course retakes at no additional cost.</div>
                    </div>
                </div>
                <div class="mx-0 px-0 mx-md-5 px-md-5">
                    <div class="border p-3 mb-4  cards_icon h-100 bg-white bg_animate_popular">
                        <div class="icon"><i class="fa-solid fa-check"></i></div>
                        <div class="fs_18 mb-1 fw_600">Proven Success</div>
                        <div class="fs_12">High pass rates and a solid track record—our students achieve certification success
                        </div>
                    </div>
                </div>
                <div class="mx-0 px-0 mx-md-5 px-md-5">
                    <div class="border p-3 mb-4  cards_icon h-100 bg-white bg_animate_popular">
                        <div class="icon"><i class="fa-solid fa-tag"></i></div>
                        <div class="fs_18 mb-1 fw_600">Affordable Pricing</div>
                        <div class="fs_12">High-quality education at competitive prices, offering great value for your investment.
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class=" custom_border_Shaded ">
                    <div class="p-5 border rounded bg_primary_2 shadow-sm">
                        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
                        <h3 class="fs_20">Request More details</h3>
                        <div>
                            <form class="row" id="contactus" action="{{url('contact-now')}}" method="post">
                                @csrf
                                <input type="hidden" name="query_type" id="query_type" value="contactusquery">
                                <input type="hidden" name="code" id="code" value="1">
                                <div class="col-md-6 mb-2">
                                    <label for="exampleInputEmail1" class="form-label ">Full Name</label>
                                    <input type="text" placeholder="Enter Your Name" class="form-control" name="user_name" id="user_name" aria-describedby="emailHelp">
                                    <p class="text-danger error-container" id="error-user_name"></p>
                                </div>
                                <div class="mb-2 col-md-6">
                                    <input type="hidden" name="country" id="country" class="country">
                                    <label for="exampleInputPassword1" class="form-label ">Email Address</label>
                                    <input type="email" class="form-control" placeholder="Enter Your email" name="emailId" id="emailId">
                                    <p class="text-danger error-container" id="error-emailId"></p>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label for="exampleInputPassword1" class="form-label ">Mobile Number</label>
                                    <input type="tel" class="form-control mobno" placeholder="Enter Your Mobile Number" name="mobno" id="mobno">
                                    <p class="text-danger error-container" id="error-mobno"></p>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label for="exampleInputPassword1" class="form-label ">Course</label>
                                    <select class="form-select select2" aria-label="Default select example" name="course_name" id="course_name">
                                        <option value="">--Select Courses--</option>
                                        @foreach($courses001 as $coursename)
                                        <option value="{{$coursename->id}}">{{$coursename->name}}</option>
                                        @endforeach
                                    </select>
                                    <p class="text-danger error-container" id="error-course_name"></p>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <textarea  class="form-control mb-3" rows="3" placeholder="message (optional)" name="message" id="message"></textarea>
                                    <p class="text-danger error-container" id="error-message"></p>
                                </div>
                                <div class="text-center">
                                    <button type="submit" class="btn btn_custom btn-outline-primary p-3 px-5 rounded-pill contactusnow">Enquire Now</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 counter_sets bg_primary text-white text-center">
    <div class="container">
        <div class="row">
            <div class="col-md-4  border-end">
                <div><i class="fa-solid fa-graduation-cap fs_22 py-2"></i></div>
                <div class="counter fs_30" data-speed="1"> 10,000+ </div>
                <div class="fw_600 fs_22 total_heading">Certified Students</div>
            </div>
            <div class="col-md-4  border-end">
                <div><i class="fa-solid fa-list-check fs_22 py-2"></i></div>
                <div class="counter  fs_30" data-speed="1">700+</div>
                <div class="fw_600 fs_22 total_heading">Successful Projects</div>
            </div>
            <div class="col-md-4">
                <div><i class="fa-solid fa-hourglass-half fs_22 py-2"></i></div>
                <div class="counter  fs_30" data-speed="1">42000+</div>
                <div class="fw_600 fs_22 total_heading">Total Educational Hours </div>
            </div>
        </div>
    </div>

</section>
<section class="py-5 pt-md-11 bg_primary_2 pb-9">
    <div class="container">
    <div class="text-center mb-8">
            <h2 class="mb-1 certzip-heading-color">Partnering with World's Leading Governing Bodies.</h2>
            <!-- <p class="font-size-lg mb-0 text-capitalize">Expert guidance, comprehensive resources, and unwavering support every step of the way</p> -->
        </div>
        <div id="owl-course_3" class="owl-carousel owl-course_3 ">
                @foreach($Partners as $partner)
                <div class="item">
                    <div class="box-all"><img src="{{url('uploads/partners').'/'.$partner->image}}" alt=""></div>
                   
                </div>
                @endforeach
            </div>
    </div>
</section>
<section class="pt-5 pt-md-11 pb-9 bg-white">
    <div class="container">
        <div class="text-center mb-2" data-aos="fade-up">
            <h2 class="mb-1 certzip-heading-color" >What Our Learners Say</h2>
            <!-- <p class="font-size-lg text-capitalize mb-0" >Hear we can give some data in para 2 line </p> -->
        </div>
        <div class="mx-n4" data-flickity='{"pageDots": true, "prevNextButtons": true, "cellAlign": "left", "wrapAround": true, "freeScroll": true, "autoPlay": true,"imagesLoaded": true}'>
            @php $inc=0; @endphp
            @foreach($review as $rev)
            <div class="col-12 col-md-6 col-xl-3 py-md-7 py-3" data-aos="fade-up" data-aos-delay="50"
                style="padding-right:15px;padding-left:15px;">
                <!-- Card -->
                <!-- box-shadow: 8px -5px 0px 1px #2c1975 !important; -->
                <div class="card border shadow p-6 lift-md testimonials123" style="">
                    <!-- Image  -->
                    <div class="card-zoom">
                        <div class="d-flex align-items-center">
                            <div class="media-body">
                                <h5 class="mb-0"><span class="testi-image tcolor{{++$inc}}">{{ ucfirst($rev->user_name[0]) }}</span> {{ $rev->user_name }}</h5>

                                <!-- Star Rating data -->
                                <div class="mb-4 mb-md-0 me-md-6 me-lg-4 me-xl-6">
                                    <div class="d-lg-flex align-items-center">
                                        <div class="rating full-star-row">
                                            <div class="empty-star">
                                                <span class="far fa-star"></span>
                                                <span class="far fa-star"></span>
                                                <span class="far fa-star"></span>
                                                <span class="far fa-star"></span>
                                                <span class="far fa-star"></span>
                                            </div>
                                            <div class="overlay-star" style="width:100%;%;"></div>
                                            <div class="fill-star">
                                                <span class="fas fa-star"></span>
                                                <span class="fas fa-star"></span>
                                                <span class="fas fa-star"></span>
                                                <span class="fas fa-star"></span>
                                                <span class="fas fa-star"></span>
                                            </div>

                                        </div>
                                        <div class="font-size-sm ms-lg-3 rating-112">
                                            <span>({{ $rev->rating }})</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Star Rating Ends -->

                            </div>
                        </div>
                    </div>
                    <!-- Footer -->
                    <div class="card-footer px-0 pb-0 review-box" style="overflow-y: hidden;max-height: 170px;">
                        <span class="dots">
                            <p class="mb-0 text-capitalize">" {{ Str::limit($rev->review,100, $end='...') }} "</p>
                        </span>
                        <span class="more" style="display: none">
                            <p class="mb-0 text-capitalize">{{$rev->review}}</p>
                        </span>
                        @if(strlen($rev->review)>100)
                        <button class="mb-1 d-inline-block rm-btn" style="border: none;">Read More</button>
                        @endif
                    </div>
                </div>
            </div>
            @if($inc==10)
            @php $inc=0; @endphp
            @endif
            @endforeach
            {{-- <div class="col-12 col-md-6 col-xl-4 py-md-7 py-3" data-aos="fade-up" data-aos-delay="100"
                    style="padding-right:15px;padding-left:15px;">
                    <!-- Card -->
                    <div class="card border shadow p-6 lift-md testimonials123">
                        <!-- Image -->
                        <div class="card-zoom">
                            <div class="d-flex align-items-center">
                                <div class="media-body">
                                    <h5 class="mb-0">David Roger</h5>

                                    <!-- Star Rating data -->
                                    <div class="mb-4 mb-md-0 me-md-6 me-lg-4 me-xl-6">
                                      <div class="d-lg-flex align-items-center">
                                         <div class="star-rating mb-2 mb-lg-0">
                                            <div class="rating" style="width:100%;"></div>
                                         </div>
                                         <div class="font-size-sm ms-lg-3">
                                            <span>(9.8k+)</span>
                                         </div>
                                      </div>
                                    </div>
                                    <!-- Star Rating Ends -->

                                </div>
                            </div>
                        </div>
                        <!-- Footer -->
                        <div class="card-footer px-0 pb-0">
                            <p class="mb-0 text-capitalize">“ I took CISM course to learn which was made very easy and knowledgeable by the trainers. They were very helpful even after the completion of the course.  “</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4 py-md-7 py-3" data-aos="fade-up" data-aos-delay="150"
                    style="padding-right:15px;padding-left:15px;">
                    <!-- Card -->
                    <div class="card border shadow p-6 lift-md testimonials123">
                        <!-- Image -->
                        <div class="card-zoom">
                            <div class="d-flex align-items-center">
                                <div class="media-body">
                                    <h5 class="mb-0">Stephenie Godwell</h5>

                                    <!-- Star Rating data -->
                                    <div class="mb-4 mb-md-0 me-md-6 me-lg-4 me-xl-6">
                                      <div class="d-lg-flex align-items-center">
                                         <div class="star-rating mb-2 mb-lg-0">
                                            <div class="rating" style="width:100%;"></div>
                                         </div>
                                         <div class="font-size-sm ms-lg-3">
                                            <span>(9.8k+)</span>
                                         </div>
                                      </div>
                                    </div>
                                    <!-- Star Rating Ends -->

                                </div>
                            </div>
                        </div>
                        <!-- Footer -->
                        <div class="card-footer px-0 pb-0">
                            <p class="mb-0 text-capitalize">“ I would recommend this to each and every person who wants to gain complete knowledge about the courses they offer. Even the miscellaneous exercises are designed very well.  “</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4 py-md-7 py-3" data-aos="fade-up" data-aos-delay="50"
                    style="padding-right:15px;padding-left:15px;">
                    <!-- Card -->
                    <div class="card border shadow p-6 lift-md testimonials123">
                        <!-- Image -->
                        <div class="card-zoom">
                            <div class="d-flex align-items-center">
                                <div class="media-body">
                                    <h5 class="mb-0">Regina Maxwell</h5>

                                    <!-- Star Rating data -->
                                    <div class="mb-4 mb-md-0 me-md-6 me-lg-4 me-xl-6">
                                      <div class="d-lg-flex align-items-center">
                                         <div class="star-rating mb-2 mb-lg-0">
                                            <div class="rating" style="width:100%;"></div>
                                         </div>
                                         <div class="font-size-sm ms-lg-3">
                                            <span>(9.8k+)</span>
                                         </div>
                                      </div>
                                    </div>
                                    <!-- Star Rating Ends -->


                                </div>
                            </div>
                        </div>
                        <!-- Footer -->
                        <div class="card-footer px-0 pb-0">
                            <p class="mb-0 text-capitalize">“ There has been an immense learning environment along with courses completely explained by professionals that made it easy for me to get and excel in my career. “</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4 py-md-7 py-3" data-aos="fade-up" data-aos-delay="100"
                    style="padding-right:15px;padding-left:15px;">
                    <!-- Card -->
                    <div class="card border shadow p-6 lift-md testimonials123">
                        <!-- Image -->
                        <div class="card-zoom">
                            <div class="d-flex align-items-center">
                                <div class="media-body">
                                    <h5 class="mb-0">David Roger</h5>

                                    <!-- Star Rating data -->
                                    <div class="mb-4 mb-md-0 me-md-6 me-lg-4 me-xl-6">
                                      <div class="d-lg-flex align-items-center">
                                         <div class="star-rating mb-2 mb-lg-0">
                                            <div class="rating" style="width:100%;"></div>
                                         </div>
                                         <div class="font-size-sm ms-lg-3">
                                            <span>(9.8k+)</span>
                                         </div>
                                      </div>
                                    </div>
                                    <!-- Star Rating Ends -->

                                </div>
                            </div>
                        </div>
                        <!-- Footer -->
                        <div class="card-footer px-0 pb-0">
                            <p class="mb-0 text-capitalize">“ I took CISM course to learn which was made very easy and knowledgeable by the trainers. They were very helpful even after the completion of the course.  “</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4 py-md-7 py-3" data-aos="fade-up" data-aos-delay="150" style="padding-right:15px;padding-left:15px;">
                    <!-- Card -->
                    <div class="card border shadow p-6 lift-md testimonials123">
                        <!-- Image -->
                        <div class="card-zoom">
                            <div class="d-flex align-items-center">
                                <div class="media-body">
                                    <h5 class="mb-0">Stephenie Godwell</h5>

                                    <!-- Star Rating data -->
                                    <div class="mb-4 mb-md-0 me-md-6 me-lg-4 me-xl-6">
                                      <div class="d-lg-flex align-items-center">
                                         <div class="star-rating mb-2 mb-lg-0">
                                            <div class="rating" style="width:100%;"></div>
                                         </div>
                                         <div class="font-size-sm ms-lg-3">
                                            <span>(9.8k+)</span>
                                         </div>
                                      </div>
                                    </div>
                                    <!-- Star Rating Ends -->

                                </div>
                            </div>
                        </div>
                        <!-- Footer -->
                        <div class="card-footer px-0 pb-0">
                            <p class="mb-0 text-capitalize">“ I would recommend this to each and every person who wants to gain complete knowledge about the courses they offer. Even the miscellaneous exercises are designed very well.  “</p>
                        </div>
                    </div>
                </div>--}}

        </div>
    </div>
</section>
<!-- CALL ACTION ================================================== -->

<!-- TESTIMONIAL ================================================== -->

<!-- EVENTS ================================================== -->

<!-- BLOG ================================================== -->
<section class="py-5 py-md-11 bg_primary_2">
    <div class="container">
        <div class="row">
            <div class="col-md-8 order-md-1 order-2">
                     <div class="mb-5 owl_carousel_4 owl-carousel">
                        @foreach($blogs as $blog)
                        @php
                        $blogtitle = $blog->title;
                        $cleanedName = preg_replace('/[^A-Za-z0-9\-]/', '', strtolower($blogtitle));
                        // Generate slug
                        $blogname = Str::slug($cleanedName);
                        $blogdate = date('d-m-Y',strtotime($blog->posted_date));
                        @endphp
                        <div class="col-md mb-4">
                            <div class="card  shadow p-2 lift sk-fade blog_code">
                                <div class="card-zoom position-relative">
                                    <a href="{{ url('blog/' . $blog->slug) }}" class=""><img class="rounded  lazy w-100" src="{{ url('img/grey.gif') }}" data-original="{{url('uploads/blogImages').'/'.$blog->image}}" alt="{{ $blog->title }}"></a>
                                    <a href="{{ url('blog/' . $blog->slug) }}"
                                        class="badge sk-fade-bottom badge-lg badge-purple badge-pill badge-float bottom-0 left-0 mb-4 ms-4 px-5 me-4">
                                        <span class="text-white fw-normal font-size-sm">{{$blog->category}}</span>
                                    </a>
                                </div>

                                <div class="card-footer px-2 pb-0 pt-4">
                                <a href="{{ url('blog/' . $blog->slug) }}" class="d-block">
                                        <h5 class="line-clamp-2 h-48 h-lg-52">{{$blog->title}}</h5>
                                    </a>
                                    <ul class="nav mx-n3 mb-3 d-flex align-items-center justify-content-end">

                                        <li class="nav-item px-3">
                                            <a href="#" class="d-flex align-items-center text-gray-800">
                                                <div class="me-2 d-flex">
                                                    <i class="fas fa-light fa-calendar"></i>
                                                </div>
                                                <div class="font-size-sm">{{$blogdate}}</div>
                                            </a>
                                        </li>
                                    </ul>

                                  
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="text-center d-md-none d-block">
                    <a href="{{ route('blog') }}" class="btn btn_custom btn-outline-primary p-3 px-5 rounded-pill">View More</a>
                </div>
            </div>
            <div class="col-md-4 order-md-2 order-1">
                <div class="text-center mb-4 mb-md-7" data-aos="fade-up">
                    <h2 class="mb-1 certzip-heading-color">Latest Blogs</h2>
                    <p class="font-size-lg text-capitalize mb-0">Check Out Our Blog for Helpful Advice and Trends</p>
                </div>
                <div class="text-center d-md-block d-none">
                    <a href="{{ route('blog') }}" class="btn btn_custom btn-outline-primary p-3 px-5 rounded-pill">View More</a>
                </div>
            </div>
        </div>
     
       
    </div>
</section>


<!-- Modal -->
<div class="modal  fade" id="mymodal" tabindex="-1" aria-labelledby="mymodal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered " style="max-width: 800px!important;">
    <div class="modal-content position-relative">
      <!-- <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
      
      </div> -->
      <div class="close_button_position">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-3 py-0">
        <div class="row">
            <div class="col-md-6 bg_form_image">
                <!-- <div class="p-5">
                    <div class="fs_13 fw_600 call_back_heading">Request Call Back</div>
                    
                    <div class="fs_22 fw_600 mb-3">Why Cert Solution?</div>
                    <ul>
                        <li>Lowest Price Guarantee</li>
                        <li>Top-Quality Training</li>
                        <li>100% Pass Assurance</li>
                        <li>Lowest Price Guarantee</li>
                        <li>Flexible Payments</li>
                        <li>Flexible Payments</li>
                        <li>Learn Anytime & Anywhere</li>
                        <li>Referral Bonus</li>
                    </ul>
                </div> -->
            </div>
            <div class="col-md-6 py-5">
            <div class="fs_20 fw_600 mb-5 px-md-2">Sign Up for a Free Course</div>
            <form class="row px-md-3 px-0" id="popupcontactus" action="{{url('contact-now')}}" method="post">
                @csrf
                <input type="hidden" name="query_type" id="query_type" value="home_popup_Sign_Up_query">
                <input type="hidden" name="code" id="code1" value="1">
                <input type="hidden" name="country" id="country" class="country">
                <div class="col-md-12 mb-3">
                    <input type="text" name="popup_user_name" id="popup_user_name" placeholder="Enter Your Name" class="form-control"  >
                    <p class="text-danger error-container" id="error-popup_user_name"></p>
                </div>
                <div class="mb-3 col-md-12">
                    <!-- <input type="hidden" name="country" id="country" class="country" value="India"> -->
                    <input type="email" class="form-control" name="popup_emailId" id="popup_emailId" placeholder="Enter Your email" >
                    <p class="text-danger error-container" id="error-popup_emailId"></p> 
                </div>
                <div class="mb-3 col-md-12">
                    <input type="tel" class="form-control popup_mobno" placeholder="Enter Your Mobile Number" name="popup_mobno" id="popup_mobno">
                    <p class="text-danger error-container" id="error-popup_mobno"></p> 
                </div>
                <div class="mb-3 col-md-12">
                    <!-- <label for="" class="form-label ">Course</label> -->
                    <select class="form-select select2" aria-label="Default select example" name="popup_course_name" id="popup_course_name">
                        <option value="">--Select Courses--</option>
                        @foreach($courses001 as $coursename)
                        <option value="{{$coursename->id}}">{{$coursename->name}}</option>
                        @endforeach
                    </select>
                    <p class="text-danger error-container" id="error-popup_course_name"></p>
                </div>
              
                <div class="mb-3 col-md-12">
                    <textarea class="form-control mb-3" rows="3" placeholder="message (optional)" name="popup_message" id="popup_message"></textarea>
                    <p class="text-danger error-container" id="error-popup_message"></p>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn_custom btn-outline-primary p-3 px-5 rounded-pill popupcontactusnow">Enquire Now</button>
                </div>
            </form>
            </div>
        </div>
      </div>
      <!-- <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div> -->
    </div>
  </div>
</div>

<div class="modal fade-left fade model-load" id="loadModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header mb-4 bg-bright-sun load-header">
                <h5 class="modal-title text-white">Early bird offer for first 100 Students</h5>
                <button type="button" class="close text-primary" data-bs-dismiss="modal" aria-label="Close" style="color: #fff!important;">
                    <!-- Icon -->
                    <i class="fas fa-light fa-times"></i>

                </button>
            </div>

            <div class="modal-body load-model-body">
                <div class="" data-aos="fade-left">
                    <div class="bg-white rounded overflow-hidden">
                        <div class="free-tag-beta">
                            <img class="img-fluid" src="{{ url('img/free-tags.png') }}" alt="tags.png">
                        </div>
                        <div class="text-center">
                            <p class="content-1">Sign up and Build your future</p>
                            <!-- <p class="content-1">Sign Up and Get Free Certification</p> -->
                            <p class="content-2">Get Free Consultancy Today!!</p>
                        </div>
                        <div class="p-5">
                            <form class="mb-2" id="popUpQueryForm">
                                @csrf
                                <input type="hidden" name="country" id="country" class="country">
                                <div class="form-group mb-6">
                                    <input type="text" placeholder="Enter Name*" class="form-control" name="uname" id="uname">
                                    <p class="text-danger error-container" id="error-uname"></p>
                                </div>

                                <div class="form-group mb-6">
                                    <input type="tel" placeholder="Enter Phone*" class="form-control" name="uphone" id="uphone">
                                    <p class="text-danger error-container" id="error-uphone"></p>
                                </div>

                                <div class="form-group mb-6">
                                    <input type="email" placeholder="Enter Email*" id="uemail" name="uemail" class="form-control">
                                    <p class="text-danger error-container" id="error-uemail"></p>
                                </div>

                                <div class="form-group mb-6">
                                    <select class="form-control select2-field" name="coursename">
                                        <option value=""> Select Course</option>
                                        <option value="0"> Other</option>
                                        @foreach ($courses001 as $course)
                                        <option value="{{ $course->id }}"> {{ $course->name }}</option>
                                        @endforeach
                                    </select>
                                    <p class="text-danger error-container" id="error-uemail"></p>
                                </div>

                                <div class="form-group mb-6">
                                    <textarea class="form-control" rows="1" id="umessage" name="umessage" placeholder="Type your message*" style="margin-top: 10px;height: "></textarea>
                                    <p class="text-danger error-container" id="error-umessage"></p>
                                </div>

                                <div class="mt-6">
                                    <button class="btn btn-block btn-shark lift popup-query" type="button">
                                        Avail Now
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>




            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>

     // phone number with country code //      
    document.addEventListener('DOMContentLoaded', function () {
       const mobileInputs = document.querySelectorAll('.mobno'); // Use querySelectorAll for multiple elements
       const submitButton = document.getElementById('btn-submit');
       const codeDisplay = document.getElementById('code');
       const mobileNumberDisplay = document.getElementById('mobile-number');

       // Initialize intlTelInput on each input
       mobileInputs.forEach(function(mobileInput) {
           const intlTelInputInstance = intlTelInput(mobileInput, {
               autoHideDialCode: true,
               autoPlaceholder: "ON",
               dropdownContainer: document.body,
               formatOnDisplay: true,
               initialCountry: "us",
               placeholderNumberType: "MOBILE",
               preferredCountries: ['us', 'gb', 'in'],
               separateDialCode: true
           });

         function updateCountryCode() {
             const selectedCountryCode = intlTelInputInstance.getSelectedCountryData().dialCode;
             console.log('Country Code: ' + selectedCountryCode);
             $('#code').val(selectedCountryCode);
         }

   // Event listener for when the country changes
      mobileInput.addEventListener('countrychange', updateCountryCode);

      // Event listener for when the input changes
      mobileInput.addEventListener('input', updateCountryCode);

       });

       // Event listener for button click
       submitButton.addEventListener('click', function () {
           mobileInputs.forEach(function(mobileInput) {
               const intlTelInputInstance = intlTelInput(mobileInput);
               const selectedCountryCode = intlTelInputInstance.getSelectedCountryData().dialCode;
               const phoneNumber = mobileInput.value;

               codeDisplay.textContent += selectedCountryCode + ' ';  // Append for multiple inputs
               mobileNumberDisplay.textContent += phoneNumber + ' ';  // Append for multiple inputs
           });
       });
   });


    // 2nd phone number with country code //      
     document.addEventListener('DOMContentLoaded', function () {
       const mobileInputs = document.querySelectorAll('.popup_mobno'); // Use querySelectorAll for multiple elements
       const submitButton = document.getElementById('btn-submit');
       const codeDisplay = document.getElementById('code');
       const mobileNumberDisplay = document.getElementById('mobile-number');

       // Initialize intlTelInput on each input
       mobileInputs.forEach(function(mobileInput) {
           const intlTelInputInstance = intlTelInput(mobileInput, {
               autoHideDialCode: true,
               autoPlaceholder: "ON",
               dropdownContainer: document.body,
               formatOnDisplay: true,
               initialCountry: "us",
               placeholderNumberType: "MOBILE",
               preferredCountries: ['us', 'gb', 'in'],
               separateDialCode: true
           });

         function updateCountryCode() {
             const selectedCountryCode = intlTelInputInstance.getSelectedCountryData().dialCode;
             console.log('Country Code: ' + selectedCountryCode);
             $('#code1').val(selectedCountryCode);
         }

   // Event listener for when the country changes
      mobileInput.addEventListener('countrychange', updateCountryCode);

      // Event listener for when the input changes
      mobileInput.addEventListener('input', updateCountryCode);

       });

       // Event listener for button click
       submitButton.addEventListener('click', function () {
           mobileInputs.forEach(function(mobileInput) {
               const intlTelInputInstance = intlTelInput(mobileInput);
               const selectedCountryCode = intlTelInputInstance.getSelectedCountryData().dialCode;
               const phoneNumber = mobileInput.value;

               codeDisplay.textContent += selectedCountryCode + ' ';  // Append for multiple inputs
               mobileNumberDisplay.textContent += phoneNumber + ' ';  // Append for multiple inputs
           });
       });
   });



   $(document).ready(function(){
      $.get("https://ipapi.co/json/", function(response) {
         var countryname = response.country_name;
         $(".country").val(countryname);
      });


   $('#contactus, #popupcontactus').on('submit',function(event){
    event.preventDefault();
      var formData = new FormData(this);
      var url =$(this).attr('action');
      $.ajaxSetup({
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
        });
        
        $.ajax({
        method:'post',
        url: url,
        processData: false,
        contentType: false,
        data: formData,
        success:function(result) {
         /*window.setTimeout(function(){
            $('.contactusnow').attr('disabled',false);
            $('.contactusnow').html('SEND');
         },5000);
*/         if(result.success==true)
               {
               toastr.success("Your query has been sent successfully.");
               setTimeout(function() {
                  location.reload();
               }, 3000);
               }else{                     
                      for (control in result.errors) {   
                      $('#error-' + control).html(result.errors[control]);
               }
            }
        }
     });
   });


$(".select2").select2({
    placeholder: 'Please Select',
});


$(window).on('load', function() {
        // $('.select2-field').select2();
        // window.setTimeout(function(){
        //     $('#loadModal').modal('show');
        // },8000);
    });

$(".searchby-cat").on('click', function() {
    var catId = $(this).attr('aria-controls');
    let html =''
     $('#dktabs').html();
     $('#check').css('display','none')
    //alert(catId);

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        method: 'post',
        url: "{{route('home-filter-all-courses')}}",
        data: {
            catId: catId
        },
        success: function(response) {
            console.log(response)
           $('#dktabs').html(response)
        }
    });
});


});
</script>

<script>
    

    $(document).on('click', '#search-button2', function() {
        window.setTimeout(function() {
            $('.search-courses').val("");
            $("#display-suggestion3").addClass('d-none');
        }, 1000);
    });
    $(document).on('click', '.search-courses', function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            method: 'post',
            url: "{{route('search-course')}}",
            // processData: false,
            // contentType: false,
            success: function(response) {
                $("#display-suggestion3").removeClass('d-none');
                if (Object.keys(response.data.data).length > 0) {
                    var APP_URL = {
                        !!json_encode(url('/')) !!
                    }
                    $("#display-suggestion3").html("");
                    $.each(response.data.data, function(index, value) {
                        var itemId = btoa(value.slug);
                        var courseid = value.slug;
                        var detail = APP_URL + '/' + 'course_detail' + '/' + itemId;
                        $("#display-suggestion3").append('<div id="' + courseid + '"><ul class="search_result"><li><a href="javascript:void(0)" onclick="inputCourses1(' + courseid + ');">' + value.name + '</a><input type="hidden" id="course-click1' + value.slug + '" name="course-click1" value="' + value.name + '"></li></ul></div>')

                    });
                } else {
                    $("#display-suggestion3").html("No Records Found");
                }
            }
        });
    });

    function inputCourses1(courseid) {
        var coursname = $("#course-click1" + courseid).val();
        var recoursename = coursname.replace(/ /g, "-");
        var APP_URL = {
            !!json_encode(url('/')) !!
        }
        // var coursedetail = APP_URL+'/'+'course'+'/'+'details'+'/'+courseid;
        var courseLink = "{{ route('courseDetail',':course') }}";
        courseLink = courseLink.replace(':course', courseid);
        $(".search-courses").html("");
        var coursename = $("#course-click1" + courseid).val();
        $(".search-courses").val(coursename);
        window.location.href = courseLink;
    }

    function inputCourses2(courseid) {
        var coursname = $("#course-click" + courseid).val();
        var recoursename = coursname.replace(/ /g, "-");
        var APP_URL = {
            !!json_encode(url('/')) !!
        }
        // var coursedetail = APP_URL+'/'+'course'+'/'+'details'+'/'+courseid;
        var courseLink = "{{ route('courseDetail',':course') }}";
        courseLink = courseLink.replace(':course', courseid);
        $(".search-courses2").html("");
        var coursename = $("#course-click" + courseid).val();
        $(".search-courses2").val(coursename);
        window.location.href = courseLink;
    }

    $(document).on('keyup', '.search-courses', function() {
        var coursename = $(this).val();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            method: 'post',
            url: "{{route('search-courseby-name')}}",
            data: {
                coursename: coursename
            },
            success: function(response) {
                if (Object.keys(response.data.data).length > 0) {
                    var APP_URL = {
                        !!json_encode(url('/')) !!
                    }
                    $("#display-suggestion3").html("");
                    $.each(response.data.data, function(index, value) {
                        var courseid = value.id;
                        var itemId = btoa(value.item_id);
                        var detail = APP_URL + '/' + 'course_detail' + '/' + itemId;
                        $("#display-suggestion3").append('<div id="' + courseid + '"><ul class="search_result"><li><a href="javascript:void(0)" onclick="inputCourses2(\'' + courseid + '\');">' + value.name + '</a><input type="hidden" id="course-click' + value.slug + '" name="course-click" value="' + value.name + '"></li></ul></div>')
                    });
                } else {
                    $("#display-suggestion3").html("No Records Found");
                }
            }
        });
    });








    $(document).on('click', '#search-button2', function() {
        window.setTimeout(function() {
            $('.search-courses2').val("");
            $("#display-suggestion2").addClass('d-none');
        }, 1000);
    });
    $(document).on('click', '.search-courses2', function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            method: 'post',
            url: "{{route('search-course')}}",
            // processData: false,
            // contentType: false,
            success: function(response) {
                $("#display-suggestion2").removeClass('d-none');
                if (Object.keys(response.data.data).length > 0) {
                    var APP_URL = {
                        !!json_encode(url('/')) !!
                    }
                    $("#display-suggestion2").html("");
                    $.each(response.data.data, function(index, value) {
                        var itemId = btoa(value.slug);
                        var courseid = value.slug;
                        var detail = APP_URL + '/' + 'course_detail' + '/' + itemId;
                        $("#display-suggestion2").append('<div id="' + courseid + '"><ul class="search_result"><li><a href="javascript:void(0)" onclick="inputCourses(\'' + courseid + '\');">' + value.name + '</a><input type="hidden" id="course-click1' + value.slug + '" name="course-click1" value="' + value.name + '"></li></ul></div>')

                    });
                } else {
                    $("#display-suggestion2").html("No Records Found");
                }
            }
        });
    });

    function inputCourses(courseid) {
        // alert(courseid);
        var coursname = $("#course-click1" + courseid).val();
        var recoursename = coursname.replace(/ /g, "-");
        var APP_URL = {
            !!json_encode(url('/')) !!
        }
        // var coursedetail = APP_URL+'/'+'course'+'/'+'details'+'/'+courseid;
        var courseLink = "{{ route('courseDetail',':course') }}";
        courseLink = courseLink.replace(':course', courseid);
        $(".search-courses2").html("");
        var coursename = $("#course-click1" + courseid).val();
        $(".search-courses2").val(coursename);
        window.location.href = courseLink;
    }

    function inputCourses2(courseid) {
        var coursname = $("#course-click" + courseid).val();
        var recoursename = coursname.replace(/ /g, "-");
        var APP_URL = {
            !!json_encode(url('/')) !!
        }
        // var coursedetail = APP_URL+'/'+'course'+'/'+'details'+'/'+courseid;
        var courseLink = "{{ route('courseDetail',':course') }}";
        courseLink = courseLink.replace(':course', courseid);
        $(".search-courses2").html("");
        var coursename = $("#course-click" + courseid).val();
        $(".search-courses2").val(coursename);
        window.location.href = courseLink;
    }

    $(document).on('keyup', '.search-courses2', function() {
        var coursename = $(this).val();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            method: 'post',
            url: "{{route('search-courseby-name')}}",
            data: {
                coursename: coursename
            },
            success: function(response) {
                if (Object.keys(response.data.data).length > 0) {
                    var APP_URL = {
                        !!json_encode(url('/')) !!
                    }
                    $("#display-suggestion2").html("");
                    $.each(response.data.data, function(index, value) {
                        var courseid = value.slug;
                        var itemId = btoa(value.slug);
                        var detail = APP_URL + '/' + 'course_detail' + '/' + itemId;
                        $("#display-suggestion2").append('<div id="' + courseid + '"><ul class="search_result"><li><a href="javascript:void(0)" onclick="inputCourses2(\'' + courseid + '\');">' + value.name + '</a><input type="hidden" id="course-click' + value.slug + '" name="course-click" value="' + value.name + '"></li></ul></div>')
                    });
                } else {
                    $("#display-suggestion2").html("No Records Found");
                }
            }
        });
    });
</script>
<script>
    $(document).on('click', '.rm-btn', function() {

        var dots = $(this).closest('.review-box').find('.dots');
        var moreText = $(this).closest('.review-box').find('.more');
        var btnText = $(this);

        if (dots.css('display') === "none") {
            dots.show();
            moreText.hide();
            btnText.text('Read More')
        } else {
            dots.hide();
            moreText.show();
            btnText.text('Read Less')
        }
    });

    $(document).on('click', '.gsn-btn', function() {
        var check_auth = {
            {
                auth() - > check() ? 'true' : 'false'
            }
        };
        if (check_auth) {
            window.location.href = "{{route('contact-us')}}";
        } else {
            $('#modal-login').modal('show');
        }
    });
</script>
<script>
    $(document).ready(function() {

        $('.owl-course_2').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            autoplay:true,
            autoplayTimeout:1000,
            autoplayHoverPause:true,
            responsive: {
                0: {
                    items: 1,
                    nav: true,
                    dots: false,
                },
                600: {
                    items: 3,
                    nav: true,
                    dots: false,
                },
                1000: {
                    items: 4,
                    nav: true,
                    dots: false,
                }
            }
        });
        $('.owl-course_3').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true,
            responsive: {
                0: {
                    items: 3,
                    nav: true,
                    dots: false,
                },
                600: {
                    items: 6,
                    nav: true,
                    dots: false,
                },
                1000: {
                    items: 8,
                    nav: true,
                    dots: false,
                }
            }
        });
        
        $('.owl_carousel_4').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true,
    navText : ["<i class='fa-solid fa-arrow-left-long color_grey'></i>","<i class='fa-solid fa-arrow-right-long color_grey'></i>"],

            responsive: {
                0: {
                    items: 2,
                    nav: true,
                    dots: false,
                },
                600: {
                    items: 2,
                    nav: true,
                    dots: false,
                },
                1000: {
                    items: 3,
                    nav: true,
                    dots: false,
                }
            }
            // $( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
            // $( ".owl-next").html('<i class="fa fa-chevron-right"></i>');
        });
        $('.owl-course_1').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            autoplay:true,
            autoplayTimeout:1000,
            autoplayHoverPause:true,
            responsive: {
                0: {
                    items: 1,
                    nav: true,
                    dots: false,
                },
                600: {
                    items: 3,
                    nav: true,
                    dots: false,
                },
                1000: {
                    items: 4,
                    nav: true,
                    dots: false,
                }
            }
        });
    });
    
    
</script>
<script>
    (() => {
        // Function to check if an element is in the viewport
        function isElementInViewport(el) {
            const rect = el.getBoundingClientRect();
            return rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
        }

        // Scroll event listener to trigger the counters when in view
        window.addEventListener('scroll', () => {
            const counters = document.querySelectorAll('.counter');

            counters.forEach(counter => {
                if (isElementInViewport(counter) && !counter.classList.contains('counted')) {
                    startCounter(counter);
                    counter.classList.add('counted'); // Ensure it only starts once
                }
            });
        });

        function startCounter(item) {
            let targetNumber = parseInt(item.textContent.replace(/[^0-9]/g, '')); // Extract only numeric values
            let count = 0;
            let speed = item.dataset.speed;
            let increment = Math.ceil(targetNumber / 500); // Larger step for faster count (1% of target)

            function counterUp() {
                count += increment;
                if (count >= targetNumber) {
                    count = targetNumber;
                    clearInterval(stop);
                    item.textContent = targetNumber.toLocaleString() + '+'; // Add "+" after counting is done
                } else {
                    item.textContent = count.toLocaleString();
                }
            }

            const stop = setInterval(counterUp, speed / 1); // Faster increments (adjust as necessary)
        }
    })();
</script>
<script>
    window.onload=function(){
        var modalement= document.getElementById('mymodal');
        if(modalement){
            setTimeout(function() {
           var modal = new bootstrap.Modal(modalement);
        modal.show();
        }, 15000);
        };

    };

    $(document).ready(function() {
    $('.nav-link').click(function() {
        // Remove background color from all tabs
        $('.nav-link').css('background-color', '');
        $('.nav-link').css('color', '');

        // Add background color to the clicked tab
        $(this).css('background-color', '#44318D');
        $(this).css('color', '#ffffff');
    });
});
</script>
@stop