@extends('web.layouts.container')

@section('content')
    <section class="accreditation-pg section bg-babyBlue pb-0">
        <div class="container">
            <div class="inner bg-white mb-0">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <img src="{{asset($firstNew->image)}}" alt="" class="sec-img"/>
                    </div>
                    <div class="col-lg-6">
                        <div class="text-box">
                            <h1 class="color-dark fw-bold mb-4">{{$firstNew->title}}</h1>
                            <p class="date mb-2">
                                <img src="{{asset('assets/web/images/icons/date.svg')}}" alt="" class="icon icon-15 me-2"/>{{date('d M Y', strtotime($firstNew->created_at))}}
                            </p>
                            <p class="det">{!! wordLimit(stripText($firstNew->description, 410)) !!}</p>
                            <a href="{{route('news.show', $firstNew->id)}}" class="butn white_butn fw-bold mt-5">{{__('main.read_more')}}</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <section class="news-pg section bg-babyBlue">
        <div class="container">
            <div class="row news_container">
                @if(count($news))
                    @foreach($news as $new)
                        @if($firstNew->id == $new->id) @continue @endif
                        <div class="col-lg-4">
                            <div class="news_card wow fadeInUp">
                                <div class="content">
                                    <div class="img">
                                        <img src="{{asset($new->image)}}" alt="" class="sec-img"/>
                                    </div>
                                    <div class="info">
                                        <h4 class="title fw-bold color-dark mb-3">{{$new->title}} </h4>
                                        <p class="date mb-2">
                                            <img src="{{asset('assets/web/images/icons/date.svg')}}" alt="" class="icon icon-15 me-2"/> {{date('d M Y', strtotime($new->created_at))}}
                                        </p>
                                        <p class="det">{!! wordLimit(stripText($new->description, 100)) !!}</p>

                                        <a href="{{route('news.show', $new->id)}}" class="more_butn color-primary fw-bold">
                                            {{__('main.read_more')}} <img src="{{asset('assets/web/images/icons/right_arrow2.svg')}}" alt="" class="icon icon-18 ms-2 filterPrimary"/>
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    @endforeach
                @endif
            </div>

            @if(count($news) > 6)
                <div class="col-md-2 m-auto mt-5">
                    <a href="#" class="butn white_butn py-4 fs-6 fw-bold w-100 see_more_link">{{__('main.see_more')}}</a>
                </div>
            @endif

        </div>
    </section>
@endsection

@section('inner_js')
    <script>

        let seeMoreRoute = "{{route('news.seeMore')}}",
            confSkip = 0;
        $('.see_more_link').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);

            confSkip = confSkip + 7;
            let data = {skip: confSkip};

            let url = seeMoreRoute,
                method = 'get';

            const response=await ajax({
                url,
                data,
                dataType: 'html',
                method
            });


            if (response){
                if (response.search('show_done') > -1){
                    $(this).remove();
                }
                $('.news_container').append(response);
            }

        });


    </script>
@endsection