@extends('layouts.frontend')
@section('content')
<div class="container p-0">  
<session class="article" style="background-image: url({{ asset('assets/image/absd.jpg?v=3')}}); background-size:cover;">
        <div class="row  m-0 justify-content-center  position-relative" style="background-color: #f3faff; z-index: 9; box-shadow: 0 0 9px #04396b;">
            <div class="col-sm-12 col-lg-8 pt-3 " >
                <div class="head_ar mb-3">
                    <div class="form-inline ">
                        <strong class="ml-auto"><i class="fa fa-eye mr-2"></i> รับชม : {{$articles->views}} ครั้ง</strong>
                        <strong class="ml-3"><i class="fa fa-history mr-2"></i> วันที่ : {{TimeAgo($articles->created_at)}}</strong>
                        <a href="#" class="ml-2" style="color: blue;"><i class="fab fa-facebook mr-2"></i> แชร์</a>
                    </div>
                </div>
                <img src="{{asset('storage/'.$articles->picture)}}" class="w-100 mb-2">
                <h3 class="mb-4">{{$articles->title}}</h3>
                {!! $articles->description !!}
            </div>
            <div class="col-sm-12 col-lg-4  pt-3">
                <div class="form-group">
                 <h3 href="#" class="houy-now">แทงหวยออนไลน์</h3>
                </div>

                <div class="row m-0">
                    @php
                        $i = 0;
                    @endphp
                    @foreach ($all as $item)
                    @php
                        $i++;
                        if($i == 4){
                            break;
                        }
                    @endphp
                    <div class="col-12 mb-3">   
                        <div class="card">
                            <div class="card-body">
                                <a href="#" ><img src="{{asset('storage/'.$item->picture)}}" class="w-100 mb-2"></a>
                                <strong>{{$item->title}}</strong><br>
                                <small><i class="fa fa-history mr-2"></i> วันที่ : {{TimeAgo($item->created_at)}}</small> 
                                <small class="ml-3"><i class="fa fa-eye mr-2"></i> รับชม : {{$item->views}} ครั้ง</small>
                            </div>
                            <div class="card-footer">
                                <a href="{{url('articleDetails/'.$item->id)}}" class="btn btn-warning w-100">อ่านต่อ</a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </session>
</div>
@endsection

@section('script')
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script>


    </script>
@endsection