@extends('frontend.layout')
@section('page_title', 'Home')
@section('styles')
<style>
    .mySlides {
        display: none;
    }

    img {
        vertical-align: middle;
    }

    /* Slideshow container */

    .slideshow-container {
        max-width: 1000px;
        position: relative;
        margin: auto;
    }


    /* The dots/bullets/indicators */

    .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #fff;
        border-radius: 50%;
        display: none;
        transition: background-color 0.6s ease;
    }

    .active {
        background-color: #fff;
    }

    .animated_slider {
        color: #fff;
    }

    .animated_slider:hover {
        color: yellow;
    }
    
    @media only screen and (max-width: 768px) {
    .notice-card {
        padding-left: 0px;
        padding-right: 0px;
        
        }
    }
    
    @media only screen and (max-width: 1080px) {
    .notice-card {
        padding-left: 0px;
        
        }
    }

    /* CSS News Ticker */
    .ticker-wrap {
        width: 100%;
        overflow: hidden;
        background-color: #f5f5f5;
        padding-left: 100%;
        box-sizing: border-box;
    }

    .ticker-move {
        display: inline-block;
        white-space: nowrap;
        padding-right: 100%;
        animation: ticker 30s linear infinite;
    }

    .ticker-wrap:hover .ticker-move {
        animation-play-state: paused;
    }

    .ticker-item {
        display: inline-block;
        padding: 0 2rem;
    }

    @keyframes ticker {
        0% { transform: translate3d(0, 0, 0); }
        100% { transform: translate3d(-100%, 0, 0); }
    }

</style>
@endsection

@section('content')

@include('frontend._partials.counter_section')

<section class="section feat-news">
    <div class="container-fluid" style="background: black; margin-top: -30px; height:95px">
        <div class="container" style="height:93%">
            <div class="row" style="padding: 15px 0px;padding-bottom: 3px;height:100%">
                
                <div class="col-sm-6 col-lg-3 notice-card" style="padding-left:0px;height:100%">
                    <div class="counter" style="padding-top:1px;padding-left:6px;background:#e5e1ee;height:95%;overflow:hidden">
                        <h4 style="text-align:center;color:#2a5999 !important;margin-bottom: 10px;"><span style="border-bottom: 2px solid #000;padding: 2px 0px;">Recent Health News</span></h4>
                        <div class="ticker-wrap">
                            <div class="ticker-move">
                            @forelse ($latest_blogs as $latest_blog)
                                <div class="ticker-item">
                                    <a href="/news/{{ $latest_blog->id }}/{{ $latest_blog->news_title }}" target="_blank">
                                        <p style="line-height: 1.8;margin-bottom: 2px;margin-left: 10px;display:inline;"><i class="fa fa-angle-double-right" aria-hidden="true"></i> {{ Str::limit($latest_blog->news_title, 30) }}</p>
                                    </a>
                                </div>
                            @empty
                                <div class="ticker-item"><p>No Blog Posted Yet!</p></div>
                            @endforelse
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-sm-6 col-lg-3 notice-card" style="height:100%">
                    <div class="counter" style="padding-top:1px;padding-left:6px;background:#e5e1ee;height:95%;overflow:hidden">
                        <h4 style="text-align:center;color:#2a5999 !important;margin-bottom: 10px;"><span style="border-bottom: 2px solid #000;padding: 2px 0px;">Recent Drug News</span></h4>
                        <div class="ticker-wrap">
                            <div class="ticker-move">
                            @forelse ($latest_medicines as $latest_medicine)
                                <div class="ticker-item">
                                    <a href="/products/{{ $latest_medicine->id }}/{{ implode('-', explode(' ',$latest_medicine->name)) }}" target="_blank">
                                        <p style="line-height: 1.8;margin-bottom: 2px;margin-left: 10px;display:inline;"><i class="fa fa-angle-double-right" aria-hidden="true"></i> {{ Str::limit($latest_medicine->name, 30) }}</p>
                                    </a>
                                </div>
                            @empty
                                <div class="ticker-item"><p>No Medicine Posted Yet!</p></div>
                            @endforelse
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-sm-6 col-lg-3 notice-card" style="padding-right:0px;height:100%">
                    <div class="counter" style="padding-top:1px;padding-left:6px;background:#e5e1ee;height:95%;overflow:hidden">
                        <h4 style="text-align:center;color:#2a5999 !important;margin-bottom: 10px;"><span style="border-bottom: 2px solid #000;padding: 2px 0px;">Recent Health Days</span></h4>
                        <div class="ticker-wrap">
                            <div class="ticker-move">
                            @forelse ($latest_health_days as $latest_health_day)
                                <div class="ticker-item">
                                    <a href="/health-days/{{ $latest_health_day->id }}/{{ implode('-', explode(' ',$latest_health_day->title)) }}" target="_blank">
                                        <p style="line-height: 1.8;margin-bottom: 2px;margin-left: 10px;display:inline;"><i class="fa fa-angle-double-right" aria-hidden="true"></i> {{ Str::limit($latest_health_day->title, 30) }}</p>
                                    </a>
                                </div>
                            @empty
                                <div class="ticker-item"><p>No Health Days Posted Yet!</p></div>
                            @endforelse
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-sm-6 col-lg-3 notice-card" style="padding-right:0px;height:100%">
                    <div class="counter" style="padding-top:1px;padding-left:6px;background:#e5e1ee;height:95%;overflow:hidden">
                        <h4 style="text-align:center;color:#2a5999 !important;margin-bottom: 10px;"><span style="border-bottom: 2px solid #000;padding: 2px 0px;">Recent Jobs</span></h4>
                        <div class="ticker-wrap">
                            <div class="ticker-move">
                            @forelse ($latest_jobs as $latest_job)
                                <div class="ticker-item">
                                    <a href="jobs/{{ $latest_job->id }}/{{ implode('-', explode(' ',$latest_job->company_name)) }}" target="_blank">
                                        <p style="line-height: 1.8;margin-bottom: 2px;margin-left: 10px;display:inline;"><i class="fa fa-angle-double-right" aria-hidden="true"></i> {{ Str::limit($latest_job->position, 30) }}</p>
                                    </a>
                                </div>
                            @empty
                                <div class="ticker-item"><p>No Jobs Posted Yet!</p></div>
                            @endforelse
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <!--<marquee style="padding: 8px 0px;" behavior="scroll" direction="left" onmouseover="this.stop();"-->
                <!--    onmouseout="this.start();">-->
                <!--    @foreach ($slide_links as $item)-->
                <!--    <a target="_blank" class="animated_slider" style="margin-right: 20px;" href="{{$item->c_link}}"><i-->
                <!--            class="fa fa-angle-double-right"></i> {{$item->link_text}}</a>-->
                <!--    @endforeach-->
                <!--</marquee>-->
                
                
            </div>
            
        </div>
    </div>
    <div class="container">
        <div class="row">

            <h1 class="col-xs-12 news-top-headingx text-center" style="margin-top:50px; margin-bottom:50px;">Most Updated Online Drug & Device Index in Bangladesh</h1>

            <div class="row">
                @php
                $product_links = ['products/13/povidone-iodine-solution','products/12/hexiscrub-hand-rub-(chlorhexidine-gluconate-[4%])', 'products/11/albumin-(human)', 'products/4/sevoflurane'];
                @endphp
                @foreach ($gif_ads as $index=>$item)
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 margin-bottom-20">

                    <div class="mb-25">
                        <div class="row">
                            <div class="col-xs-12 left-align">
                                <a href="/{{ $product_links[$index] }}">
                                    <img class="campaign-banner" src="{{ asset('common_image/gif_ads') }}/{{$item->image}}"
                                    style="margin-top: 18px; max-height: initial;" alt="{{$item->title}}">
                                </a>
                                
                            </div>
                        </div>
                    </div>

                </div>
                @endforeach


            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        {{-- Featured News & Articles --}}
                        @include('frontend._partials.featured_news_and_articles')
                        {{-- Featured News & Articles --}}

                        {{-- Health & Pharma Jobs --}}
                        @include('frontend._partials.health_and_pharma_jobs')
                        {{-- Health & Pharma Jobs --}}

                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        {{-- International Health Days --}}
                        @include('frontend._partials.international_health_day')
                        {{-- International Health Days --}}

                        {{-- Featured Videos --}}
                        @include('frontend._partials.featured_videos')
                        {{-- Featured Videos --}}

                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="col-xs-12">
                        {{-- Featured Products --}}
                        @include('frontend._partials.featured_products')
                        {{-- Featured Products --}}
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 margin-bottom-30">
                {{-- slider --}}
                {{-- <div class="mb-25 mt-20">
                    <div class="row">
                        <div class="col-xs-12 left-align">
                            <div class="slideshow-container">

                                <div class="mySlides">

                                    <img src="{{ asset('frontend/img/featured/rpl-210600-t1-banner-1-rt-home.png') }}"
                                        style="width:100%">

                                </div>

                                <div class="mySlides">

                                    <img src="{{ asset('frontend/img/featured/rpl-210600-t1-banner-2-rt-home.png') }}"
                                        style="width:100%">

                                </div>


                            </div>
                            <div style="text-align:center">
                                <span class="dot"></span>
                                <span class="dot"></span>
                                <span class="dot"></span>
                            </div>
                        </div>
                    </div>
                </div> --}}

                <div class="row">



                </div>

            </div>



            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 margin-bottom-30">

                {{-- <div class="mb-25">
                    <div class="row">
                        <div class="col-xs-12 left-align">

                            <img class="campaign-banner"
                                src="{{ asset('frontend/img/featured/hpl-210101-banner-2-rt.jpg') }}"
                                style="margin-top: 18px; max-height: initial;">
                        </div>
                    </div>
                </div> --}}

            </div>




            <div class="clearfix visible-sm-block visible-md-block"></div>
        </div>
    </div>
</section>

{{-- modal for youtube video --}}
<div id="video-overlay" style="display: none;">
    <div class="overlay-wrapper">
        <div class="video-container">
            <iframe id="video-frame" src="#" allowfullscreen style="width: 100%; height: 100%; border: none;"></iframe>
            <i class="fa fa-close" id="close-video"
                style="position: absolute; top: 3px; right: 5px; font-size: 47px; cursor: pointer; font-weight: bold; color: lightgray;"
                title="Close Video"></i>
        </div>
    </div>
</div>
{{-- modal for youtube video --}}

@endsection

@section('scripts')
<script>
    /*var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {
            slideIndex = 1
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }*/
    
    var t = {
        videoOverlay: $("#video-overlay"),
        videoFrame: $("#video-frame")
    };
    $(".play-video").on("click", function() {
        var e = $(this).attr("data-url");
        n = "https://www.youtube.com/embed/" + e + "?autoplay=1";
        //n = +e + "?autoplay=1";
        t.videoFrame.attr("src", n), t.videoOverlay.show(), $("body").addClass("no-flow"), $.ajax({
            url: siteUrl + "ajax-request",
            type: "POST",
            data: {
                task: "trackVideoInteraction",
                url: e,
                _token: $('meta[name="l-csrf-token"]').attr("content")
            }
        })
    })
    $("#close-video").on("click", function() {
        $("body").removeClass("no-flow"), t.videoOverlay.hide(), t.videoFrame.attr("src", "")
    })
</script>
@endsection