@extends('layouts/main-layout')

@section('meta_title')
Nephrology and Urology Hospital in Bangalore | Kidney Transplant in India
Biomedical Waste Statistics Rajajinagar - NU Hospitals
@endsection

@section('meta_description')
NU is one of the best kidney hospitals in Bangalore, Our team is also ace at managing renal
 transplantation, kidney stones surgery, chronic or acute kidney failure.
 Find the information about NU Hospitals Biomedical Waste Statistics
Rajajinagar here.
@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;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: 260px; */
        overflow: hidden;
    }
    .news-popup .modal-dialog{
        max-width: 80%;
    }
    .news-popup .modal-content #modalImg{
        display:block;
        margin:auto;
        width:100%;
    }

    .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;
    }
    
    </style>
@endsection



@section('content')
<section class="news-page">
        
        <div class="container-fluid">
            <div class="row justify-content-center mt-5">
                <div class="col-md-10 text-center mt-3 white-bg">
                    <h2>Biomedical Waste Statistics</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 mt-5">
                        <div class="col-md-12">
                            <ul class="top-border-tabs nav nav-pills justify-content-center">
                                <li>
                                    <a class="active" href="#Rajajinagar" data-toggle="tab">Rajajinagar</a>
                                </li>
                                <li>
                                    <a href="#Padmanabhanagar" data-toggle="tab">Padmanabhanagar</a>
                                </li>
                                <!-- <li>
                                    <a href="#PCS" data-toggle="tab">Lorem Ipsum</a>
                                </li> -->
                            </ul>
                        </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="Rajajinagar">
                                        <div class="col-md-12">
                                            <div class="row justify-content-center" id="Rajajinagar-images">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane col-md-12" id="Padmanabhanagar">
                                        <div class="col-md-12">
                                            <div class="row justify-content-center" id="Padmanabhanagar-images">

                                                
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="row all-news justify-content-center" 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/bmw-list.js?ver=1.0')}}"></script>
<script>
    var newsfiltered_data = "";
    
function ShowNewsList(BMWList, BMWGroup=false, viewID){

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

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

        if(value.location == BMWGroup){
            news_view_box_list += news_view_box.replace(/ImgSrc/,value.img_src)
                                // .replace(/newsDescription/,value.description)
                                .replace(/NewsTitle/,value.year+":");
        }
                                
    });

    //$("#newsList").html(news_view_box_list);
    $("#"+viewID).html(news_view_box_list);

}

//ShowNewsList(BMWList);
ShowNewsList(BMWList, "Rajajinagar", "Rajajinagar-images");
ShowNewsList(BMWList, "Padmanabhanagar", "Padmanabhanagar-images");

$(".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