@extends('frontend_eng.layouts.app')
@section('title', 'Gallery')
@section('meta', 'Welcome to Om Hospital and Research Center PVt. Ltd.')
@section('content')
    <!-- BREADCRUMB
                   ============================================= -->
    <div id="breadcrumb" class="division">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class=" breadcrumb-holder">
                        <h4 class="h4-sm text-white">Our Gallery</h4>
                        <!-- Breadcrumb Nav -->
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('homepage') }}" class="text-white">Home</a>
                                </li>
                                <li class="breadcrumb-item active text-white" aria-current="page">Gallery</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Title -->
                </div>
            </div>
        </div> <!-- End row -->
    </div> <!-- End container -->
    <div class="slider-overlay"></div>

    <!-- Start Our Gallery -->
    <section class=" gallery-style-2">
        <div class="container">
        <!-- GALLERY FILTERING BUTTONS -->

            <!-- GALLERY IMAGES HOLDER -->
            <div class="row">
                <div class="col-md-12 gallery-items-list">
                    <div class="masonry-wrap grid-loaded">
                        <!-- IMAGE #1 -->
                        @foreach ($albums as $album)
                        <div class="col-md-6 col-lg-3 gallery-item">
                            <div class="hover-overlay">

                                <!-- Gallery Image -->
                                <img class="" src="{{ asset('uploads/album') }}/{{ $album->cover_image }}"
                                    alt="gallery-image" height="250" /></a>

                                <div class="item-overlay"></div>

                                <!-- Image Zoom -->
                                <div class="image-zoom">
                                    <a href="{{ route('album.image', $album->slug) }}" target="_blank"
                                        style="font-size:15px;"><i class="fas fa-link"></i>View Photos</a>

                                </div>

                            </div>
                        </div>
                        @endforeach

                    </div>
                </div>
            </div> <!-- END GALLERY IMAGES HOLDER -->
        </div>
    </section>
    <!-- End Our Gallery -->



@endsection