@extends('layouts.app')

@section('title', '首页')

@section('content')
    <!-- banner -->
    @if (getAdvertsByCate(23)->isNotEmpty())
        <div class="swiper-container" id="swiperBanner">
            <div class="swiper-wrapper">
                @foreach (getAdvertsByCate(23) as $advert)
                    <div class="swiper-slide">
                        <a class="swiper-banner-img" style="background-image: url({{ $advert->cover_path }});" href="">
                            <h3>{{ $advert->title }}</h3>
                        </a>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
    @endif
    <!-- end banner -->

    <!-- mian -->
    <div class="container">
        <!-- 院所新闻 -->
        <div class="news">
            <div class="news-item news-hot">
                <img class="news-hot-cover" src="{{ getOneAdvertByCate(20,'cover_path') }}">
                <div class="news-hot-text">
                    <h3 class="nowrap">
                        <a href="{{ getOneAdvertByCate(20,'url') }}">{{ getOneAdvertByCate(20,'title') }}</a></h3>
                </div>
            </div>
            <div class="news-item news-ul">
                <div class="mian-title news-title">
                    <b>{{ getOneCategory(7,'title') }}</b>
                    <span>/&nbsp;&nbsp;{{ getOneCategory(7,'description') }}</span>
                    <a class="mian-title-more" href="{{ getOneCategory(7,'link') }}">更多<i class="fa fa-angle-right"></i></a>
                </div>
                <ul>
                    @if (getArticlesBYCate(7,8)->isNotEmpty())
                        @foreach (getArticlesBYCate(7,8) as $article)
                            <li class="news-ul-li">
                                <a class="nowrap" href="{{ $article->link }}">
                                    <span class="news-time">{{ $article->created_at->format('m-d') }}</span>{{ $article->title }}
                                </a>
                            </li>
                        @endforeach
                    @endif
                </ul>
            </div>
        </div>
        <!-- 科研动态 -->
        <div class="dynamic">
            <div class="mian-title">
                <b>{{ getOneCategory(8,'title') }}</b>
                <span>/&nbsp; {{ getOneCategory(8,'description') }}</span>
                <a class="mian-title-more" href="{{ getOneCategory(8,'link') }}">更多<i class="fa fa-angle-right"></i></a>
            </div>
            <ul class="dynamic-ul">
                @if (getArticlesBYCate(8,3)->isNotEmpty())
                    @foreach (getArticlesBYCate(8,3) as $article)
                        <li class="dynamic-ul-item">
                            <span class="dynamic-ul-cover" style="background-image: url({{ $article->cover_path }});"></span>
                            <div class="dynamic-ul-text">
                                <h3 class="nowrap"><a href="{{ $article->link }}">{{ $article->title }}</a></h3>
                                <p class="nowrap-multi">{{ $article->description }}</p>
                            </div>
                        </li>
                    @endforeach
                @endif

            </ul>
        </div>
        <!-- 广告条 -->
        <div class="index-ad">
            <a href="{{ getOneAdvertByCate(21,'url') }}">
                <img src="{{ getOneAdvertByCate(21,'cover_path') }}">
            </a>
        </div>

        <!-- 党团生活, 精神文明 -->
        <div class="news">
            <div class="news-item party">
                <div class="tabs-title" id="information">
                    <span class="tabs-item show">{{ getOneCategory(10,'title') }}</span>
                    <span class="tabs-item">{{ getOneCategory(9,'title') }}</span>
                </div>
                <div class="tabs-content-wrapper" id="informationContent">
                    <!-- 国内资讯 -->
                    <ul class="party-ul tabs-content active">
                        @if (getArticlesBYCate(10,3)->isNotEmpty())
                            @foreach (getArticlesBYCate(10,3) as $article)
                                <li class="party-ul-li">
                                    <a href="{{ $article->link }}">
									<span class="party-time">
										<h3>{{ $article->created_at->format('d') }}</h3>
										<p>{{ $article->created_at->format('Y-m') }}</p>
									</span>
                                        <h3 class="party-title nowrap">{{ $article->title }}</h3>
                                        <p class="party-info nowrap-multi">{{ $article->description }}</p>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>

                    <ul class="party-ul tabs-content">
                        @if (getArticlesBYCate(9,12)->isNotEmpty())
                            @foreach (getArticlesBYCate(9,12) as $article)
                                <li class="party-ul-li">
                                    <a href="{{ $article->link }}">
									<span class="party-time">
										<h3>{{ $article->created_at->format('d') }}</h3>
										<p>{{ $article->created_at->format('Y-m') }}</p>
									</span>
                                        <h3 class="party-title nowrap">{{ $article->title }}</h3>
                                        <p class="party-info nowrap-multi">{{ $article->description }}</p>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
            <div class="news-item spirit">
                <div class="mian-title">
                    <b>{{ getOneCategory(12,'title') }}</b>
                    <span>/&nbsp;&nbsp;{{ getOneCategory(12,'description') }}</span>
                    <a class="mian-title-more" href="{{ getOneCategory(12,'link') }}">更多<i class="fa fa-angle-right"></i></a>
                </div>
                <ul class="spiritual-ul">
                    @if (getArticlesBYCate(12,3)->isNotEmpty())
                        @foreach (getArticlesBYCate(12,3) as $article)
                            <li class="spiritual-ul-li">
                                <a href="{{ $article->link }}">
                                    <h3 class="spiritual-title nowrap">{{ $article->title }}</h3>
                                    <p class="spiritual-info nowrap-multi">
                                        {{ $article->description }}
                                    </p>
                                </a>
                            </li>
                        @endforeach
                    @endif
                </ul>
            </div>
        </div>
        <!-- 广告条 -->
        <div class="index-ad">
            <a href="{{ getOneAdvertByCate(22,'url') }}">
                <img src="{{ getOneAdvertByCate(22,'cover_path') }}">
            </a>
        </div>
        <!-- 新闻列表 -->
        <div class="news">
            <!-- tabs -->
            <div class="news-item party">
                <div class="tabs-title" id="newsTab">
                    <span class="tabs-item show">{{ getOneCategory(13,'title') }}</span>
                    <span class="tabs-item">{{ getOneCategory(15,'title') }}</span>
                    <span class="tabs-item">{{ getOneCategory(14,'title') }}</span>
                    <span class="tabs-item">{{ getOneCategory(17,'title') }}</span>
                    <span class="tabs-item">{{ getOneCategory(16,'title') }}</span>
                    {{--                    <a class="mian-title-more" href="">更多<i class="fa fa-angle-right"></i></a>--}}
                </div>
                <div class="tabs-content-wrapper" id="newsTabContent">
                    <!-- 创新团队 -->
                    <ul class="party-ul tabs-content active">
                        @if (getArticlesBYCate(13,4)->isNotEmpty())
                            @foreach (getArticlesBYCate(13,4) as $article)
                                <li class="party-ul-li">
                                    <a href="{{ $article->link }}">
									<span class="party-time">
										<h3>{{ $article->created_at->format('d') }}</h3>
										<p>{{ $article->created_at->format('Y-m') }}</p>
									</span>
                                        <h3 class="party-title nowrap">{{ $article->title }}</h3>
                                        <p class="party-info nowrap-multi">{{ $article->description }}</p>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                    <!-- 梯队人才 -->
                    <ul class="party-ul tabs-content">
                        @if (getArticlesBYCate(13,4)->isNotEmpty())
                            @foreach (getArticlesBYCate(13,4) as $article)
                                <li class="party-ul-li">
                                    <a href="{{ $article->link }}">
									<span class="party-time party-cover" style="background-image:url({{ $article->cover_path }})">
									</span>
                                        <h3 class="party-title nowrap">{{ $article->title }}</h3>
                                        <p class="party-info nowrap-multi">{{ $article->description }}</p>
                                    </a>
                                </li>
                            @endforeach
                        @endif

                    </ul>
                    <!-- 专家智库 -->
                    <ul class="party-ul tabs-content">
                        @if (getArticlesBYCate(14,4)->isNotEmpty())
                            @foreach (getArticlesBYCate(14,4) as $article)
                                <li class="party-ul-li">
                                    <a href="{{ $article->link }}">
									<span class="party-time party-cover" style="background-image:url({{ $article->cover_path }})">
									</span>
                                        <h3 class="party-title nowrap">{{ $article->title }}</h3>
                                        <p class="party-info nowrap-multi">{{ $article->description }}</p>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                    <!-- 项目推广 -->
                    <ul class="party-ul tabs-content">
                        @if (getArticlesBYCate(17,4)->isNotEmpty())
                            @foreach (getArticlesBYCate(17,4) as $article)
                                <li class="party-ul-li">
                                    <a href="{{ $article->link }}">
									<span class="party-time">
										<h3>{{ $article->created_at->format('d') }}</h3>
										<p>{{ $article->created_at->format('Y-m') }}</p>
									</span>
                                        <h3 class="party-title nowrap">{{ $article->title }}</h3>
                                        <p class="party-info nowrap-multi">{{ $article->description }}</p>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                    <!-- 成果专利 -->
                    <ul class="party-ul tabs-content">
                        @if (getArticlesBYCate(16,4)->isNotEmpty())
                            @foreach (getArticlesBYCate(16,4) as $article)
                                <li class="party-ul-li">
                                    <a href="{{ $article->link }}">
									<span class="party-time">
										<h3>{{ $article->created_at->format('d') }}</h3>
										<p>{{ $article->created_at->format('Y-m') }}</p>
									</span>
                                        <h3 class="party-title nowrap">{{ $article->title }}</h3>
                                        <p class="party-info nowrap-multi">{{ $article->description }}</p>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
            <!-- 项目推广 -->
            <div class="news-item spirit">
                <div class="mian-title">
                    <b>{{ getOneCategory(18,'title') }}</b>
                    <span>/&nbsp;&nbsp;{{ getOneCategory(18,'description') }}</span>
                    <a class="mian-title-more" href="{{ getOneCategory(18,'link') }}">更多<i class="fa fa-angle-right"></i></a>
                </div>
                <ul class="spiritual-ul">
                    @if (getArticlesBYCate(18,4)->isNotEmpty())
                        @foreach (getArticlesBYCate(18,4) as $article)
                            <li class="spiritual-ul-li">
                                <a href="{{ $article->link }}">
                                    <h3 class="spiritual-title nowrap">{{ $article->title }}</h3>
                                    <p class="spiritual-info nowrap-multi">{{ $article->description }}</p>
                                </a>
                            </li>
                        @endforeach
                    @endif
                </ul>
            </div>
        </div>
    </div>
    <!-- end mian -->
@endsection

@push('script')
    <script type="text/javascript">
        // swiperBanner
        var swiperBanner = new Swiper("#swiperBanner", {
            autoplay: 5000,
            loop: true,
            slidesPerView: 'auto',
            pagination: ".swiper-pagination",
            paginationClickable: true,
            autoplayDisableOnInteraction: false
        })

        // 新闻列表
        $(function () {
            $('#newsTab .tabs-item').hover(function () {
                $(this).addClass("show").siblings().removeClass("show")
                $("#newsTabContent .tabs-content").eq($(this).index()).addClass("active").siblings().removeClass("active")
            })
        });

        // 国内国际资讯
        $(function () {
            $('#information .tabs-item').hover(function () {
                $(this).addClass("show").siblings().removeClass("show")
                $("#informationContent .tabs-content").eq($(this).index()).addClass("active").siblings().removeClass("active")
            })
        });
    </script>
@endpush