@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="flex items-center justify-center">
        <div class="container mx-auto">
            <div class="py-32 ml-4 text-white md:ml-20">
                <h1 class="text-2xl font-bold lg:text-4xl">Blogs</h1>
                <p class="ml-2 text-sm text-justify lg:text-lg">
                    Michael Angelo Manpower Exponent Inc.
                </p>
            </div>
        </div>
    </div>


</div>
<div class="flex items-center justify-center mt-20">
    <div class="container">
        <div class="grid grid-cols-1 mx-8 lg:grid-cols-2 lg:mx-8 xl:mx-40">
            <div>
                <img class="object-contain w-full h-full " src="{{ asset('saved_images/images/' . $blogs->image) }}" alt="">
                <div class="flex justify-between text-sm font-semibold lg:text-lg">
                    <p>Posted by: {{$blogs->author->name}}</p>
                    <p>{{date('F j, Y ', strtotime($blogs->created_at))}}</p>
                </div>
            </div>
            <div class="flex flex-col justify-center my-12 text-center">
                <div class="p-4 mx-8 space-y-4 bg-red-600 rounded-xl md:mx-32 lg:mx-12">
                    <h1 class="text-lg font-semibold text-white lg:text-2xl">
                        Looking for a job
                        <br>
                        Abroad?
                    </h1>
                    <a href="{{url('careers')}}">
                        <button class="px-4 py-2 text-sm font-semibold text-red-600 bg-white lg:text-lg rounded-xl">Learn more</button>
                    </a>

                </div>

                <div class="p-6 mx-12 mb-2 bg-gray-100 md:mx-40 lg:mx-20">
                    <h1 class="text-sm font-semibold text-red-600 lg:text-lg">
                        You may be also
                        <br>
                        Interested in...
                    </h1>
                </div>
                <div class="space-y-2">
                    @foreach($allblogs->sortByDesc('created_at')->take(3) as $all_blogs)
                    <div class="p-4 mx-12 bg-gray-200 md:mx-40 lg:mx-20">
                        <a href="{{url('blogs_details', $all_blogs->id)}}">
                            <h1 class="text-sm font-semibold text-black lg:text-lg hover:text-red-600 ">
                                {{$all_blogs->blog_name}}
                            </h1>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
<div class="flex items-center justify-center">
    <div class="container mx-auto">
        <div class="mx-4 my-0 space-y-8 lg:mx-8 xl:mx-40 lg:my-20">
            <h1 class="text-2xl font-bold text-red-600 lg:text-4xl">
                {{$blogs->blog_name}}
            </h1>
            <p class="text-sm text-black lg:text-lg">
                {{$blogs->description}}
            </p>
        </div>
    </div>
</div>



@include('components.footer2')


@endsection