@extends('front.layout.master')
@push('css')
    <style>
        #load-more-btn {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #F47C21;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #load-more-btn:hover {
            background-color: #F47C21;
        }
        #loader {
            text-align: center;
            font-size: 16px;
            color: #555;
        }
    </style>
@endpush
@section('content')
    <main class="main-content">
        <div class="hero">
            <div class="swiper-container mySwiper">
                <div class="swiper-wrapper">
                  @foreach($decodedData['data']['slider'] as $slider)
                        <div class="swiper-slide">
                            <img src="{{$slider['image']}}" alt="hero" />
                        </div>
                    @endforeach

                </div>
                <div class="hero-swiper-pagination"></div>
            </div>
        </div>

        <div class="offers">
            <div class="container">
                <div class="g-head">
                    <h3>{{ __('front.offers_title') }}</h3>
                    <a href="{{ route('get-offers') }}" class="btn">
                        {{ __('front.view_more') }}
                        <img src="{{ asset('front/images/circle-arrow.svg') }}" alt="arrow-right" />
                    </a>
                </div>
                <div class="row">
                    @foreach($decodedData['data']['offer'] as $index => $offer)
                        @if ($index === 0)
                            <!-- Big block for the first offer -->
                            <div class="col-lg-6 col-md-12">
                                <div class="offer-block big">
                                    <a href="{{ route('get-offers-detials', $offer['id']) }}"></a>
                                    <img src="{{ $offer['image_path'] }}" alt="offer" />
                                    <div class="offer-caption">
                                        <p>{{ $offer['discount'] }} <span>{{ $offer['code'] }}</span></p>
                                        <h4>{{ $offer['name'] ?? __('front.offer_placeholder_title') }}</h4>
                                    </div>
                                </div>
                            </div>
                        @else
                            @if ($index === 1)
                                <!-- Start a nested row for smaller offers -->
                                <div class="col-lg-6 col-md-12">
                                    <div class="row">
                                        @endif

                                        <!-- Small block for subsequent offers -->
                                        <div class="col-lg-6 col-md-12">
                                            <div class="offer-block">
                                                <a href="{{ route('get-offers-detials', $offer['id']) }}"></a>
                                                <img style="height: 234px;" src="{{ $offer['image_path'] ?? asset('front/images/placeholder.png') }}" alt="offer" />
                                                <div class="offer-caption">
                                                    <p>{{ $offer['discount'] }} <span>{{ $offer['code'] }}</span></p>
                                                    <h4>{{ $offer['name'] ?? __('front.offer_placeholder_title') }}</h4>
                                                </div>
                                            </div>
                                        </div>

                                        @if ($index === count($decodedData['data']['offer']) - 1)
                                    </div>
                                </div>
                                <!-- End nested row -->
                            @endif
                        @endif
                    @endforeach
                </div>
            </div>
        </div>

        <div class="services-categories">
            <div class="container">
                <div class="g-head">
                    <h3>{{ __('front.service_categories_title') }}</h3>
                </div>
                <div class="services-swiper swiper">
                    <div class="swiper-wrapper">
                        @foreach($decodedData['data']['categories'] as $category)
                            <div class="swiper-slide">
                                <div class="service-category-block" data-id="{{ $category['id'] }}">
                                    <div class="service-img">
                                        <img src="{{ asset('front/images/placeholder.png') }}" alt="service" />
                                    </div>
                                    <h4>{{ $category['name'] }}</h4>
                                    <a href="javascript:void(0)"></a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="services-swiper-pagination"></div>
                </div>
            </div>
        </div>

        <div class="services">
            <div class="container">
                <div id="services-container">
                    <!-- Services will be dynamically loaded here -->
                </div>
            </div>
        </div>


        {{--        <div class="subscription">--}}
{{--            <div class="container">--}}
{{--                <div class="g-head">--}}
{{--                    <h3>الاشتراكات</h3>--}}
{{--                    <a href="#" class="btn">--}}
{{--                        عرض المزيد--}}
{{--                        <img src="{{asset('front/images/circle-arrow.svg')}}" alt="arrow-right" />--}}
{{--                    </a>--}}
{{--                </div>--}}
{{--                <div class="row">--}}
{{--                    <div class="col-lg-4 col-md-12">--}}
{{--                        <div class="subscription-block">--}}
{{--                            <div class="img">--}}
{{--                                <img src="{{asset('front/images/subscription.png')}}" alt="subscription" />--}}
{{--                                <a href="#"></a>--}}
{{--                            </div>--}}
{{--                            <div class="info">--}}
{{--                                <div class="inner">--}}
{{--                                    <a href="#" class="title">اسم الاشتراك يكتب هنا</a>--}}
{{--                                    <div class="i-footer">--}}
{{--                                        <div class="price">--}}
{{--                                            <span> 25 <i>kd</i> </span>--}}
{{--                                            <span class="old-price"> 30 <i>kd</i> </span>--}}
{{--                                        </div>--}}
{{--                                        <a href="#" class="btn">عرض التفاصيل</a>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="col-lg-4 col-md-12">--}}
{{--                        <div class="subscription-block">--}}
{{--                            <div class="img">--}}
{{--                                <img src="{{asset('front/images/subscription.png')}}" alt="subscription" />--}}
{{--                                <a href="#"></a>--}}
{{--                            </div>--}}
{{--                            <div class="info">--}}
{{--                                <div class="inner">--}}
{{--                                    <a href="#" class="title">اسم الاشتراك يكتب هنا</a>--}}
{{--                                    <div class="i-footer">--}}
{{--                                        <div class="price">--}}
{{--                                            <span> 25 <i>kd</i> </span>--}}
{{--                                            <span class="old-price"> 30 <i>kd</i> </span>--}}
{{--                                        </div>--}}
{{--                                        <a href="#" class="btn">عرض التفاصيل</a>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="col-lg-4 col-md-12">--}}
{{--                        <div class="subscription-block">--}}
{{--                            <div class="img">--}}
{{--                                <img src="{{asset('front/images/subscription.png')}}" alt="subscription" />--}}
{{--                                <a href="#"></a>--}}
{{--                            </div>--}}
{{--                            <div class="info">--}}
{{--                                <div class="inner">--}}
{{--                                    <a href="#" class="title">اسم الاشتراك يكتب هنا</a>--}}
{{--                                    <div class="i-footer">--}}
{{--                                        <div class="price">--}}
{{--                                            <span> 25 <i>kd</i> </span>--}}
{{--                                            <span class="old-price"> 30 <i>kd</i> </span>--}}
{{--                                        </div>--}}
{{--                                        <a href="#" class="btn">عرض التفاصيل</a>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
    </main>


@endsection
@push('js')

    <script>
        $(document).ready(function () {
            const servicesContainer = $('#services-container');
            const itemsPerPage = 10; // Number of items to display per batch
            let currentPage = 0; // Current page of items
            let allServices = []; // Store services globally for pagination
            let loading = false; // To prevent multiple simultaneous loads
            let observer; // Reference for Intersection Observer
            let loader; // Loader element reference

            // Function to initialize the loader and observer
            function initializeObserver() {
                if (observer) observer.disconnect(); // Disconnect any previous observer
                if (loader) loader.remove(); // Remove any existing loader

                // Create a new loader
                loader = $('<div id="loader" style="text-align: center; padding: 20px;">Loading...</div>');
                servicesContainer.after(loader);

                // Create a new observer
                observer = new IntersectionObserver(entries => {
                    if (entries[0].isIntersecting && !loading) {
                        loadMoreServices(); // Load next batch when the observer is triggered
                    }
                }, {
                    root: null, // Use the viewport as the root
                    rootMargin: '0px',
                    threshold: 0.1 // Trigger when 10% of the loader is visible
                });

                observer.observe(loader[0]); // Observe the loader
            }

            // Handle category click
            $('.service-category-block').on('click', function () {
                const categoryId = $(this).data('id');
                const selectedCategory = @json($decodedData['data']['categories']);
                $('.service-category-block').removeClass('selected');
                $(this).addClass('selected');

                // Reset services container and pagination
                servicesContainer.html('');
                currentPage = 0;
                allServices = [];
                loading = false;

                // Find the category based on the clicked ID
                const category = selectedCategory.find(cat => cat.id === categoryId);

                if (category && category.products.length > 0) {
                    allServices.push(...category.products); // Load services for the selected category
                    initializeObserver(); // Re-initialize the observer
                    loadMoreServices(); // Load the first batch
                } else {
                    // Show a message if no services are available
                    servicesContainer.html('<p>No services available for this category.</p>');
                    if (observer) observer.disconnect(); // Disconnect observer for empty services
                }
            });

            // Load more services function
            function loadMoreServices() {
                if (loading) return; // Prevent duplicate calls
                loading = true;

                const start = currentPage * itemsPerPage;
                const end = start + itemsPerPage;
                const servicesToDisplay = allServices.slice(start, end);

                if (servicesToDisplay.length > 0) {
                    servicesToDisplay.forEach(service => {
                        const serviceImage = service.image_path || '/front/images/placeholder.png'; // Default image if no image_path
                        servicesContainer.append(`
                    <div class="service-block">
                        <div class="img">
                            <a href="#"></a>
                            <img src="${serviceImage}" alt="service" />
                        </div>
                        <div class="info">
                            <a href="#" class="title">${service.name}</a>
                            <p>${service.content}</p>
                            <div class="block-footer">
                                <div class="price">
                                    <span>${service.discount} <i>${service.code}</i></span>
                                    <span class="old-price">${service.mainprice} <i>${service.code}</i></span>
                                </div>
                                <form action="{{route('addedCart')}}" method="post" id="addedForm" data-id="${service.id}" data-price="${service.mainprice}">
                                    @method('post')
                        @csrf
                        <input type="hidden" id="branch_id" name="branch_id" value="{{session('branch_id')}}">
                                    <input type="hidden" form="addedForm" value="1" id="quantaty" name="quantaty" class="plus-minus-box" disabled="">
                                    <button type="submit" class="btn" style="background: #f47c20; border-radius: 50px; height: 45px; padding: 0 20px; color: #fff; border: 0; transition: 0.3s; display: inline-flex; align-items: center; gap: 10px; justify-content: center;">    {{ __('front.Add to Cart') }}
                        </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
`);
                    });
                    currentPage++; // Increment page number
                    loading = false; // Reset loading state
                } else {
                    if (observer) observer.disconnect(); // Stop observing when all services are loaded
                    loader.text('All services loaded.'); // Show a message indicating all services are loaded
                }
            }

            // Trigger click for the first category on page load
            const firstCategory = $('.service-category-block').first();
            if (firstCategory.length > 0) {
                firstCategory.trigger('click'); // Trigger click event on the first category
            }
        });




        {{--$(document).ready(function () {--}}
        {{--    const servicesContainer = $('#services-container');--}}
        {{--    const itemsPerPage = 10; // Number of items to display per batch--}}
        {{--    let currentPage = 0; // Current page of items--}}

        {{--    // Store services globally for pagination--}}
        {{--    const allServices = [];--}}

        {{--    // Handle category click--}}
        {{--    $('.service-category-block').on('click', function () {--}}
        {{--        const categoryId = $(this).data('id');--}}
        {{--        const selectedCategory = @json($decodedData['data']['categories']);--}}
        {{--        $('.service-category-block').removeClass('selected');--}}
        {{--        $(this).addClass('selected');--}}

        {{--        // Find the category based on the clicked ID--}}
        {{--        const category = selectedCategory.find(cat => cat.id === categoryId);--}}

        {{--        // Clear the services container and reset pagination--}}
        {{--        servicesContainer.html('');--}}
        {{--        currentPage = 0;--}}

        {{--        if (category && category.products.length > 0) {--}}
        {{--            allServices.length = 0; // Clear the array--}}
        {{--            allServices.push(...category.products); // Push new services--}}
        {{--            loadMoreServices(); // Load the first batch--}}
        {{--        } else {--}}
        {{--            servicesContainer.html('<p>No services available for this category.</p>');--}}
        {{--        }--}}
        {{--    });--}}

        {{--    // Load more services function--}}
        {{--    function loadMoreServices() {--}}
        {{--        const start = currentPage * itemsPerPage;--}}
        {{--        const end = start + itemsPerPage;--}}
        {{--        const servicesToDisplay = allServices.slice(start, end);--}}

        {{--        if (servicesToDisplay.length > 0) {--}}
        {{--            servicesToDisplay.forEach(service => {--}}
        {{--                const serviceImage = service.image_path || '/front/images/placeholder.png'; // Default image if no image_path--}}
        {{--                servicesContainer.append(`--}}
        {{--            <div class="service-block">--}}
        {{--                <div class="img">--}}
        {{--                    <a href="#"></a>--}}
        {{--                    <img src="${serviceImage}" alt="service" />--}}
        {{--                </div>--}}
        {{--                <div class="info">--}}
        {{--                    <a href="#" class="title">${service.name}</a>--}}
        {{--                    <p>${service.content}</p>--}}
        {{--                    <div class="block-footer">--}}
        {{--                        <div class="price">--}}
        {{--                            <span>${service.discount} <i>${service.code}</i></span>--}}
        {{--                            <span class="old-price">${service.mainprice} <i>${service.code}</i></span>--}}
        {{--                        </div>--}}
        {{--                        <form action="{{route('addedCart')}}" method="post" id="addedForm" data-id="${service.id}" data-price="${service.mainprice}">--}}
        {{--                            @method('post')--}}
        {{--                @csrf--}}
        {{--                <input type="hidden" id="branch_id" name="branch_id" value="{{session('branch_id')}}">--}}
        {{--                            <input type="hidden" form="addedForm" value="1" id="quantaty" name="quantaty" class="plus-minus-box" disabled="">--}}
        {{--                            <button type="submit" class="btn" style="background: #f47c20; border-radius: 50px; height: 45px; padding: 0 20px; color: #fff; border: 0; transition: 0.3s; display: inline-flex; align-items: center; gap: 10px; justify-content: center;">اضف للسلة</button>--}}
        {{--                        </form>--}}
        {{--                    </div>--}}
        {{--                </div>--}}
        {{--            </div>--}}
        {{--        `);--}}
        {{--            });--}}
        {{--            currentPage++; // Increment the page number--}}
        {{--        }--}}

        {{--        // Show message if no more services--}}
        {{--        if (end >= allServices.length) {--}}
        {{--            $('#load-more-btn').hide();--}}
        {{--        } else {--}}
        {{--            $('#load-more-btn').show();--}}
        {{--        }--}}
        {{--    }--}}

        {{--    // Add "Load More" button--}}
        {{--    servicesContainer.after('<button id="load-more-btn" class="btn btn-secondary" style="margin: 20px auto; display: block;">عرض المزيد</button>');--}}
        {{--    $('#load-more-btn').on('click', function () {--}}
        {{--        loadMoreServices();--}}
        {{--    });--}}

        {{--    // Trigger click for the first category on page load--}}
        {{--    const firstCategory = $('.service-category-block').first();--}}
        {{--    if (firstCategory.length > 0) {--}}
        {{--        firstCategory.trigger('click'); // Trigger click event on the first category--}}
        {{--    }--}}
        {{--});--}}

    </script>
@endpush