@extends('layouts.app')

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

@section('meta')
    @include('meta.index')
@endsection

@section('content')

    <!-- 公告 -->
    <div class="notice">
        <div class="container">
            <div class="col-md-12">
                <div class="swiper-container notice-container">
                    <div class="notice-title">
                        <img src="{{ asset('assets/index/images/notice.png') }}"/>
                    </div>
                    <div class="swiper-wrapper">
                        @if($notices->isNotEmpty())
                            @foreach($notices as $notice)
                                <div class="swiper-slide">
                                    <a href="{{ $notice->link }}" class="notice-cont">
                                        <div class="noticeLeft">
                                            <div class="nowrap notice-name">{{ $notice->title }}</div>
                                            <div class="nowrap notice-text">
                                                {{ $notice->description }}
                                            </div>
                                        </div>
                                        <div class="noticeRight">
                                            <div class="notice-year">{{ $notice->created_at->format('Y年m月') }}</div>
                                            <div class="notice-date">
                                                <span>{{ $notice->created_at->format('d') }}</span> 日
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination notice-pagination"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- end 公告 -->

    <!-- 新闻动态 + 媒体报道 -->
    <div class="container">
        <div class="col-md-9">
            <div class="news">
                <div class="newsLeft">
                    <div class="swiper-container news-container">
                        <div class="swiper-wrapper">
                            <div class="newsLeft">
                                <div class="swiper-container news-container">
                                    <div class="swiper-wrapper">
                                        @if($nyydtimg->isNotEmpty())
                                            @foreach($nyydtimg as $img)
                                                <div class="swiper-slide">
                                                    <a href="{{ $img->link }}" class="ce-img newsLeft-img">
                                                        <span style="background-image: url({{ $img->cover_url }});">
                                                            <div class="nowrap newsLeft-name">{{ $img->title }}</div>
                                                        </span>
                                                    </a>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <!-- Add Pagination -->
                                    <div class="swiper-pagination news-pagination"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination news-pagination"></div>
                    </div>
                </div>
                <div class="newsRight">
                    <div class="newsRight-title"
                         style="background-image: url({{ asset('assets/index/images/indexTitle.png') }});">{{ $nyydtCate->title }}</div>
                    <ul class="newsRight-list">
                        @if($nyydt->isNotEmpty())
                            @foreach($nyydt as $article)
                                <li>
                                    <a href="{{ $article->link }}">
                                        <div class="nowrap newsRight-name">{{ $article->title }}</div>
                                        <div class="newsRight-time">{{ $article->created_at->format('m-d') }}</div>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="media">
                <div class="media-title">
                    <span style="background-image: url({{ asset('assets/index/images/indexTitle.png') }});">{{ $mtbdCate->title }}</span>
                    <a href="{{ $mtbdCate->link }}" class="media-more">更多
                        <img src="{{ asset('assets/index/images/circleArrow.png') }}" alt="查看更多">
                    </a>
                </div>
                <div class="media-list">
                    <div class="swiper-container media-container">
                        <div class="swiper-wrapper">
                            @if($mtbdArticles->isNotEmpty())
                                @foreach($mtbdArticles as $article)
                                    <div class="swiper-slide">
                                        <div class="ce-img media-img">
                                            <span style="background-image: url({{ $article->cover_url }});"></span>
                                        </div>
                                        <a href="{{ $article->link }}" class="nowrap media-name">
                                            <div class="nowrap">{{ $article->title }}</div>
                                            <span>{{ $article->created_at->format('m-d')}}</span>
                                        </a>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next media-button-next"></div>
                        <div class="swiper-button-prev media-button-prev"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end 新闻动态 + 媒体报道 -->

    <!-- 横幅 -->
    <div class="container">
        <div class="col-md-12">
            <div class="ce-img banner">
                <span style="background-image: url({{ $advert?$advert->cover_url:'' }});"></span>
            </div>
        </div>
    </div>
    <!-- end 横幅 -->

    <!-- 党政建设 + 学习园地 -->
    <div class="container">
        <div class="col-md-6">
            <div class="indexModular">
                <div class="modular-title">
                    <div class="modular-name">
                        <img src="{{ asset('assets/index/images/indexIcon_00.png') }}"> {{ $dzjsCate->title }}
                    </div>
                    <a href="{{ $dzjsCate->link }}" class="modular-more">更多<span>+</span></a>
                </div>
                <div class="modular-list">
                    <a href="{{ $dzjsimg->link }}" class="modularLeft">
                        <div class="ce-img modularLeft-img">
                            <span style="background-image: url({{ $dzjsimg->cover_url }});"></span>
                        </div>
                        <div class="modularLeft-text">
                            <div class="ellipsis modularLeft-name">{{ $dzjsimg->title }}</div>
                            <div class="nowrap modularLeft-time">{{ $dzjsimg->created_at->format('m-d') }}</div>
                        </div>
                    </a>
                    <ul class="modularRight">
                        @if($dzjsArticles->isNotEmpty())
                            @foreach($dzjsArticles as $article)
                                <li>
                                    <a href="{{ $article->link }}">
                                        <div class="nowrap modularRight-name">{{ $article->title }}</div>
                                        <div class="nowrap modularRight-time">{{ $article->created_at->format('m-d') }}</div>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="indexModular">
                <div class="modular-title">
                    <div class="modular-name">
                        <img src="{{ asset('assets/index/images/indexIcon_01.png') }}"> {{ $xxydCate->title }}
                    </div>
                    <a href="{{ $xxydCate->link }}" class="modular-more">更多<span>+</span></a>
                </div>
                <div class="modular-list">
                    <a href="{{ $xxydimg->link }}" class="modularLeft">
                        <div class="ce-img modularLeft-img">
                            <span style="background-image: url({{ $xxydimg->cover_url }});"></span>
                        </div>
                        <div class="modularLeft-text">
                            <div class="ellipsis modularLeft-name">{{ $xxydimg->title }}</div>
                            <div class="nowrap modularLeft-time">{{ $xxydimg->created_at->format('m-d') }}</div>
                        </div>
                    </a>

                    <ul class="modularRight">
                        @if($xxydArticles->isNotEmpty())
                            @foreach($xxydArticles as $article)
                                <li>
                                    <a href="{{ $article->link }}">
                                        <div class="nowrap modularRight-name">{{ $article->title }}</div>
                                        <div class="nowrap modularRight-time">{{ $article->created_at->format('m-d') }}</div>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- end 党政建设 + 学习园地 -->

    <!-- tab + 预决算公告 -->
    <div class="Tab">
        <div class="container">
            <div class="col-md-12">
                <div class="indexTab">
                    <ul id="myTabs" class="indexTab-ul" role="tablist"
                        style="background-image: url({{ asset('assets/index/image/ranksIcon/ranksTitle_img.png') }});">

                        @if($categorys->isNotEmpty())
                            @foreach($categorys as $category)
                                <li role="presentation" @if($loop->iteration==1) class="active" @endif>
                                    <a href="#indexTab0{{$loop->iteration}}" id="indexTab-0{{$loop->iteration}}"
                                       role="tab"
                                       data-toggle="tab">
                                        <span>{{ $category->title }}</span>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                    <div id="myTabContent" class="tab-content ranksSubject-cont">
                        @if($categorys->isNotEmpty())
                            @foreach($categorys as $category)
                                @if($category->articles->isNotEmpty())
                                    <div role="tabpanel" class="tab-pane fade @if($loop->iteration==1) active @endif in"
                                         id="indexTab0{{$loop->iteration}}">
                                        <div class="TabCont">
                                            @if($category->imgArticle)
                                                <a href="{{ $category->imgArticle->link }}"
                                                   class="TabCont-top">
                                                    <div class="ce-img TabCont-top-img">
                                                        <span style="background-image: url({{ $category->imgArticle->cover_url }});"></span>
                                                    </div>
                                                    <div class="TabCont-top-tips">
                                                        <div class="nowrap TabCont-top-title">
                                                            {{ $category->imgArticle->title }}
                                                        </div>
                                                        <div class="ellipsis TabCont-top-text">
                                                            {{ $category->imgArticle->description }}
                                                        </div>
                                                    </div>
                                                </a>
                                            @endif

                                            <ul class="TabCont-list">
                                                @foreach($category->articleLists as $article)
                                                    <li>
                                                        <a href="{{ $article->link }}">
                                                            <div class="nowrap TabCont-list-name">
                                                                {{ $article->title }}
                                                            </div>
                                                            <div class="TabCont-list-time">{{ $article->created_at->format('m-d') }}</div>
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                @endif

                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <!-- end tab + 预决算公告 -->
        @endsection

        @push('script')
            <script>
                // 公告列表
                var noticeSwiper = new Swiper('.notice-container', {
                    pagination: '.notice-pagination',
                    autoplay: 6000,
                    loop: true,
                    speed: 1000,
                    spaceBetween: 30
                });

                // 新闻动态
                var noticeSwiper = new Swiper('.news-container', {
                    pagination: '.news-pagination',
                    autoplay: 5000,
                    loop: true,
                    speed: 1000
                });

                // 媒体报道
                var mediaSwiper = new Swiper('.media-container', {
                    nextButton: '.media-button-next',
                    prevButton: '.media-button-prev',
                });

            </script>
    @endpush
