@extends('clientside.layouts.app')
@section('content')
<section class="section_common inner_banner">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      @php $i = 0; @endphp
      @foreach($banners as $banner)
        <div class="carousel-item {{ $i==0 ? 'active': '' }}"
            style="background:url({{isset($banner->image)?asset('storage/banners/'.$banner->image):asset('/images/no-image.png')}})">
            <img src="{{isset($banner->image)?asset('storage/banners/'.$banner->image):asset('/images/no-image.png')}}" alt="" class="w-100 banner_inner_image">
            <div class="carousel-caption d-none d-flex justify-content-center align-items-center">
                <div class=" wow fadeInUp">
                    {!!$banner->description!!}
                </div>
            </div>
        </div>
      @php $i++; @endphp
      @endforeach
    </div>
    @if($i !=1)
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <img src="{{ asset('clientside/img/arr_left.png') }}" alt="">
      </a> 
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <img src="{{ asset('clientside/img/arr_right.png') }}" alt="">
      </a>
    @endif
  </div>
  <a href="#" class="scroll_more next-section"> <img alt="" src="{{ asset('clientside/img/circle_white.png') }}" class="circle"> <img alt="" src="{{ asset('clientside/img/arrow_white.png') }}" class="arrow"> </a> 
</section>
@if(isset($gym_text) && isset($gym_sliders))
  @php $gym_services = explode(",",$gym_text->sub_text); @endphp
  <section class="section_common story_sec_about" style="background:url({{asset('clientside/img/spa_bg.jpg')}})  no-repeat">
    <div class="container-fluid">
      <div class="row align-items-center align-items-center h-100">
        <div class="col-xl-6 col-md-6 pr-5 wow fadeInLeft">
          <div class="owl-carousel spa_carousel1 white_border">
            @foreach($gym_sliders as $slider)
                <div class="item"><img src="{{isset($slider->image)?asset('storage/banners/'.$slider->image):asset('/images/no-image.png')}}" alt="image" class="w-100 "></div>
            @endforeach
          </div>
        </div>
        <div class="col-xl-6 col-md-6  wow fadeInRight">
          <h2 class="subpage_title text-uppercase ">{{ $gym_text->title }}</h2>
          <p>{!! $gym_text->description !!}</p>
          <h4>{!! $gym_text->sub_title !!}</h4>
          <ul class="d-flex flex-wrap custom_list2">
            @foreach($gym_services as $gym_service)
              <li><img src="{{asset('clientside/img/list_icon_white.png')}}" alt="">@php echo($gym_service) @endphp</li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
  </section>
@endif 
@if(isset($spa_text) && isset($spa_sliders))
  @php $spa_services = explode(",",$spa_text->sub_text); @endphp
  <section class="section_common story_sec_about" style="background:url({{asset('clientside/img/spa_bg2.jpg')}}) no-repeat">
    <div class="container-fluid">
      <div class="row align-items-center align-items-center h-100 flex-row-reverse">
        <div class="col-xl-6 col-md-6 pr-5 wow fadeInRight">
          <div class="owl-carousel spa_carousel2 white_border">
            @foreach($spa_sliders as $slider)
              <div class="item"><img src="{{isset($slider->image)?asset('storage/banners/'.$slider->image):asset('/images/no-image.png')}}" alt="image" class="w-100 "></div>
            @endforeach
          </div>
        </div>
        <div class="col-xl-6 col-md-6  wow fadeInLeft">
          <h2 class="subpage_title text-uppercase ">{!!$spa_text->title!!}</h2>
          <p>{!!$spa_text->description!!}</p>
          <h4>{!!$spa_text->sub_title!!}</h4>
          <ul class="d-flex flex-wrap custom_list2">
            @foreach($spa_services as $spa_service)
              <li><img src="{{asset('clientside/img/list_icon_white.png')}}" alt="">@php echo($spa_service) @endphp</li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
  </section>
@endif 
@endsection