@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;

    @endphp

    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url({{ asset('assets/front/img/pages/work.webp') }});"> </div>
        <div class="container">
            <div class="page-header__inner">
                <h2>{{ __('Our work') }}</h2>
                <div class="thm-breadcrumb__box">
                    <ul class="thm-breadcrumb list-unstyled">
                        <li><a href="{{ route('home_index') }}">{{ __('Home') }}</a></li>
                        <li><span>-</span></li>
                        <li>{{ __('Our work') }} </li>
                    </ul>
                </div>
            </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>

    <!--Our work -->
<section class="blog-two blog-page wow fadeInRight" data-wow-delay="200ms">
    <div class="container">
        <div class="section-title text-center">
            <div class="section-title__tagline-box">
                <div class="section-title__shape"></div>
                <span class="section-title__tagline">
                    {{ __('Our work') }}
                </span>
            </div>
            <h2 class="section-title__title">
                {{ app()->getLocale() == 'ar' ? 'الجودة ، الالتزام ، والتميّز' : ' Quality, dedication, and exceence' }}
            </h2>
        </div>

        <!----------- tabs ----------->
        @if ($services && $services->count() > 0)
            <div class="row mb-20">
                <div class="col-xl-12 col-lg-12 col-md-12">
                    <ul class="nav nav-tabs" id="servicesTab" role="tablist">
                        @foreach ($services as $index => $service)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ $index === 0 ? 'active' : '' }}"
                                        id="service-{{ $service->id }}-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#service-{{ $service->id }}"
                                        type="button"
                                        role="tab"
                                        aria-controls="service-{{ $service->id }}"
                                        aria-selected="{{ $index === 0 ? 'true' : 'false' }}">
                                    {{ $service->$name }}
                                </button>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="tab-content" id="servicesTabContent">
                @foreach ($services as $index => $service)
                    <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}"
                         id="service-{{ $service->id }}"
                         role="tabpanel"
                         aria-labelledby="service-{{ $service->id }}-tab">

                        @if($service->category_pages && $service->category_pages->count() > 0)
                            <div class="posts-container" id="posts-container-{{ $service->id }}">
                                @foreach($service->category_pages as $postIndex => $category_page)
                                    @if($postIndex % 2 == 0)
                                        <!-- Section 1 (for odd posts) -->
                                        <section class="orwork2 {{ $postIndex >= 2 ? 'hidden-post' : '' }}">
                                            <div class="row flex-direction align-items">
                                                <div class="col-xl-6">
                                                    <div class="about-three__right abtworks wow slideInLeft" data-wow-delay="200ms" data-wow-duration="2500ms">
                                                        <div class="section-title text-left">
                                                            <div class="section-title__tagline-box">
                                                                <div class="section-title__shape"></div>
                                                                <span class="section-title__tagline">
                                                                    {{ $category_page->service->$name }}
                                                                </span>
                                                            </div>
                                                            <h2 class="section-title__title">
                                                                {{ $category_page->$name }}
                                                            </h2>
                                                        </div>
                                                        <p class="about-three__text fontwork">

                                                     {!! html_entity_decode($category_page ->$details) !!}

                                                        </p>
                                                        <a href="{{ $category_page->url }}" class="about-three__btn thm-btn">
                                                            {{ app()->getLocale() == 'ar' ? 'عرض المشروع' : 'view case study' }}
                                                           
                                                                                   @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>
                                                </div>
                                                <div class="col-xl-6">
                                                    <div class="cs_about_thumb wow slideInRight" data-wow-delay="200ms" data-wow-duration="2500ms">
                                                        <div style="background-image: url({{ asset('assets/images/category_pages/' . $category_page['img']) ?? '' }});" class="imgbackgroundwork"  alt="{{ $category_page->$img_alt ?? 'our work' }}"  ></div>

                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                    @else
                                        <!-- Section 2 (for even posts) -->
                                        <section class="orwork2 {{ $postIndex >= 2 ? 'hidden-post' : '' }}">
                                            <div class="row align-items">
                                                <div class="col-xl-6">
                                                    <div class="cs_about_thumb wow fadeInUp" data-wow-delay="300ms">
                                                        <div style="background-image: url({{ asset('assets/images/category_pages/' . $category_page['img']) ?? '' }});" class="imgbackgroundwork" alt="our work"></div>
                                                    </div>
                                                </div>
                                                <div class="col-xl-6">
                                                    <div class="about-three__right abtworks wow fadeInUp" data-wow-delay="400ms">
                                                        <div class="section-title text-left">
                                                            <div class="section-title__tagline-box">
                                                                <div class="section-title__shape"></div>
                                                                <span class="section-title__tagline">
                                                                    {{ $category_page->service->$name }}
                                                                </span>
                                                            </div>
                                                            <h2 class="section-title__title">
                                                                {{ $category_page->$name }}
                                                            </h2>
                                                        </div>
                                                        <p class="about-three__text fontwork">
                                                            {!! html_entity_decode($category_page->$details) !!}
                                                        </p>
                                                        <a href="{{ $category_page->url }}" class="about-three__btn thm-btn">
                                                            {{ app()->getLocale() == 'ar' ? ' عرض المشروع' : 'view case study' }}
                                                            
                                                                                   @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>
                                                </div>
                                            </div>
                                        </section>
                                    @endif
                                @endforeach
                            </div>

                            @if($service->category_pages->count() > 2)
                                <div class="about-three__btn-box text-center">
                                    <a href="javascript:void(0)" class="loadmorebtn thm-btn" onclick="loadMorePosts('{{ $service->id }}')">
                                        {{ __('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
                        @else
                            <div class="alert alert-info">
                                {{ app()->getLocale() == 'ar' ? 'لا توجد بوستات متاحة لهذه الخدمة' : 'No posts available for this service' }}
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>
@stop
@section('scripts')
<script>
    function loadMorePosts(serviceId) {
        const container = document.getElementById(`posts-container-${serviceId}`);
        const hiddenPosts = container.querySelectorAll('.hidden-post');
        const postsToShow = 2; // Number of posts to show each time

        let shownCount = 0;
        hiddenPosts.forEach(post => {
            if (shownCount < postsToShow) {
                post.classList.remove('hidden-post');

                // Trigger animations
                const wowElements = post.querySelectorAll('.wow');
                wowElements.forEach(el => {
                    el.style.visibility = 'visible';
                    el.style.animationName = el.classList.contains('slideInLeft') ? 'slideInLeft' :
                                          el.classList.contains('slideInRight') ? 'slideInRight' :
                                          el.classList.contains('fadeInUp') ? 'fadeInUp' : '';
                });

                shownCount++;
            }
        });

        // Hide load more button if no more hidden posts
        const remainingHidden = container.querySelectorAll('.hidden-post');
        if (remainingHidden.length === 0) {
            const loadMoreBtn = document.querySelector(`#service-${serviceId} .loadmorebtn`);
            if (loadMoreBtn) loadMoreBtn.style.display = 'none';
        }
    }
</script>
<style>
    .hidden-post {
        display: none;
    }

    /* Ensure WOW animations work for loaded content */
    /* .wow {
        visibility: hidden;
    } */
</style>

@stop