@extends('frontend.layouts.master')

@section('title', $blog->seoTitle())
@section('meta_description', $blog->seoDescription())
@section('meta_keywords', $blog->meta_keywords ?: 'UK university, FBA UK LTD, education blog')
@section('meta_robots', $blog->meta_robots ?: 'index,follow')
@section('canonical', $blog->canonical_url ?: route('blog.details', $blog->slug))
@section('og_type', 'article')
@section('og_title', $blog->og_title ?: $blog->seoTitle())
@section('og_description', $blog->og_description ?: $blog->seoDescription())
@section('og_image', $blog->ogImageUrl() ?: $blog->imageUrl())
@section('og_url', route('blog.details', $blog->slug))

@section('content')
@include('frontend.partials.page-hero', [
  'currentPage' => \Illuminate\Support\Str::limit($blog->title, 40),
  'parentPage' => 'Blog',
  'parentRoute' => 'blog',
  'title' => $blog->title,
  'subtitle' => strip_tags($blog->excerpt ?: ''),
  'bgImage' => $blog->breadcrumbImageUrl(),
])

<section class="course-details-section" aria-labelledby="blog-article-heading">
  <div class="container course-details-wrap">
    <div class="course-details-layout">
      <article class="course-details-main reveal-up">
        <div class="course-details-intro">
          @if($blog->category)
            <span class="course-details-badge">{{ $blog->category->name }}</span>
          @endif
          <h2 id="blog-article-heading" class="course-details-heading">{{ $blog->title }}</h2>
          <div class="blog-meta mb-3">
            <time class="blog-date" datetime="{{ optional($blog->published_at)->toDateString() }}">
              <i class="far fa-calendar" aria-hidden="true"></i>
              {{ optional($blog->published_at)->format('j F Y') }}
            </time>
            <span class="blog-read-time ms-3"><i class="far fa-clock" aria-hidden="true"></i> {{ $blog->estimatedReadTime() }}</span>
            @if($blog->author)
              <span class="ms-3"><i class="far fa-user" aria-hidden="true"></i> {{ $blog->author }}</span>
            @endif
          </div>
        </div>

        @if($blog->imageUrl())
          <div class="mb-4">
            <img src="{{ $blog->imageUrl() }}" alt="{{ $blog->title }}" class="img-fluid rounded w-100 lazy-img" loading="lazy">
          </div>
        @endif

        <div class="course-details-panel is-active blog-article-content">
          {!! $blog->content !!}
        </div>
      </article>

      <aside class="course-details-sidebar reveal-up" data-delay="100">
        <div class="course-sidebar-card">
          <div class="course-sidebar-card__body">
            <h3 class="course-sidebar-card__title">Need Guidance?</h3>
            <p class="mb-3">Talk to an FBA UK advisor about courses, finance and admissions.</p>
            <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 mt-3">
              <a href="tel:02039623456"><i class="fas fa-phone" aria-hidden="true"></i> 02039623456</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($related->count())
      <div class="course-related reveal-up mt-5">
        <div class="course-related__head">
          <h3 class="course-related__title">Related Articles</h3>
          <a href="{{ route('blog') }}" class="course-related__link">View all <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
        </div>
        <div class="row g-4">
          @foreach($related as $post)
            <div class="col-md-4">
              <article class="blog-card">
                <a href="{{ route('blog.details', $post->slug) }}" class="blog-image-link">
                  <div class="blog-image">
                    <img src="{{ $post->imageUrl() ?: \App\Support\BreadcrumbImage::FALLBACK }}" alt="{{ $post->title }}" width="600" height="360" loading="lazy" class="lazy-img">
                    <div class="blog-image-overlay" aria-hidden="true"></div>
                  </div>
                </a>
                <div class="blog-body">
                  <h4 class="blog-title"><a href="{{ route('blog.details', $post->slug) }}">{{ $post->title }}</a></h4>
                  <a href="{{ route('blog.details', $post->slug) }}" class="blog-link">Read Article <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
                </div>
              </article>
            </div>
          @endforeach
        </div>
      </div>
    @endif
  </div>
</section>
@endsection