@extends('base')

@section('title', __('strategy for studing abroad'))

@section('content')
    @include('common.no_cache')
    @php
        $version = config('app.version');
        $language = config('app.locale');
        $auth = \Illuminate\Support\Facades\Auth::check();
    @endphp
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .article-detail-tab .ui.menu{
            background: none!important;
        }
    </style>
    <form id="strategyForm" method="post" action="{{route('strategyIndex')}}">
        <input type="hidden" name="type" id="type" value="{{(isset($type) && $type) ? $type : ''}}">
        <div class="ui basic segment no-margin">
            <div class="ui grid">
                <div class="two wide column"></div>
                <div class="ten wide column">
                    <div class="ui breadcrumb">
                        <a href="{{ route('home') }}" class="section">{{__('Home')}}</a>
                        <i class="right angle icon divider"></i>
                        <div class="active section">{{ __('strategy for studing abroad') }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="strategyList-container">
            @if(count($banners) > 0)
                <div class="offer-wall-header">
                    <div class="slider relativeContainer">
                        @foreach($banners as $banner)
                            <div>
                                <a href="{{$banner->{__('bannerLinkField')} }}">
                                    <img class="offers-header-img" data-lazy="{{config('locations.strategyImgTop.asset').$banner->{__('bannerImageField')} }}">
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
            <div class="strategy-tab-wrapper">
                @if($hasPicked)
                    <div class="strategy-tab-menu @if($type == 'picked') strategy-tab-curMenu @endif" data-index="0" onclick="window.location.href='/advicearticles?type=picked'">
                        <div class="strategy-tab-img">
                            <img src="{{ config('locations.systemImage.asset').'featured.png'  }}" alt="" />
                        </div>
                        <div class="strategy-tab-title font-title">
                            精选文章
                        </div>
                    </div>
                @endif
                @foreach($types as $typeBanner)
                    @if($typeBanner && isset($typeBanner['id']))
                        <div class="strategy-tab-menu @if($typeBanner['id'] == $type) strategy-tab-curMenu @endif" data-index="0" onclick="window.location.href='/advicearticles?type={{$typeBanner['id']}}'">
                            <div class="strategy-tab-img">
                                @if(isset($typeBanner['first_img']) && $typeBanner['first_img'])
                                    <img src="{{config('locations.strategyTypeFirstImg.asset').$typeBanner['first_img']}}" alt="" />
                                @endif
                            </div>
                            <div class="strategy-tab-title font-title">
                                {{$typeBanner['name']}}
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
            <div class="strategy-content" >
                <div class="strategy-content-topbar">
                    <div class="sort-content" id="table">
                        <div class="ui header">
                            <div class="content">
                                <span class="search-header">{{ __('Sort by') }}</span>
                                <div class="ui inline dropdown icon" id="sort">
                                    <div class="text">阅读量</div>
                                    <i class="chevron down icon"></i>
                                    <div class="menu">
                                        <div class="active selected item" data-value="readingQuantity" data-order="desc" >阅读量</div>
                                        <div class="item" data-value="timeDESC" data-order="asc">发布时间从新到旧</div>
                                        <div class="item" data-value="timeASC" data-order="asc">发布时间从旧到新</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="strategy-search-content">
                        <div class="searchbox-wrapper">
                            <input type="text" id="searchInput" name="searchInput" placeholder="搜索" />
                            <label id="searchInputBtn" class="searchInputBtn"></label>
                        </div>
                    </div>
                </div>
                <div class="strategy-list-conetnt">
                    <div class="left-advert-article">
                        @if($strategybanners)
                            <div class="advert-list-wrappe">
                                @foreach($strategybanners as $strategybanner)
                                    @if($strategybanner)
                                        <div class="advert-type advert-blend-type">
                                            <div class="advert-img">
                                                @if($strategybanner->bannerRelation == 0)
                                                    @if(!empty($strategybanner->{__('bannerImageField')}))

                                                        <a href="{{route("showCourse")}}?courseID={{$strategybanner->select_id}}" target="_blank">
                                                            <img class="offers-header-img lazyload" data-src="{{config('locations.strategyUpload.asset').$strategybanner->{__('bannerImageField')} }}">
                                                        </a>
                                                    @endif
                                                @elseif($strategybanner->bannerRelation == 1)
                                                    @if(!empty($strategybanner->{__('bannerImageField')}))

                                                        <a href="{{route("uniDetails")}}/{{$strategybanner->select_id}}" target="_blank">
                                                            <img class="offers-header-img lazyload" data-src="{{config('locations.strategyUpload.asset').$strategybanner->{__('bannerImageField')} }}">
                                                        </a>
                                                    @endif
                                                @elseif($strategybanner->bannerRelation == 4)
                                                    @if(!empty($strategybanner->{__('bannerImageField')}))

                                                        <a href="{{route("showStrategy")}}?strategyId={{$strategybanner->select_id}}" target="_blank">
                                                            <img class="offers-header-img lazyload" data-src="{{config('locations.strategyUpload.asset').$strategybanner->{__('bannerImageField')} }}">
                                                        </a>
                                                    @endif
                                                @endif
                                            </div>
                                            @if($strategybanner->comment)
                                                <div class="advert-synopsis">
                                                    <article>
                                                        {{$strategybanner->comment}}
                                                    </article>
                                                    @if($strategybanner->bannerRelation == 0)
                                                        <a href="{{route("showCourse")}}?courseID={{$strategybanner->select_id}}" target="_blank" class="font-title">
                                                            了解详情
                                                        </a>
                                                    @elseif($strategybanner->bannerRelation == 1)

                                                        <a href="{{route("uniDetails")}}/{{$strategybanner->select_id}}" target="_blank" class="font-title">
                                                            了解详情
                                                        </a>
                                                    @elseif($strategybanner->bannerRelation == 4)

                                                        <a href="{{route("showStrategy")}}?strategyId={{$strategybanner->select_id}}" target="_blank" class="font-title">
                                                            了解详情
                                                        </a>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        @endif
                        @if($hotList->toArray())
                            <div class="article-list-wrapper">
                                <h2 class="font-title">热门文章
                                  @if($totalRow > 5)
                                  <a href="{{route('advicearticlesLists')}}">查看更多</a>
                                  @endif
                                </h2>
                                @foreach($hotList as $hot)
                                    <div class="article-content" onclick="window.open('/advicearticles/showStrategy?strategyId={{$hot->id}}')">
                                        <div class="article-content-img">
                                            <img class="lazyload" data-src="{{config('locations.strategy.asset').$hot->image}}">
                                        </div>
                                        <article>
                                            {{$hot->synopsis}}
                                        </article>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <div class="right-article-list-wrpper">
                        <div class="article-detail-tab">
                        </div>
                    </div>
                </div>
            </div>
            <div class="search-result-wrapper">
                <div class="search-result-back">
                    后退
                </div>
                <div class="search-result-title">无搜索结果</div>
                <div class="search-result-search-wrapper">
                    <input type="text" id="searchResultInput" name="searchInput" placeholder="搜索" />
                    <label id="searchResultBtn"></label>
                </div>
                <div class="search-result-content">
                    <p class="search-result-sorry">很抱歉，无法找到匹配的内容。</p>
                    <p class="search-result-match">不要放弃，以下这些提示也许能帮您找到您所需的内容：</p>
                    <p class="search-result-spell">- 仔细检查您的拼写</p>
                    <p class="search-result-view">- 查看上方<span>分类栏</span>@if($recommendList)或者下方的<span>阅读推荐</span>@endif</p>
                </div>
                @if($recommendList)
                    <div class="search-result-recommend">
                        <div class="search-result-recommend-title">阅读推荐</div>
                        <div class="search-result-recommend-content">
                            @foreach($recommendList as $recommend)
                                <dl>
                                    <a href="{{route("showStrategy")}}?strategyId={{$recommend['id']}}" target="_blank">
                                        <dt class="search-result-recommend-img">
                                            <img class="lazyload" data-src="{{config('locations.strategy.asset').$recommend['image']}}">
                                        </dt>
                                    </a>
                                    <a href="{{route("showStrategy")}}?strategyId={{$recommend['id']}}" target="_blank">
                                        <dd class="search-result-recommend-theme">{{$recommend['title']}}</dd>
                                    </a>
                                </dl>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

        </div>
        @include('modals.add_to_cart_validation_modal')
        {{--@include('offerwall::layouts.components.support.image_modal')--}}
    </form>
    <script src="{{asset('js/simpleCountdown.js')}}"></script>
    <script src="{{asset('js/lazyload.js' )}}"></script>
    <script>
        $(function () {
            $('#sort')
                .dropdown({//get dropdown value
                    onChange: function (value, text, $selectedItem) {
                        getStrategyAjax(type, "", value, 0)
                    }
                });
        })
        plugLibrary();
        var type = $("#type").val();
        getStrategyAjax(type, "", "readingQuantity", 0);
        $(".article-detail-tab").delegate("dl.article-characteristic-content","mouseenter", function () {//mouseenter
            $(this).find("dd").hide().siblings("dt").show()
        });
        $(".article-detail-tab").delegate("dl.article-characteristic-content","mouseleave", function () {//mouseleave
            $(this).find("dd").show().siblings("dt").hide()
        });
        $(".article-detail-tab").on("click", "div.article-detail", function (argu) {//href
            var dataId = $(this).attr("data-id")
            window.open("/advicearticles/showStrategy?strategyId=" + dataId);
        });
        ($(".article-detail-content article"), 100)

        $("#searchInputBtn").on("click", function () {//search
            var searchVal = $("#searchInput").val();
            if(searchVal !==""){
                getStrategyAjax(type, searchVal, "readingQuantity", 0)
            }

            $("#searchInput").val("")
        });

        $(".search-result-back").on("click", function () {//back
            getStrategyAjax(type, "", "readingQuantity", 0)
        });
        $("#searchResultBtn").on("click", function () {
            var searchResultVal = $("#searchResultInput").val();
            if(searchResultVal !== ""){
                getStrategyAjax(type, searchResultVal, "readingQuantity", 0)
            }
            $("#searchResultInput").val("");
        });
        var searchVal = "";
        $("#searchResultInput,#searchInput").keydown(function (e) {//keydown search
            if(e.keyCode == 13){
                if($(this !== "")){
                    var inputVal = $(this).val();
                    searchVal = inputVal
                    getStrategyAjax(type, inputVal, "readingQuantity", 0)
                    $(this).val("")
                }

            }
        })
        function plugLibrary() { //第三方插件库调用
            var lazyLoad = null;
            lazyLoadImages()
            function lazyLoadImages() {
                lazyLoad = new LazyLoad({
                    elements_selector: ".lazyload"
                });
            }
            $('.slider').slick({ //焦点图
                dots: true,
                infinite: true,
                accessibility: true,
                arrows: false,
                speed: 800,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 5000,
                lazyLoad: 'ondemand'
            });
            // $('#sort').dropdown();
            new LazyLoad({
                elements_selector: ".lazyload"
            });
        }
        function initialHideDom() {
            $(".article-detail-tab").find("dl.article-characteristic-content dt").hide(); //隐藏标识
        }

        function wordLimit($this, num) {// splice title
            var maxwidth = num;
            if ($this.text().length > maxwidth) {
                $this.text($this.text().substring(0, maxwidth));
                $this.html($this.html() + '......');
            }
        }

        function getStrategyAjax(type, searchInput, order, page) {//get Strategy list
            // console.log(searchInput)
            var _self = this;
            var html = "";
            var data = {
                type: type ? type : 2,
                searchInput: searchInput ? searchInput : "",
                order: order ? order : "readingQuantity",
                page: page ? page : 0
            }
            $.ajax({
                type: 'GET',
                url: "{{route("getStrategyAjax")}}",
                data: data,
                dataType: "json",
                success: function (data) {
                    if (data.data.list.length > 0) {
                        $(".search-result-wrapper").hide();
                        $(".strategy-content").show()
                        var dataLen = data.data.list;
                        if (type == "picked" || !type) {
                            $.each(dataLen, function (key, val) {
                                html += '<div class="article-detail" data-id="' + val.id + '">'
                                    +'<div class="featured-wrapper">'
                                    +'<img src="./img/featured-title.png">'
                                    +'</div>'
                                    + '<div class="article-detail-img">'
                                    + '<img src="{{config('locations.strategy.asset')}}' + val.image + '" alt="" />'
                                    + '</div>'
                                    + '<div class="article-detail-title-content">';
                                if(!searchInput){
                                    html += '<div class="articleList-detail-title font-title">' + val.title + '</div>'
                                }else{
                                    var title =val.title .split(searchInput).join('<span class="searchCur">'+searchInput+'</span>')
                                    html+= '<div class="articleList-detail-title font-title">' + title + '</div>'
                                }

                                html += '<div class="article-detail-options">'
                                    + '<div class="articleList-detail-date">' + getDate(val.released_time) + '</div>'
                                    + '<div class="article-detail-views">'
                                    + '<span class="article-detail-views-icon"></span>'
                                    + '<span class="article-detail-views-number">' + val.reading_quantity_all + '</span>'
                                    + '</div>'
                                    + '</div>'
                                    + '</div>'
                                    + '<div class="article-detail-content">'
                                    + '<article>' + val.synopsis
                                    + '</article>'
                                ;
                                html += '</div></div>';
                            });
                        } else {
                            $.each(dataLen, function (key, val) {
                                html += '<div class="article-detail" data-id="' + val.id + '">'
                                    + '<div class="article-detail-img">'
                                    + '<img src="{{config('locations.strategy.asset')}}' + val.image + '" alt="" />'
                                    + '</div>'
                                    + '<div class="article-detail-title-content">'
                                    + '<div class="articleList-detail-title font-title">' + val.title + '</div>'
                                    + '<div class="article-detail-options">'
                                    + '<div class="articleList-detail-date">' + getDate(val.released_time) + '</div>'
                                    + '<div class="article-detail-views">'
                                    + '<span class="article-detail-views-icon"></span>'
                                    + '<span class="article-detail-views-number">' + val.reading_quantity_all + '</span>'
                                    + '</div>'
                                    + '</div>'
                                    + '</div>'
                                    + '<div class="article-detail-content">'
                                    + '<article>' + val.synopsis
                                    + '</article>'
                                    + '<div class="university-application-content">'
                                    + '</div></div></div>';
                            });
                        }
                        $(".article-detail-tab").html(html);
                        $(".article-detail-tab").append(data.data.pagination);
                        initialHideDom()
                        $('html, body').animate({
                            scrollTop: 0
                        });
                    } else {
                        $(".search-result-wrapper").show();
                        $(".strategy-content").hide()
                    }
                },
                error: function (error) {
                    alert(error)
                }
            });
        }
        function getDate(str) {//split date
            return str.split(" ")[0]
        }
        function searchFilter(page) {//Pagination
            //var searchInput = $("#searchInput").val();
            getStrategyAjax(type, searchVal, $('#orderByFilter').val() != '' ? $('#orderByFilter').val() : "readingQuantity", page);
        }
    </script>

@endsection