@extends('frontend.maintemplate.maintemplate')

@section('title', $courseCategory->name . ' :: AgeLess Institute')

@section('content')

<style>
    .custom_ancer{
        background-color: #b2e9cf;
    text-decoration: none;
    border-radius: 29px;
    font-size: 22px;
    font-weight: bold;
    color: #377055;
    padding: 13px 24px;
    display: block;
   
  
  }
  .custom_ancer:hover {
    background-color: #b2e9cf;
    color: #377055;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    border-radius: 29px;
}

.complimentary-course {
    display: inline-block;
    margin-top: 41px;
    border: 2px solid #377055; /* Border color */
    border-radius: 50px; /* Rounded shape */
    padding: 15px 25px; /* Inner padding */
    background-color: #f7f7f7; /* Background color */
    font-size: 27px; /* Font size */
    font-weight: bold;/* Bold text */
    color: #377055; /* Text color */
    text-align: center; /* Center align */
    white-space: nowrap; /* Prevent text wrapping */
}



.breadcrumb {

    font-size: 18px; /* Adjust text size */
    color: #377055; /* Text color */
    
}

.breadcrumb-link {
    text-decoration: none;
    color: #377055; /* Same as text color */
}

.breadcrumb-link:hover {
    text-decoration: underline; /* Optional: Add underline on hover */
}

.breadcrumb-divider {
  font-weight: 100;
  font-size: 28px;
    margin: 0 5px; /* Add spacing around the › symbol */
    
}

.breadcrumb-current {
    color: #377055; /* Same text color */
}

</style>

    <!-- Banner Section  -->
    <div class="banner-section">
      <div class="banner-image-wrapper">
        <img src="{{ asset('storage/' . $courseCategory->image) }}" alt="">
      </div>
  </div>
  <!-- Banner Section  -->

  <!-- Courses  section  -->
  <div class="trichology-courses">
      <div class="icon-title-wrapper">
        <div class="container-fluid">
            <div class="title-inner">
          <div class="breadcrumb">
            <a href="{{ url('course-category-details/' . $courseCategory->slug) }}" class="breadcrumb-link">{{$courseCategory->name}}</a>
            <span class="breadcrumb-divider">›</span>
            <span class="breadcrumb-current">{{$courseSubCategory->name}}</span>
        </div>
      </div>
    </div>
          <div class="container-fluid">
              <div class="title-inner">
                  <div class="left-icon">
                      <div class="icon-wrapper">
                        <img src="{{ asset('storage/' . $courseSubCategory->image) }}" alt="">
                      </div>
                  </div>
                  <h5>{{ $courseSubCategory->name }}</h5> @if(!empty(trim($courseSubCategory->sub_title_meta))) <a href="#" class="custom_ancer" style="display: inline-block; max-width: none;">{{ $courseSubCategory->sub_title_meta }}</a>  @endif
              </div>
          </div>
      </div>
      <div class="overview-content">
          <div class="container-fluid">
              <div class="overview-inner">
                  <div class="total-hours-wrapper">
                      {{-- <div class="clock-wrapper">
                          <img src="./assets/images/others/clock-up-arrow.png" alt="">
                      </div>
                      <h6>Total Flying Hours: 16 Hrs</h6> --}}
                  </div>
                  <div class="content-para">
                    <p><span>Overview:</span>  {!! str_replace(['<p>', '</p>'], '', $courseSubCategory->description) !!}</p>
                    @if(!empty(trim($courseSubCategory->sub_title)))
                    <div class="complimentary-course">
                        <span>{{ $courseSubCategory->sub_title }}</span>
                    </div>
                @endif
                  </div>
              </div>
          </div>
      </div>
      @php
      // Check if any course has topics
      $hasTopics = false;
      foreach ($courses as $course) {
          if ($course->courseTopics->isNotEmpty()) {
              $hasTopics = true;
              break;
          }
      }
  @endphp

@if ($hasTopics)
    
      <div class="tab-section-wrapper">
          <div class="tab-button-wrapper">
              <div class="container-fluid">
                  <div class="tab-button-inner">
                      <ul class="nav nav-pills" id="pills-tab" role="tablist">
                        @php $sr = 1 @endphp
                        @foreach ($courses as $course)
                          <li class="nav-item" role="presentation">
                              <button class="nav-link {{ $sr==1 ? 'active' : '' }}" id="pills-{{ $course->id }}-tab" data-course-id="{{ $course->id }}" data-bs-toggle="pill"
                                  data-bs-target="#pills-{{ $course->id }}" type="button" role="tab" aria-controls="pills-{{ $course->id }}"
                                  aria-selected="{{ $sr==1 ? 'true' : 'false' }}">
                                  <div class="inner-button-wrapper">
                                      <div class="icon-wrapper">
                                          <div class="icon">
                                            <img src="{{ asset('frontend/assets/images/others/trichology-white.png') }}"
                                            alt="">
                                          </div>
                                      </div>
                                      <div class="course-name">
                                        {{ $course->name }} 
                                      </div>
                                      <div class="price-box">
                                        ₹ {{ number_format($course->fees_MRP, 0, '.', ',') }}
                                      </div>
                                  </div>
                              </button>
                          </li>

                          @php $sr++ @endphp
                          @endforeach
                      </ul>
                      <div class="right-add-to-cart-wrapper">
                          <button class="submit_btn">+ Add to Cart <img src="./assets/images/others/add-cart-img.png"
                                  alt=""></button>
                      </div>
                  </div>
              </div>
          </div>

          <div class="tab-content" id="pills-tabContent">
            @php $sr = 1 @endphp
            @foreach ($courses as $course)
              <div class="tab-pane fade  {{ $sr==1 ? 'show active' : '' }}" id="pills-{{ $course->id }}" role="tabpanel" aria-labelledby="pills-{{ $course->id }}-tab"
                  tabindex="0">
                  <!--  Courses Content  -->
                  <div class="courses-content">
                      <div class="courses-bottom-content">
                          <div class="container-fluid">
                              <div class="courses-bottom-inner">
                                  <div class="courses-data-wrapper">
                                      <div class="courses-data-inner">
                                          <div class="data-tooltip">
                                              <p>Total Flying Hours:  24 Hrs</p>
                                          </div>
                                          <form action="{{ route('cart.store') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="course_id" value="{{ $course->id }}" />
                                            {{-- <input type="hidden" name="status" value="1"/> --}}
                                              <div class="table-wrapper">
                                                  <div class="table-responsive">
                                                      <table class="table table-bordered">
                                                          <thead>
                                                              <tr>
                                                                  <th scope="col">Topics Covered</th>
                                                                  <th scope="col">Level</th>
                                                                  <th scope="col">Type</th>
                                                                  @if ($course->course_type === 'theory')
                                                                    
                                                                @else
                                                                <th scope="col">Practical Hours</th>
                                                                @endif
                                                                 
                                                              </tr>
                                                          </thead>
                                                          <tbody class="table-group-divider">
                                                            @foreach ($course->courseTopics->sortBy('sequence_number') as $courseTopic)
                                                            <tr>
                                                                <td>
                                                                    @if(!empty($courseTopic->topic->url))
                                                                    <a href="{{ $courseTopic->topic->url }}" target="_blank" style="display: inline-block; max-width: none;">{{ $courseTopic->topic->title }} <img src="{{ asset('frontend/assets/images/others/trichology-icon.png')}}" alt="{{ $courseTopic->topic->title }}"></a>
                                                                    @else
                                                                    {{ $courseTopic->topic->title }}
                                                                    @endif
                                                                </td>
                                                              
                                                                <td>{{ ucwords($courseTopic->level) }}</td>
                                                                <td>
                                                                    @php
                                                                    $types = is_array($courseTopic->types) ? $courseTopic->types : json_decode($courseTopic->types, true);
                                                                    $typeStr = $types ? implode(' + ', $types) : 'N/A';
                                                                    @endphp
                                                                    {{ ucwords($typeStr) }}
                                                                  </td>
                                                                  @if ($course->course_type === 'theory')
                                                                    
                                                                  @else
                                                                <td> {{$courseTopic->topic->practical_hours}} Hrs</td>
                                                                @endif

                                                            </tr>
                                                            @endforeach

                                                          </tbody>
                                                      </table>
                                                  </div>
                                              </div>
                                              <div class="submit-wrapper">
                                                  <button type="submit" class="submit_btn">Add to Cart</button>
                                              </div>
                                          </form>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <!--  Courses Content  -->
              </div>
              @php $sr++ @endphp
              @endforeach


          </div>
      </div>
      @else
      <div class="tab-section-wrapper">
    <p style="text-align: center; font-size: 18px; font-weight: bold;">Course not available in this section
    </p>
</div>
@endif
  </div>
  <!-- Courses  section  -->
@endsection