@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();
        $hotList = $datas['data']
    @endphp

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .article-detail-tab .ui.menu{
            background: none!important;
        }
    </style>

        <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"><a href="{{ route('strategyIndex') }}" class="section">留学攻略</a></div>
                        <i class="right angle icon divider"></i>
                        <div class="active section">热门文章</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="strategyList-container">
            <div class="strategy-content" >
                <div class="strategy-list-conetnt">
                    <div class="right-article-list-wrpper hot-article">
                        <div class="article-detail-tab">
                          @foreach($hotList as $item)
                            <div class="article-detail" data-id="{{$item['id']}}">
                              <div class="featured-wrapper">
                                <img src="{{asset('img/messageBoard/featured-title.png')}}" alt="">
                              </div>
                              <div class="article-detail-img">
                                <img src="{{config('locations.strategy.asset')}}{{$item['image']}}" alt="" />
                              </div>
                              <div class="article-detail-title-content">
                                <div class="articleList-detail-title font-title">{{$item['title']}}</div>
                                <div class="article-detail-options">
                                  <div class="articleList-detail-date">{{substr( $item['released_time'],  0,  10 )}}</div>
                                <div class="article-detail-views">
                                  <span class="article-detail-views-icon"></span>
                                  <span class="article-detail-views-number">{{$item['reading_quantity']}}</span>
                                  </div>
                                </div>
                              </div>
                              <div class="article-detail-content">
                                <article>{{$item['synopsis']}}</article>
                              </div>
                            </div>
                          @endforeach
                          @if($datas['total'] > 15)
                            {!! $pagination !!}
                          @endif
                    </div>
                </div>
            </div>

        </div>
        @include('modals.add_to_cart_validation_modal')
        {{--@include('offerwall::layouts.components.support.image_modal')--}}
    <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 = "";
        $(".goTo").keydown(function (e) {//keydown search
            console.log(11111111111111)
            if(e.keyCode == 13){
                if($(this !== "")){
                    var inputVal = $(this).val();
                    searchVal = inputVal
                    getStrategyAjax(inputVal)
                    $(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(page) {//get Strategy list
          let url = window.location.origin + window.location.pathname
          console.log(url,page)
          window.location.href = url+'?page=' + page
        }
        function getDate(str) {//split date
            return str.split(" ")[0]
        }
        function searchFilter(page) {//Pagination
            getStrategyAjax(page);
        }
    </script>

@endsection