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

         
        <section class="serv_det section border-bottom">
            <div class="box_head ">
                <div class="container">
                @foreach($services as $service)
                    <div class="row align-items-center">
                    @foreach($service->withDescription($serviceId) as $description)

                        <div class="col-lg-6">
                            <div class="txt_box">
                                <h5 class="title_box mb-4"> {{__('home.our_services')}}    </h5>

    
                                <h1 class="title fw-bold my-4 py-2">
                                <!-- {{__('home.web_design')}}  -->
                                {{ $description->name }} 
                            </h1>
                                <span class="data"> 
                                    
                                {{__('home.our_services_notes')}} 
                                </span>
    
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="img_box">

                                <!-- <img src="{{url('')}}/assets/web/images/service_det.jpg" class="secImg" alt="" /> -->

                                <img src="{{url('')}}/{{ $service->image }}" class="secImg" alt="" />

                           
                            </div>
                        </div>
                    </div>
                 
                </div>
            </div>
            <div class="container mt-5" id="our_services" >
               
               <div class="p">
    <!-- <h1>echo "zanaty22"</h1>
    <p>Service ID: {{ $serviceId }}</p> Display the ID -->

    
    
    <!-- <h1>{{ $service->id }}</h1>
    <h1>{{ $service->image }}</h1> -->
    <div class="container mt-5" id="our_services.{{ $service->id }}" >

    <!-- <h3 class="title fw-bold">  {{ $description->name }} </h3> -->


<h5 class="title fw-bold"> {!! $description->description !!}</h5>
@endforeach
</div>
    @endforeach
    </div>
    </div>

</section>
<section class="services_sec section">
            <div class="container">
                <h5 class="title_box mb-4"> {{__('home.our_services')}}   </h5>
                <h5 class="fs-4 fw-bold mb-5"> {{__('home.our_services_total')}}  </h5>
                <div class="swiper-container services_swiper">
                    <div class="swiper-wrapper pb-5">
                    @foreach($servicesAll as $service)

                        <div class="swiper-slide">
                            <div class="serv_card">
                                <div class="d-flex justify-content-between align-items-center mb-5">
                                @foreach($service->descriptions as $description)

                                    <h5 class="title fw-bold">  {{ $description->name }} </h5>
                                    @endforeach

                                    <div class="icon_box"> <img src="{{url('')}}/{{$service->image ?? " "}}" class="icon" alt="" /> </div>
                                </div>
                                <!-- <a href="#" class="more_butn">  -->
                                <!-- <a href="{{route('services.all')}}#our_services.{{ $service->id }}" class="more_butn">  -->
                                <a href="{{route('services.all')}}/{{ $service->id }}" class="more_butn"> 

                                    <span class="icon"><i class="fa-light fa-arrow-left-long"></i></span> {{__('home.more')}}   
                                </a>
                            </div>
                        </div>
                        
                        @endforeach
                    </div>
                </div>
            </div>
            <!-- Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </section>
    @endsection