@extends('front.layout.app')
@section('title', 'Adventures')
@section('content')
    @if(!empty($page->pageComponents))
        @forelse($page->pageComponents as $key => $section)
            @if($key == 0)
                <div class="innerBanner">
                    @if(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'image')
                        <img src="{{asset($section->pageComponentMedia[0]->file_name) ?? asset('front/images/famBnnr.jpg')}}" class="w-100">
                    @elseif(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'video')
                        <video>
                            <source src="{{asset($section->pageComponentMedia[0]->file_name)}}" type="video/*">
                            Your browser does not support the video tag.
                        </video>
                    @endif

                    <h2>{{$section->title ?? 'Adventures'}}</h2>
                </div>
            @endif
            @if($key == 1)
                <section class="familySec">
                    <div class="container">
                        <div class="row">
                            @if(!empty($section->pageComponentMedia) && $section->pageComponentMedia != null)
                                @foreach($section->pageComponentMedia as $mKey => $media)
                                    @if($mKey == 0)
                                        <div class="col-sm-8">
                                            @if(!empty($media) && $media->file_type == 'image')
                                                <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam01.jpg')}}" class="galleryImg">
                                                    <img src="{{asset($media->file_name) ?? asset('front/images/fam01.jpg')}}" class="img-fluid w-100" alt="Gallery image">
                                                </a>
                                            @elseif(!empty($media) && $media->file_type == 'video')
                                                <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam01.jpg')}}" class="galleryImg">
                                                    <video>
                                                        <source src="{{asset($media->file_name)}}" type="video/*">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                </a>
                                            @endif
                                        </div>
                                    @endif
                                    @if($mKey == 1 || $mKey == 2)
                                        @if($mKey == 1)
                                        <div class="col-sm-4">
                                            <div class="row">
                                        @endif
                                                <div class="col-md-12 @if($mKey == 2) mt-4 @endif">
                                                    @if(!empty($media) && $media->file_type == 'image')
                                                        <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam02.jpg')}}" class="galleryImg">
                                                            <img src="{{asset($media->file_name) ?? asset('front/images/fam01.jpg')}}" class="img-fluid w-100" alt="Gallery image">
                                                        </a>
                                                    @elseif(!empty($media) && $media->file_type == 'video')
                                                        <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam02.jpg')}}" class="galleryImg">
                                                            <video>
                                                                <source src="{{asset($media->file_name)}}" type="video/*">
                                                                Your browser does not support the video tag.
                                                            </video>
                                                        </a>
                                                    @endif
                                                </div>
                                        @if($mKey == 2)
                                            </div>
                                        </div>
                                        @endif
                                    @endif
                                    @if($mKey == 3 || $mKey == 4 || $mKey == 5)
                                        <div class="col-sm-4 my-4">
                                            @if(!empty($media) && $media->file_type == 'image')
                                                <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam03.jpg')}}" class="galleryImg">
                                                    <img src="{{asset($media->file_name) ?? asset('front/images/fam01.jpg')}}" class="img-fluid w-100" alt="Gallery image">
                                                </a>
                                            @elseif(!empty($media) && $media->file_type == 'video')
                                                <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam03.jpg')}}" class="galleryImg">
                                                    <video>
                                                        <source src="{{asset($media->file_name)}}" type="video/*">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                </a>
                                            @endif
                                        </div>
                                    @endif

                                    @if($mKey == 6 || $mKey == 7)
                                        @if($mKey == 6)
                                            <div class="col-sm-4">
                                                <div class="row">
                                                    @endif
                                                    <div class="col-md-12 @if($mKey == 7) mt-4 @endif">
                                                        @if(!empty($media) && $media->file_type == 'image')
                                                            <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam02.jpg')}}" class="galleryImg">
                                                                <img src="{{asset($media->file_name) ?? asset('front/images/fam01.jpg')}}" class="img-fluid w-100" alt="Gallery image">
                                                            </a>
                                                        @elseif(!empty($media) && $media->file_type == 'video')
                                                            <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam02.jpg')}}" class="galleryImg">
                                                                <video>
                                                                    <source src="{{asset($media->file_name)}}" type="video/*">
                                                                    Your browser does not support the video tag.
                                                                </video>
                                                            </a>
                                                        @endif
                                                    </div>
                                                    @if($mKey == 7)
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                    @if($mKey == 8)
                                        <div class="col-sm-8">
                                            @if(!empty($media) && $media->file_type == 'image')
                                                <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam09.jpg')}}" class="galleryImg">
                                                    <img src="{{asset($media->file_name) ?? asset('front/images/fam01.jpg')}}" class="img-fluid w-100" alt="Gallery image">
                                                </a>
                                            @elseif(!empty($media) && $media->file_type == 'video')
                                                <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam09.jpg')}}" class="galleryImg">
                                                    <video>
                                                        <source src="{{asset($media->file_name)}}" type="video/*">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                </a>
                                            @endif
                                        </div>
                                    @endif
                                    @if($mKey == 9)
                                        <div class="col-md-12 my-4">
                                            @if(!empty($media) && $media->file_type == 'image')
                                                <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam09.jpg')}}" class="galleryImg">
                                                    <img src="{{asset($media->file_name) ?? asset('front/images/fam01.jpg')}}" class="img-fluid w-100" alt="Gallery image">
                                                </a>
                                            @elseif(!empty($media) && $media->file_type == 'video')
                                                <a data-fancybox="gallery" href="{{asset($media->file_name) ?? asset('front/images/fam09.jpg')}}" class="galleryImg">
                                                    <video>
                                                        <source src="{{asset($media->file_name)}}" type="video/*">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                </a>
                                            @endif
                                        </div>
                                    @endif
                                @endforeach
                            @endif

                        </div>
                    </div>
                </section>
            @endif
        @empty
            <div class="innerBanner">
                <img src="{{asset('front')}}/images/famBnnr.jpg" alt="First slide" class="w-100">
                <h2>Adventures</h2>
            </div>
        @endforelse
    @endif




@endsection