@extends('web.layouts.container')

@section('content')
    <section class="gallery-sec gallery-pg">
        <div class="container">
            <!--<div class="row">-->
                @if(count($occasions))
                    <div class="row media_container">
                        @foreach($occasions as $occasion)
                            <div class="col-lg-4 col-md-6">
                                <a @if($occasion->url) href="{{$occasion->url}}" @else href="{{asset($occasion->image)}}" @endif data-fancybox>
                                    <div class="gallery_card">
                                        <img src="{{asset($occasion->image)}}" alt="" class="main-img"/>
                                        <span class="video-icon"><i class="fas fa-play-circle"></i></span>
                                        <h6 class="title">{{$occasion->title}}</h6>
                                    </div>
                                </a>
                               
                            </div>
                        @endforeach
                    </div>
                    <div class="col-md-12">
                        <a href="#" class="more-butn mt-4 show_more_link"> <i class="fas fa-spinner"></i>{{__('main.show_more')}}</a>
                    </div>
                @endif
            <!--</div>-->
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        let showMoreMediaRoute = "{{route('showMoreMedia')}}",
            noMoreMediaAlert = "{{__('occasions.no_more_media')}}",
            skip = 0;

        $('.show_more_link').click(async function (e) {
            e.preventDefault();
            skip = skip + 6;

            if(!$(this).hasClass('show_more_link')){
                return false;
            }
            let url = showMoreMediaRoute,
                data = {skip: skip},
                method = 'get';

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

            if(!response){
                $(this).toggleClass('w-50 show_more_link').html(noMoreMediaAlert);
            }
            if (response){
                $('.media_container').append(response);
            }

        });
    </script>
@endsection
