@extends('frontend.layouts.main')
@section('title', $seo['title'] ?? '')
@section('keywords', $seo['keywords'] ?? '')
@section('description', $seo['description'] ?? '')
@section('image', asset($header['seo_home']->image_path))
@section('abstract', $seo['abstract'] ?? '')
@section('css')
<link rel="stylesheet" href="{{ asset('frontend/css/style.css') }}?v={{ time() }}" type="text/css" />
<link rel="stylesheet" href="{{ asset('frontend/css/news-list.css') }}?v={{ time() }}">
@endsection

@section('content')
@include('frontend.components.breadcrumbs', ['caetgory' => $category, 'parents' => $category->parentsRecursiveLimit(3)])
{{-- Danh mục không có con thì dùng layout này --}}

@if(count($category->childs) > 0)
<section class="news-list">
    <div class="ctnr">
        <div class="category-news">
            @foreach($category->childs()->where('active', 1)->orderBy('order')->get() as $child)
            <a href="{{$child->slug}}" title=" {{$child->name}}" class="item">
                {{$child->name}}
            </a>
            @endforeach
        </div>

        <div class="box-category">
            <div class="title-box-wrap">
                <h2 class="title-box">Tin tức mới</h2>
            </div>
            <div class="block-news">
                <div class="row">
                    @foreach($data->take(8) as $item)
                    <div class="clm" style="--w-lg:3; --w-md:4; --w-xs:6">
                        <div class="item-news item-news-hot">
                            <a href="{{$item->slug}}" title="{{$item->name}}" class="wrap-img img-100">
                                <img src="{{asset($item->avatar_path)}}" alt="{{$item->name}}">
                            </a>
                            <div class="content">
                                <h3>
                                    <a href="{{$item->slug}}" title="{{$item->name}}" class="title">
                                        {{$item->name}}
                                    </a>
                                </h3>
                                <div class="cate-time">
                                    <div class="time-post">{{$item->created_at->format('d-m-Y')}}</div>
                                    <a href="{{$item->slug}}" title="{{$item->name}}"
                                        class="name-cate">{{$item->category->name}}</a>
                                </div>
                                <div class="des">
                                    {{$item->description}}
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        @foreach($category->childs()->where('active', 1)->orderBy('order')->get() as $child)
        @php
        $dataPosts = getPostByCategory($child, 4);
        @endphp
        @if(count($dataPosts) > 0)
        <div class="box-category">
            <div class="title-box-wrap">
                <h2 class="title-box">
                    <a href="{{$child->slug}}" title="">
                        {{$child->name}}
                    </a>
                </h2>
                <a href="{{$child->slug}}" title="" class="kham-pha">
                    Xem chi tiết
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                        <path
                            d="M7.64582 4.81309C7.84073 4.61748 8.15731 4.61692 8.35292 4.81183L13.8374 10.2768C14.0531 10.4918 14.0531 10.8411 13.8374 11.056L8.35292 16.521C8.15731 16.7159 7.84073 16.7153 7.64582 16.5197C7.4509 16.3241 7.45147 16.0075 7.64708 15.8126L12.8117 10.6664L7.64708 5.5202C7.45147 5.32528 7.4509 5.0087 7.64582 4.81309Z"
                            fill="currentColor"></path>
                    </svg>
                </a>
            </div>


            <div class="block-news">
                <div class="row">
                    @foreach($dataPosts as $item)
                    <div class="clm" style="--w-lg:6; --w-md:6; --w-xs:12">
                        @include('frontend.components.posts.item1', ['data' => $item])
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
        @endforeach
    </div>
</section>
@else

<section class="news-list">
    <div class="ctnr">
        @if (!empty($data) && count($data) > 0)
        {{-- 
            <h1 class="name-category">{{$category->name}}</h1>
         --}}

        @if(count($data) > 5)
        
        <div class="news-bottom">
            <div class="row">
                @foreach($data as $item)
                <div class="clm" style="--w-lg:3; --w-md:4; --w-sm:6; --w-xs:12;">
                    @include('frontend.components.posts.item1', ['data' => $item])
                </div>
                @endforeach
            </div>
        </div>  

        {{ $data->links() }}
        @endif

        @else
        <p>Đang cập nhật nội dung!</p>

        @endif
    </div>


</section>
@endif

<input type="hidden" name="category_id" id="category_id" value="{{$category->id}}">
@endsection

@section('js')
<script>
    let offset = 15;

    $('#btn-load-more-post').on('click', function() {
        let category_id = $('#category_id').val();

        $.ajax({
            url: "{{ route('post.loadMorePost') }}",
            method: "GET",
            data: {
                category_id: category_id,
                offset: offset
            },
            success: function(res) {
                $('#news-list').append(res.html);
                offset += res.count;

                if (res.count < 5) {
                    $('#btn-load-more-post').hide();
                }
            },
            error: function(err) {
                console.log(err);
            }
        });
    });
</script>
@endsection