@extends('souqwaqif.layouts.app')
@section('content')
    <section class="slider_section innerslider_section">
        <div id="carouselExampleCaptions" class="carousel slide " data-bs-ride="carousel">
            <div class="carousel-inner">
                @php $i = 0; @endphp
                @foreach($banner as $banners)
                    <div class="carousel-item  slide {{ $i==0 ? 'active': '' }}" data-bs-interval="10000">
                        <img src="{{isset($banners->image)?asset('storage/banners/'.$banners->image):asset('/images/no-image.png')}}" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-md-block">
                            <div>
                                <h1>{{trans('headings.contact_us')}} </h1>
                                {!! isset($banners->description)? $banners->description : 'We are here to help you'!!}
                            </div>
                        </div>
                    </div>
                @php $i++; @endphp
                @endforeach
            </div>
        </div>
    </section>
    <section class="contactuspage-section section-padding">
        <div class="container">
            
            <div class="row maparea wow fadeInUp" data-wow-duration="1s" data-wow-delay=".2s">
                <div class="col-lg-12 d-flex justify-content-between align-items-center locationmap_top">
                    <h3>{{trans('headings.find_us_on')}}</h3>
                    <div class="viewusmap"><i class="bi bi-pin-map"></i> {{trans('headings.view_us_on_map')}} - <a href="{{$settings->map_link}}" 
                            target="_blank">{{$settings->map_link}}</a></div>
                </div>
                <div class="col-lg-12 locationmap">
                    <iframe
                        src="{{$settings->embedded_map_link}}"
                        width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </section>
@endsection