@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($banner as $banners)
        <div class="carousel-item {{ $i==0 ? 'active': '' }}"
          style="background:url({{isset($banners->image)?asset('storage/banners/'.$banners->image):asset('/images/no-image.png')}})">
          <img src="{{isset($banners->image)?asset('storage/banners/'.$banners->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">
              {!!$banners->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($offers[1]))
  <section class="section_common even_list_sec" style="background:url('../clientside/img/offers_promotions_bg.jpg') no-repeat">
    <div class="container-fluid h-100"> 
      <div class="row offer_row h-100 align-content-center">
        @foreach($offers as $offer)
          <div class="{{$width[$offer->width_id]}} wow fadeInLeft">
            <div class="offer_box">
              <img src="{{isset($offer->image)?asset('storage/offers/'.$offer->image):asset('/images/no-image.png')}}" alt="" class="w-100">
            </div>         
          </div>
        @endforeach
      </div>
    </div>
  </section>
@endif
@endsection