@extends('customer.layouts.app')
@section('title')
    Latest News
@endsection
@section('css')

@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card" style="background: black;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4">
                                <ul class="list-group">
                                    <li class="list-item "><a href="{{ url('customer/news/3') }} " 
                                        class="{{ $key == 3 ? 'text-color' : '' }}">Home Page</a>
                                    </li>
                                    <li class="list-item"><a href="{{ url('customer/news/0') }}" class="{{ $key == 0 ? 'text-color' : '' }}">Latest News</a>
                                    </li>
                                    <li class="list-item"><a href="{{ url('customer/news/1') }}" class="{{ $key == 1 ? 'text-color' : '' }}">Datesfor your diary</a></li>
                                    <li class="list-item"><a href="{{ url('customer/news/2') }}" class="{{ $key == 2 ? 'text-color' : '' }}">Important News</a></li>
                                </ul>
                            </div>
                            <div class="col-8">
                                <div>
                                    @if (count($news) > 0)
                                      
                                        <h1 class="text-color">{{ $titles[$key] }}</h1>
                                        <div>

                                            @foreach ($news as $item)
                                                <p style="color:#d98732;">{{ $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>
                                                <hr>
                                            @endforeach

                                        </div>
                                    @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>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script></script>
@endsection