@extends('frontend.layouts.app')

@section('title')
Blogs | Philippine Green Building Initiative (PGBI)
@endsection

@section('seo')
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Blogs | Philippine Green Building Initiative (PGBI)" />
<meta property="og:url" content="{{ url('blog-single') }}" />
<meta property="og:site_name" content="Blogs | Philippine Green Building Initiative (PGBI)" />
<meta property="og:image" content="{{ asset('blogs/' . $blogs->image) }}" />
<meta property="og:thumbnail" content="{{ asset('blogs/' . $blogs->image) }}" />
@endsection

@section('content')
<div class="container py-5">

  <div class="d-md-block d-none" style="padding: 1rem"></div>

  <div class="d-flex align-items-center gap-2 mb-5">
    <i class="fa-solid fa-arrow-left"></i>
    <a href="{{ url('news-and-events') }}" class="hover-link black-link">
      Return back to Media Center
    </a>
  </div>

  <div class="row">
    <div class="col-12 col-md-9">
      @if ($blogs->image != null)
        <img src="{{ asset('blogs/' . $blogs->image) }}" class="img-fluid mb-5" alt="">
      @else
        <div class="overflow-hidden mb-5">
          <iframe width="845" height="410" src="{{ $blogs->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </div>
      @endif
      <h2 class="fw-bold mb-5">{{ $blogs->title }}</h2>

      {!! $blogs->description !!}
    </div>
    <div class="col-12 col-md">
      <h4 class="fw-bold mb-4">Recent News</h4>
      
      <div class="row gy-3">
        @foreach ($recent as $items)
          <div class="col-12 border-bottom border-1 pb-3">
            <div class="row">
              <div class="col-12 col-md">
                <img src="{{ asset('blogs/' . $items->image) }}" class="img-fluid" alt="">
              </div>
              <div class="col-12 col-md d-flex align-items-center">
                <div>
                  <div class="mb-5">
                    <span class="fw-bold">{{ Str::limit(strip_tags($items->title), 20, '...') }}</span>
                  </div>
                  <a href="{{ url('blog-single/' . $items->title) }}" class="hover-link black-link">
                    Read more
                  </a>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </div>

  <div class="d-md-block d-none" style="padding: 2rem"></div>

</div>
@endsection