@extends('frontend.layouts.master')

@section('title', $course['title'] . ' | FBA UK LTD')

@section('content')
@include('frontend.partials.page-hero', [
  'currentPage' => $course['short_title'],
  'parentPage' => 'Courses',
  'parentRoute' => 'courses',
  'title' => $course['title'],
  'subtitle' => strip_tags($course['intro'] ?? ''),
  'bgImage' => $course['breadcrumb_image'] ?? null,
])

<section class="course-details-section" aria-labelledby="course-details-heading">
  <div class="container course-details-wrap">
    <div class="course-details-layout">
      <div class="course-details-main reveal-up">
        <div class="course-details-intro">
          @if(!empty($course['badge']))
            <span class="course-details-badge">{{ $course['badge'] }}</span>
          @endif
          @if(!empty($course['study_level']))
            <span class="course-details-badge course-details-badge--level">{{ $course['study_level'] }}</span>
          @endif
          <h2 id="course-details-heading" class="course-details-heading">{{ $course['title'] }}</h2>
          <div class="course-details-lead">{!! $course['intro'] !!}</div>
          @if(!empty($course['enquiry_note']))
            <div class="course-details-enquire">{!! $course['enquiry_note'] !!}</div>
          @endif
        </div>

        <div class="course-details-tabs" id="courseDetailsTabs">
          <div class="course-details-tabs__nav" role="tablist" aria-label="Course information">
            <button type="button" class="course-details-tab is-active" role="tab" aria-selected="true" data-course-tab="overview">Overview</button>
            <button type="button" class="course-details-tab" role="tab" aria-selected="false" data-course-tab="modules">Course Modules</button>
            <button type="button" class="course-details-tab" role="tab" aria-selected="false" data-course-tab="career">Career</button>
          </div>

          <div class="course-details-tabs__panels">
            <div class="course-details-panel is-active" id="course-tab-overview" role="tabpanel" data-course-panel="overview">
              <h3 class="course-details-panel__title">Course Overview</h3>
              @foreach($course['overview'] as $paragraph)
                <div class="course-overview-block">{!! $paragraph !!}</div>
              @endforeach
            </div>

            <div class="course-details-panel" id="course-tab-modules" role="tabpanel" data-course-panel="modules" hidden>
              <h3 class="course-details-panel__title">Course Modules</h3>
              @if(!empty($course['modules']))
                <div class="course-modules-content">
                  {!! $course['modules'] !!}
                </div>
              @else
                <p class="course-details-empty">Module details will be published soon.</p>
              @endif
            </div>

            <div class="course-details-panel" id="course-tab-career" role="tabpanel" data-course-panel="career" hidden>
              <h3 class="course-details-panel__title">Career and Progression</h3>
              <div class="course-career-intro">{!! $course['careers']['intro'] !!}</div>
              <ul class="course-career-list">
                @foreach($course['careers']['fields'] as $field)
                  <li><i class="fas fa-check-circle" aria-hidden="true"></i> {{ $field }}</li>
                @endforeach
              </ul>
            </div>
          </div>
        </div>

        <div class="course-details-faq reveal-up" data-delay="100">
          <h3 class="course-details-panel__title">Frequently Asked Questions</h3>
          <div class="accordion faq-accordion course-faq-accordion" id="courseFaqAccordion">
            @foreach($course['faqs'] as $index => $faq)
              @php $faqId = 'course-faq-' . ($index + 1); @endphp
              <div class="accordion-item">
                <h4 class="accordion-header">
                  <button class="accordion-button {{ $index === 0 ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $faqId }}" aria-expanded="{{ $index === 0 ? 'true' : 'false' }}" aria-controls="{{ $faqId }}">
                    <span class="faq-q-icon" aria-hidden="true"><i class="fas fa-circle-question"></i></span>
                    <span class="faq-q-text">{{ $faq['q'] }}</span>
                  </button>
                </h4>
                <div id="{{ $faqId }}" class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}" data-bs-parent="#courseFaqAccordion">
                  <div class="accordion-body">{!! $faq['a'] !!}</div>
                </div>
              </div>
            @endforeach
          </div>
        </div>
      </div>

      <aside class="course-details-sidebar reveal-up" data-delay="150" aria-label="Course summary">
        <div class="course-sidebar-card">
          <div class="course-sidebar-card__media">
            <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" width="640" height="360" loading="lazy" class="lazy-img">
          </div>
          <div class="course-sidebar-card__body">
            <h3 class="course-sidebar-card__title">Key Information</h3>
            <dl class="course-key-info">
              @foreach(array_slice($course['key_info'], 0, 6) as $label => $value)
                <div class="course-key-info__row">
                  <dt>{{ $label }}</dt>
                  <dd>{{ $value }}</dd>
                </div>
              @endforeach
            </dl>
            <a href="{{ route('contact') }}" class="btn btn-primary w-100 course-sidebar-cta">
              <i class="fas fa-paper-plane" aria-hidden="true"></i> Enquire Now
            </a>
            <div class="course-sidebar-contact">
              <a href="tel:02035811996"><i class="fas fa-phone" aria-hidden="true"></i> 02035811996</a>
              <a href="mailto:admissions@fbaukltd.com"><i class="fas fa-envelope" aria-hidden="true"></i> admissions@fbaukltd.com</a>
            </div>
          </div>
        </div>
      </aside>
    </div>

    @if(count($relatedCourses))
      <div class="course-related reveal-up" data-delay="100">
        <div class="course-related__head">
          <h3 class="course-related__title">Related Courses</h3>
          <a href="{{ route('courses') }}" class="course-related__link">View all courses <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
        </div>
        <div class="row g-4">
          @foreach(array_slice($relatedCourses, 0, 3) as $related)
            <div class="col-md-6 col-lg-4">
              <article class="course-card course-card--media">
                <a href="{{ $related['url'] ?? \App\Models\Course::urlForSlug($related['slug']) }}" class="course-card-media">
                  <img
                    src="{{ !empty($related['image']) ? $related['image'] : asset('frontend/assets/images/No_Image_Available.jpg') }}"
                    alt="{{ $related['title'] }}"
                    width="640"
                    height="400"
                    loading="lazy"
                    class="lazy-img"
                  >
                  @if(!empty($related['badge']))
                    <span class="course-badge">{{ $related['badge'] }}</span>
                  @endif
                </a>
                <div class="course-card-body">
                  <h4 class="course-title">{{ $related['short_title'] }}</h4>
                  <p class="course-desc">{{ \Illuminate\Support\Str::limit(strip_tags($related['intro'] ?? ''), 90) }}</p>
                  <div class="course-card-footer">
                    <a href="{{ $related['url'] ?? \App\Models\Course::urlForSlug($related['slug']) }}" class="course-cta-btn">View Details <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
                  </div>
                </div>
              </article>
            </div>
          @endforeach
        </div>
      </div>
    @endif
  </div>
</section>
@endsection