@extends('frontend.layouts.master')

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

@section('content')
@include('frontend.partials.page-hero', [
  'currentPage' => $campus['name'],
  'parentPage' => 'Campuses',
  'parentRoute' => 'campuses',
  'title' => $campus['title'],
  'subtitle' => strip_tags($campus['intro'] ?? ''),
  'bgImage' => $campus['breadcrumb_image'] ?? null,
])

<section class="course-details-section campus-details-section" aria-labelledby="campus-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">
          <span class="course-details-badge">{{ $campus['badge'] }}</span>
          <h2 id="campus-details-heading" class="course-details-heading">{{ $campus['title'] }}</h2>
          <div class="course-details-lead">{!! $campus['intro'] !!}</div>
          <p class="course-details-enquire">
            For campus enquiries, please call us on
            <a href="tel:02039623456">02039623456</a>
            or email:
            <a href="mailto:{{ $campus['key_info']['Email'] }}">{{ $campus['key_info']['Email'] }}</a>
          </p>
        </div>

        <div class="course-details-tabs" id="campusDetailsTabs">
          <div class="course-details-tabs__nav" role="tablist" aria-label="Campus 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="facilities">Facilities</button>
            <button type="button" class="course-details-tab" role="tab" aria-selected="false" data-course-tab="courses">Courses</button>
            <button type="button" class="course-details-tab" role="tab" aria-selected="false" data-course-tab="summary">Key Information</button>
          </div>

          <div class="course-details-tabs__panels">
            <div class="course-details-panel is-active" id="campus-tab-overview" role="tabpanel" data-course-panel="overview">
              <h3 class="course-details-panel__title">Campus Overview</h3>
              @foreach($campus['overview'] as $paragraph)
                <div class="course-overview-block">{!! $paragraph !!}</div>
              @endforeach
              <h4 class="campus-subheading">Student Life</h4>
              <div class="campus-student-life">{!! $campus['student_life'] !!}</div>
            </div>

            <div class="course-details-panel" id="campus-tab-facilities" role="tabpanel" data-course-panel="facilities" hidden>
              <h3 class="course-details-panel__title">Facilities &amp; Support</h3>
              <ul class="course-career-list">
                @foreach($campus['facilities'] as $facility)
                  <li><i class="fas fa-check-circle" aria-hidden="true"></i> {{ $facility }}</li>
                @endforeach
              </ul>
            </div>

            <div class="course-details-panel" id="campus-tab-courses" role="tabpanel" data-course-panel="courses" hidden>
              <h3 class="course-details-panel__title">Courses at {{ $campus['name'] }}</h3>
              <p>Explore popular programmes available through this campus location.</p>
              <div class="campus-course-list">
                @foreach($campus['courses'] as $course)
                  <article class="campus-course-item">
                    <div>
                      <h4 class="campus-course-item__title">{{ $course['title'] }}</h4>
                      <p class="campus-course-item__desc">{{ $course['desc'] }}</p>
                    </div>
                    <a href="{{ \App\Models\Course::urlForSlug($course['slug']) }}" class="course-cta-btn">
                      View Course <i class="fas fa-arrow-right" aria-hidden="true"></i>
                    </a>
                  </article>
                @endforeach
              </div>
            </div>

            <div class="course-details-panel" id="campus-tab-summary" role="tabpanel" data-course-panel="summary" hidden>
              <h3 class="course-details-panel__title">Key Information</h3>
              <dl class="course-key-info course-key-info--inline">
                @foreach($campus['key_info'] as $label => $value)
                  <div class="course-key-info__row">
                    <dt>{{ $label }}</dt>
                    <dd>{{ $value }}</dd>
                  </div>
                @endforeach
              </dl>
            </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="campusFaqAccordion">
            @foreach($campus['faqs'] as $index => $faq)
              @php $faqId = 'campus-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="#campusFaqAccordion">
                  <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="Campus summary">
        <div class="course-sidebar-card">
          <div class="course-sidebar-card__media">
            <img src="{{ $campus['image'] }}" alt="{{ $campus['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($campus['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">
              @php
                $phone = explode(' / ', $campus['key_info']['Phone'])[0];
                $phoneHref = preg_replace('/\D+/', '', $phone);
              @endphp
              <a href="tel:{{ $phoneHref }}"><i class="fas fa-phone" aria-hidden="true"></i> {{ $phone }}</a>
              <a href="mailto:{{ $campus['key_info']['Email'] }}"><i class="fas fa-envelope" aria-hidden="true"></i> {{ $campus['key_info']['Email'] }}</a>
            </div>
          </div>
        </div>
      </aside>
    </div>

    @if(count($relatedCampuses))
      <div class="course-related reveal-up" data-delay="100">
        <div class="course-related__head">
          <h3 class="course-related__title">Related Campuses</h3>
          <a href="{{ route('campuses') }}" class="course-related__link">View all campuses <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
        </div>
        <div class="row g-4">
          @foreach($relatedCampuses as $related)
            <div class="col-md-6 col-lg-4">
              <article class="course-card course-card--media">
                <div class="course-card-media">
                  <img src="{{ $related['image'] }}" alt="{{ $related['title'] }}" width="640" height="400" loading="lazy" class="lazy-img">
                  <span class="course-badge">{{ $related['badge'] }}</span>
                </div>
                <div class="course-card-body">
                  <h4 class="course-title">{{ $related['title'] }}</h4>
                  <p class="course-desc">{{ \Illuminate\Support\Str::limit(strip_tags($related['intro'] ?? ''), 90) }}</p>
                  <div class="course-card-footer">
                    <a href="{{ route('campus.details', $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