@extends('web.layouts.container')
@section('content')
    <section class="news-pg section">
        <div class="container">
            <div class="col-md-4 m-auto mb-5 pb-4" >
                <form action="{{route('new.index')}}" method="get">
                    <div class="form-group">
                        <input name="search" class="form-control" placeholder="{{__('articles.search')}}" type="search" value="{{session('search')}}"/>
                        <button class="search_icon search_button"><i class="bi bi-search"></i></button>
                    </div>
                </form>
            </div>
            <div class="head_content col-lg-5 mb-5">
                <h1 class="title_br color-secondary text-capitalize mb-4"> {{$page->title}} </h1>
                <p class="det">
                    <small>{!! $page->description !!}</small>
                </p>
            </div>
            <div class="row news_container">

                <div class="col-lg-8">
                    @if(count($news))
                        @foreach($news as $new)
                            <div class="news_card wow left_to_right_apperance">
                                <div class="img-box">
                                    <img src="{{asset($new->image)}}" alt="" class="sec-img"/>
                                </div>
                                <div class="content">
                                    <h6 class="subtitle color-primary mb-2">{{$new->catName}}</h6>
                                    <h4 class="title color-secondary mb-3">
                                        {{$new->title}}
                                    </h4>
                                    <p class="det">
                                        {{wordLimit(stripText($new->description), 24)}}
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="prof_box d-inline-flex align-items-center">
                                            <img src="{{asset('assets/web/images/icon.png')}}" alt="" class="icon"/>
                                            <div class="prof_data">
                                                <span class="span"><small>{{__('articles.updated_on')}}</small></span>
                                                <p class="date mb-0">{{date('d M Y', strtotime($new->created_at))}}</p>
                                            </div>
                                        </div>
                                        <a href="{{route('new.show', [$new->id, $new->slug_text])}}" class="butn light_butn text-capitalize">
                                            <i class="bi bi-arrow-right me-2"></i> {{__('main.more')}}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        @else
                        <b class="text-danger">{{session('search') ? __('articles.no_search_result') : __('articles.no_data')}}</b>
                    @endif

                    <div class="d-flex justify-content-center">
                        {{$news->links()}}
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="linkedin_wrapper">
                        <h2 class="mb-4 fs-3 fw-bold pb-1">{{__('main.linkedin_posts')}}</h2>
                        @if(($settings['linkedin_post_1'] ?? null))
                            <div class="linkedin_box">
                                {!! $settings['linkedin_post_1'] !!}
                            </div>
                        @endif
                        @if(($settings['linkedin_post_2'] ?? null))
                            <div class="linkedin_box">
                                {!! $settings['linkedin_post_2'] !!}
                            </div>
                        @endif
                        @if(($settings['linkedin_post_3'] ?? null))
                            <div class="linkedin_box">
                                {!! $settings['linkedin_post_3'] !!}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
{{--            @if(count($news) > 6)--}}
{{--                <a href="#" class="butn light_butn fw-bold m-auto mt-5 load_more_link">--}}
{{--                    <img src="{{asset('assets/web/images/icons/down_arrow.png')}}" alt="" class="icon-15 filterPrimary me-2 ms-0"/> {{__('main.load_more')}}--}}
{{--                </a>--}}
{{--            @endif--}}
        </div>
        <!--<img src="{{asset('assets/web/images/pattern-2.png')}}" alt="" class="bg"/>-->
    </section>
@endsection

@section('inner_js')

    <script>

        $(document).ready(function () {
            // $('.linkedin_box iframe').attr('height', '736')
        });

        $('.pagination a').click(function (e) {
           let search = $('input[name="search"]').val();
           if(search){
               e.preventDefault();
               let pageLink = $(this).attr('href');
               window.location.href = pageLink + '&search='+search;
           }
        });

        {{--let loadMoreRoute = "{{route('new.loadMore')}}",--}}
        {{--    confSkip = 0;--}}
        {{--$('.load_more_link').click(async function (e) {--}}
        {{--    e.preventDefault();--}}
        {{--    $(this).prop('disabled', true);--}}

        {{--    confSkip = confSkip + 6;--}}
        {{--    let data = {skip: confSkip, load_more: true};--}}

        {{--    let url = loadMoreRoute,--}}
        {{--        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);--}}
        {{--    }--}}

        {{--});--}}
        {{--$('.search_button').click(async function (e) {--}}
        {{--    e.preventDefault();--}}
        {{--    let search = $('input[name="search"]');--}}

        {{--    if(search.val() === ''){--}}
        {{--        search.css({--}}
        {{--            border: '1px solid red'--}}
        {{--        });--}}
        {{--        return false;--}}
        {{--    } else {--}}
        {{--        $('.load_more_link').remove();--}}
        {{--        search.css({--}}
        {{--            border: 'none'--}}
        {{--        });--}}
        {{--    }--}}


        {{--    $(this).prop('disabled', true);--}}
        {{--    let data = {search: search.val()};--}}
        {{--    let url = loadMoreRoute,--}}
        {{--        method = 'get';--}}

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

        {{--    if (response){--}}
        {{--        $(this).prop('disabled', false);--}}
        {{--        $('.news_container').html(response);--}}
        {{--    }--}}

        {{--});--}}
    </script>
@endsection