@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/event/'.$banner->image):asset('/images/no-image.png')}})">
                    <img src="{{isset($banner->image)?asset('storage/event/'.$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>
<section class=" pt-0 pb-0">
    <div class="container-fluid pl-0 pr-0">
        <div class="row ml-0 mr-0 ">
            <div class="col-sm-6 pl-0 pr-0 wow fadeInLeft">
                <img src="{{isset($event->image)?asset('storage/events/'.$event->image):asset('/images/no-image.png')}}" alt="" class="fit-image w-100">
            </div>
            <div class="col-sm-6 pl-0 pr-0">
                <div class="wedding-rightBox wedding-rightBox_custom w-100 d-flex flex-wrap align-items-center"
                    style="background:url('{{ asset('clientside/img/wedding_right.jpg') }}') no-repeat">
                    <div class=" wow fadeInRight">
                        <h2 class="section_title2 mb-2">{{$event->title}}</h2>
                        <p>{{$event->description}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="section_common wedding_gallery"
    style="background:url('{{ asset('clientside/img/wedding_gal_bg.jpg') }}') no-repeat">
    <div class="container-fluid">
        <div class="row h-100 align-items-center">
            <div class="col-md-3 wow fadeInLeft">
                <h3 class="section_title2 mb-0">{{$event->title}} <br>{{trans('headings.gallery')}}</h3>
                <p>{{trans('headings.view-gallery-paragraph-first')}} {{$event->title}} {{trans('headings.view-gallery-paragraph-last')}}.</p>
                <div class="customNavigation">
                    <a class="btn prev"><img src="{{ asset('clientside/img/arr_left.png') }}" alt=""></a>
                    <a class="btn next"><img src="{{ asset('clientside/img/arr_right.png') }}" alt=""></a>
                </div>
            </div>
            <div class="col-md-9 wow fadeInRight">
                <div class="owl-carousel wedGallery_carousel" id="wedGallery_carousel">
                    @foreach($event_gallery as $images)
                    <div class="item">
                        <img src="{{isset($images->image)?asset('storage/event/'.$images->image):asset('/images/no-image.png')}}" alt="" class="w-100">
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

@endsection