@extends('frontend.layouts.app')

@section('content')
<style>
header .navbar {
    background: #1a1a1a !important;
    padding-top: 10px;
}
.contact .banner_btn {
    border-radius: 9px;
    letter-spacing: 0px;
    padding: 13px 45px;
    font-size: 18px;
    border-radius: 30px;
}
.testimonials {
    padding: 0px 0 135px;
}
</style>
<main>

    <section class="banner bannercon">
        <div class="main-slide">
            <div class="dawn">
                <div class="h-100 position-relative">
                    <img src="{{ $gallery_page->banner_image ? asset($gallery_page->banner_image) : asset('assets/front/images/gel.png')}}"  class="img-fluid banner-img" alt="">
                    <div class="container h-100">
                        <div class="row h-100">
                            <div class="banner-slider">
                                <div class="content" data-aos="fade-right" data-aos-duration="1500">
                                    <h3>{{ $gallery_page->banner_title }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about contact cnx gel">
        <div class="container">
            <p class="para" data-aos="fade-left" data-aos-duration="1500">{{ $gallery_page->section_content }}</p>
            <input type="hidden" id="imageOffset" value="6">

            <div class="row gy-4" data-aos="zoom-out" data-aos-duration="1500" id="galleryContainer">
                @if(isset($galleries))
                    @foreach($galleries as $index => $image)
                        <div class="col-12 col-lg-6">
                            <div class="row gy-4">
                                <div class="col-12 panel">
                                    <div class="ser2">
                                        <a class="d-block" data-fancybox="" data-type="image" href="{{asset($image->image)}}" >
                                            <img src="{{asset($image->image)}}" class="img-fluid" alt="">
                                        </a>
                                    </div>
                                </div>

                            </div>

                        </div>
                    @endforeach
                @endif
            </div>

            <div class="text-center my-3" id="loader" style="display: none;">
                <div class="spinner-border text-info" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>

            <div class="btn-div mt-5 pt-3 text-center">
                <button class="btn banner_btn bckclr" id="loadMoreBtn">Load More</button>
            </div>

        </div>
    </section>

    <section class="testimonials">
        <div class="container">
            <div class="row">
            <div class="gtco-testimonials">
            <h2>What Our Client's Say</h2>
            <div class="owl-carousel owl-carousel1 owl-theme">
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1572561300743-2dd367ed0c9a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=300"
                            alt="">
                        <div class="card-body">
                            <h5>Ronne Galle <br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1588361035994-295e21daa761?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=301&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=301"
                            alt="">
                        <div class="card-body">
                            <h5>Missy Limana<br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1575377222312-dd1a63a51638?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=302&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=302"
                            alt="">
                        <div class="card-body">
                            <h5>Martha Brown<br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1549836938-d278c5d46d20?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=303&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=303"
                            alt="">
                        <div class="card-body">
                            <h5>Hanna Lisem<br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            </div>
        </div>
    </section>


</main>

@endsection

@section('script')
<script>
    

    $(document).ready(function () {
        $('#loadMoreBtn').on('click', function () {
            // Get the current offset
            $('#loader').show();
            var offset = $('#imageOffset').val();
            
            // Make an AJAX request to fetch more images
            $.ajax({
                url: '{{ route("loadMore") }}', // Adjust the URL as per your routes
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {
                    offset: offset,
                },
                success: function (response) {
                    $('#loader').hide();
                    // Append the new images to the gallery container
                    $.each(response.images, function(index, image) {
                        var imageHtml = '<div class="col-12 col-lg-6"><div class="row gy-4"><div class="col-12 panel"><div class="ser2"><a class="d-block" data-fancybox="" data-type="image" href="' + image.image + '"><img src="' + image.image + '" class="img-fluid" alt=""></a></div></div></div></div>';
                        $('#galleryContainer').append(imageHtml);
                    });
                    

                    // Update the offset for the next request
                    $('#imageOffset').val(parseInt(offset) + 6);

                    
                    // Hide the "Load More" button if there are no more images
                    if (response.images.length === 0) {
                        $('#loadMoreBtn').hide();
                    }
                },
                error: function (error) {
                    console.error('Error fetching more images:', error);
                }
            });
        });
    });
</script>
@endsection