@extends('layout.master')
@section('meta_title',$blog->meta_title)     
@section('meta_description',$blog->meta_description)
@section('image',$blog->getFirstMediaUrl('blog'))
@section('content')
<section class="blog-section">
  <div>
      

    <div class="w-full h-[25vh] lg:h-[50vh] relative">
      <div class="absolute z-[1] top-0 w-full left-0 h-full flex items-center justify-center">
        <div class="text-white   text-center px-5 w-">
          <h2 class="lg:text-4xl md:text-2xl text-xl font-extrabold">{{$blog->blog_title}}</h2>
        </div>
      </div>
      <div class="w-full h-full">
        <img class="w-full h-full object-cover object-top brightness-50" src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg" />
      </div>
    </div>
  
  
  
    <div class="lg:pl-20  px-5 py-20 bg-blue-50">
      <div class="grid lg:grid-cols-3 grid-cols-1 mt-5 mb-20  mx-5">
          {{-- <div class="lg:order-1 order-2">
              <div class="lg:sticky text-2xl text-gray-600 gap-4 py-20 top-0  items-center flex flex-col">
                  
                  <h2 class="text-base">Share</h2>
                  <div class="gap-4 items-center flex  justify-center lg:justify-normal lg:flex-col">
                      <a href="https://www.facebook.com/sharer/sharer.php?u={{url()->current()}}"  class="share items-center justify-center flex flex-col">
                          <i class="fa-brands fa-facebook"></i>
                      </a>
                      <a href="https://twitter.com/intent/tweet?url={{ url()->current() }}" class="share items-center justify-center flex flex-col">
                          <i class="fa-brands fa-twitter"></i>
                      </a>
                  </div>
                  
              </div>
          </div> --}}
          <div class="lg:col-span-2">
              <h2 class="text-2xl text-orange-500 font-semibold">
                {{$blog->blog_title}}
                </h2>
                <div class="mt-5">
                  <img class="rounded-xl" src="{{ $blog->getFirstMediaUrl('blog')}}" alt="">
                </div>
             
              {{-- <div class="text-justify my-5">{!!$blog->content!!}</div> --}}
              <div class="text-justify my-5">
                {!!$blog->description!!}
              </div>
              <div class="flex gap-5 items-center mt-10">
                <h2 class="text-base font-bold">Share :-</h2>
                  <div class=" text-3xl flex gap-3">
                      <a class="share hover:-translate-y-2 transition-all duration-500 hover:text-blue-600" href="https://www.facebook.com/sharer/sharer.php?u={{url()->current()}}"  >
                          <i class="fa-brands fa-facebook"></i>
                      </a>
                      <a class="share hover:-translate-y-2 transition-all duration-500 hover:text-blue-400" href="https://twitter.com/intent/tweet?url={{ url()->current() }}">
                          <i class="fa-brands fa-twitter"></i>
                      </a>
                  </div>
              </div>
          </div>
          <div class="order-3">
              <div class="lg:sticky text-2xl text-gray-600 flex flex-col lg:px-10 py-10 top-0">
                  <h2 class="text-center">Recent Posts</h2>
                  
                  <div class="mt-10">
                    @if (count($recentBlogs)>0)
                    @foreach ($recentBlogs as $item)
                        
                      {{-- componenet --}}
                      <div class="card">
                        <div class="bg-white shadow-md border border-gray-200 rounded-lg  mb-5 grid grid-cols-2">
                            <div class="img-div">
                              <a href="{{route('blog.single',$item->slug)}}">
                                  <img class="w-full h-full object-cover object-center" class="rounded-l-lg" src="{{ $item->getFirstMediaUrl('blog')}}" alt="">
                              </a>
                            </div>
                            <div class="p-5 flex items-center">
                                <a href="{{route('blog.single',$item->slug)}}">
                                    <h5 class="text-gray-900 font-bold md:text-base text-sm tracking-tight mb-2">{{$item->blog_title}}</h5>
                                </a>
                                
                            </div>
                        </div>
                      </div>
                      {{-- end of component --}}
                    @endforeach
                    @else
                    <div>
                      <h2 class="text-center text-xl text-red-500">No recent Posts found !</h2>
                    </div>
                    @endif
                  </div>
    
              </div>
          </div>
      </div>
    </div>
  </div>
</section>
@endsection

@section('script')
<script>
   $(document).ready(function() {
            $('.share').on('click', function(event) {
                event.preventDefault(); 
                var newWindowWidth = 800;
                var newWindowHeight = 500;
                var left = (window.innerWidth - newWindowWidth) / 2;
                var top = (window.innerHeight - newWindowHeight) / 2;
                var newWindow = window.open($(this).attr('href'), '_blank', 'width=' + newWindowWidth + ', height=' + newWindowHeight + ', top=' + top + ', left=' + left);
                if (newWindow) {
                    newWindow.focus();
                }
            });
        });
</script>
@endsection