@extends('Main.layout.app')
@push('blogs_rel_url')
    @if ($blogs->onFirstPage())
        @if($blogs->hasPages())
            <link rel="next" href="{{$blogs->nextPageUrl()}}" />
        @endif
    @elseif($blogs->onLastPage())
        <link rel="prev" href="{{$blogs->previousPageUrl()}}" />
    @else
        <link rel="next" href="{{$blogs->nextPageUrl()}}" />
        <link rel="prev" href="{{$blogs->previousPageUrl()}}" />
    @endif
@endpush
@push('preload')
  <link rel="preload" as="style" href="{{asset('main/css/navbar.css')}}">
  <link rel="preload" as="style" href="{{asset('main/css/travel-blog.css')}}">
  @endpush
  @push('styles')
  <link href="{{asset('main/css/navbar.css')}}" rel="stylesheet">
  <link href="{{asset('main/css/travel-blog.css')}}" rel="stylesheet">
  @endpush

  @section('content')

  <main>

    <!-- Welcome Banner Area Start -->

    <div class="container mb-5">

        <div class="text-center mt-lg-5">

            <div class="welcom">

                <h1 class="blog-hed">Welcome to JODOGO Blog !</h1>

                <p class="blog-para">Here you can find latest travel news, articles, blogs, and more...!</p>

            </div>

        </div>

    </div>

     <!-- Welcome Banner Area End -->


           <!-- Recent blog posts -->
             <!-- Recent blog posts -->
    <div class="container mb-5">
         <h2 class="mb-5 mx-3 blog-hed2">Recent blog posts</h2>
            <div class="row">
            <!-- First Blog Post Start-->
                <div class="col-xl-6 clo-lg-6 col-12 mb-3">
                    <div class="card">
                    <a href="{{route('blog',[$blogs_top[0]->url])}}"> <img class="img-fluid"  src="{{ Storage::url($blogs_top[0]->image) }}" width="1000" height="400" alt="Jodogo Airport Assist Services"> </a>
                        <div class="card-body">
                                <div class="row">
                                    <div class="col-10">
                                    <a href="{{route('blog',[$blogs_top[0]->url])}}">
                                        <h3 class="card-title blog-hed3  blog-title">{{$blogs_top[0]->title}} </h3>
                                    </a>
                                    </div>
                                    <div class="col-2 text-end"> <a href="{{route('blog',[$blogs_top[0]->url])}}"><i class="bi bi-arrow-up-right travel-blog-icon"></i></a>
                                    </div>
                                </div>
                                    <p class="card-text">{{$blogs_top[0]->short_description}}</p>
                        </div>
                    </div>
                </div>
   <!-- First Blog Post End-->



            <div class="col-sm-6 mb-3">
                 <!-- Second Blog Post Start-->
                <div class="card mb-3">
                    <div class="row g-0">
                        <div class="col-6 pe-2">
                        <a href="{{route('blog',[$blogs_top[1]->url])}}">
                            <img src="{{ Storage::url($blogs_top[1]->image) }}"
                                class="img-fluid h-100" width="1000" height="600" alt="Jodogo Airport Assist Services"> </a>
                        </div>
                        <div class="col-6">
                            <div class="card-body">
                                <div class="row">
                                        <div class="text-end"> <a  href="{{route('blog',[$blogs_top[1]->url])}}">
                                            <i class="bi bi-arrow-up-right travel-blog-icon"></i></a></div>
                                        </div>
                                        <a href="{{route('blog',[$blogs_top[1]->url])}}">
                                            <h3 class="card-title blog-hed3">{{$blogs_top[1]->title}}</h3>
                                        </a>
                                            <p class="card-text">{{$blogs_top[1]->short_description}}</p>
                                </div>
                            </div>
                        </div>
                </div>
                <!-- Second Blog Post End-->

                <!-- Third Blog Post Start-->
                <div class="card mb-3">
                    <div class="row g-0">
                        <div class="col-6 pe-2">
                        <a href="{{route('blog',[$blogs_top[2]->url])}}">
                            <img src="{{ Storage::url($blogs_top[2]->image) }}"
                                class="img-fluid h-100"  width="1000" height="600" alt="Jodogo Airport Assist Services">
                        </a>
                        </div>
                        <div class="col-6">
                            <div class="card-body">
                                <div class="row">
                                    <div class="text-end">
                                        <a href="{{route('blog',[$blogs_top[2]->url])}}"> <i class="bi bi-arrow-up-right travel-blog-icon"></i></a>
                                    </div>
                                </div>
                                <a href="{{route('blog',[$blogs_top[2]->url])}}">
                                    <h3 class="card-title blog-hed3">{{ $blogs_top[2]->title }}</h3>
                                </a>
                                    <p class="card-text">{{ $blogs_top[2]->short_description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

     <!-- Third Blog Post End-->



    <!-- Other Blog Posts Start -->
    <div class="container all-blog">
    <h2 class="mb-5 mx-3 blog-hed2">All blog posts</h2>



      <!-- Other Blog Posts Start -->

      <div id="card-container" class="row">
    <!-- Loop through the first 6 blogs -->
    @foreach($blogs as $blog)
        <div class="col-lg-4 mb-3 card-item">
            <div class="card">
            <a href="{{route('blog',[$blog->url])}}">
                <img class="img-fluid"
                     src="{{ Storage::url($blog->image) }}"
                     width="1000" height="600" alt="Jodogo Airport Assist Services">
            </a>
                <div class="card-body">
                    <p class="fw-semibold blog-span mt-3">{{ date('d/F/Y', strtotime($blog->created_at)) }}</p>
                    <div class="row">
                        <div class="col-10">
                        <a href="{{route('blog',[$blog->url])}}">
                            <h3 class="card-title blog-hed3">{{ $blog->title }}</h3>
</a>
                        </div>
                        <div class="col-2 text-end">
                            <a href="{{route('blog',[$blog->url])}}">
                                <i class="bi bi-arrow-up-right travel-blog-icon"></i>
                            </a>
                        </div>
                    </div>
                    <p class="card-text">{{$blog->short_description}}</p>
                </div>
            </div>
        </div>
    @endforeach
    {{$blogs->links() }}
</div>
</div>

    <!-- Other Blog Posts End -->

    </main>
  @endsection