@extends('layouts/main-layout')


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



@section('meta_description')
KM NU Hospitals has been awarded multiple times with many glorious awards in the healthcare industry. Explore our awards and experience unparalleled 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"
        style="background-image: url(/assets/images/awards-banner.jpg)!important;background-size: cover;background-position: center;min-height:520px;">
        <div class="row v-center reverse">
            <div class="col-md-6 col-sm-12 p-5 white text-banner">
                <!-- <h1>Awards</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">Awards</h1>
                <p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
            </div>
        </div>
    </div> -->

    <div class="container">
        <div class="row justify-content-center my-5">
            <div class="col-md-9">
                <h1 class="text-center mb-4">Awards</h1>
                <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 Awards</a>
                            </li>
                            <li>
                                <a href="#individual-event" data-toggle="tab">Individual Awards</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="individual-event">
                        <div class="col-md-12">
                            <div class="row" id="individual-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/awards-list.js?ver=1.1')}}"></script>
<script>
var awardsList = galleryList.sort(function(a, b) {
    return (b.id - a.id);
});
function groupByKey(array, key) {
   return array
     .reduce((hash, obj) => {
       if(obj[key] === undefined) return hash; 
       return Object.assign(hash, { [obj[key]]:( hash[obj[key]] || [] ).concat(obj)})
     }, {})
}
function ShowGalleryImages(GalleryList, galleryGroup = false, viewID) {
    var gallery_view_box_list;
    
    GalleryList = groupByKey(GalleryList,"year");
    var GalleryListSorted = Object.keys(GalleryList).sort(function(a,b){return b-a});
    // GalleryList = GalleryList.sort(function(a,b){ 
    //     return b - a;
    // });
    $.each(GalleryListSorted, function(gindex, gvalue) {
        gallery_view_box_list = "";
        var galleryHeading = "";
        
        if(GalleryList[gvalue].length>0){

            var GalleryListImgaesSorted = GalleryList[gvalue].sort(function(a,b){return b.id-a.id});
            
            $.each(GalleryListImgaesSorted, function(index, value) {

                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>';

                if (value.awards_group === galleryGroup && value.gallery_images.length > 0) {
                    var ImageLink = "/assets/images/awards/" + 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);

                    galleryHeading = '<div class="col-md-12 mt-4">'+
                                '<h2>YearVal</h2>'+
                            '</div>';
                    galleryHeading = galleryHeading.replace(/YearVal/, gvalue);
                }


            });
            gallery_view_box_list = galleryHeading + gallery_view_box_list;
            $("#" + viewID).append(gallery_view_box_list);
        }
    });
}

ShowGalleryImages(awardsList, "Hospital", "hospital-event-images");
ShowGalleryImages(awardsList, "Individual", "individual-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/awards/" + 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