@extends('layout', ['page' => 'dashboard'])

@section('content')
   @if(isset($breadcrumb) && !empty($breadcrumb))
      @include('partials._breadcrumb-title', ['breadcrumb' => $breadcrumb])
   @endif

   <section class="wrap pb-0">
      <div class="container">
         <div class="abt-dec">
            <div class="box-shadow p-4">
               <div class="row">
                  <div class="col-lg-4">
                     <div class="card mb-4">
                        <div class="card-body text-center">
                           <img src="{{ asset($user->student_avatar) }}" width="100" height="100" class="rounded-circle img-fluid" alt="student" />
                           <h5 class="my-2">{{  $user->name }}</h5>
                           <div class="d-flex justify-content-center mb-2">
                              <a href="{{ route('courses') }}" class="btn btn-sm btn-primary m-1 blink_me">Apply Course
                                 </a>

                              @if(!empty($statements) && count($statements) > 0)
                              <button type="button" class="btn btn-sm btn-outline-primary m-1" onclick="scrollToSection('statementTable')">Statement</button>
                              @endif
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-8">
                     <div class="card mb-4">
                        <div class="card-body">
                           <div class="row">
                              <div class="col-sm-3">
                                 <p class="mb-0">Full Name</p>
                              </div>
                              <div class="col-sm-9">
                                 <p class="text-muted mb-0">{{  $user->name }}</p>
                              </div>
                           </div>
                           <hr>
                           <div class="row">
                              <div class="col-sm-3">
                                 <p class="mb-0">Email</p>
                              </div>
                              <div class="col-sm-9">
                                 <p class="text-muted mb-0">{{  $user->email }}</p>
                              </div>
                           </div>
                           <hr>
                           <div class="row">
                              <div class="col-sm-3">
                                 <p class="mb-0">Phone</p>
                              </div>
                              <div class="col-sm-9">
                                 <p class="text-muted mb-0">{{  $user->mobile }}</p>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               @if(!empty($students) && count($students) > 0)
               <div id="coursesTable">
                  <div class="title title-doted m-0 text-left">
                     <h2 class="d-inline-block" style="text-align: justify;">Courses</h2>
                  </div>
                  <!-- Courses Table -->
                  <div class="row justify-content-center">
                     @include('partials._student-list', compact('students'))
                  </div>
               </div>
               @endif
            </div>
         </div>
      </div>
   </section>

   @if (!empty($statements) && count($statements) > 0)
   <section class="wrap" id="statementTable">
      <div class="container">
         <div class="box-shadow p-4">
               <div class="title title-doted m-0 text-left">
                  <h2 class="d-inline-block" style="text-align: justify;">Statements</h2>
               </div>
               <!-- Statement Table -->
               <div class="row justify-content-center">
                  @include('partials._statement-list', compact('statements'))
               </div>
         </div>
      </div>
   </section>
   @endif

@endsection

@push('js')
   <script>
      function scrollToSection(sectionId) {
         let element = document.getElementById(sectionId);
         if (element) {
            let elementPosition = element.getBoundingClientRect().top + window.scrollY;
            let offset = 220;
            window.scrollTo({ top: elementPosition - offset, behavior: 'smooth' });
         }
      }
   </script>
@endpush