@extends('customer.layouts.new-app')
@section('title')
    Latest News
@endsection
@section('css')
<style>
   
</style>
@endsection
@section('content')
    <div class="container">
        <div class="row  g-2">
            <div class="col-md-2">
                <a href="{{ url('customer/news/3') }}"
                    class="btn btn-outline-primary   border-0 w-100 py-2 mb-2 {{ $key == 3 ? 'active text-white' : '' }}">Home Page</a>
                <a href="{{ url('customer/news/0') }}"
                    class="btn btn-outline-primary  border-0 w-100 py-2 mb-2 {{ $key == 0 ? 'active text-white' : '' }}">Lattet News</a>
                <a href="{{ url('customer/news/1') }}"
                    class="btn btn-outline-primary  border-0 w-100 py-2 mb-2 {{ $key == 1 ? 'active text-white' : '' }}">Dates Your
                    Diary</a>
                <a href="{{ url('customer/news/2') }}"
                    class="btn btn-outline-primary  border-0 w-100 py-2 mb-2 {{ $key == 2 ? 'active text-white' : '' }}">Important
                    News</a>
            </div>
            <div class="col-10">
                <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                    <h2 class="mb-3">{{ $titles[$key] }}</h2>
                    @if (count($news) > 0)
                        @foreach ($news as $item)
                            <p >{{ $item->name }}</p>
                            @if ($item->image != '')
                                <img src="{{ asset('Media/' . $item->image) }}" width="100px" height="100px"
                                    class="position-absolute top-75 start-100 translate-middle">
                            @endif
                            @if ($item->time_display == 1)
                                <p style="font-size:15px;color:grey;">Posted
                                    {{ date('l jS \\of F Y', strtotime($item->created_at)) }}</p>
                            @endif
                            <p>{{ $item->main_text }}</p>
                            
                        @endforeach
                    @else
                        <p class="p-1 text-center bg-light text-dark">There is currently nothing to see in
                            this section.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script></script>
@endsection