@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

@include('components.navbar')
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init();
</script>
<div class="bg-center bg-cover " style=" background-image: url('{{ url('/images/blogs/Wallpaper.png') }}');">
    <div class="container mx-auto">
        <div class="py-32 ml-4 text-white md:ml-20">
            <h1 class="text-2xl font-bold md:text-6xl">Blogs</h1>
            <p class="text-sm text-justify md:text-lg">
                Michael Angelo Manpower Exponent Inc.
            </p>
        </div>
    </div>
</div>
<div data-aos="fade-down" class="flex items-center justify-center">
    <div class="container ">
        <div data-aos="fade-down" class="my-8 space-y-12 text-center text-red-600">
            <h1 class="text-2xl font-bold lg:text-4xl">
                What's New?
            </h1>
            <p class=" text-md lg:text-lg">
                Exploring opportunities overseas? Find out what's new in the world of working abroad!
            </p>
        </div>
    </div>
</div>
<div data-aos="fade-right" class="flex items-center justify-center">
    <div class="container ">
        <div class="mx-4 md:mx-20 lg:mx-32">
            <form class="flex items-center justify-center md:items-end md:justify-end" method="GET" action="{{ url('/blogs') }}">
                <input type="text" name="query" id="voice-search" class="bg-white border border-black text-black text-sm rounded-l-full block w-full md:w-1/5 pl-4 p-2.5" placeholder="Search" value="{{ request()->input('query') }}">
                <button type="submit" class="inline-flex items-center border-black py-2.5 px-8 text-sm font-medium text-white bg-red-600 rounded-r-full border">
                    Search
                </button>
            </form>

            <div class="flex flex-col space-y-4">
                <ul class="flex flex-row space-x-8 text-lg font-semibold text-red-600 lg:text-xl">
                    <li>
                        Filter
                    </li>
                    <li>
                        View All
                    </li>
                </ul>
                <div class="w-full border-t-8 border-red-600 "></div>
            </div>
        </div>
    </div>
</div>

<div class="flex items-center justify-center">
    <div class="container ">
        <div class="grid grid-cols-1 mt-12 mb-40">
            @foreach($blogs as $blog)
            <div data-aos="fade-up" class="grid grid-cols-1 p-4 mx-4 my-4 border-2 lg:grid-cols-2 md:mx-32 lg:mx-40 xl:mx-60 hover:shadow-xl rounded-xl">
                <div>
                    <img class="w-auto min-h-full " src="{{ asset('saved_images/images/' . $blog->image) }}" alt="">
                </div>
                <div class="p-4">
                    <div class="flex justify-between mb-4 text-black ">
                        <p>Posted by: {{$blog->author->name}} </p>
                        <p>{{date('F j, Y ', strtotime($blog->created_at))}}</p>
                    </div>
                    <div class="space-y-4 ">
                        <h1 class="text-2xl font-bold text-red-600 ">
                            {{$blog->blog_name}}
                        </h1>
                        <p class="text-black text-md">
                            {{$blog->short_description}}
                        </p>
                    </div>
                    <div class="flex justify-end">
                        <a href="{{url('blogs_details', $blog->id)}}">
                            <p class="text-lg text-blue-600 underline ">Read More</p>
                        </a>
                    </div>

                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

@include('components.footer2')


@endsection