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

    <main>

        <!-- ---------- innerheader ----------- -->
        <section class="inner-header pt-100">
            <div class="container">
                <div class="cont text-center col-lg-5 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="{{ route('web.services') }}"> {{ __('web.services') }} </a>
                        <span class="mx-3"> / </span>
                        <a href="#"> {{ __('web.service_details') }} </a>
                    </div>
                    <h1 class="fsz-40 mt-10 cr-sub"> {{ $service->currentDescription->title ?? __('web.services') }} </h1>
                </div>
            </div>
            <img src="{{ asset('assets/web/images/hero-top-shap.png') }}" alt="" class="shap">
        </section>

        <!-- ---------- service detail ----------- -->
        <section class="service-det section-padding">
            <div class="container">
                <div class="main-img th-400 radius-20 overflow-hidden">
                    <img src="{{ $service->image_url ?? asset('assets/web/images/port1.jpg') }}" alt="" class="img-cover">
                </div>
                <div class="info col-lg-10">
                    <h5 class="fsz-30 fw-bold cr-main mb-20 mt-30"> {{ __('web.what_we_provide') }} : </h5>
                    <div class="main-txt fsz-20 cr-sub fw-bold">
                        {!! $service->currentDescription->description !!}
                    </div>


                    <div class="btns mt-5">
                        <a href="{{ route('web.contact') }}" class="butn rounded-pill hvr-txt-trans hvr-scale bg-sub text-white ms-2 col-lg-4">
                            <div class="txt" data-text="{{ __('web.order_service_now') }}"><span> {{ __('web.order_service_now') }} </span></div>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        @if(count($services) > 0)
        <!-- ---------- other services ----------- -->
        <section class="services-services section-padding border-top border-2">
            <div class="container">
                <div class="title-wrapper mb-30">
                    <div class="fsz-21 text-balance"> {{ __('web.quality_excellence') }} </div>
                    <h2 class="fsz-50 fw-bold cr-sub"> {{ __('web.other_services') }} </h2>
                </div>
                <div class="row">
                    @foreach($services as $otherService)
                        <div class="col-lg-4">
                            <div class="service-item">
                                <div class="icon-80 mb-30">
                                    <img src="{{ $otherService->image_url ?? asset('assets/web/images/icons/air-conditioner.svg') }}" alt="">
                                </div>
                                <div class="info">
                                    <h3 class="service-title"> {{ $otherService->currentDescription->title ?? __('web.services') }} </h3>
                                    @if($otherService->currentDescription->description)
                                        <div class="service-description mb-3">
                                            {!! $otherService->currentDescription->description !!}
                                        </div>
                                    @endif

                                    <a href="{{ route('web.services.show', $otherService->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>
                    @endforeach
                </div>
            </div>
            <img src="{{ asset('assets/web/images/ser-bg-shaps.png') }}" alt="" class="shapes">
        </section>
        @endif

    </main>

@endsection

@section('inject_js')


@endsection
