@extends('layouts/main-layout')


@section('meta_title')
Gallery | KM NU Hospitals
@endsection



@section('meta_description')
Capture the moments that define KM NU Hospitals. Explore our gallery for a glimpse into a world of health, compassion, and excellence in medical care.
@endsection



@section('meta_keywords')
@endsection


@section('canonical')
https://www.nuhospitals.com/
@endsection



@section('custom-css')
<style>
.equal-widht-box {
    align-items: stretch;
}

.equal-widht-box .img-box-bg {
    padding: 0;
}

.equal-widht-box .img-box-bg img {
    width: 100%;
}

.equal-widht-box .content-box-bg {
    background: #fea087;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 105px;
    padding-right: 105px;
}

.equal-widht-box .content-box-bg h2 {
    font-weight: 800;
    font-size: 32px;
}

.equal-widht-box .content-box-bg p {
    font-size: 22px;
}

.top-border-tabs li a {
    min-width: 200px;
    padding: .5rem 1rem;
    border: 1px solid #545454;
    color: #545454;
    display: block;
    margin-right: 15px;
    position: relative;
    text-decoration: none;
    text-align: center;
}

.top-border-tabs li a.active {
    background: #eef8f9;
    border: 1px solid #d8d9db;
}

.top-border-tabs li a.active::before {
    content: "";
    width: 100%;
    height: 5px;
    background: #48adef;
    border-top: transparent;
    position: absolute;
    left: 0;
    top: 0;
}

.gallery-box-wrapper {
    padding: 10px;
    border: 1px solid #808080;
}

.gallery-box {
    position: relative;
}

.gallery-box .img {
    height: 300px;
    overflow: hidden;
    display: flex;
}

.gallery-box .img img {
    width: 100%;
}

.gallery-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(180deg, #054d7bc2, #007fd2d9, #48adefeb);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0); */
    opacity: 0;
    -webkit-transition: .3s ease;
    transition: .5s ease;
}

.gallery-box:hover .gallery-content {
    /* -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1); */
    opacity: 1;
}

.gallery-content h4 {
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
}

.gallery-content i {
    background: #fff;
    padding: 8px 9px;
    color: #48adef;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
}

.text-banner {
    min-height: unset;
}

#myModal {
    background-color: #0b0b0bf2;
    overflow-y: scroll;
}

.lightbox {
    /*position: absolute;
		top:0;
		left:0;
		width:100%;*/
    float: left;
    width: 100%;
    padding: 20px;
}

.lightbox-header {
    float: left;
    width: 100%;
    padding: 15px;
}

.lightbox-header h1 {
    float: left;
    color: #fff;
}

.lightbox-header a {
    float: right;
    font-size: 23px;
    color: #fff;
}

.lightbox-gallery {
    float: left;
    width: 100%;
}

.lightbox h3 {
    font-size: 17px;
    margin-bottom: 30px;
    color: #343a40;
    text-align: justify;
}

.lightbox-img {
    float: left;
    width: 100%;
}

.owl-carousel .owl-item img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: 400px;
}

@media screen and (max-width: 600px) {
    .owl-carousel .owl-item img {
    display: block;
    margin: 0 auto;
    width: auto;
   height: auto;
}
}
.modal-title {
    float: left;
    width: 90%;
    color: #fff;
    font-weight: 600;
}

.close {
    float: right;
    color: #fff;
    font-size: 30px;
}

.owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    top: 35%;
    left: 0;
    color: #fff;
    background-color: #0b0b0bf2;
    font-size: 20px;
}

.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 35%;
    right: 0;
    color: #fff;
    background-color: #0b0b0bf2;
    font-size: 20px;
}

.owl-carousel .owl-nav button.owl-prev span,
.owl-carousel .owl-nav button.owl-next span {
    padding: 15px;
    font-size: 30px;
    font-weight: bold;
}

.owl-prev span,
.owl-next span {
    color: #fff;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: #0b0f12;
    color: #FFF;
    text-decoration: none;
}

.owl-theme .owl-dots .owl-dot,
.owl-theme .owl-dots .owl-dot.active {
    display: inline-block !important;
    zoom: 1;
}
</style>
@endsection



@section('content')
<section class="facilities">

    <!-- Banner section start-->
    <div class="jumbotron text-left banner-bg mt-3"
        style="background-image: url(/assets/images/gallery-banner-new.jpg)!important;background-size: cover;background-position: center;min-height: 560px;">
        <div class="row v-center reverse">
            <div class="col-md-6 col-sm-12 p-5 white text-banner">
                <!-- <h1>Gallery</h1> -->
                <!-- <h2>SPACE WHERE THE EXPERTS ARE</h2> -->
                <!-- <a href="" class="btn btn-white">Book an Appointment</a><a href="" class="btn btn-white ml-2">Book a Video consultation</a> -->
            </div>
        </div>
    </div>

    <!-- <div class="container">
        <div class="row py-5">
            <div class="col-lg-13 col-md-12">
                <h1 class="text-center text-uppercase mb-4">Gallery</h1>
            </div>
        </div>
    </div> -->

    <div class="container">
        <h1 class="text-center">Gallery</h1>
        <div class="row justify-content-center my-5">

            <div class="col-md-9">
                <div class="row">
                    <div class="col-md-12">
                        <ul class="top-border-tabs nav nav-pills justify-content-center">
                            <li>
                                <a class="active" href="#hospital-event" data-toggle="tab">Hospital Event</a>
                            </li>
                            <li>
                                <a href="#public-event" data-toggle="tab">Public Event</a>
                            </li>
                            <!-- <li>
                                <a href="#PCS" data-toggle="tab">Lorem Ipsum</a>
                            </li> -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="justify-content-center row tab-content pb-6">
            <div class="col-md-12">
                <div class="row">
                    <div class="tab-pane col-md-12 active" id="hospital-event">
                        <div class="col-md-12">
                            <div class="row" id="hospital-event-images">

                            </div>
                        </div>
                    </div>
                    <div class="tab-pane col-md-12" id="public-event">
                        <div class="col-md-12">
                            <div class="row" id="public-event-images">


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

<section>
    <div class="container">
        <div class="row dynamic-gallery">

        </div>
    </div>


    <div id="myModal" class="modal">
        <div class="modal-header" style="border:none;">
            <h4 class="modal-title">Gallery</h4>
            <a href="javascript:void(0);" class="close cursor" onclick="closeModal()">&times;</a>
        </div>
        <div class="modal-content">
            <div class="lightbox">
                <h3 class="lightbox-description"></h3>
                <div class="lightbox-gallery">
                </div>
            </div>
        </div>
    </div>



</section>
@endsection



@section('custom-js')
<script src="{{asset('assets/js/gallery-list.js?ver=1.0')}}"></script>
<script>
function ShowGalleryImages(GalleryList, galleryGroup = false, viewID) {
    var gallery_view_box_list = "";
    var gallery_view_box = '<div class="col-md-4 mt-3">' +
        '    <div class="gallery-box-wrapper">' +
        '        <div class="gallery-box">' +
        '            <div class="img">' +
        '                <img src="ImgSrc" alt="" />' +
        '            </div>' +
        '            <div class="gallery-content">' +
        '                <div>' +
        '                    <i dataId="title-ID" class="fa fa-search-plus gallery-view"></i>' +
        '                    <i class="fa fa-home"></i>' +
        '                </div>' +
        '                <div>' +
        '                    <h4 class="gallery-view" dataId="title-ID">galleryTitle</h4>' +
        '                </div>' +
        '            </div>' +
        '        </div>' +
        '    </div>' +
        '</div>';

    $.each(GalleryList, function(index, value) {

        if (value.group == galleryGroup) {
            var ImageLink = "/assets/images/gallery/" + value.gallery_images[0];

            gallery_view_box_list += gallery_view_box.replace(/ImgSrc/, ImageLink)
                .replace(/galleryDescription/, value.description)
                .replace(/galleryTitle/, value.title)
                .replace(/ID/g, value.id);
        }


    });

    $("#" + viewID).html(gallery_view_box_list);
}

ShowGalleryImages(galleryList, "Hospital Event", "hospital-event-images");
ShowGalleryImages(galleryList, "Public Event", "public-event-images");

$(".gallery-view").click(function() {
    var ID = $(this).attr("dataId");
    ID = ID.replace(/title-/, "");
    var gallery_filtered_data = galleryList.filter(function(el) {
        return (el.id == ID);
    });
    var galleryData = gallery_filtered_data[0];
    imgGallery = "<div class='owl-carousel owl-theme'>";
    for (j = 0; j < galleryData.gallery_images.length; j++) {
        var ImageLink = "/assets/images/gallery/" + galleryData.gallery_images[j];
        imgGallery = imgGallery + "<div class='item'>" +
            "<div class='lightbox-img'>" +
            "<img src='" + ImageLink + "' class='img-fluid'>" +
            "</div>" +
            "</div>";
    }
    imgGallery = imgGallery + "</div>";
    $(".lightbox-description").html(galleryData.title);
    $(".lightbox-gallery").html(imgGallery);

    $('.owl-carousel').owlCarousel({
        items: 1,
        lazyLoad: true,
        loop: true,
        margin: 10,
        nav: true
    });
    document.getElementById('myModal').style.display = "block";
});

function closeModal() {
    document.getElementById('myModal').style.display = "none";
}
</script>
@endsection