@extends('web.layouts.main')
@section('content')        
<!-- Start section -->
<section class="pg_header section">
    <div class="container">
        <h5 class="title_w_vector mx-auto w-fit mt-2"> {{$title}} </h5>
        <div class="p col-lg-5 mx-auto text-white text-center">
            {{$service->description_2 ?? ""}}
        </div>
    </div>
    <div class="bg">
        <img src="{{url('')}}/assets/web/images/catering_bg_1.svg" class="secImg" alt="" />
    </div>
</section>

<!-- Start section -->
<section class="catering_sec section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="txt_box">
                    <h4 class="mb-5 fs-2 color-secondary fw-bold">
                        {!!__('main.whatWeProvide')!!}
                    </h4>
                    <div class="p mb-2">
                        {!!$service->description ?? ""!!}
                    </div>

                </div>

            </div>
            <div class="col-lg-6">
                <div class="serv_det_img_box">
                    <div class="swiper-container serv_det_swiper overflow_hidden mx-0">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="{{($service->image ?? null)?asset($service->image):url('').'/assets/web/images/header-bg-2.jpg'}}" class="secImg" alt="" />
                            </div>
                        </div>
                        <div class="swiper-pagination pb-4"></div>
                    </div>

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

<!-- Start section -->
<section class="services_sec section">
    <div class="container">
        <div class="row justify-content-between align-items-center">
            <div class="col-lg-5">
                <div class="txt_box">
                    <div class="sec_head d-flex mb-4 mt-4">
                        <h5 class="title_w_vector color-primary me-4 mt-2"> {{__('services.head')}}   </h5>
                        <h4 class="label color-secondary fw-bold">
                            {!!__('main.whatWeProvide')!!}
                        </h4>
                    </div>

                    <div thumbsSlider="" class="swiper mySwiper sm-slide-swiper serviceTitle_swiper">
                        <div class="swiper-wrapper pb-3">
                            @foreach($services as $value)
                            <div class="swiper-slide">
                                <div class="item">
                                    <h5 class="title "> {{$value->name ?? ""}}</h5>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-lg-6">
                <div class="swiper_box overflow_hidden">
                    <div class="swiper mySwiper2 lg-slide-swiper serviceData_swiper">
                        <div class="swiper-wrapper">
                            @foreach($services as $value)
                            <div class="swiper-slide">
                                <div class="box">
                                    <div class="img_box">
                                        <img src="{{$value->image?asset($value->image):url('').'/assets/web/images/services-1.png'}}" class="secImg" alt="">
                                        <div class="txt_content">
                                            <div class="title mb-5">
                                                {!! stripText($value->description, 200) !!}
                                            </div>
                                            <a href="{{route('showService',$value->id)}}" class="butn white_butn color-secondary mx-auto"> {{__('main.explore')}}  <i class="fa-solid fa-arrow-left me-0 ms-2"></i> </a>
                                        </div>
                                    </div>
                                    <div class="circle_box">
                                        <div class="content">
                                            <div class="icon_box">
                                                <img src="{{$value->icon?asset($value->icon):url('').'/assets/web/images/services-1.svg'}}" class="icon" alt="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <img src="{{url('')}}/assets/web/images/pattern_hands2.svg" class="hands" alt="">
</section>
@endsection