@extends('layout.master')

@section('title', $blog->title)
@section('description', 'test')
@section('og_type', 'article')
@section('content')
<main id="main">
   <!-- ======= Breadcrumbs ======= -->

   <section id="why-us" class="whyus bg1 " style="margin-top: 130px;">
      <div class="overlay"></div>
      <div class="container">
         <div class="text-center page_header">
            <h2>{{ $blog->title }}</h2>
            <!-- <p class="">{{$blog->excerpt}}</p> -->

         </div>

   </section>
   <style>
      .share-button {
         display: inline-block;
         padding: 10px 20px;
         margin: 5px;
         border-radius: 5px;
         text-decoration: none;
         color: white;
         font-size: 16px;
         background-color: #3b5998;
      }
   </style>
   <!-- End Breadcrumbs -->
   <!-- ======= Blog Details Section ======= -->
   <section id="blog" class="blog">
      <div class="container" data-aos="fade-up">
         <div class="row g-5">
            <div class="col-lg-2">
            </div>
            <div class="col-lg-8">
               <article class="blog-details">
                  <div class="post-img">
                     <img src="{{asset('storage/'.$blog->image)}}" alt="" class="img-fluid single_img">
                  </div>
                  <!-- <h2 class="title">{{$blog->title}}</h2> -->
                  <!-- <div class="meta-top">
                     <ul>
                        <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <a href="#"><time datetime="2020-01-01">Jan 1, 2022</time></a></li>
                     </ul>
                  </div> -->
                  <!-- End meta top -->
                  <div class="content">
                     <p>
                        {!! $blog->body !!}
                     </p>
                     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                     <!--<a id="facebook-share" class="share-button" href="#" target="_blank"><i class="fa fa-facebook-f"></i> Share on Facebook</a>-->
                  </div>
                  <!-- End post content -->
               </article>
               <!-- End blog post -->
            </div>

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

   <script>
      document.addEventListener('DOMContentLoaded', function() {
         const postUrl = encodeURI(window.location.href);
         document.getElementById('facebook-share').href = `https://www.facebook.com/sharer/sharer.php?u=${postUrl}`;
      });
   </script>
   <!-- End Blog Details Section -->
</main>
<!-- End #main -->
@endsection