@extends('layouts/main-layout')


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



@section('meta_description')
Stay updated on the latest news at KM NU Hospitals. Discover healthcare innovations, events, and medical breakthroughs on our news page.
@endsection



@section('meta_keywords')
@endsection


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



@section('custom-css')
<style type="text/css">
.btn-noborder {
    padding: .35rem 1rem;
    border: none;
    margin: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
    color: #0062a9;
}

.search-form {
    margin-top: -2rem;
    background-color: #0062a9;
}

.search-form .form-control {
    background-color: #0062a9;
    color: #fff !important;
    margin: 1rem 0rem;
    border: none;
    width: auto;
}

.f-icon {
    margin-top: 1.3rem;
}

.navigation {
    background: none;
}

.bg-fea087-news {
    background-color: #fea087;
}

.mt--5 {
    margin-top: -5rem;
}

.mt-8 {
    margin-top: 8rem;
}

.white-bg {
    border: 1px solid #fff;
    background-color: #fff;
    padding-bottom: 15px;
}

/* .news-page .text-banner {
    min-height: 28.7rem;
} */

.text-box {
    position: absolute;
    top: 35%;
    line-height: 1;
    font-size: 3rem;
    color: #fff;
    text-align: center;
    font-weight: 600;
    right: 46%;
}

.btn-box {
    border-bottom: 1px solid #fff;
    background-color: #fff;
    text-align: center;
}

/* event page styles */
.event-card img {
    width: 100%;
}

.event-card {
    border-top: 2px solid #ccc;
}

.event-card:last-child {
    border-bottom: 2px solid #ccc;
    margin-bottom: 3rem;
}

.btn-outline-primary {
    border: 1px solid #ccc;
    padding: 5px 20px;
    color: #000;
    margin-right: 5px;
}

.all-news .card {
    height: 100%;
    align-items: end;
    cursor: pointer;

}

.all-news .card-body {
    border-top: 1px solid #eee;
    width: 100%;
}

.news-img {
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.news-popup .modal-dialog {
    max-width: 80%;
}

.news-popup .modal-content #modalImg {
    display: block;
    margin: auto;
    width: 100%;
}
</style>
@endsection



@section('content')
<section class="news-page">
    <!-- Banner section start-->
    <div class="jumbotron text-left banner-bg"
        style="background-image: url(/assets/images/kmnu-in-news-banner.jpg)!important;background-size: cover;background-position: center;min-height:400px;">
        <div class="row v-center reverse">
            <div class="col-md-6 col-sm-12 p-5 white text-banner">
                <h1>NEWS</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>
    <!--content section-->
    <div class="container-fluid search-form" style="margin-top: -2rem;">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="row justify-content-center">
                    <div class="col-md-3">
                        <div class="row justify-content-center">
                            <div class="col-md-1">
                                <img src="{{asset('assets/images/news/Hospital-icon.png')}}" class="f-icon">
                            </div>
                            <div class="col-md-10">
                                <select id="hospital-location" class="form-control">
                                    <option value="">Select Hospital</option>
                                    <option value="Ambur">Ambur</option>
                                    <!-- <option value="Rajajinagar">Rajajinagar</option> -->
                                    <!-- <option value="Shivamogga">Shivamogga</option> -->
                                    <!-- <option value="Bangalore">Bangalore</option> -->
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="col-md-3">
                            <div class="row justify-content-center">
                                <div class="col-md-1">
                                    <img src="{{asset('assets/images/news/Month.png')}}" class="f-icon">
                                </div>
                                <div class="col-md-10">
                                    <select class="form-control">
                                        <option>Select Month</option>
                                    </select>
                                </div>
                            </div>
                        </div> -->
                    <div class="col-md-3">
                        <div class="row justify-content-center">
                            <div class="col-md-1">
                                <img src="{{asset('assets/images/news/Year.png')}}" class="f-icon">
                            </div>
                            <div class="col-md-10">
                                <select id="year" class="form-control">
                                    <option value="">Select Year</option>
                                    <option value="2020">2020</option>
                                    <option value="2019">2019</option>
                                    <option value="2017">2017</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="col-md-2">
                            <div class="row justify-content-center">
                                <div class="col-md-10" style="border-bottom: 1px solid #fff;background-color: #fff;">
                                    <button class="btn btn-noborder" id="apply-btn">Apply</button>
                                </div>
                            </div>
                        </div> -->
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row justify-content-center mt-5">
            <div class="col-md-10 text-center mt-3 white-bg">
                <!-- <h2>NU in News</h2> -->
                <!-- <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 class="row all-news" id="newsList">

                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid bg-fea087-news mt--5">
        <div class="row justify-content-center">
            <nav aria-label="navigation" class="navigation mt-8 mb-5">
                <!-- <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                      <a class="page-link" href="#" tabindex="-1">Previous</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                      <a class="page-link" href="#">Next</a>
                    </li>
                  </ul> -->
            </nav>
        </div>
        <div class="row justify-content-center">
            <!-- <div class="col-md-8">
                    <h4 class="text-center white">Lorem Ipsum is simply dummy</h4>
                    <h2 class="text-center white mb-5">Lorem Ipsum is simply dummy</h2>
                </div> -->
        </div>
    </div>
</section>

<section class="container-fluid">

</section>
<!-- Modal -->
<div class="modal fade news-popup" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!-- <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <p id="newsText" class="text-center"></p>
                    </div>
                    <div class="col-md-12 mt-3">
                        <div class="zoom" id='ex1'>
                            <img id="modalImg" src="" alt="">
                        </div>
                    </div>

                </div>
            </div>
            <!-- <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div> -->
        </div>
    </div>
</div>
@endsection



@section('custom-js')
<script src="{{asset('assets/js/jquery.zoom.min.js')}}"></script>
<script src="{{asset('assets/js/news-list.js?ver=1.0')}}"></script>
<script>
var newsfiltered_data = "";

function ShowNewsList(NewsList) {

    var news_view_box_list = "";
    var news_view_box = '<div class="col-md-6 mt-5">' +
        '    <div class="card w-100">' +
        '        <!-- Image -->' +
        '      <div class="news-img"><img class="card-img-top w-top" src="/assets/images/news/ImgSrc" alt="" /></div>  ' +
        '        <!-- Text Content -->' +
        '        <div class="card-body text-left">' +
        '            <h4>NewsTitle</h4>' +
        '            <p class="card-text">newsDescription</p>' +
        '        </div>' +
        '    </div>' +
        '</div>';

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



        news_view_box_list += news_view_box.replace(/ImgSrc/, value.img_src)
            .replace(/newsDescription/, value.description)
            .replace(/NewsTitle/, value.title);

    });

    $("#newsList").html(news_view_box_list);

}

ShowNewsList(NewsList);

$(".card").on("click", function() {
    var img_src = $(this).find("img").attr("src");
    var news_text = $(this).find(".card-text").text();
    //console.log(img_src);
    $("#modalImg").attr("src", img_src);
    $("#newsText").text(news_text);
    $
    $("#exampleModal").modal();
    // $('#ex1').zoom();
});

// $("#apply-btn").click(function(){
//     var hospital_location = $("#hospital-location").val();
//     var newsyear = $("#year").val();
//     var newsfiltered_data = NewsList.filter(function (el) {

//             if(hospital_location!="" && newsyear != ""){
//                 return (el.year == newsyear && el.location == hospital_location);
//             }else if(hospital_location!="" && newsyear == ""){
//                 return (el.location == hospital_location);
//             }else if(hospital_location=="" && newsyear != ""){
//                 return (el.year == newsyear);
//             }

//         });
//     ShowNewsList(newsfiltered_data);
// });

function filterNews() {
    var hospital_location = $("#hospital-location").val();
    var newsyear = $("#year").val();
    var newsfiltered_data = NewsList.filter(function(el) {

        if (hospital_location != "" && newsyear != "") {
            return (el.year == newsyear && el.location == hospital_location);
        } else if (hospital_location != "" && newsyear == "") {
            return (el.location == hospital_location);
        } else if (hospital_location == "" && newsyear != "") {
            return (el.year == newsyear);
        }

    });
    ShowNewsList(newsfiltered_data);

    $('html, body').animate({
        scrollTop: $("#newsList").offset().top - 360
    }, 2000);
}

$("#hospital-location").on("change", function() {
    // var hospital_location = this.val();
    filterNews();
});

$("#year").on("change", function() {
    // var newsyear = this.val();
    filterNews();
});
</script>
@endsection