@extends('front.layouts.front')

@section('content')
    <!-- page title -->
    <section class="section section--first section--last section--head" data-bg="{{ url('assets/img/bg.jpg') }}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section__wrap">
                        <!-- section title -->
                        <h2 class="section__title">News</h2>
                        <!-- end section title -->

                        <!-- breadcrumb -->
                        <ul class="breadcrumb bg-transparent">
                            <li class="breadcrumb__item"><a href="{{ route('front.index') }}">Home</a></li>
                            <li class="breadcrumb__item breadcrumb__item--active">News</li>
                        </ul>
                        <!-- end breadcrumb -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end page title -->

	<!-- section -->
	<section class="section section--last section--catalog">
		<div class="container">
			<div class="row">
				<div class="col-12">
                    <form action="{{ route('news') }}" method="get" id="newsfilter">
					    <div class="sort">
                            <div class="filter__group filter__group--sort">
                                <label for="genres" class="filter__label">Genres:</label>

                                <div class="filter__select-wrap">
                                    <select name="g" id="genres" class="filter__select">
                                        <option value="0">All Categories</option>
                                        @foreach (Genres() as $genre)
                                            <option value="{{ $genre->id }}" @if ($send['g'] == $genre->id) selected @endif>{{ $genre->title }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="filter__group filter__group--sort">
                                <label for="sort" class="filter__label">Sort by:</label>

                                <div class="filter__select-wrap">
                                    <select name="sort" id="sort" class="filter__select">
                                        <option value="1" @if ($send['sort'] == 1) selected @endif>Relevance</option>
                                        <option value="2" @if ($send['sort'] == 2) selected @endif>Newest</option>
                                        <option value="3" @if ($send['sort'] == 3) selected @endif>Oldest</option>
                                    </select>
                                </div>
                            </div>

                            <div class="sort__results">Found {{ $Newses->total() }} posts</div>

                            <div class="buttonWithLoder">
                                <a href="javascript:;" class="header__login updatenews" style="margin-left: 10px">
                                    <span> Update NEWS</span>
                                    <div class="spinner-border loder" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </form>
				</div>

				<!-- post -->
                @foreach ($Newses as $News)
                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="post">
                            <a href="{{ route('front.news.detail',[$News->id]) }}" class="post__img">
                                <img src="{{ $News->image }}" alt="">
                            </a>

                            <div class="post__content">
                                <a href="{{ route('front.news.detail',[$News->id]) }}" class="post__category">{{ $News->source_name }}</a>
                                <h3 class="post__title"><a href="{{ route('front.news.detail',[$News->id]) }}">{{ substr($News->title, 0,56) }}@if(strlen($News->title) > 56)...@endif</a></h3>
                                <div class="post__meta">
                                    <span class="post__date">
                                        <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                            <path d='M256,64C150,64,64,150,64,256s86,192,192,192,192-86,192-192S362,64,256,64Z' style='fill:none;stroke-miterlimit:10;stroke-width:32px'/>
                                            <polyline points='256 128 256 272 352 272' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
                                        </svg>
                                        {{ $News->published_at->diffForHumans() }}
                                    </span>
                                    <span class="post__comments">
                                        <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                            <path d='M431,320.6c-1-3.6,1.2-8.6,3.3-12.2a33.68,33.68,0,0,1,2.1-3.1A162,162,0,0,0,464,215c.3-92.2-77.5-167-173.7-167C206.4,48,136.4,105.1,120,180.9a160.7,160.7,0,0,0-3.7,34.2c0,92.3,74.8,169.1,171,169.1,15.3,0,35.9-4.6,47.2-7.7s22.5-7.2,25.4-8.3a26.44,26.44,0,0,1,9.3-1.7,26,26,0,0,1,10.1,2L436,388.6a13.52,13.52,0,0,0,3.9,1,8,8,0,0,0,8-8,12.85,12.85,0,0,0-.5-2.7Z' style='fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/>
                                            <path d='M66.46,232a146.23,146.23,0,0,0,6.39,152.67c2.31,3.49,3.61,6.19,3.21,8s-11.93,61.87-11.93,61.87a8,8,0,0,0,2.71,7.68A8.17,8.17,0,0,0,72,464a7.26,7.26,0,0,0,2.91-.6l56.21-22a15.7,15.7,0,0,1,12,.2c18.94,7.38,39.88,12,60.83,12A159.21,159.21,0,0,0,284,432.11' style='fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/>
                                        </svg>
                                        {{ count($News->review) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
				<!-- end post -->

				<!-- paginator -->
				<div class="col-12">
                    {{ $Newses->appends(request()->input())->links() }}
				</div>
				<!-- end paginator -->
			</div>
		</div>
	</section>
	<!-- end section -->
@endsection

@section('script')
<script>
    $(document).on('change', '#genres,#sort', function(e){
        $('#newsfilter').submit();
    });
</script>
@endsection