@extends('frontend.layout.main')

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

@push('head')
<link rel="canonical" href="{{ url()->current() }}">
<link rel="stylesheet" href="{{ asset('assets/css/blog.css') }}">

<meta name="robots" content="index, follow">

<meta property="og:title" content="{{ $blog->title }}">
<meta property="og:description" content="{{ \Illuminate\Support\Str::limit(strip_tags($blog->content), 150) }}">
<meta property="og:image" content="{{ asset('uploads/blogs/'.$blog->cover_image) }}">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ $blog->title }}">
<meta name="twitter:description" content="{{ \Illuminate\Support\Str::limit(strip_tags($blog->content), 150) }}">
<meta name="twitter:image" content="{{ asset('uploads/blogs/'.$blog->cover_image) }}">
@endpush

@section('main-container')

<section class="blog-detail-section py-5">
  <div class="container">

    <!-- BREADCRUMB (Industrial Minimal) -->
    <nav class="blog-breadcrumb" aria-label="breadcrumb">
      <a href="/">Home</a>
      <span class="bc-separator">//</span>
      <a href="/blogs">Insights</a>
      <span class="bc-separator">//</span>
      <span class="active-crumb">{{ $blog->title }}</span>
    </nav>

    <div class="row g-4">

      <!-- LEFT CONTENT -->
      <div class="col-lg-8">
        <article class="blog-content">

          <!-- TITLE (Oswald Bold Structural Typography) -->
          <h1 class="blog-main-title">{{ $blog->title }}</h1>
          
          @php
            $wordCount = str_word_count(strip_tags($blog->content));
            $readingTime = ceil($wordCount / 200);
          @endphp

          <!-- META (Grid Segment Design) -->
          <div class="blog-meta-grid">
            <div class="meta-slot">
              <span class="meta-label">Release Date</span>
              <span class="meta-value">{{ date('d M Y', strtotime($blog->created_at)) }}</span>
            </div>
            <div class="meta-slot">
              <span class="meta-label">Est. Read</span>
              <span class="meta-value">{{ $readingTime }} Mins</span>
            </div>
            <div class="meta-slot">
              <span class="meta-label">Traffic</span>
              <span class="meta-value">{{ $blog->views }} Architectural Views</span>
            </div>
          </div>

          <!-- COVER IMAGE FRAME -->
          <div class="blog-cover-frame">
            <img src="{{ asset('uploads/blogs/'.$blog->cover_image) }}" alt="{{ $blog->title }}">
            <div class="frame-corner top-left"></div>
            <div class="frame-corner bottom-right"></div>
          </div>

          <!-- ARTICLE MARKDOWN / CONTENT BODY -->
          <div class="article-content-body">
            {!! $blog->content !!}
          </div>

          <!-- INDUSTRIAL PROJECT CTA (Heavy Duty Style) -->
          <div class="industrial-cta-panel">
            <div class="cta-grid-pattern"></div>
            <div class="cta-content">
              <span class="panel-tag">AMEYA PEB Engineering Division</span>
              <h4 class="panel-heading">Need a Structural PEB Solution for Your Industrial Site?</h4>
              <p class="panel-text">Connect with our structural engineers today to map out a precise, cost-effective, high-speed warehouse or factory design.</p>
              <a href="/contact" class="btn-industrial-primary">
                <span>Initiate Consultation</span>
              </a>
            </div>
          </div>

          <!-- NAVIGATION CARDS -->
          <div class="blog-nav-framework">
            @if($prevBlog)
            <a href="{{ url('/blogs/'.$prevBlog->slug) }}" class="nav-block prev-block">
              <div class="nav-label">← Previous Field Report</div>
              <div class="nav-title-text">{{ \Illuminate\Support\Str::limit($prevBlog->title, 45) }}</div>
            </a>
            @else
            <div class="nav-block empty-block"></div>
            @endif

            @if($nextBlog)
            <a href="{{ url('/blogs/'.$nextBlog->slug) }}" class="nav-block next-block">
              <div class="nav-label">Next Field Report →</div>
              <div class="nav-title-text">{{ \Illuminate\Support\Str::limit($nextBlog->title, 45) }}</div>
            </a>
            @endif
          </div>

        </article>
      </div>

      <!-- RIGHT SIDEBAR -->
      <div class="col-lg-4">
        <aside class="industrial-sidebar">
          
          <!-- Sidebar Header using your Left-Bar structure -->
          <h5 class="sidebar-framework-heading">Trending Knowledge</h5>

          <div class="trending-posts-stack">
            @foreach($trendingBlogs as $item)
            <div class="sidebar-post-card">
              <div class="sidebar-img-wrap">
                <img src="{{ asset('uploads/blogs/'.$item->cover_image) }}" alt="{{ $item->title }}">
              </div>
              <div class="sidebar-post-details">
                <a href="{{ url('/blogs/'.$item->slug) }}" class="post-link-title">
                  {{ \Illuminate\Support\Str::limit($item->title, 55) }}
                </a>
                <div class="post-metrics">
                  <span>Metrics: {{ $item->views }} views</span>
                  <a href="{{ url('/blogs/'.$item->slug) }}" class="action-arrow">Review Specs →</a>
                </div>
              </div>
            </div>
            @endforeach
          </div>

        </aside>
      </div>

    </div>
  </div>
</section>

@endsection