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

      <!-- End Header -->
      <main id="main_subjects">
        
         <section id="features" class="course-list mypage" data-aos="fade-up">
            <div class="container">
               <div class="tab-wrapper">
                  <ul class="nav nav-tabs d-flex justify-content-center position-relative">
                     <li class="nav-item">
                        <a class="nav-link active show" data-bs-toggle="tab" data-bs-target="#tab-1-8th">
                           <h4>Teachers</h4>
                        </a>
                     </li>
                     <!-- End Tab 1 Nav -->
                     <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-2-9th">
                           <h4>Students</sup></h4>
                        </a>
                     </li>
                     <!-- End Tab 2 Nav -->
                     <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-3-10th">
                           <h4>FAQs</sup></h4>
                        </a>
                     </li>
                
                     
                  </ul>
               </div>
               <div class="tab-content">
                  <div class="tab-pane active show" id="tab-1-8th">
                     <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" role="tabpanel" >
                                 <div class="d-flex align-items-start">
                                    
                                    <!--tab content start-->
                                    <div class="tab-content sub-tab">
                                       <!--Teachers-->
                               <div class="row">
                                             <div class="col-lg-12">
                                                <div class="sub-tab-content">
                                                   <h2>Teachers</h2>
                                                   <span class="schoolcode">School Code : {{$principal_students[0]->school_code}}</span>
                                                   @if(count($principal_teachers) > 0)
                                                   @foreach($principal_teachers as $princTeacher)
                                                   
                                                    <div class="d-lg-flex justify-content-around mt-2 fs-4 teacher_id" data-teacher-id="{{$princTeacher->id}}">
													
                                                            <div>{{$princTeacher->name}}</div>
                                                            <div>{{$princTeacher->phone}}</div>
                                                            <div>{{$princTeacher->email}}</div>
                                                    </div>
                                                                                                       <div class="sub-tab-block teachers m-2 teacher-{{$princTeacher->id}}">
                                                                                                            @foreach($loginUsers as $logUsers)
                                                    <div class="form-check">
                                                       @php
                                                    $userIdsArray = explode(',', $princTeacher->user_login_type);
                                                          @endphp
                                                        <input class="form-check-input" type="checkbox" data-user-id="{{$logUsers->id}}" value="" id="checkbox_{{$logUsers->id}}" @if(in_array($logUsers->id, $userIdsArray)) checked @endif>
                                                        <label class="form-check-label" for="checkbox_{{$logUsers->id}}">
                                                            {{$logUsers->name}}
                                                        </label>
                                                      </div> 
                                                      @endforeach
													  
                                                   </div>
												   <hr style="height:20px;border-width:0;color:gray;background-color:gray">
                                                   @endforeach
												   
                                                   @endif
                                                </div>
                                             </div>
                                          </div>
                                   
                                    </div>
                                    <!--tab content end-->
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- End Tab Content 1 -->
                  <!--9th class tab starts here-->
                  <div class="tab-pane" id="tab-2-9th">
                     <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" role="tabpanel" >
                                 <div class="d-flex align-items-start">
                                  
                                    <!--tab content start-->
                                    <div class="tab-content sub-tab">
                                       <!--Students-->
                                     <div class="row">
                                             <div class="col-lg-12">
                                                <div class="sub-tab-content">
                                                   <h2>Students</h2>
                                                   <span class="schoolcode">School Code : {{$principal_students[0]->school_code}}</span>
												   
                                                
												   
                                                   <div class="sub-tab-block m-2 m-lg-3">
                                                    <table class="table table-striped table-hover">
                                                        <thead>
                                                            <tr>
                                                              <!-- <th scope="col">#S.No</th> -->
                                                              <th scope="col">Name</th>
                                                              <th scope="col">Mobile Number</th>
                                                              <th scope="col">Grade</th>
                                                              <th scope="col">Email</th>
                                                              <th scope="col">Registered Date</th>
                                                            </tr>
                                                          </thead>
                                                          <tbody>
                                                            @if(!empty($principal_students))
                                                               @foreach($principal_students as $prinStd)
                                                            
                                                            <tr>
                                                              <!-- <th scope="row"></th> -->
                                                              <td>{{$prinStd->name}}</td>
                                                              <td>{{$prinStd->phone}}</td>
                                                              <td>{{$prinStd->grade}}</td>
                                                              <td>{{$prinStd->email}}</td>
                                                              <td>{{$prinStd->created_at}}</td>
                                                            </tr>
                                                            @endforeach
                                                            @else
                                                            <tr>No data found</tr>
                                                            @endif
                                                          </tbody>
                                                      </table>
                                                   </div>
                                                   
                                                </div>
                                             </div>
                                          </div>
                                 
                                  
                                    </div>
                                    <!--tab content end-->
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- End Tab Content 2 (9th class tab ends here) -->
                  <div class="tab-pane" id="tab-3-10th">
                    <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"  role="tabpanel" >
                                 <div class="d-flex align-items-start">
                                  
                                    <!--tab content start-->
                                    <div class="tab-content sub-tab">
                                       <!--Students-->
                                     <div class="row">
                                             <div class="col-lg-12">
                                                <div class="sub-tab-content">
                                                   <h2>FAQs</h2>
                                                 
                                                   <div class="sub-tab-block">
                                                        Faqs will be place here
                                                   </div>
                                                   
                                                </div>
                                             </div>
                                          </div>
                                 
                                  
                                    </div>
                                    <!--tab content end-->
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- End Tab Content 3 -->
        
               </div>
            </div>
         </section>
         <!-- End Features Section -->
      </main>
      <!-- End #main -->
@endsection