@extends($activeTemplate . 'layouts.app')
@section('content')
    <section class="all-sections pt-20 pb-60">
        <div class="container">
            <div class="row justify-content-center mb-30-none">
                <div class="col-xl-9 col-lg-12 mb-30">
                    <div class="main-content news-category-content-area">
                        <div class="news-banner-area">
                            <div class="news-banner-wrapper">
                                <div class="row justify-content-center mb-30-none">
                                    <div class="col-xl-8 col-lg-8 mb-30">
                                        <div class="news-banner-thumb">
                                            <a href="{{ route('news.details', ['category' =>$firstCategoryNews->category->slug, 'news' => $firstCategoryNews->id]) }}">
                                                <img src="{{ getImage(getFilePath('news') . '/' . $firstCategoryNews->image, getFileSize('news')) }}"
                                                    alt="news-banner">
                                            </a>
                                        </div>
                                        <div class="news-banner-content">
                                            <h2 class="title">
                                                <a href="{{ route('news.details', ['category' =>$firstCategoryNews->category->slug, 'news' => $firstCategoryNews->id]) }}">
                                                    {{ strLimit(@$firstCategoryNews->title, 200) }}
                                                </a>
                                            </h2>
                                            <div class="news-time py-1 fs-9">
                                                <i class="fa-regular fa-clock me-1"></i> {{bn_number(diffForHumans($firstCategoryNews->created_at)) }}
                                            </div>
                                            @php echo strLimit(@$firstCategoryNews->short_description, 500) @endphp
                                        </div>
                                        <div class="mt-4">
                                            @php echo advertisements('728x90'); @endphp
                                        </div>
                                    </div>
                                    <div class="col-xl-4 col-lg-4 mb-30">
                                        <div class="news-banner-top-content">
                                            <h4 class="title">@lang('Latest News')</h4>
                                            <div class="widget">
                                                <ul class="small-news-list">
                                                    @forelse($latestNews as $item)
                                                        <li class="small-single-news">
                                                            <div class="thumb">
                                                                <a href="{{ route('news.details', ['category' =>$item->category->slug, 'news' => $item->id]) }}">
                                                                    <img src="{{ getImage(getFilePath('news') . '/' . $item->image, getFileSize('news')) }}"
                                                                        alt="news image">
                                                                </a>
                                                            </div>
                                                            <div class="content">
                                                                <h5 class="title">
                                                                    <a href="{{ route('news.details', ['category' =>$item->category->slug, 'news' => $item->id]) }}">
                                                                        {{ __(@$item->title) }}
                                                                    </a>
                                                                    <div class="news-time py-1 fs-9">
                                                                        <i class="fa-regular fa-clock me-1"></i> {{bn_number(diffForHumans($item->created_at)) }}
                                                                    </div>
                                                                </h5>
                                                            </div>
                                                        </li>
                                                    @empty
                                                    @endforelse
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-xs-6 mb-30">
                    <aside class="aside-bar">
                        <div class="aside-inner">
                            <div class="add-item mb-30">
                                @php echo advertisements('300x250'); @endphp
                            </div>
                            <div class="add-item mb-30">
                                @php echo advertisements('300x250'); @endphp
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
            <div class="news-blog-area pt-4">
                <div class="section-header section-header--style">
                    <h3 class="section-title">@lang('More News')</h3>
                </div>
                <div class="row justify-content-center mb-30-none post_data">
                    {{ csrf_field() }}
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            var _token = $('input[name="_token"]').val();
            var catId = {{ $category->id }}
            load_data('', _token, catId);

            function load_data(id = "", _token, catId) {
                $.ajax({
                    url: "{{ route('load.more') }}",
                    method: "POST",
                    data: {
                        id: id,
                        _token: _token,
                        catId: catId,
                        remove: {{ $removeDuplicate }}
                    },
                    success: function(data) {
                        $('.load_more_button').remove();
                        $('.post_data').append(data);
                    }
                })
            }

            $(document).on('click', '.load_more_button', function() {
                var id = $(this).data('id');
                let loaderHtml = `<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                               Loading...`
                $('.load_more_button').html(loaderHtml);
                load_data(id, _token, catId);
            });

            function convertToSlug(Text) {
                return Text.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
            }
        });
    </script>
@endpush

@push('style')
    <style>
        .news-blog-area {
            border-top: none;
        }
    </style>
@endpush