@extends('layouts.site')

@section('content')
    @php
        /**/ [
            $name,
            $email,
            $phone,
            $whatsapp,
            $google_map_url,
            $addresss,
            $facebook,
            $instagram,
            $twitter,
            $youtube,
            $tiktok,
        ] = getGeneralSettings();

    @endphp
    @php

        $lang = app()->getLocale();
        $name = 'name_' . $lang;
        $details = 'details_' . $lang;

        $description = 'description_' . $lang;
        $question = 'question_' . $lang;
        $answer = 'answer_' . $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/services.webp') }});">
        </div>
        <div class="container">
            <div class="page-header__inner">
                <h2>services</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>

                            {{ app()->getLocale() == 'ar' ? 'التفاصيل' : 'services details' }}
                        </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>


    <!--Services Details Start-->
    <section class="services-details">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 col-lg-7">
                    <div class="services-details__left">
                        <div class="services-details__img">
                            <div class="services-two__img servimgdetails"
                                style="background-image: url({{ asset('assets/images/services/' . $service->img) }});"
                                alt="{{ $service->$img_alt ?? 'services img' }}"  > </div>
                            <div class="services-details__icon">
                                <i class="{{ $service->icon }} "></i>
                            </div>
                        </div>
                        <h3 class="services-details__title-1">
                            {{ $service->$name }}
                        </h3>
                        <p class="services-details__text-1">
                            {{ $service->$details }}
                        </p>


                        <!--Tools we use-->
                        @php
                            $services = \App\Models\Service::where('is_active', 1)->get();
                        @endphp
                        @if ($services && $tools->count() > 0)
                            <section class="mb-20">
                                <div class="row">
                                    <h3 class="section-title__title mb-20">
                                        {{ app()->getLocale() == 'ar' ? 'الأدوات المستخدمة' : 'Tools we use' }}
                                    </h3>

                                    <div class="blog-carousel thm-owl__carousel owl-theme owl-carousel carousel-dot-style"
                                        data-owl-options='{
                "items": 3,
                "margin": 20,
                "smartSpeed": 700,
                "loop":true,
                "autoplay": 2000,
                "nav":false,
                "dots":true,
                "navText": ["<span class=\"fa fa-angle-left\"></span>","<span class=\"fa fa-angle-right\"></span>"],
                "responsive":{
                    "0":{
                        "items":2
                    },
                    "768":{
                        "items":2
                    },
                    "992":{
                        "items": 3
                    },
                    "1200":{
                        "items": 3
                    }
                }
            }'>
                                        @foreach ($tools as $item)
                                            <!--item-->
                                            <div class="item">
                                                <div class="Tools wow fadeInLeft" data-wow-delay="100ms">
                                                    <div class="icon"> <img
                                                            src="{{ asset('assets/images/sub_category_pages/' . $item->img) }}">
                                                    </div>
                                                    <div class="content">
                                                        <h4> {{ $item->$name }}</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach




                                    </div>
                                </div>
                            </section>
                        @endif
                        <!-------faq-    ------------>
                        @if ($faqs && $faqs->count() > 0)
                            <div class="services-details__faq">

                                <div class="accrodion-grp faq-one-accrodion" data-grp-name="faq-one-accrodion-1">

                                    @foreach ($faqs as $index => $faq)
                                        <div class="accrodion @if ($index == 0) active @endif">
                                            <div class="accrodion-title">
                                                <h4> {{ $faq->$question }}</h4>
                                            </div>
                                            <div class="accrodion-content">
                                                <div class="inner">
                                                    <p> {!! html_entity_decode($faq->$answer) !!}</p>
                                                </div><!-- /.inner -->
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                        <div class="about-three__btn-box text-center">
                            <a href="quotation.html" class="   thm-btn">
                                {{ app()->getLocale() == 'ar' ? 'طلب الخدمه' : 'service request' }} <i
                                    class="fas fa-arrow-right ms-2"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-5">
                    <div class="services-details__right">
                        <div class="sidebar__single sidebar__category">
                            <h3 class="sidebar__title"> {{ app()->getLocale() == 'ar' ? 'خدماتنا' : 'Our Services' }}</h3>
                            @php
                                $services = \App\Models\Service::where('is_active', 1)->get();
                            @endphp
                            @if ($services && $services->count() > 0)

                                <ul class="blog-details__catagories-list list-unstyled">

                                    @foreach ($services as $servicee)
                                        <li class="@if ($servicee->id == $service->id) active @endif"">
                                            <a
                                                href="{{ route('site.servicesDetails', ['slug_ar' => $servicee->slug_ar, 'slug_en' => $servicee->slug_en]) }} ">

                                                {{ $servicee->$name }}
                                                <span class="fas fa-long-arrow-alt-right"></span></a>
                                        </li>
                                    @endforeach
                                </ul>

                        </div>
                        @endif
                        <div class="services-details__any-question">
                            <div class="services-details__any-question-bg"
                                style="background-image: url({{ asset('assets/img/services-details-any-question-bg.jpg') }});">
                            </div>
                            <h3 class="services-details__any-question-title">

                                {{ app()->getLocale() == 'ar' ? 'هل لديك أى استفسار' : 'Have You Any Question?' }}
                            </h3>
                            <div class="services-details__any-question-icon"> <i class="fas fa-phone"></i> </div>
                            <p class="services-details__any-question-sub-title">
                                {{ app()->getLocale() == 'ar' ? 'أتصل بنا فى أى وقت' : 'Call Any Time' }}

                            </p>
                            <h3 class="services-details__any-question-number">
                                <a href="tel:{{ $phone }}"> {{ $phone }}</a>
                            </h3>
                        </div>
                        @if (isset($service->upload_file) && !empty($service->upload_file))
                            <div class="services-details__file-box">
                                <ul class="services-details__file-list list-unstyled">
                                    <li> <a href="#" download>

                                            {{ app()->getLocale() == 'ar' ? 'تحميل' : 'Download Pdf' }}

                                            {{ $service->upload_file }}
                                            <i class="fas fa-download"></i> </a> </li>
                                </ul>
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </section>





@stop

@section('scripts')
    <script>
        function toggleContent() {
            var content = document.getElementById('seo-content');
            var readMoreBtn = document.getElementById('read-more-btn');
            var readLessBtn = document.getElementById('read-less-btn');

            if (content.style.display === 'none' || content.style.display === '') {
                content.style.display = 'block'; // إظهار المحتوى
                readMoreBtn.style.display = 'none'; // إخفاء زر "اقرأ المزيد"
                readLessBtn.style.display = 'block'; // إظهار زر "اقرأ أقل"
            } else {
                content.style.display = 'none'; // إخفاء المحتوى
                readMoreBtn.style.display = 'block'; // إظهار زر "اقرأ المزيد"
                readLessBtn.style.display = 'none'; // إخفاء زر "اقرأ أقل"
            }
        }
    </script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let itemsToShow = 4; //  image to display
            const galleryItems = document.querySelectorAll(".gallery-item");
            const loadMoreBtn = document.getElementById("loadMoreBtn");

            loadMoreBtn.addEventListener("click", function() {
                let hiddenItems = document.querySelectorAll(".gallery-item[style='display: none;']");
                let count = 0;

                hiddenItems.forEach(item => {
                    if (count < itemsToShow) {
                        item.style.display = "block";
                        count++;
                    }
                });

                // إخفاء الزر إذا لم يعد هناك مزيد من الصور
                if (document.querySelectorAll(".gallery-item[style='display: none;']").length === 0) {
                    loadMoreBtn.style.display = "none";
                }
            });
        });
    </script>
@stop