@extends('web.layouts.container')

@section('content')
    <section class="gallery-sec gallery-pg">
        <div class="container">
            <!--<div class="row">-->
                @if(count($galleries))
                <div class="row galleries_container">
                    @foreach($galleries as $gallery)
                        <div class="col-lg-4 col-md-6">
                            <a href="{{asset($gallery->image)}}" data-fancybox="images">
                                <div class="gallery_card">
                                    <img src="{{asset($gallery->image)}}" alt="" class="main-img"/>
                                    <span class="plus"></span>
                                    <h6 class="title">{{$gallery->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 showMoreGalleryRoute = "{{route('showMoreGallery')}}",
            noMoreGalleriesAlert = "{{__('photoGalleries.no_more_galleries')}}",
            skip = 0;

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

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

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

            if(!response){
               $(this).toggleClass('w-25 show_more_link').html(noMoreGalleriesAlert);
            }
            if (response){
                $('.galleries_container').append(response);
            }

        });
    </script>
@endsection