@extends('web.layouts.container')
@section('breadcrumb')
    <nav class="nav-breadcrumb" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page"><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('ourNews.index'), [], true)}}">{{__('articles.inner_page')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{$article->title}}</li>
        </ol>
    </nav>
@endsection
@section('content')
    <main>
        <!--start single-blog-->
        <section class="single-blog">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                        <div class="card-news">
                            <div class="blog-carousel owl-carousel owl-theme">
                                @if($article->photos)
                                    @foreach($article->photos as $photo)
                                        <div class="item">
                                            <img src="{{asset($photo->image)}}" alt="article-{{$loop->iteration}} image">
                                        </div>
                                    @endforeach
                                    @else
                                    <div class="item">
                                        <img src="{{asset('assets/web/images/blog-3.jp')}}g" alt="blog-3.jp">
                                    </div>
                                    <div class="item">
                                        <img src="{{asset('assets/web/images/blog-2.jpg')}}" alt="blog-2.jp">
                                    </div>
                                @endif

                            </div>
                            <div class="card-header">
                                <h5>{{$article->title}}</h5>
                                <p class="date">
                                    <i class="far fa-clock"></i> {{date('M d, Y h:i A', strtotime($article->created_at))}}
                                </p>
                                <p>
                                    <i class="far fa-user"></i> {{$article->author}}
                                </p>
                            </div>
                            <div class="card-body">
                                <p>{!! $article->description !!}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                        <div class="card">
                            <div class="card-header">
                                <h6>{{__('articles.related_news')}}</h6>
                            </div>
                            <div class="card-body">
                                @if($relatedArticles->count())
                                    @foreach($relatedArticles as $related)
                                        <a href="{{route('ourNews.show', [$related->id, $related->category_id])}}">
                                            <div class="item">
                                                <img src="{{$related->photos ? asset($related->photos->first()->image) : asset('assets/web/images/blog-1.jpg')}}" alt="article-{{$loop->iteration}} image">
                                                <div class="text">
                                                    <p class="title"><b>{{$related->title}}</b></p>
                                                    <p class="details">{!! $related->description !!}</p>
                                                </div>
                                            </div>
                                        </a>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h6>{{__('main.connect_with_us')}}</h6>
                            </div>
                            <div class="card-body">
                                <div class="inner">
                                    <div class="item">
                                        <img src="{{asset('assets/web/images/icons/call.png')}}" class="icon" alt="call.png">
                                        <div class="text contact-text">
                                            <p class="title"><b>{{__('main.contact_us')}}</b></p>
                                            <p class="details">{{settings('site_phone')}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="inner">
                                    <div class="item">
                                        <img src="{{asset('assets/web/images/icons/email.png')}}" class="icon" alt="email.png">
                                        <div class="text contact-text">
                                            <p class="title"><b>{{__('users.email')}}</b></p>
                                            <p class="details">{{settings('site_email')}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="inner">
                                    <div class="item">
                                        <img src="{{asset('assets/web/images/icons/location.png')}}" class="icon" alt="location.png">
                                        <div class="text contact-text">
                                            <p class="title"><b>{{__('users.address')}}</b></p>
                                            <p class="details">{{settings('site_address')}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>
@endsection


@section('inner_js')
    <script>
        $(document).ready(function () {
            $('.navs-container').addClass('page-heading')
        })
    </script>
@endsection
