@extends('web.layouts.container')
@section('content')
    <section class="news-pg events-sec bg-white section">
        <div class="container">
            <div class="row">
                @if($countDown)
                <div class="col-12 active_event_container">
                    <div class="main_event">
                        <div class="img">
                            <img src="{{asset($activeEvent->image)}}" alt="">
                        </div>
                        <a href="{{route('event.show', [$activeEvent->id, $activeEvent->slug])}}" class="news_card d-block">
                            <div class="content">
                                <h6 class="subtitle color-primary mb-2">{{$activeEvent->cityName}}</h6>
                                <h4 class="title color-secondary mb-3">
                                    {{__('events.upcoming_event')}}
                                </h4>
                            </div>
                        </a>
                        <div class="timing">
                            <div class="item">
                                <h2 id="days"></h2>
                                <small> {{__('events.days')}} </small>
                            </div>
                            <div class="item">
                                <h2 id="hours"></h2>
                                <small> {{__('events.hours')}} </small>
                            </div>
                            <div class="item">
                                <h2 id="minutes"></h2>
                                <small> {{__('events.minutes')}} </small>
                            </div>
                            <div class="item">
                                <h2 id="seconds"></h2>
                                <small> {{__('events.seconds')}} </small>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                <div class="row events_container">
                    @if(count($events))
                        @foreach($events as $event)
                            @if($loop->iteration == 4) @break @endif
                            <div class="col-lg-4 col-md-6">
                                <a href="{{route('event.show', [$event->id, $event->slug_text])}}" class="news_card d-block wow left_to_right_apperance">
                                    <div class="content">
                                        <h6 class="subtitle color-primary mb-2">{{$event->cityName}}</h6>
                                        <h4 class="title color-secondary mb-3">
                                            {{$event->name}}
                                        </h4>
                                        <p class="det">
                                            {{wordLimit(stripText($event->description), 24)}}
                                        </p>
                                        <div class="prof_box d-flex align-items-center">
                                            <img src="{{asset('assets/web/images/icon.png')}}" alt="" class="icon"/>
                                            <div class="prof_data">
                                                <span class="span"><small>{{__('events.updated_on')}}</small></span>
                                                <p class="date mb-0">{{date('d M Y', strtotime($event->event_date))}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
            @if(count($events) > 3)
            <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>
    </section>
@endsection

@section('inner_js')

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

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

            let url = loadMoreRoute,
                method = 'get';

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

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

        });



        const second = 1000,
            minute = second * 60,
            hour = minute * 60,
            day = hour * 24,
            week = hour * 24 * 7;

        let countDown = new Date("{{$countDown}}").getTime(),
            x = setInterval(function() {

                let now = new Date().getTime(),
                    distance = countDown - now;
                    // distance = 10000 - now;

                if(distance === 0){
                    // $('.active_event_container').remove();
                    return false;
                }

                    document.getElementById('days').innerText = Math.floor(distance / (day)),
                    document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
                    document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
                    document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);

            }, second);

    </script>


@endsection