@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="pb-band">
  <div class="container">
    <nav class="pb-crumb" aria-label="Breadcrumb"><a href="{{ route('home') }}">Home</a><i>/</i><a href="{{ route('blog') }}">News</a><i>/</i><span>{{ \Illuminate\Support\Str::limit($blog->title, 48) }}</span></nav>
  </div>
</div>

<main class="bd-wrap">
  <header class="bd-head">
    <small class="bl-meta">{{ filled($blog->category) ? $blog->category : $company->name }} <i></i> {{ \Illuminate\Support\Carbon::parse($blog->created_at)->format('M d, 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 }}" onerror="this.closest('.bd-hero').remove()"></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="pb-grid">@include('partials.blog-cards', ['blogs' => $related])</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