@extends('web.layouts.layout')
@section('content')

    <main>

        <!-- ---------- innerheader ----------- -->
        <section class="inner-header pt-100">
            <div class="container">
                <div class="cont text-center col-lg-4 mx-auto">
                    <div class="bread d-flex fw-bold fsz-18 justify-content-center">
                        <a href="{{ route('web.home') }}"> <i class="fal fa-home"></i> </a>
                        <span class="mx-3"> / </span>
                        <a href="#">{{__('web.services')}}</a>
                    </div>
                    <h1 class="fsz-40 mt-10 cr-sub"> {{__('web.services')}}</h1>
                    <div class="text fsz-20 mt-15 cr-sub fw-bold"> {{ $servicePage->currentDescription->description ?? 'خدمات متكاملة في بيع وتركيب وصيانة جميع أنواع المكيفات بسرعة واحترافية.' }} </div>
                </div>
            </div>
            <img src="{{ asset('assets/web/images/hero-top-shap.png') }}" alt="" class="shap">
        </section>

        <!-- ---------- services ----------- -->
        <section class="services-services py-4">
            <div class="container">
                <div class="row">
                    @forelse($services as $service)
                        <div class="col-lg-4">
                            <div class="service-item">
                                <div class="icon-80 mb-30">
                                    <img src="{{ $service->image_url ?? asset('assets/web/images/icons/air-conditioner.svg') }}" alt="">
                                </div>
                                <div class="info">
                                    <h3 class="service-title"> {{ $service->currentDescription->title ?? 'خدمة التكييف' }} </h3>
                                    @if($service->currentDescription->description)
                                        <div class="service-description mb-3">
                                            {!! $service->currentDescription->description !!}
                                        </div>
                                    @endif

                                    <a href="{{ route('web.services.show', $service->id) }}" class="butn rounded-pill hvr-txt-trans hvr-scale bg-white cr-sub fsz-16 mt-30">
                                        <div class="txt" data-text="{{ __('web.view_more') }}"><span>{{ __('web.view_more') }}</span></div>
                                        <i class="fal fa-arrow-left ms-4"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-lg-4">
                            <div class="service-item">
                                <div class="icon-80 mb-30">
                                    <img src="{{ asset('assets/web/images/icons/air-conditioner.svg') }}" alt="">
                                </div>
                                <div class="info">
                                    <h3 class="service-title"> {{ __('web.default_service_features.split_systems') }} </h3>
                                    <ul class="list-arrow">
                                        <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.split_systems') }} </span> </li>
                                        <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.central_systems') }} </span> </li>
                                        <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.vrf_systems') }} </span> </li>
                                        <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.chiller_systems') }} </span> </li>
                                    </ul>
                                    <a href="#" class="butn rounded-pill hvr-txt-trans hvr-scale bg-white cr-sub fsz-16 mt-30"> <div class="txt" data-text="مشاهدة المزيد"><span></span></div> <i class="fal fa-arrow-left ms-4"></i> </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="service-item">
                                <div class="icon-80 mb-30">
                                    <img src="{{ asset('assets/web/images/icons/air-direction.svg') }}" alt="">
                                </div>
                                <div class="info">
                                <h3 class="service-title"> {{ __('web.default_service_features.air_ducts') }} </h3>
                                <ul class="list-arrow">
                                    <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.split_systems') }} </span> </li>
                                    <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.central_systems') }} </span> </li>
                                    <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.vrf_systems') }} </span> </li>
                                    <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.chiller_systems') }} </span> </li>
                                </ul>
                                    <a href="#" class="butn rounded-pill hvr-txt-trans hvr-scale bg-white cr-sub fsz-16 mt-30"> <div class="txt" data-text="مشاهدة المزيد"><span></span></div> <i class="fal fa-arrow-left ms-4"></i> </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="service-item">
                                <div class="icon-80 mb-30">
                                    <img src="{{ asset('assets/web/images/icons/installation.svg') }}" alt="">
                                </div>
                                <div class="info">
                                <h3 class="service-title"> {{ __('web.default_service_features.maintenance_services') }} </h3>
                                <ul class="list-arrow">
                                    <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.air_duct_cleaning') }} </span> </li>
                                    <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.emergency_maintenance') }} </span> </li>
                                    <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.preventive_maintenance') }} </span> </li>
                                    <li> <span class="arrow"> <img src="{{ asset('assets/web/images/arrow.svg') }}" alt=""> </span> <span class="text"> {{ __('web.default_service_features.corrective_maintenance') }} </span> </li>
                                </ul>
                                    <a href="#" class="butn rounded-pill hvr-txt-trans hvr-scale bg-white cr-sub fsz-16 mt-30"> <div class="txt" data-text="مشاهدة المزيد"><span></span></div> <i class="fal fa-arrow-left ms-4"></i> </a>
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
            <img src="{{ asset('assets/web/images/ser-bg-shaps.png') }}" alt="" class="shapes">
        </section>

        <!-- ---------- partners ----------- -->
        <section class="partners partners-lg section-padding">
            <div class="container">
                <div class="title-wrapper text-center col-lg-4 mx-auto mb-30">
                    <div class="fsz-21 text-balance"> {{ $partnersPage->currentDescription->description ?? 'الجودة والإلتزام سر تميزنا' }} </div>
                    <h2 class="fsz-50 fw-bold cr-main"> {{ $partnersPage->currentDescription->title ?? 'الموردين' }} </h2>
                </div>
                <div class="partners-slider">
                    <div class="swiper-wrapper">
                        @forelse($brands as $brand)
                            @php($brandImage = $brand->image_url ?? asset('assets/web/images/partners/9.png'))
                            <div class="swiper-slide">
                                <a href="javascript:void(0);" class="partner">
                                    <img src="{{ $brandImage }}" alt="{{ $partnersPage->currentDescription->title ?? 'الموردين' }}">
                                </a>
                            </div>
                        @empty
                            <div class="swiper-slide">
                                <a href="javascript:void(0);" class="partner">
                                    <img src="{{ asset('assets/web/images/partners/9.png') }}" alt="{{ $partnersPage->currentDescription->title ?? 'الموردين' }}">
                                </a>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </section>

    </main>

@endsection

@section('inject_js')


@endsection
