@extends('web.layouts.container')

@section('content')
    <section class="gallery-sec gallery-pg">
        <div class="container">
            <!--<div class="row">-->
                @if(count($gucs))
                    <div class="row guc_container">
                        @foreach($gucs as $guc)
                            <div class="col-lg-4 col-md-6">
                                <a href="{{route('guc.show', $guc->id)}}">
                                    <div class="gallery_card">
                                        <img src="{{asset($guc->image)}}" alt="" class="main-img"/>
                                        <span class="plus"></span>
                                        <h6 class="title">{{$guc->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 showMoreGucRoute = "{{route('showMoreGuc')}}",
            noMoreGucAlert = "{{__('gucs.no_more_guc')}}",
            skip = 0;

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

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

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

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

        });
    </script>
@endsection