@extends('souqwaqif.layouts.app')
@section('content')
    <section class="slider_section innerslider_section">
        <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-indicators">
                @php $i = 0; @endphp
                @foreach($banners as $banner)
                  <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{$i}}" {!! $i==0 ? 'class="active"  aria-current="true"': '' !!}  aria-label="Slide {{$i+1}}"></button>
                  @php $i++; @endphp
                @endforeach
            </div>
            <div class="carousel-inner">
                @php $i = 0; @endphp
                @foreach($banners as $banner)
                    <div class="carousel-item  slide {{ $i==0 ? 'active': '' }}" data-bs-interval="10000">
                        <img src="{{isset($banner->image)?asset('storage/banners/'.$banner->image):asset('/images/no-image.png')}}" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-md-block">
                            <div>
                                {{-- <h1>{{trans('headings.aboutus-list')}} </h1> --}}
                                {!! $banner->description !!}
                            </div>
                        </div>
                    </div>
                  @php $i++; @endphp
                @endforeach
              </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span
                    class="visually-hidden">Previous</span> </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span
                    class="visually-hidden">Next</span> </button>
        </div>
    </section>
    <section class="offerspage-section section-padding">
        <div class="container">
            <div class="row">
                <!--  <div class="col-lg-12 text-center">
              
              <h5 class="text-white">Offers will update soon</h5>
              </div>-->

            </div>
            <div class="row gy-4 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                @foreach($offers as $offer)
                    <div class="col-lg-4 col-sm-6 col-md-6">
                        <div class="offer_block"> <a href="{{ asset('storage/offers/'.$offer->image) }}"
                                data-fancybox="images" data-caption=""> <img class="w-100 img_curved"
                                    src="{{ asset('storage/offers/'.$offer->image) }}" /> </a> </div>
                    </div>
                @endforeach
                {{-- <div class="col-lg-4 col-sm-6 col-md-6">
                    <div class="offer_block"> <a href="{{ asset('souqwaqif/images/offers/offer2.jpg') }}"
                            data-fancybox="images" data-caption=""> <img class="w-100 img_curved"
                                src="{{ asset('souqwaqif/images/offers/offer2.jpg') }}" /> </a> <span class="offer_view">
                            <a href="">View Menu</a> </span> </div>
                </div> --}}
                
            </div>
        </div>
    </section>
@endsection