@extends('website.includes.layout')
@section('meta_title', $cms->meta_title ?? '')
@section('meta_keyword', $cms->meta_keyword ?? '')
@section('meta_description', $cms->meta_description ?? '')
@section('image', $cms->image ?? '')
@section('content') 


@include('website.sections.breadcumb', [
    'heading' => $cms->display_name ?? $cms->heading ?? '',
    'pagename' => $cms->display_name ?? $cms->heading ?? '',
    'breadcumb_image' => showImage($bg->image ?? '', $bg->image_webp ?? '')
])




<div class="course-details-area py-5">
    <div class="container">
        <div class="row m-0">
            <div class="col-xl-12 col-lg-12 mb-3 mb-md-0">
                <div class="course-left-wrap">
                   @if (!empty($cms->image))
                    <div class="apply-area">
                        <img src="{{ showImage($cms->image ?? '',$cms->image_webp ?? '') }}" alt="{{ $cms->heading ?? '' }}">
                    </div>
                     @endif

                    <div class="course-detail-content-new common-ul-li mt-3">
                        <h1>{{ $cms->heading ?? '' }}</h1>
                         {!! $cms->description ?? '' !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




@php
    $faqs = $cms->faqs ?? [];
@endphp

@if (!empty($faqs))
<section class="faq-acsnew py-5">
    <div class="container">
        <h2 class="section-title">Frequently Asked <span>Questions</span></h2>

        <div class="faq-box">
            <div class="accordion" id="faqAccordion">

                @foreach($faqs as $index => $faq)

                    @php
                        $faqId = 'faq-' . $index;
                        $collapseId = 'collapse-' . $index;
                        $isFirst = $index === 0;
                    @endphp

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="{{ $faqId }}">
                            <button class="accordion-button {{ !$isFirst ? 'collapsed' : '' }}"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#{{ $collapseId }}">
                                {{ $faq['question'] ?? 'Question' }}
                            </button>
                        </h2>

                        <div id="{{ $collapseId }}"
                             class="accordion-collapse collapse {{ $isFirst ? 'show' : '' }}"
                             data-bs-parent="#faqAccordion">

                            <div class="accordion-body">
                                {!! $faq['answer'] ?? '' !!}
                            </div>
                        </div>
                    </div>

                @endforeach

            </div>
        </div>
    </div>
</section>
@endif


@if(!empty($course_category))
<div class="course-area bg-img py-5" style="background-image:url(assets/img/bg/bg-1.jpg);">
    <div class="container">
        <div class="row m-0">
             <div class="section-title text-center mb-4">
            <h2 class="mb-2"><span>Related </span> Course Categories</h2>
         </div>
            @foreach ($course_category as $value)
            <div class="col-md-4 mb-3">
                <div class="single-course">
                    <div class="course-img">
                        <a href="{{ route('courseCategory', $value->page_url ?? '') }}"><img class="animated"
                                src="{{ showImage($value->image ?? '',$value->image_webp ?? '') }}" alt="{{ $value->category_name ?? '' }}"></a>
                    </div>
                    <div class="course-content">
                        <h4><a href="{{ route('courseCategory', $value->page_url ?? '') }}">{{ $value->category_name ?? '' }}</a></h4>
                       <p>{!! substr(strip_tags($value->description ?? ''), 0, 255) . '...' !!}</p>
                    </div>
                    <div class="course-position-content">
                        <div class="course-btn">
                            <a class="default-btn" href="{{ route('courseCategory', $value->page_url ?? '') }}">READ MORE</a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
       </div>
    </div>
</div>
@endif


@if(!empty($counters))
@include('website.sections.counter', ['counters' => $counters])
@endif

@if(!empty($why_us))
<section class="type-coachingacsnew py-5 who-chose-containernew">
   <div class="container">
      <div class="row m-0">
         <div class="section-title text-center mb-4">
            <h2 class="mb-2"><span>Why </span> Choose US</h2>
            <p class="text-center mt-0">ACS is an initiative by the team of ex-Niftians, alumni’s and experienced professors...</p>
         </div>
         @foreach ($why_us as $value )
         <div class="col-md-4 mb-3">
            <div class="both-coaching-acsmain">
               <div class="coaching-two-img who-chosethreecard">
                  <img src="{{ showImage($value->image ?? '', $value->image_webp ?? '') }}" alt="{{ $value->heading ?? '' }}">
               </div>
               <div class="coaching-two-content">
                  <h3>{{ $value->heading ?? '' }}</h3>
                  <p class="mb-0">{{ $value->short_description ?? '' }}</p>
               </div>
            </div>
         </div>
         @endforeach
      </div>
   </div>
</section>
@endif

@if(!empty($awards))
<section class="award-acs-mainnew py-5">
   <div class="container">
      <div class="row m-0">
         <div data-aos="fade-up" class="text-center mb-4">
            <h2 class="rt-heading mb-2">Top Awards</h2>
         </div>
         @foreach ($awards as $value)
         <div class="col-lg-4 col-md-6 mb-3">
            <article class="award-card award-1">
               <div class="award-inner">
                  <img src="{{ showImage($value->image ?? '', $value->image_webp ?? '') }}" class="award-img" alt="{{ $value->name ?? ''}}">
                  <h3 class="award-title">{{ $value->name ?? ''}}</h3>
                  <p class="award-desc">{{ $value->short_description ?? ''}}</p>
               </div>
            </article>
         </div>
       @endforeach
      </div>
   </div>
</section>
@endif


@if(!empty($who_us))
<div class="event-area bg-img default-overlay py-5">
   <div class="container">
      <div class="row m-0">

         <div class="section-title text-center mb-4">
            <h2 class="mb-2"><span>Who </span> Choose US</h2>
            <p class="text-center mt-0">
               ACS is an initiative by the team of ex-Niftians, alumni’s and experienced professors...
            </p>
         </div>

         <div class="tabs-wrapper d-flex">

            <!-- LEFT SIDE DYNAMIC BUTTONS -->
            <div class="nav-container who-choose-tabsacsind">
               <div class="nav flex-column nav-pills" id="v-pills-tab">

                  @foreach ($who_us as $index => $item)
                     <button class="nav-link {{ $index == 0 ? 'active' : '' }}"
                        data-bs-toggle="pill"
                        data-bs-target="#tab{{ $index }}">
                        {{ $item->heading }}
                     </button>
                  @endforeach

               </div>
            </div>

            <!-- RIGHT SIDE DYNAMIC CONTENT -->
            <div class="tab-content flex-grow-1">

               @foreach ($who_us as $index => $item)
               <div class="tab-pane fade {{ $index == 0 ? 'show active' : '' }}"
                    id="tab{{ $index }}">
                  <div class="tab-card">
                     <img class="tab-hero" src="{{ showImage($item->image ?? '',$item->image_webp ?? '') }}" alt="{{ $item->heading ?? '' }}">
                     <div class="tab-body">
                        <h3>{{ $item->heading ?? '' }}</h3>
                        <p>{{ $item->short_description ?? '' }}</p>
                     </div>
                  </div>
               </div>
               @endforeach
            </div>
         </div>
      </div>
   </div>
</div>
@endif


@if(!empty($results))
<section class="ranker-topnew py-5">
   <div class="container">
      <div class="row m-0">
         <div data-aos="fade-up" class="text-center mb-4">
            <h2 class="rt-heading mb-2">Top Rankers</h2>
            <p class="text-muted text-center mt-0">Meet our shining achievers</p>
         </div>
         <div class="owl-carousel ranker-carousel owl-theme">
            @foreach ($results as $value)
            <div data-aos="zoom-in" class="ranker-card">
               <div class="rank-img">
                  <img src="{{ showImage($value->image ?? '', $value->image_webp ?? '') }}" 
                       alt="{{ $value->name ?? '' }}">
               </div>
               <div class="rank-number">
                  <span>{{ $value->rank ?? '' }}</span>
               </div>
               <h4 class="rank-name">{{ $value->name ?? '' }}</h4>
               <div class="rank-course">
                   {{ $value->category->category_name ?? '' }}
               </div>
               <div class="rank-year">Year: {{ $value->year ?? '' }}</div>
            </div>
            @endforeach
         </div>
         <div class="text-center mt-4">
            <a href="{{ route('result') }}" class="default-btn px-4 py-2">
               View More
            </a>
         </div>
      </div>
   </div>
</section>
@endif



@if(!empty($gallery))
<section class="acs-gallerynew py-5">
   <div class="container">
      <div data-aos="fade-up" class="section-head">
         <h2>ACS Gallery</h2>
      </div>
      <div class="uk-child-width-1-4@m uk-child-width-1-2@s uk-grid-small gallery-acs" 
         uk-grid 
         uk-lightbox="nav: thumbnav; slidenav: false">


         @foreach ($gallery as $value)
         <div>
            <a class="uk-inline acs-light-gallery gallery-item" 
               href="{{ showImage($value->image ?? '', $value->image_webp ?? '') }}">
             <img src="{{ showImage($value->image ?? '', $value->image_webp ?? '') }}" 
                       alt="{{ $value->name ?? '' }}">
            </a>
         </div>
         @endforeach
      </div>
      <div data-aos="zoom-in" class="view-all-wrap">
         <a href="{{ route('gallery') }}" class="btn btn-acs" id="viewAllBtn">View All Gallery</a>
      </div>
   </div>
</section>
@endif



@if(!empty($testimonials))
<section class="testi-newnormal py-5">
    <div class="container">
        <div class="row m-0 mb-0">
            <div class="section-head mb-2">
                <h2 class="text-center">What Students Say</h2>
            </div>
        </div>

        <div class="swiper mySwipertest-video">
            <div class="swiper-wrapper">

                @foreach($testimonials as $testi)

                {{-- VIDEO TYPE --}}
                @if($testi->type == 'Video')
                    <div class="swiper-slide youtube-card" data-id="{{ $testi->video_id ?? ''}}">
                        <div class="thumb-box">
                            <img src="https://img.youtube.com/vi/{{ $testi->video_id }}/maxresdefault.jpg" alt="{{ $testi->name ?? '' }}">
                            <div class="play-button"></div>
                        </div>

                        <div class="content-box">
                            <h3 class="video-heading">{{ $testi->name ?? ''}}</h3>
                            <p class="video-para">{{ $testi->short_description ?? ''}}</p>
                        </div>
                    </div>

                {{-- IMAGE TYPE --}}
                @elseif($testi->type == 'Image')
                    <div class="swiper-slide youtube-card">
                        <div class="thumb-box">
                            <img src="{{ showImage($testi->image ?? '', $testi->image_webp ?? '') }}" alt="{{ $testi->name ?? '' }}">
                        </div>

                        <div class="content-box">
                            <h3 class="video-heading">{{ $testi->name ?? '' }}</h3>
                            <p class="video-para">{{ $testi->short_description ?? ''}}</p>
                        </div>
                    </div>
                @endif

                @endforeach

            </div>

            <div class="vd-testi-swiper-btnnew">
                <div class="swiper-button-next acs-right"></div>
                <div class="swiper-button-prev acs-left"></div>
            </div>

        </div>

    </div>
</section>
@endif



@if(!empty($banner))
@include('website.sections.banner', ['banner' => $banner])
@endif

@endsection