@extends('web.layouts.container')

@section('content')

    <section class="accreditation-pg section bg-babyBlue pb-0 news-pg conferences_sec">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="news_card  wow left_to_right_apperance">
                        <div class="imgg">
                            <img src="{{asset($firstEvent->image)}}" alt="" class="sec-img"/>
                        </div>
                        <div class="content">
                            <p class="date mb-3">
                                <img src="{{asset('assets/web/images/icons/date.svg')}}" alt="" class="icon icon-15 me-2"/>{{date('d M Y', strtotime($firstEvent->start_date))}}
                            </p>
                            <h4 class="title fw-bold color-dark mb-3">{{$firstEvent->title}}</h4>
                            <p class="det">{!! wordLimit(stripText($firstEvent->description, 410)) !!}</p>
                            <a href="{{route('conference.show', $firstEvent->id)}}" class="more_butn color-primary fw-bold mt-4 d-inline-block">{{__('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>

            <!--<div class="inner bg-white wow left_to_right_apperance mb-0">-->
            <!--    <div class="row align-items-center">-->
            <!--        <div class="col-lg-6">-->
            <!--            <img src="{{asset($firstEvent->image)}}" alt="" class="sec-img"/>-->

            <!--        </div>-->
            <!--        <div class="col-lg-6">-->
            <!--            <div class="text-box">-->
            <!--                <h1 class="color-dark fw-bold mb-4">{{$firstEvent->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($firstEvent->start_date))}}-->
            <!--                </p>-->
            <!--                <p class="det">{!! wordLimit(stripText($firstEvent->description, 410)) !!}</p>-->
            <!--                <a href="{{route('conference.show', $firstEvent->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 py-5">
        <div class="container">
            <div class="row conference_container">
                @if(count($conferences))
                    @foreach($conferences as $conference)
                        @if($conference->id == $firstEvent->id) @continue @endif
                    <div class="col-lg-4">
                        <div class="news_card wow left_to_right_apperance">
                            <div class="content">
                                <img src="{{asset($conference->image)}}" alt="" class="sec-img"/>
                                <h4 style="word-break: break-all" class="title fw-bold color-dark mb-3">{{wordLimit($conference->title, 8)}} </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($conference->start_date))}}
                                </p>
                                <p class="det">{!! wordLimit(stripText($conference->description, 100)) !!}</p>

                                <a href="{{route('conference.show', $conference->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>
                    @endforeach
                @endif
            </div>
            @if(count($conferences) > 1)
                <div class="col-md-2 m-auto">
                    <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('conference.seeMore')}}",
            confSkip = 0;
        $('.see_more_link').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);

            confSkip = confSkip + 4;
            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();
                }
                $('.conference_container').append(response);
            }

        });


    </script>
@endsection