@extends('layouts.app')

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

@section('content')

    <!-- 随手拍+最新资讯 -->
    <div class="ce-white ui-margin-b">
        <div class="contant">
            <div class="idxShoot">
                <div class="idxShoot-title">
                    <p>随手拍</p>
                    <span>/ BEAT</span>
                </div>
                <div class="idxShoot-swiper">
                    <!-- Swiper -->
                    <div class="swiper-container gallery-top">
                        <div class="swiper-wrapper">
                            @foreach ($ssp as $element)
                                @foreach ($element->pictures as $picture)
                                    <div class="swiper-slide" style="background-image:url({{ Storage::disk('public')->url($picture ) }})"></div>
                                @endforeach
                            @endforeach
                        </div>
                        <!-- Add Arrows -->
                    </div>
                    <div class="swiper-container gallery-thumbs">
                        <div class="swiper-wrapper">
                            @foreach ($ssp as $element)
                                @foreach ($element->pictures as $picture)
                                    <div class="swiper-slide" style="background-image:url({{ Storage::disk('public')->url($picture ) }})"></div>
                                @endforeach
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="idxNews">
                <div class="idxShoot-title">
                    <p>最新资讯</p>
                    <span>/ NEW</span>
                </div>
                <ul class="idxNews-ul">
                    @foreach ($all_articles as $article)
                        <li>
                            <div class="idxNews-ul-title">
                                <a href="{{ route('article.show', $article) }}">
                                    <p class="ce-nowrap">{{ $article->title }}</p></a>
                                <span>{{ $article->created_at }}</span>
                            </div>
                            <div class="ce-nowrap-multi idxNews-ul-text">
                                {{ $article->description }}
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

    <!-- 单位概况 -->
    <div class="contant idxSurvey">
        <div class="idxShoot-title">
            <div class="idxShoot-title-name">
                <p>期刊简介</p>
                <span>/ INTRODUCTION OF THE JOURNAL</span>
            </div>
            <a href="@if ($danwei)            {{ route('article.show', $danwei) }}        @endif">更多 &gt;</a>
        </div>
        <div class="idxSurveyCont">
            <div class="idxSurveyCont-left">
                @if ($danwei)            {{ $danwei->description }}        @endif

            </div>
            <div class="idxSurveyCont-right">
                <div class="idxSurveyCont-right-img">
                    <img src=" @if ($danwei)           {{ $danwei->cover_path }}        @endif">
                </div>
            </div>
        </div>
    </div>

    <!-- 养生保健 -->
    <div class="ce-white ui-margin-t">
        <div class="contant">
            <div class="idxShoot-title">
                <p>养生保健</p>
                <span>/ HEALTH CARE</span>
            </div>
            <ul class="idxHealthUl">
                @foreach ($ysbj as $article)
                    <li>
                        <div class="ce-img idxHealthUl-img">
                            <span style="background-image: url( {{ $article->cover_path }} );"></span>
                        </div>
                        <div class="idxHealthUl-text">
                            <div class="idxHealthUl-title">{{ $article->title }}</div>
                            <div class="idxHealthUl-tips">
                                {{ $article->description }}
                            </div>
                            <a href="{{ route('article.show', $article) }}">
                                <div class="idxHealthUl-btn">
                                    MORE
                                </div>
                            </a>
                        </div>
                    </li>
                @endforeach

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

    <!-- 广告位 -->
    <div class="idxPoster" style="background-image: url({{ $center_advert->cover_path }});"></div>

    <!-- 精彩推介 -->
    <div class="ce-white" style="padding: 30px 0 50px">
        <div class="contant">
            <div class="idxShoot-title">
                <p>精彩推介</p>
                <span>/ Wonderful promotion</span>
            </div>
            <ul class="recomdUl">
                <li>
                    <div class="recomdUl-title">
                        <div class="recomdUl-title-img">
                            <img src="/assets/index/images/idx/idxIcon_00.png">
                            <span>调研与分析</span>
                        </div>
                        <img class="idxIconRow" src="/assets/index/images/idx/idxIcon_row.png">
                    </div>
                    @if ($dcyfx->isNotEmpty())

                        <div class="recomdUl-top">
                            <div class="ce-img recomdUl-top-img">
                                <span style="background-image: url({{ $dcyfx->first()->cover_path }});"></span>
                            </div>
                            <div class="recomdUl-top-text">
                                <p class="ce-nowrap">
                                    <a href="{{ route('article.show', $dcyfx->first()) }}"> {{ $dcyfx->first()->title }}</a>
                                </p>
                                <span class="ce-nowrap-multi">{{ $dcyfx->first()->description }}</span>
                            </div>
                        </div>
                        <ul class="recomdUl-list">
                            @foreach ($dcyfx as $article)
                                @if ($loop->iteration>1)
                                    <li class="ce-nowrap">
                                        <a href="{{ route('article.show', $article) }}">
                                            {{ $article->title }}
                                        </a>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    @endif
                </li>
                <li>
                    <div class="recomdUl-title">
                        <div class="recomdUl-title-img">
                            <img src="/assets/index/images/idx/idxIcon_01.png">
                            <span>应用基础研究</span>
                        </div>
                        <img class="idxIconRow" src="/assets/index/images/idx/idxIcon_row.png">
                    </div>
                    @if ($yyjcyj->isNotEmpty())

                        <div class="recomdUl-top">
                            <div class="ce-img recomdUl-top-img">
                                <span style="background-image: url({{ $yyjcyj->first()->cover_path }});"></span>
                            </div>
                            <div class="recomdUl-top-text">
                                <p class="ce-nowrap">
                                    <a href="{{ route('article.show', $yyjcyj->first()) }}"> {{ $yyjcyj->first()->title }}</a>
                                </p>
                                <span class="ce-nowrap-multi">{{ $yyjcyj->first()->description }}</span>
                            </div>
                        </div>
                        <ul class="recomdUl-list">
                            @foreach ($yyjcyj as $article)
                                @if ($loop->iteration>1)
                                    <li class="ce-nowrap">
                                        <a href="{{ route('article.show', $article) }}">
                                            {{ $article->title }}
                                        </a>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    @endif

                </li>
                <li>
                    <div class="recomdUl-title">
                        <div class="recomdUl-title-img">
                            <img src="/assets/index/images/idx/idxIcon_02.png">
                            <span>技术研讨</span>
                        </div>
                        <img class="idxIconRow" src="/assets/index/images/idx/idxIcon_row.png">
                    </div>
                    @if ($jsyt->isNotEmpty())

                        <div class="recomdUl-top">
                            <div class="ce-img recomdUl-top-img">
                                <span style="background-image: url({{ $jsyt->first()->cover_path }});"></span>
                            </div>
                            <div class="recomdUl-top-text">
                                <p class="ce-nowrap">
                                    <a href="{{ route('article.show', $jsyt->first()) }}"> {{ $jsyt->first()->title }}</a>
                                </p>
                                <span class="ce-nowrap-multi">{{ $jsyt->first()->description }}</span>
                            </div>
                        </div>
                        <ul class="recomdUl-list">
                            @foreach ($jsyt as $article)
                                @if ($loop->iteration>1)
                                    <li class="ce-nowrap">
                                        <a href="{{ route('article.show', $article) }}">
                                            {{ $article->title }}
                                        </a>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    @endif

                </li>
            </ul>
            <ul class="recomdBtom">
                <li>
                    <div class="recomdUl-title">
                        <div class="recomdUl-title-img">
                            <img src="/assets/index/images/idx/idxIcon_03.png">
                            <span>科研与应用</span>
                        </div>
                        <img class="idxIconRow" src="/assets/index/images/idx/idxIcon_row.png">
                    </div>
                    @if ($kyyyy->isNotEmpty())

                        <ul class="recomdUl-list">
                            @foreach ($kyyyy as $article)
                                <li class="ce-nowrap">
                                    <a href="{{ route('article.show', $article) }}">
                                        {{ $article->title }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </li>
                <li>
                    <div class="recomdUl-title">
                        <div class="recomdUl-title-img">
                            <img src="/assets/index/images/idx/idxIcon_03.png">
                            <span>全科医学</span>
                        </div>
                        <img class="idxIconRow" src="/assets/index/images/idx/idxIcon_row.png">
                    </div>
                    @if ($qkys->isNotEmpty())

                        <ul class="recomdUl-list">
                            @foreach ($qkys as $article)
                                <li class="ce-nowrap">
                                    <a href="{{ route('article.show', $article) }}">
                                        {{ $article->title }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </li>
            </ul>
        </div>
    </div>

    @if($qikan_advert->isNotEmpty())
        <!-- 期刊 -->
        <div class="idxWeekly" style="background-image: url(/assets/index/images/idx/idxWeekly_img.png);">
            <div class="contant">
                <div class="idxWeekly-title idxShoot-title" style="margin: 0 16px;">
                    <p>期刊</p>
                    <span>/ PERIODICAL</span>
                </div>
                <div class="idxWeekly-ul">
                    @foreach ($qikan_advert as $advert)
                        <div class="idxWeekly-back" style="background-image: url({{ $advert->one_picture_path }});"></div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
@endsection



@push('script')
    <script>
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            loop: true
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 3,
            touchRatio: 0.2,
            loop: true,
            slideToClickedSlide: true
        });
        galleryTop.params.control = galleryThumbs;
        galleryThumbs.params.control = galleryTop;


        // 期刊
        var aswiper = new Swiper('.weekly-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 4,
            paginationClickable: true,
            spaceBetween: 30,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev'
        });


    </script>
@endpush