@extends('website.layout.app')


@section('content')
  <!-- --------- MAIN ~ STARTS--------- -->
  <main>
    <section class="sub-banner">
        <h2 data-aos="fade-up">Our Services</h2>
        <p class="mb-0" data-aos="fade-up">We are committed to supporting your business success through a wide range of professional services. Experience seamless office operations by exploring our services</p>
    </section>

    @php
        $i = 0;
    @endphp

    
 @foreach($service as $key => $services)
  @php
            $i++;
        @endphp
  @if ($i % 2 == 0 )
    <section class=" bg-light py-lg-5" id="{{ $services->slug }}">
      <div class="services-list-container container position-relative" data-aos="fade-down">
        <div class="row">
          <div class="col-12 col-md-12 col-lg-6 col-xl-7 order-2 order-lg-1">
            
            <h3 class="sub-heading">{{json_decode($services->attributes)->service_name}} </h3>
            <p> 	{!! $services->service_content !!}</p>
             <ul class="service-sublist">
    @foreach(json_decode($services->attributes)->service_features as $service)
        <li>{!! htmlspecialchars_decode(html_entity_decode($service)) !!}</li>
    @endforeach
</ul>
          </div>
          <div class="col-12 col-md-12 col-lg-6 col-xl-5 pb-5 pb-lg-0 align-items-center d-flex justify-content-center order-1 order-lg-2">
            <div class="bg-over-sty right"></div>
            <img src="{{ asset($services->service_image)}}" class="img-fluid suport-img">
          </div>
        </div>
      </div>
    </section>
   @else


    <section class=" bg-blue-custom py-lg-5" id="{{ $services->slug }}">
      <div class="services-list-container container position-relative" data-aos="fade-down">
        <div class="row">
          <div class="col-12 col-md-12 col-lg-6 col-xl-5 pb-5 pb-lg-0 align-items-center d-flex justify-content-center">
            <div class="bg-over-sty"></div>
            <img src="{{ asset($services->service_image)}}" class="img-fluid suport-img">
          </div>
          <div class="col-12 col-md-12 col-lg-6 col-xl-7">
            <h3 class="sub-heading">{{json_decode($services->attributes)->service_name}}</h3>
            <p>	{!! $services->service_content !!} </p>
             <ul class="service-sublist">
    @foreach(json_decode($services->attributes)->service_features as $service)
        <li>{!! htmlspecialchars_decode(html_entity_decode($service)) !!}</li>
    @endforeach
</ul>
          </div>
        </div>
      </div>
    </section>
  @endif
  @endforeach

    
  </main>
  <!-- --------- MAIN ~ ENDS--------- -->
   @endsection