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

@section('content')


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

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

        <div class="col-span-1 lg:col-span-2 flex flex-col justify-center items-center"
    
        >
            <div class="max-w-2xl mx-auto p-4"
             data-aos="fade-up"
        data-aos-duration="1100"
        data-aos-delay="150"
            >
                <img class="w-full h-full object-cover 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="ml-3 flex 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">{{ $news->created_at->format('F d, Y') }}</p>
                    </div>
                </div>
                <h1 class="text-2xl font-bold mb-4"
                    data-aos="fade-up"
                    data-aos-duration="1100"
                

                >{{ $news->title }}</h1>
                <p class="text-gray-700 mb-4"
                 data-aos="fade-up"
                    data-aos-duration="1100"
                    data-aos-delay='200'

                >{!! $news->description !!}</p>
            </div>
        </div>

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

                       <div class="w-full bg-white shadow-md rounded-md px-6 py-3"
                        data-aos="fade-up"
        data-aos-duration="1100"
        data-aos-delay="150"
                       >
                           <h2 class="font-semibold mb-2">Recent Posts</h2>
                           <ul cmgs="mb-4">
                               @foreach ($allnews as $new )
                               <div class="flex  overflow-hidden justify-start items-center space-x-3 pb-3">
                                <img src="{{ asset($new->image) }}" alt="" class="size-14 object-cover">
                                   <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="w-full bg-white shadow-md rounded-md p-4 hidden">
                           <h2 class="font-semibold mb-2">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="w-full bg-white shadow-md rounded-md p-4 hidden">
                           <h2 class="font-semibold mb-2">Tags</h2>
                           <div class="flex flex-wrap">
                               <span class="bg-blue-200 text-blue-800 rounded-lg px-4 py-2 text-sm mr-2 mb-2">Health</span>
                               <span class="bg-blue-200 text-blue-800 rounded-lg px-4 py-2 text-sm mr-2 mb-2">Innovation</span>
                               <span class="bg-blue-200 text-blue-800 rounded-lg px-4 py-2 text-sm mr-2 mb-2">Care</span>
                               <span class="bg-blue-200 text-blue-800 rounded-lg px-4 py-2 text-sm mr-2 mb-2">Medicine</span>
                               <span class="bg-blue-200 text-blue-800 rounded-lg px-4 py-2 text-sm mr-2 mb-2">Doctors</span>
                               <span class="bg-blue-200 text-blue-800 rounded-lg px-4 py-2 text-sm mr-2 mb-2">Wellness</span>
                               <span class="bg-blue-200 text-blue-800 rounded-lg px-4 py-2 text-sm mr-2 mb-2">Recovery</span>
                               <span class="bg-blue-200 text-blue-800 rounded-lg px-4 py-2 text-sm mr-2 mb-2">Healing</span>
                               <span class="bg-blue-200 text-blue-800 rounded-lg px-4 py-2 text-sm mr-2 mb-2">Patients</span>
                           </div>
                       </div>

                 </div>       
           </div>

        </div>

    </section>

@endsection