@extends('layouts.main-app')
@section('title', 'Homepage')

@section('content')


    @include('layouts.navbar', [
        'headerTitle' => 'News and Insight',
        'headerDescription' => '',
    ])

    <section class="container max-w-screen-lg px-2 mx-auto py-28">
        <div class="grid items-start justify-start grid-cols-1 gap-4 lg:grid-cols-3">

            <div class="flex flex-col items-center justify-center col-span-1 lg:col-span-2">
                <div class="max-w-2xl p-4 mx-auto" data-aos="fade-up" data-aos-duration="1100" data-aos-delay="150">
                    <img class="object-cover w-full h-full mb-4" src="{{ asset($news->image) }}" alt="{{ $news->title }}">
                    <div class="flex items-center mb-4" data-aos="fade-up" data-aos-duration="1100" data-aos-delay="240">
                        <div class="flex ml-3 space-x-10">
                            <p class="text-base font-medium text-gray-700 ">Admin</p>
                            <span class="border-r-[2px] border-gray-500"></span>
                            <p class="text-base text-gray-700">{{ \Carbon\Carbon::parse($news->date)->format('M d, Y') }}
                            </p>
                        </div>
                    </div>
                    <h1 class="mb-4 text-2xl font-bold" data-aos="fade-up" data-aos-duration="1100">{{ $news->title }}</h1>
                    <p class="mb-4 text-gray-700" data-aos="fade-up" data-aos-duration="1100" data-aos-delay='200'>
                        {!! $news->description !!}</p>
                </div>
            </div>

            <div class="flex flex-col items-center justify-center col-span-1 lg:col-span-1">
                <div class="flex flex-col items-center justify-center w-full col-span-1 px-3 space-y-10 md:px-0 ">
                    <div class="hidden w-full p-4 bg-white rounded-md shadow-md">
                        <div class="relative flex items-center">
                            <input type="text" placeholder="Search here..."
                                class="w-full p-3 pl-10 mb-4 bg-blue-200 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 ">
                            <span class="absolute top-0 right-0 px-4 py-2 bg-blue-500 rounded-lg">
                                <i class='text-2xl text-white bx bx-search'></i>
                            </span>
                        </div>
                    </div>

                    <div class="w-full px-6 py-3 bg-white rounded-md shadow-md" data-aos="fade-up" data-aos-duration="1100"
                        data-aos-delay="150">
                        <h2 class="mb-2 font-semibold">Recent Posts</h2>
                        <ul cmgs="mb-4">
                            @foreach ($allnews as $new)
                                <div class="flex items-center justify-start pb-3 space-x-3 overflow-hidden">
                                    <img src="{{ asset($new->image) }}" alt="" class="object-cover size-14">
                                    <li class="flex flex-col">
                                        <a href="{{ route('newsItem', $new->id) }}">{{ $new->title }}</a>
                                        <span class="text-sm">{{ $news->created_at->format('F d, Y') }}</span>
                                    </li>
                                </div>
                            @endforeach
                        </ul>
                    </div>

                    <div class="hidden w-full p-4 bg-white rounded-md shadow-md">
                        <h2 class="mb-2 font-semibold">Archives</h2>
                        <ul class="mb-4">
                            <li>January 2024</li>
                            <li>February 2024</li>
                            <li>March 2024</li>
                            <li>April 2024</li>
                            <li>May 2024</li>
                            <li>June 2024</li>
                        </ul>
                    </div>

                    <div class="hidden w-full p-4 bg-white rounded-md shadow-md">
                        <h2 class="mb-2 font-semibold">Tags</h2>
                        <div class="flex flex-wrap">
                            <span class="px-4 py-2 mb-2 mr-2 text-sm text-blue-800 bg-blue-200 rounded-lg">Health</span>
                            <span class="px-4 py-2 mb-2 mr-2 text-sm text-blue-800 bg-blue-200 rounded-lg">Innovation</span>
                            <span class="px-4 py-2 mb-2 mr-2 text-sm text-blue-800 bg-blue-200 rounded-lg">Care</span>
                            <span class="px-4 py-2 mb-2 mr-2 text-sm text-blue-800 bg-blue-200 rounded-lg">Medicine</span>
                            <span class="px-4 py-2 mb-2 mr-2 text-sm text-blue-800 bg-blue-200 rounded-lg">Doctors</span>
                            <span class="px-4 py-2 mb-2 mr-2 text-sm text-blue-800 bg-blue-200 rounded-lg">Wellness</span>
                            <span class="px-4 py-2 mb-2 mr-2 text-sm text-blue-800 bg-blue-200 rounded-lg">Recovery</span>
                            <span class="px-4 py-2 mb-2 mr-2 text-sm text-blue-800 bg-blue-200 rounded-lg">Healing</span>
                            <span class="px-4 py-2 mb-2 mr-2 text-sm text-blue-800 bg-blue-200 rounded-lg">Patients</span>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </section>

@endsection