@extends('layout.master')

@section('content')
    
    <section class="blog-section">
        
        <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 w-1/2">
              <h2 class="lg:text-6xl md:text-4xl text-2xl font-extrabold wow animate__animated animate__lightSpeedInLeft">Posts</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>

        {{-- content --}}
        <div class="lg:px-32  px-5 py-20">
          @if (count($blogs)>0)
            
            <div class="grid lg:grid-cols-3 md:grid-cols-2  gap-5 card ">
              @foreach ($blogs as $blog )
                <div class="">
                  <div class="bg-white shadow-md border border-gray-200 rounded-lg  mb-5">
                      <div class="img-div h-[250px]">
                        <a href="{{route('blog.single',$blog->slug)}}">
                            <img class="rounded-t-lg w-full h-full object-cover object-center" src="{{ $blog->getFirstMediaUrl('blog')}}" alt="">
                        </a>
                      </div>
                      <div class="p-5">
                          <a href="{{route('blog.single',$blog->slug)}}">
                              <h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2">{{$blog->blog_title}}</h5>
                          </a>
                          
                          <div class=" pt-0">
                            <a href="{{route('blog.single',$blog->slug)}}" class="inline-block">
                              {{-- <button type="submit" class="w-full relative  bg-transparent border-2 border-primary  text-primary hover:text-white transition-all duration-500 px-6 py-3 font-xl rounded-md sm:mb-0 before:content-[''] before:absolute before:left-0 before:w-full before:bottom-0 before:h-0 hover:before:h-full before:bg-primary before:transition-all before:duration-500 overflow-hidden"><span class="relative">Send Message</span></button> --}}
                              <button
                                class="w-full relative flex items-center gap-5  bg-transparent  text-primary hover:text-white transition-all duration-500 px-3 py-1 font-xl rounded-md sm:mb-0 before:content-[''] before:absolute before:left-0 before:w-0 hover:before:w-full before:top-0 before:h-full before:bg-primary before:transition-all before:duration-500 overflow-hidden"
                                type="button">
                                <span class="relative">Read More</span>
                                <div class="relative">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                      stroke="currentColor" class="w-4 h-4">
                                      <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path>
                                    </svg>
                                </div>
                              </button>
                            </a>
                          </div>
                      </div>
                  </div>
                </div>
              @endforeach
            </div>
          @else
            <div>
              <h2 class="text-center text-xl text-red-500">No Posts found !</h2>
            </div>
          @endif
        </div>
        {{-- end of content --}}
    </section>

@endsection