@extends('layouts.app')

@section('title', $blog->title)

@section('content')
@php
    $words = str_word_count(strip_tags((string) $blog->content));
    $mins = max(1, (int) ceil($words / 200));
    $shareUrl = urlencode(url()->current());
    $shareText = urlencode($blog->title);
@endphp
<div class="bz-bar">
  <div class="bz-wrap">
    <h1>{{ \Illuminate\Support\Str::limit($blog->title, 60) }}</h1>
    <nav><a href="{{ route('home') }}">Home</a><i></i><a href="{{ route('blog') }}">Blog</a><i></i><span>Article</span></nav>
  </div>
</div>

<main class="bd-wrap">
  <header class="bd-head">
    <small class="bl-meta">{{ \Illuminate\Support\Carbon::parse($blog->created_at)->format('d M Y') }} <i></i> {{ $mins }} min read</small>
    <h1>{{ $blog->title }}</h1>
    @if (filled($blog->short_description))<p class="bd-lead">{{ $blog->short_description }}</p>@endif
  </header>
  @if ($blog->image_url)<div class="bd-hero"><img src="{{ $blog->image_url }}" alt="{{ $blog->title }}"></div>@endif

  <article class="bd-body prose">
    {{-- Blog body is HTML written in the CMS editor (trusted admin content). --}}
    {!! $blog->content !!}
  </article>

  <div class="bd-foot">
    <div class="bd-share">
      <span>Share</span>
      <a href="https://www.facebook.com/sharer/sharer.php?u={{ $shareUrl }}" target="_blank" rel="noopener" aria-label="Share on Facebook" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
      <a href="https://wa.me/?text={{ $shareText }}%20{{ $shareUrl }}" target="_blank" rel="noopener" aria-label="Share on WhatsApp" title="WhatsApp"><i class="fa-brands fa-whatsapp"></i></a>
      <a href="https://twitter.com/intent/tweet?url={{ $shareUrl }}&text={{ $shareText }}" target="_blank" rel="noopener" aria-label="Share on X" title="X"><i class="fa-brands fa-x-twitter"></i></a>
      <button type="button" id="copyLink" aria-label="Copy link" title="Copy link"><i class="fa-regular fa-copy"></i></button>
    </div>
    <a href="{{ route('blog') }}" class="sec-link"><svg viewBox="0 0 24 24"><path d="M19 12H5M11 6l-6 6 6 6"/></svg> All articles</a>
  </div>

  @if ($related->count())
  <section class="bd-related">
    <div class="sec-head"><div><small>Keep reading</small><h2 class="title">More stories</h2></div></div>
    <div class="bl-grid">
      @foreach ($related as $b)
        <a class="bl-card" href="{{ route('blog.show', $b->slug) }}">
          <span class="bl-img">@if ($b->image_url)<img src="{{ $b->image_url }}" alt="{{ $b->title }}" loading="lazy">@endif</span>
          <small class="bl-meta">{{ \Illuminate\Support\Carbon::parse($b->created_at)->format('d M Y') }}</small>
          <h3>{{ $b->title }}</h3>
          <u>Read more <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></u>
        </a>
      @endforeach
    </div>
  </section>
  @endif
</main>
@endsection

@push('scripts')
<script>
document.getElementById('copyLink').onclick = function () {
  var done = function () { toastr.remove(); toastr.success('Link copied'); };
  if (navigator.clipboard) navigator.clipboard.writeText(location.href).then(done);
  else { var t = document.createElement('input'); t.value = location.href; document.body.appendChild(t); t.select(); document.execCommand('copy'); t.remove(); done(); }
};
</script>
@endpush