@extends('layouts.app')

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

@section('content')
    @if (getAdvertsByCate(23)->isNotEmpty())
        <!-- 轮播图 -->
        <div class="indexImg">
            <div class="container">
                <div class="swiper-container indexBig">
                    <div class="swiper-wrapper">
                        @foreach (getAdvertsByCate(23) as $advert)
                            <div class="swiper-slide">
                                <div class="ce-img indexImg-img">
                                    <span style="background-image: url({{ $advert->cover_path }});"></span>
                                    <div class="ce-nowrap indexImg-title">
                                        {{ $advert->title }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination indexImg-pagination"></div>
                </div>
            </div>
        </div>
    @endif

    <!-- 分院新闻 -->
    <div class="indexNews">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-5">
                    <div class="swiper-container indexNews-banner">
                        <div class="swiper-wrapper">
                            @if (getArticlesByPosition(1)->isNotEmpty())
                                @foreach (getArticlesByPosition(1) as $article)
                                    <div class="swiper-slide">
                                        <div class="ce-img indexImg-img">
                                            <span style="background-image: url({{ $article->cover_path }});"></span>
                                            <div class="ce-nowrap indexImg-title">
                                                {{ $article->title }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination indexNews-pagination"></div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-7">
                    <div class="indexNews-title">
                        <div class="indexNews-title-name">
                            <img src="assets/index/images/titleIcon_00.png"/>
                            <p>分院新闻</p>
                            <span>News Information</span>
                        </div>
                        <div class="indexNews-title-more">
                            <a href="{{ getOneCategory(2,'link') }}">更多 &gt;</a>
                        </div>
                    </div>
                    <ul class="indexNews-ul">
                        @if (getArticlesByCateIds(6)->isNotEmpty())
                            @foreach (getArticlesByCateIds(6) as $article)
                                <li>
                                    <a href="{{ $article->link }}" title="{{ $article->title }}">
                                        <div class="ce-nowrap indexNews-ul-name">
                                            {{ $article->title }}
                                        </div>
                                        <span>{{ $article->created_at->format('m-d') }}</span>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 党政建设 -->
    <div class="indexBuild">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-8">
                    <ul class="indexBuild-list">
                        @if (getArticlesBYCate(24,4)->isNotEmpty())
                            @foreach (getArticlesBYCate(24,4) as $article)
                                <li>
                                    <a href="{{ $article->link }}" title="{{ $article->title }}">
                                        <div class="indexBuild-icon">
                                            <img src="/assets/index/images/Build_icon0{{ $loop->index }}.png">
                                        </div>
                                        {{ $article->title }}
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
                <div class="col-xs-12 col-md-4">
                    {{--梯队人才--}}
                    <div class="indexBuild-show">
                        <div class="indexBuild-talent">
                            <div class="indexBuild-talent-title">
                                <span>{{ getOneCategory(28,'title') }}</span>
                                <a href="{{ getOneCategory(28,'link') }}">MORE</a>
                            </div>
                            <div class="swiper-cont">
                                <div class="swiper-container indexBuild-swiper">
                                    <div class="swiper-wrapper">
                                        @if (getArticlesBYCate(28,30)->isNotEmpty())
                                            @foreach (getArticlesBYCate(28,30) as $article)
                                                @if($loop->odd)
                                                    <div class="swiper-slide">
                                                        {{ $article->title }}
                                                        <span>{{ $article->description }}</span>
                                                    </div>
                                                @endif
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-cont">
                                <div class="swiper-container indexBuildNew-swiper">
                                    <div class="swiper-wrapper">
                                        @if (getArticlesBYCate(28,30)->isNotEmpty())
                                            @foreach (getArticlesBYCate(28,30) as $article)
                                                @if($loop->even)
                                                    <div class="swiper-slide">
                                                        {{ $article->title }}
                                                        <span>{{ $article->description }}</span>
                                                    </div>
                                                @endif
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if (getArticlesBYCate(24,5,'all',false,'asc')->isNotEmpty())
                        @foreach (getArticlesBYCate(24,5) as $article)
                            @if($loop->index==4)
                                <a href="{{ $article->link }}" class="indexBuild-new" title="{{ $article->title }}">
                                    <div class="indexBuild-icon">
                                        <img src="/assets/index/images/Build_icon05.png">
                                    </div>
                                {{ $article->title }}
                                <!-- <img src="{{ $article->cover_path }}"> -->
                                </a>
                            @endif
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- 科研动态 -->
    <div class="indexflow">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-9">
                    <ul id="myTabs" class="indexflow-tab" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#home" id="home-tab" role="tab" data-toggle="tab">
                                <div class="indexflow-title-name">
                                    <img src="assets/index/images/titleIcon_01.png"/>
                                    <p>{{ getOneCategory(8,'title') }}</p>
                                </div>
                            </a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#profile" id="profile-tab" role="tab" data-toggle="tab">
                                <div class="indexflow-title-name">
                                    <img src="assets/index/images/titleIcon_02.png"/>
                                    <p>{{ getOneCategory(5,'title') }}</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content indexflow-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="home">
                            <ul class="indexNews-ul indexflow-ul">
                                @if (getArticlesBYCate(8,6)->isNotEmpty())
                                    @foreach (getArticlesBYCate(8,6) as $article)
                                        <li>
                                            <a href="{{ $article->link }}" title="{{ $article->title }}">
                                                <div class="ce-nowrap indexNews-ul-name">
                                                    {{ $article->title }}
                                                    <div class="ce-nowrap indexNews-ul-text">
                                                        {{ $article->description }}
                                                    </div>
                                                </div>
                                                <span>{{ $article->created_at->format('Y-m-d') }}</span>
                                            </a>
                                        </li>
                                    @endforeach
                                @endif
                            </ul>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="profile">
                            <ul class="indexNews-ul indexflow-ul">
                                @if (getArticlesBYCate(5,6)->isNotEmpty())
                                    @foreach (getArticlesBYCate(5,6) as $article)
                                        <li>
                                            <a href="{{ $article->link }}" title="{{ $article->title }}">
                                                <div class="ce-nowrap indexNews-ul-name">
                                                    {{ $article->title }}
                                                    <div class="ce-nowrap indexNews-ul-text">
                                                        {{ $article->description }}
                                                    </div>
                                                </div>
                                                <span>{{ $article->created_at->format('Y-m-d') }}</span>
                                            </a>
                                        </li>
                                    @endforeach
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-3 indexflow-img">
                    @if (getAdvertsByCate(21,2)->isNotEmpty())
                        @foreach (getAdvertsByCate(21,2) as $advert)
                            <a href="{{ $advert->url ?? 'javascript:void(0);' }}"><img src="{{ $advert->cover_path }}"/></a>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- 媒体报道+党建文化 -->
    <div class="indexParty">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-8">
                    <div class="indexMedia-title">
                        <div class="indexMedia-name">
                            <img src="assets/index/images/partyIcon_00.png"/>
                            {{ getOneCategory(17,'title') }}
                        </div>
                        <img src="assets/index/images/partyIcon_00.png"/>
                    </div>
                    <div class="indexMedia-cont">
                        <div class="ce-img indexMedia-img">
                            <span style="background-image: url({{ getOneArticleBYCate(17,'cover_path') }});"></span>
                            <img src="assets/index/images/partyIcon_03.png">
                        </div>
                        <div class="indexMedia-essay">
                            <div class="ce-nowrap-multi indexMedia-head">
                                {{ getOneArticleBYCate(17,'title') }}
                            </div>
                            <div class="ce-nowrap-multi indexMedia-text">
                                {{ getOneArticleBYCate(17,'description') }}
                            </div>
                            <a class="indexMedia-more" href="{{ getOneCategory(17,'link') }}">MORE</a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-4">
                    <div class="indexCulture">
                        <ul id="myTabs" class="indexParty-tab" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#culture" id="home-tab" role="tab" data-toggle="tab">
                                    <img src="assets/index/images/partyIcon_01.png"/>
                                    {{ getOneCategory(12,'title') }}

                                </a>
                            </li>
                            <li role="presentation" class="">
                                <a href="#special" id="profile-tab" role="tab" data-toggle="tab">
                                    <img src="assets/index/images/partyIcon_02.png"/>
                                    {{ getOneCategory(30,'title') }}
                                </a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div role="tabpanel" class="tab-pane fade active in" id="culture">
                                <ul class="indexNews-ul indexCulture-ul">
                                    @if (getArticlesBYCate(12,5)->isNotEmpty())
                                        @foreach (getArticlesBYCate(12,5) as $article)
                                            <li>
                                                <a href="{{ $article->link }}" title="{{ $article->title }}">
                                                    <div class="ce-nowrap-multi indexNews-ul-name">
                                                        {{ $article->title }}
                                                    </div>
                                                    <span>[{{ $article->created_at->format('Y-m-d')}}]</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    @endif
                                </ul>
                            </div>

                            <div role="tabpanel" class="tab-pane fade" id="special">
                                <ul class="indexNews-ul indexCulture-ul">
                                    @if (getArticlesBYCate(30,5)->isNotEmpty())
                                        @foreach (getArticlesBYCate(30,5) as $article)
                                            <li>
                                                <a href="{{ $article->link }}" title="{{ $article->title }}">
                                                    <div class="ce-nowrap-multi indexNews-ul-name">
                                                        {{ $article->title }}
                                                    </div>
                                                    <span>[{{ $article->created_at->format('Y-m-d')}}]</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    @endif
                                </ul>
                            </div>

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

    <!-- 分类筛选 -->
    <div class="indexScreen">
        <div class="container">
            <ul id="myTabs" class="indexScreen-tab" role="tablist">
                <li role="presentation" class="active">
                    <a href="#screen-1" id="one-tab" role="tab" data-toggle="tab">
                        <img src="assets/index/images/screenIcon_00.png"/>
                        {{ getOneCategory(27,'title') }}
                        <span></span>
                    </a>
                </li>
                <li role="presentation" class="">
                    <a href="#screen-2" id="two-tab" role="tab" data-toggle="tab">
                        <img src="assets/index/images/screenIcon_01.png"/>
                        {{ getOneCategory(29,'title') }} <span></span>
                    </a>
                </li>
                <li role="presentation" class="">
                    <a href="#screen-3" id="three-tab" role="tab" data-toggle="tab">
                        <img src="assets/index/images/screenIcon_02.png"/>
                        {{ getOneCategory(18,'title') }}<span></span>
                    </a>
                </li>
                <li role="presentation" class="">
                    <a href="#screen-4" id="four-tab" role="tab" data-toggle="tab">
                        <img src="assets/index/images/screenIcon_03.png"/>
                        {{ getOneCategory(16,'title') }}<span></span>
                    </a>
                </li>
                <li role="presentation" class="">
                    <a href="#screen-5" id="five-tab" role="tab" data-toggle="tab">
                        <img src="assets/index/images/screenIcon_00.png"/>
                        {{ getOneCategory(10,'title') }}<span></span>
                    </a>
                </li>
            </ul>
            <div id="myTabContent" class="tab-content indexTeam-content">
                <!-- 创新团队 -->
                <div role="screen-1" class="tab-pane fade active in" id="screen-1">
                    <ul class="indexTeam-ul">
                        @if (getArticlesBYCate(27,4)->isNotEmpty())
                            @foreach (getArticlesBYCate(27,4) as $article)
                                <li>
                                    <a href="{{ $article->link }}" title="{{ $article->title }}">
                                        <div class="ce-img indexTeam-img">
                                            <span style="background-image: url({{ $article->cover_path }});"></span>
                                        </div>
                                        <div class="indexTeam-cont">
                                            <div class="ce-nowrap-multi indexTeam-name">
                                                {{ $article->title }}
                                            </div>
                                            <div class="ce-nowrap-multi indexTeam-text">
                                                {{ $article->description }}
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
                <!-- end 创新团队 -->

                <!-- 专家智库 -->
                <div role="screen-2" class="tab-pane fade" id="screen-2">
                    <ul class="IndexExpertNew">
                        @if (getArticlesBYCate(29,9)->isNotEmpty())
                            @foreach (getArticlesBYCate(29,9) as $article)
                                <li>
                                    <a href="{{ $article->link }}" title="{{ $article->title }}">
                                        <div class="IndexExpertNew-li">
                                            <span class="IndexExpertNew-tips">客座教授</span>
                                            <div class="IndexExpertNew-title">{{ $article->title }}</div>
                                        </div>
                                        <!-- <div class="ce-img IndexExpert-img">
                                            <span style="background-image: url({{ $article->cover_path }});"></span>
                                        </div>
                                        <div class="IndexExpert-name">
                                            <div class="IndexExpert-title">
                                                <span>{{ $article->title }}</span>客座教授
                                            </div>
                                        </div> -->
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                    <div class="IndexExpert-more">
                        <a href="{{ getOneCategory(29,'link') }}">查看更多 &gt;</a>
                    </div>
                </div>
                <!-- end 专家智库 -->

                <!-- 项目推广 -->
                <div role="screen-3" class="tab-pane fade" id="screen-3">
                    <ul class="indexExtend-ul">
                        @if (getArticlesBYCate(18,2)->isNotEmpty())
                            @foreach (getArticlesBYCate(18,2) as $article)
                                <li>
                                    <a href="{{ $article->link }}" title="{{ $article->title }}">

                                        <div class="ce-nowrap indexExtend-ul-name">
                                            {{ $article->title }}
                                        </div>
                                        <div class="ce-nowrap-multi indexExtend-ul-text">
                                            {{ $article->description }}
                                        </div>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                    <div class="IndexExpert-more">
                        <a href="{{ getOneCategory(18,'link') }}">查看更多 &gt;</a>
                    </div>
                </div>
                <!-- end 项目推广 -->

                <!-- 成果专利 -->
                <div role="screen-4" class="tab-pane fade" id="screen-4">
                    <ul class="indexExtend-ul">
                        @if (getArticlesBYCate(16,2)->isNotEmpty())
                            @foreach (getArticlesBYCate(16,2) as $article)
                                <li>
                                    <a href="{{ $article->link }}" title="{{ $article->title }}">
                                        <div class="ce-nowrap indexExtend-ul-name">
                                            {{ $article->title }}
                                        </div>
                                        <div class="ce-nowrap-multi indexExtend-ul-text">
                                            {{ $article->description }}
                                        </div>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                    <div class="IndexExpert-more">
                        <a href="{{ getOneCategory(16,'link') }}">查看更多 &gt;</a>
                    </div>
                </div>
                <!-- end 成果专利 -->

                <!-- 获得奖项 -->
                <div role="screen-5" class="tab-pane fade" id="screen-5">
                    <div class="swiper-container indexPrize-swiper">
                        <div class="swiper-wrapper">
                            @if (getArticlesBYCate(10,8)->isNotEmpty())
                                @foreach (getArticlesBYCate(10,8) as $article)
                                    <div class="swiper-slide indexPrize-ul">
                                        <div class="ce-img indexPrize-img">
                                            <span style="background-image: url({{ $article->cover_path }});"></span>
                                        </div>
                                        <div class="ce-nowrap indexPrize-title">
                                            {{ $article->title }}
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination indexPrize-pagination"></div>
                    </div>
                </div>
                <!-- end 获得奖项 -->
            </div>
        </div>
    </div>

@endsection

@push('script')
    <script type="text/javascript">
        // 大轮播
        var banner = new Swiper('.indexBig', {
            pagination: '.indexImg-pagination',
            paginationClickable: true,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: 4000,
            autoplayDisableOnInteraction: false
        });

        // 新闻轮播
        var banner = new Swiper('.indexNews-banner', {
            pagination: '.indexNews-pagination',
            paginationClickable: true,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: 6000,
            autoplayDisableOnInteraction: false
        });

        // 梯队人才1
        var mySwiper = new Swiper('.indexBuild-swiper', {
            direction: 'vertical',
            slidesPerView: 2,
            spaceBetween: 10,
            speed: 1000, // 速度
            autoplay: 2000
        });

        // 梯队人才2
        var mySwiper1 = new Swiper('.indexBuildNew-swiper', {
            direction: 'vertical',
            slidesPerView: 2,
            spaceBetween: 10,
            speed: 1000, // 速度
            autoplay: 2000
        });

        // 获得奖项
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var mySwiper = new Swiper('.indexPrize-swiper', {
                pagination: '.indexPrize-pagination',
                slidesPerView: 3,
                paginationClickable: true,
                spaceBetween: 30,
                autoplay: 2000
            });
        })
    </script>
@endpush