@extends('frontend.layouts.template')
@section('content')
<div class="row box-banner" style="background: #fff;">
    <div class="col-12 bg-what-detail" style="background-image: url('{{ asset( $news->news_image->path . $news->news_image->filename ) }}');">
        <div class="box-gradient" style=""></div>
        <div class="box-topic">
            <div class="row sub-what-res" style="padding-bottom: 200px;">
                <div class="col-sm-12 col-xl-1"></div>
                <div class="col-sm-12 col-xl-10 res-p-15">
                    <div class="naviagter-a">
                        .
                    </div>
                    <div class="text-center c-black f-topic-news" style="">
                        <b class="f-bold">{{ $news->subject }}</b>
                    </div>
                    <div class="text-center c-black res-ma">
                        <div class="mt-2 mb-2 position-relative" style="font-size: 16px;color: #000;">
                           {{ date('d-m-Y', strtotime( $news->created_at ) ) }} | {{ $news->viewed }} views
                            <a href="" class="ml-4">
                                <img src="{{ asset('frontend/assetsnew/img/news/icon/icon-1.png') }}" alt="" style="width: 17px;">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-xl-1"></div>
            </div>
        </div>
    </div>
</div>
<div class="row" style="background: #fff;">
    <div class="col-12">
        <div class="box-topic-detail">
            <div class="row" style="">
                <div class="col-sm-12 col-xl-1"></div>
                <div class="col-sm-12 col-xl-10 res-p-15">
                    <div style="box-shadow: 0px 0px 5px 2px #d6d8dc;" class="mb-3 c-black box-blog">
                        <div class="mb-3">
                            @php
                                $tagco = @json_decode( $news->news_category->description );
                            @endphp
                            <span class="c-{{ $news->news_category->id }}"><a href="{{ url('news-and-events?tag='. $news->news_category->name ) }}" style="color:{{ $tagco->color }};">{{ $news->news_category->name }}</a></span>
                        </div>
                        <div class="row" style="">
                            <div class="col-sm-12 col-xl-12">
                                <div class="mt-2">
                                   {!! $news->detail !!}
                                    <div class="text-right" style="margin: 30px 0 30px;">
                                        <a href="javascript:" onclick="goBack()" class="back-click" style="">BACK</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>


                </div>
                <div class="col-sm-12 col-xl-1"></div>
            </div>
        </div>
    </div>
</div>

<div class="row" style="">
    <div class="col-sm-1 col-lg-2"></div>
    <div class="col-sm-10 col-lg-8">
        <div class="c-black f-topic-news" style="padding: 40px 0 15px;">
            <b class="f-bold">Others News</b>
        </div>
        <div class="row" style="">
            @if ($recomments)
                @foreach ($recomments as $item)
                    <div class="col-12 col-sm-4 col-lg-4 col-res-what mb-4 btab stem">
                        <div class="box-img-w" style="overflow: hidden;">
                            <a href="{{ url('news/'. $item->id .'/' . encodelink( $item->subject ) ) }}" class="click-news-what" style="background: url({{ asset( $item->news_image->path . $item->news_image->filename ) }});">
                                <img src="{{ asset( $item->news_image->path . $item->news_image->filename ) }}" alt="" id="imageid" style="opacity: 0">
                            </a>
                        </div>
                        <a href="{{ url('news/'. $item->id .'/' . encodelink( $item->subject ) ) }}" class="click-news">
                            <div class="c-black" style="padding: 15px 0 5px;">
                                <b class="topic">{{ $item->subject }}</b>
                            </div>
                            <div class="c-black text-view">
                                {!! $item->description !!}
                            </div>
                        </a>
                        <div class="mt-2 mb-2 position-relative" style="font-size: 12px;color: #6b6b6b;">
                            {{ date('d-m-Y', strtotime( $item->created_at) ) }} | {{ $item->viewed }} views
                            <div class="position-absolute" style="right: 0;top: 0">
                                <a href="">
                                    <img src="{{ asset('frontend/assetsnew/img/news/icon/icon-1.png') }}" alt="" style="width: 17px;">
                                </a>
                            </div>
                        </div>
                        <div class="mb-3">
                            @php
                                $color = @json_decode($item->news_category->description);
                            @endphp
                            <span class="c-{{ $item->news_category->id }}">{{ $item->news_category->name }}</span>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</div>
@endsection
@section('javascript')
<script type="text/javascript">

    var imgWidth = $("#imageid").width();

    $('.box-img-w').css({'height':imgWidth})
    function goBack() {
		    window.history.back();
	}
</script>

@endsection
@section('stylesheet')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">

    @php
        if( $category ){
            echo '<style>';
            foreach( $category as $cate ){
                $co = @json_decode( $cate->description );
                $className = '.co-'. $cate->id;
                $classCate = '.c-'. $cate->id;
                echo  $className .':hover, '. $className .'.active {'
                            .'background: '. $co->background .'; '
                            .'box-shadow: 1px 1px 3px 0px #d8d8d8; '
                            .'color: '. $co->color .'; '
                            .'}';
                echo  $classCate .'{'
                            .'background: '. $co->background .'; '
                            .'color: '. $co->color .'; '
                            .'padding: 2px 25px; '
                            .'font-size: 12px; '
                            .'}';
            }
            echo '</style>';
        }
    @endphp
@endsection