@extends('layouts.frontend')
@section('styles')
{{-- <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> --}}

    <style>
        /* body {
  background-color:  #eee;
} */
.title {
 
    margin-bottom: 50px;
    text-transform: uppercase;
}

.card-block {
    font-size: 1em;
    position: relative;
    margin: 0;
    padding: 1em;
    border: none;
    border-top: 1px solid rgba(34, 36, 38, .1);
    box-shadow: none;
     
}
.card {
    font-size: 1em;
    overflow: hidden;
    padding: 5;
    border: none;
    border-radius: .28571429rem;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    margin-top:20px;
}

.carousel-indicators li {
    border-radius: 12px;
    width: 12px;
    height: 12px;
    background-color: #404040;
}
.carousel-indicators li {
    border-radius: 12px;
    width: 12px;
    height: 12px;
    background-color: #404040;
}
.carousel-indicators .active {
    background-color: white;
    max-width: 12px;
    margin: 0 3px;
    height: 12px;
}
.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
 lex-direction: column;
}

.btn {
  margin-top: auto;
}
    </style>
@endsection
@section('content')

<div class="container-fluid pt-3 pb-3" id="bread">
    <div class="container">
        <div class="row">
            <div class="col-7 align-self-center">
                <div class="row">
                    {{-- <div class="col-auto pr-2 text-secondary">Product ></div>
                    <div class="col-auto p-0 text-secondary">{{$product->category->name}} ></div> --}}
                    <div class="col-auto pl-2">News</div>
                </div>
            </div>
            <div class="col-5">
                <div class="row float-right">
                    <div class="col">Share</div>
                    <div class="col border-right"><a href="#" class="icon"><i class="fa fa-facebook fa-lg"></i></a></div>
                    <div class="col border-right"><a href="#" class="icon"><i class="fa fa-twitter fa-lg"></i></a></div>
                    <div class="col border-right"><a href="#" class="icon"><i class="fa fa-pinterest fa-lg"></i></a></div>
                    <div class="col "><a href="#" class="icon"><i class="fa fa-linkedin fa-lg"></i></a></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container pt-5 pb-5">
    <h2 align="center" class="mb-5">News Article</h2>
    @foreach ($news as $item)
        <!-- Card Start -->
        <div class="card">
            <div class="row ">

                <div class="col-md-7 px-3">
                    <div class="card-block px-6">
                    <h4 class="card-title">{{$item->title}}</h4>
                    <i class="bi bi-calendar"> {{Carbon\Carbon::parse($item->updated_at)->isoFormat('D MMMM Y')}}</i>&nbsp;
                    <i class="bi bi-tag"><a href="{{env('APP_URL')}}/news/category/{{$item->category->slug}}">{{$item->category->name}}</a></i>
                    <p class="card-text">{{$item->excerpt}}...</p>
                    {{-- <a href="#" class="mt-auto btn btn-primary">Read More</a> --}}
                    <a href="{{env('APP_URL')}}/news/{{$item->slug}}"><button class="mt-auto btn btn-primary">Read More</button></a>
                    </div>
                </div>
                <div class="col-md-5">
                    <img class="d-block" height="250px" src="{{$item->featured_image->getURL()}}" alt="">
                </div>
            </div>
        </div>
        <!-- End of card -->
    @endforeach
</div>
@endsection