@extends('layouts.client')

@push('meta_title')
    {{ $categories_details->name }}
@endpush

@section('content')
    <section class="section">
        <div class="container">

            <div class="row align-items-center justify-content-between mb-5 g-4">
                <div class="col-xl-10 col-lg-10 col-md-9">
                    <h4 class="fw-bold mb-0">Categories: {{ $categories_details->name }} ({{ $news->total() }})</h4>
                </div>
                <div class="col-xl-2 col-lg-2 col-md-3">
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle w-100" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" data-turbolinks="reload">
                            <i class="bx bx-filter-alt me-1"></i> Filter Categories
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            @foreach ($categories as $value)
                            @if ($value->status == 0)
                            <li><a class="dropdown-item" href="{{ route('news.category', $value->category_permalink) }}">{{ $value->name }}</a></li>
                            @endif
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="row">
                @forelse($news as $value)
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
                        <div class="card">
                            @php
                                if ($value->meta_link != NULL) {
                                    $permalink = $value->meta_link;
                                    $redirect_attribute = 'target="_blank" rel="noopener noreferrer"';
                                } else {
                                    $permalink = route('news.view', $value->permalink);
                                    $redirect_attribute = NUll;
                                }
                            @endphp

                            <a href="{{ $permalink }}" {{ $redirect_attribute }}><img class="card-img-top lozad" data-src="{{ $value->image_file }}" alt=""></a>
                            <div class="card-body">
                                <a href="{{ $permalink }}" class="card-title" {{ $redirect_attribute }}>{{ Str::of($value->title)->limit(55) }}</a>
                                <p class="card-text">{{ Str::of($value->excerpt)->limit(100) }}</p>
                                <div class="card-context">
                                    <span class="card-author">By: {{ $value->author }}</span>
                                    <span class="dot"></span>
                                    <span class="card-date">{{ $value->date_format }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-xl-12">
                        <div class="d-flex justify-content-center py-4 bg-light border">
                            <span>No posts available</span>
                        </div>      
                    </div>
                @endforelse
                <div class="col-xl-12">
                    <div class="d-flex justify-content-center mt-5">
                        {{ $news->withQueryString()->links() }}
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection