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

         
        <section class="serv_det section border-bottom">
            <div class="box_head ">
                <div class="container">
                    <div class="row align-items-center">
                        <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')}}                                 </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="" />
                            </div>
                        </div>
                    </div>
                 
                </div>
            </div>
            <div class="container mt-5" id="our_services" >
               
            <div class="p">
              @foreach($services as $service)

            @foreach($service->descriptions as $description2)
            <div class="container mt-5" id="our_services.{{ $service->id }}" >

            <!-- {{$description2->service_id}} -->

                <!-- @if($description2->service_id == $service->id ) -->

                    <!-- <h5 class="title fw-bold">{{ $service->id }}</h5> -->
                    <h5 class="title fw-bold">{{ $description2->name }}</h5>
                    {!! $description2->description !!}
                   
                <!-- @endif -->
            @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($services 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"> 

                                    <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