@extends('layouts.app_new') 
@section('title') Home 
@endsection 
@section('content')
<style type="text/css">
    .kt-header__topbar.topbar_header {
    position: absolute;
    top: 149px;
    z-index: 9;
    right: 64px;
}   
    .topbar_header .kt-header__topbar-item.kt-header__topbar-item--user, .topbar_header .kt-header__topbar-item.dropdown {
    background-color: white !important;
    border-radius: 8px !important;
    margin-left: 6px !important;
}

span.kt-header__topbar-username.kt-hidden-mobile.user-n {
    padding-right: 0 !important;
}
@media (max-width: 900px)
{
    .kt-widget5 {
    padding: 0;
    padding-right: 0;
    padding-left: 12px;
}
    .col-md-4 .kt-portlet

            {
                min-height: auto !important;
                height: auto  !important;
            }
    .kt-header__topbar {
    background-color: transparent !important;
        top: 60px !important;
    }}
    .col-md-4 .kt-portlet {
    min-height: 300px;
}
</style>
<!-- Start Main Banner -->
        <section class="banner-wrapper">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-12">
                        <div class="wrapper-content">
                            <h1>Critical Care Knowledge Hub</h1>
                            {{-- <p>{{$Setting->home_header_subtitle}}</p>
                            <form action="{{url('publications-search')}}" id="formId">
                                <input type="text" class="input-search" name="q" placeholder="Search">
                                <select class="form-control" id="type">
                                    <option value="publications-search">Publications</option>
                                    <option value="courses-search">Courses</option>
                                    <option value="rss-search">News Feed</option>
                                    <option value="multimedia-search">Multimedia</option>
                                    <option value="experts">Experts</option>
                                    <option value="institutions">Institutions</option>
                                </select>
                                <button type="submit">Search</button>
                            </form> --}} 
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-12">
                        <div class="banner-courses-category">
                            <ul>
                                <li>
                                    <a href="{{url('publications-search')}}">
                                        <i class='bx bx-paper-plane'></i>
                                        Publications
                                    </a>
                                </li>

                                <li>
                                    <a href="{{url('courses')}}">
                                        <i class='bx bx-pin'></i>
                                        Courses
                                    </a>
                                </li>
                                <li>
                                    <a href="{{url('rss-search')}}">
                                        <i class='bx bx-rss'></i>
                                        News Feed
                                    </a>
                                </li>
                               <li>
                                    <a href="{{url('multimedia-listing')}}">
                                        <i class='bx bx-video'></i>
                                        Multimedia
                                    </a>
                                </li>
                                
                                <li>
                                    <a href="{{url('experts')}}">
                                        <i class='bx bx-user-pin'></i>
                                        Experts
                                    </a>
                                </li>

                                <li>
                                    <a href="{{url('institutions')}}">
                                        <i class='bx bx-building-house'></i>
                                        Institutions
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Main Banner -->

           <!-- Start Funfacts And Feedback Area -->
        <section class="funfacts-and-feedback-area" style="padding-top: 40px;">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-12 text-center">
                        <div class="feedback-slides-content">
                            <h2 style="color: #008ccd;">{{$Setting->home_header_subtitle}}</h2>
                            <br>
                        </div>
                    </div>
                    
                    <div class="col-lg-6 col-md-12">
                        <div class="feedback-slides-content">
                            <h3>{{$Setting->home_video_title}}</h3>
                            <p>{{$Setting->home_video_description}}</p>

                        </div>
                        <br>
                         <div class="faq-video">
                            <img src="https://cckhub.online/assets3/img/video.png" alt="image">

                            <a href="{{$Setting->home_video_iframe}}" class="video-btn popup-youtube"><i class='bx bx-play'></i></a>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-12">
                        <div class="funfacts-list">
                            <div class="row">

                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <div class="single-funfacts-box">
                                        <h3><span class="odometer" data-count="{{$CourseCount}}">00</span></h3>
                                        <p>No. of courses</p>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <div class="single-funfacts-box">
                                        <h3><span class="odometer" data-count="{{$CourseMaterialCount}}">00</span></h3>
                                        <p>No. of External Courses </p>
                                    </div>
                                </div>
                                


                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <div class="single-funfacts-box">
                                        <h3><span class="odometer" data-count="{{$articlesCount}}">00</span></h3>
                                        <p>No. of publications</p>
                                    </div>
                                </div>


                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <div class="single-funfacts-box">
                                        <h3><span class="odometer" data-count="{{$UsersCount}}">00</span></h3>
                                        <p>Learners enrolled</p>
                                    </div>
                                </div>

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

        </section>
        <!-- End Funfacts And Feedback Area -->

        <!-- Start Courses Area -->
        <section class="courses-area pt-100 pb-70 bg-F5F5F5">
            <div class="container">
                <div class="section-title text-left">
                    <span class="sub-title">Discover Courses</span>
                    <h2>Recommended Courses</h2>
                    <a href="{{url('courses')}}" class="default-btn"><i class='bx bx-show-alt icon-arrow before'></i><span class="label">View More</span><i class="bx bx-show-alt icon-arrow after"></i></a>
                </div>

                <div class="row">
                    @foreach($courses as $course)
                        @include("user.courses.partials.courses.CourseCard",["course"=>$course,'col_md'=>4])
                    @endforeach
                </div>
            </div>
        </section>
        <!-- End Courses Area -->
                

        <!-- Start Blog Area -->
        <section class="blog-area ptb-100 limit-line ">
            <div class="container">
                <div class="section-title text-left">
                    <span class="sub-title">Discover Publications</span>
                    <h2>Latest Publications</h2>
                    <a href="{{url('publications-search')}}" class="default-btn"><i class='bx bx-show-alt icon-arrow before'></i><span class="label">View More</span><i class="bx bx-show-alt icon-arrow after"></i></a>
                </div>
                <div class="col-md-12">
                    @include('user.ExternalMaterials.components.card-view',["articles" =>$articles,'col_md'=>4])

                </div>
            </div>
        </section>
        <!-- End Blog Area -->
@endsection
@section('script')
<script type="text/javascript">
    $("#type").on("change",function(){
        typeValue = $(this).val();
        $('#formId').attr('action', "{{url('')}}/"+typeValue);

    })
    var addToFav = function (id) {

            $.ajax({
                method: "POST",
                url: "addToFav",
                data: {id: id, _token: '{{csrf_token()}}'}
            })
                .done(function (msg) {
                    if (msg.delete == "no")
                        $(".fav-" + msg.id).html(`{!!$isFavorite!!}`);
                    else {
                        $(".fav-" + msg.id).html(`{!!$addTofav!!}`);
                    }
                });
        }
</script>
@endsection