@extends('layouts.site')

@section('content')
    @php

        $lang = app()->getLocale();
        $name = 'name_' . $lang;
        $details = 'details_' . $lang;
        $type = 'type_' . $lang;
        $title = 'title_' . $lang;
        $description = 'description_' . $lang;
        $img_alt = 'img_alt_' . $lang;
        $slug = 'slug_' . $lang;
   $slug = 'slug_' . app()->getLocale();
    @endphp

    <!--Start Page Header-->
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url({{ asset('assets/front/img/page.webp') }})">
        </div>
        <div class="container">
            <div class="page-header__inner text-center">
                <h2>{{ __('Services') }}</h2>
                <ul class="thm-breadcrumb">
                    <li><a href="{{ route('home_index') }}">{{ __('Home') }}</a></li>
                    <li><span class="icon-right-arrow-5"></span></li>
                    <li>{{ __('Services') }}</li>
                </ul>
            </div>
        </div>
        <svg class="wave" viewBox="0 0 1440 40" xmlns="http://www.w3.org/2000/svg">
            <path fill="#fff" fill-opacity="1" d="M0,40 Q360,10 720,30 T1440,40 L1440,50 L0,50Z">
            </path>
        </svg>
    </section>

    <!--Start Service -->
    <section class="service-one wow fadeInDown direction" data-wow-delay=".3s">
        <div class="container">
            @if ($services && $services->count() > 0)
            <div class="row">
                <!-- Start Service -->
                @foreach ($services as $service)
                    <div class="col-xl-4 col-lg-4 col-md-6 wow fadeInLeft operation-item1"
                        data-wow-delay="100ms">
                        <div class="service-one__single">
                            <div class="service-one__single-img">
                                <a href="{{ route('site.servicesDetails', ['slug' => $service->$slug]) }}">
                                    <div class="inner backservices"
                                        style="background-image: url({{ asset('assets/images/services/' . $service['img']) ?? '' }});"
                                        alt="{{ $service->$img_alt ?? 'services img' }}">
                                    </div>
                                </a>
                            </div>
                            <div class="service-one__single-content">
                                <h3>
                                    <a href="{{ route('site.servicesDetails', ['slug' => $service->$slug]) }}">
                                        {{ $service->$name }}
                                    </a>
                                </h3>
                                <p>{{ Str::limit($service->$description, 120, '...') }}</p>
                                <div class="btn-box">
                                    <a href="{{ route('site.servicesDetails', ['slug' => $service->$slug]) }}">
                                        {{ app()->getLocale() == 'ar' ? 'اقرأ المزيد' : 'Read More' }}

                                        <span class="icon-right-arrow"></span>
                                    </a>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="about-three__btn-box text-center mt-4">
                <a href="javascript:void(0);" class="thm-btn" id="loadMoreBtn">
                    {{ __('load more') }}
                    @if (app()->getLocale() == 'ar')
                        <i class="fas fa-arrow-left ms-2"></i>
                    @else
                        <i class="fas fa-arrow-right ms-2"></i>
                    @endif
                </a>
            </div>
        @endif



        </div>
    </section>









@stop

@section('scripts')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <style>
        .hidden-item {
            display: none;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const itemsToShow = 3;
            const operationItems = document.querySelectorAll(".operation-item");
            const loadMoreBtn = document.getElementById("loadMoreBtn");

            loadMoreBtn.addEventListener("click", function() {
                const hiddenItems = document.querySelectorAll(".operation-item.hidden-item");
                let count = 0;

                hiddenItems.forEach(item => {
                    if (count < itemsToShow) {
                        item.classList.remove("hidden-item");
                        count++;
                    }
                });

                //  hide button if no item
                if (document.querySelectorAll(".operation-item.hidden-item").length === 0) {
                    loadMoreBtn.style.display = "none";
                }
            });

            // hide button if count is less
            if (operationItems.length <= itemsToShow) {
                loadMoreBtn.style.display = "none";
            }
        });
    </script>

@stop