@extends('layouts.web_master')

@section('header-content')
  <div class="header-blog" style="background-image: url('{{asset($banner->gallery_banner)}}'); background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;">
        <!-- ====== 3.1 hero section ====== -->
        <section class="hero">
            <div class="container">
                <div class="row justify-content-center mt-5">
                    <div class="col-lg-11 col-md-12 text-center" data-aos="fade">
                        <div>
                            <h2>Gallery</h2>
                            <div class="d-flex justify-content-center gap-4 pt-4">
                                <nav aria-label="breadcrumb">
                                    <div class="breadcrumb d-flex gap-4 align-items-center">
                                        <div class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></div>
                                        <i class="fa-solid fa-angles-right"></i>
                                        <div class="breadcrumb-item" aria-current="page">Gallery</div>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- ====== End 3.1 hero section ====== -->
@endsection
<style>
    .overlay {
        height: 347px !important;
    }
</style>
@section('main-content')

    <!-- ====== 1.6 tours section ====== -->
    <section id="tour" style="padding: 50px 0px">
        <div class="container">
            <div data-aos="fade" data-aos-duration="2000">
                <h4>Photo Gallery</h4>
            </div>
            <div class="tourCards card-text mt-1 mb-3">
                <div class="row">
                    @forelse ($picture as $key=>$item)
                    <div class="col-md-2 col-sm-3 col-6" data-aos="fade-up" data-aos-delay="{{ 100 + ($key * 100)}}">
                        <div class="mb-2">
                            <figure><img style="height:100px" src="{{asset($item->image)}}" alt="tour-img"></figure>
                        </div>
                        <div style="text-align: center">{{ $item->title }}</div>
                    </div>
                    @empty
                    <div class="col-lg-12">
                        <div class="text-center">
                            NO DATA FOUND
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>
            <div data-aos="fade" data-aos-duration="2000">
                <h4>Video Gallery</h4>
            </div>
            <div class="tourCards card-text mt-1 mb-3">
                <div class="row">
                    @forelse ($video as $key=>$item)
                    <div class="col-md-3 col-sm-4 col-6" data-aos="fade-up" data-aos-delay="{{ 100 + ($key * 100)}}">
                        <div class="mb-2">
                            <style>
                                iframe{
                                    width: 100%;
                                    height: 200px;
                                }
                            </style>
                 <iframe width="560" height="315" src="{{ $item->video }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                    </div>
                    @empty
                    <div class="col-lg-12">
                        <div class="text-center">
                            NO DATA FOUND
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    <!-- ====== End 1.6 tours section ====== -->

@endsection