@extends('front/layout')
@section('page_title','Animation')
@section('container')

<main id="main_subjects">
         
         <section id="features" class="course-list" data-aos="fade-up">
            <div class="container">
               <div class="tab-wrapper">
                  <ul class="nav nav-tabs d-flex justify-content-center position-relative classtab">
                  	@foreach($classess as $key=>$cls)
						                     <li class="nav-item">
                        <a class="nav-link cls show" data-bs-toggle="tab" data-bs-target="#tab-{{$key+1}}-{{$cArr[0]}}{{$cArr[1]}}" data-cls="{{$cls->id}}" data-cname="{{$cArr[0]}}" data-toggle="tab" href="#class{{$cArr[0]}}" target="_blank">
                           <h4>{{$cArr[0]}}<sup>{{$cArr[1]}}</sup></h4>
                        </a>
                     </li>
                     @endforeach
                     <!-- End Tab 1 Nav -->                     
                  </ul>
               </div>
               <div class="tab-content">
                  <div class="tab-pane active show chaptersTab">
                     <div class="container">
                        <div class="row gy-4">
                           <div class="col-lg-12 order-2 order-lg-1 p-0" data-aos="fade-up" data-aos-delay="100">
                              <div class="tab-pane fade show active pt-4" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                                 <div class="d-flex align-items-start">
                                    <ul class="nav flex-column nav-pills me-3 tabs-left Subjs" id="v-pills-tab" role="tablist" aria-orientation="vertical">                                       
                                    </ul>


                                    <!--tab content start-->
                                    <div class="tab-content sub-tab" id="v-pills-tabContent-9th">
                                       <!--physics-->
                                       <div class="tab-pane fade show active sub-chapters" id="v-pills-physics-9th" role="tabpanel" aria-labelledby="v-pills-physics-tab-9th">
                                          <div class="row">
                                             <div class="col-lg-12 class8cont">
                                                <!-- chapters details displayed here -->
                                             </div>
                                          </div>
                                       </div>
                                       <!--physics end-->
                                    </div>
                                    <!--tab content end-->
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- End Tab Content 1 -->
                  
               </div>
            </div>
         </section>
         <!-- End Features Section -->
      </main>

 <style>
  .tab-content>.tab-pane{
    display: block !important;
  }
        
</style> 

@endsection