@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;
        }
    </style>
    <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>
                    <a href="{{ route('strategyIndex') }}" class="section">留学攻略</a>
                    <i class="right angle icon divider"></i>
                    <a class="section">文章详情</a>
                </div>
            </div>
        </div>
    </div>
    <div class="strategyList-detail-container">
        <div class="article-detail-container">
            <div class="article-detail-Identification">
                <div class="university-application-content">
                    @if($strategyType)
                        @foreach($strategyType as $strategyTypeVal)
                            <dl class="article-characteristic-content">
                                <img class="lazyload" data-src="{{config('locations.strategyTypeImg.asset').$strategyTypeVal['type_img']}}">
                            </dl>
                        @endforeach
                    @endif
                </div>
                @if($strategy)
                    <div class="article-detail-header">
                        <div class="article-detail-title font-title">{{$strategy['title']}}</div>
                        <div class="article-detail-other">
                            <div class="article-detail-date">{{date('d/m/Y', strtotime($strategy['released_time']))}}</div>
                            <div class="article-detail-views">
                                <span class="article-detail-views-icon"></span>
                                <span class="article-detail-views-number">{{$strategy['reading_quantity'] + $strategy['set_quantity']}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="all-article-detail-content">
                        {!!$strategy['body']!!}
                    </div>
                @endif
            </div>
        </div>
        @if($recommendList)
        <div class="search-detail-result-wrapper">
            <div class="search-detail-result-recommend">
                <div class="search-detail-result-recommend-title">阅读推荐</div>
                <div class="search-detail-result-recommend-content">
                    @foreach($recommendList as $recommend)
                        <dl>
                            <a href="{{route("showStrategy")}}?strategyId={{$recommend['id']}}" target="_blank">
                                <dt class="search-detail-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-detail-result-recommend-theme font-title">{{$recommend['title']}}</dd>
                            </a>
                        </dl>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
    </div>
    @include('modals.add_to_cart_validation_modal')
    {{--@include('offerwall::layouts.components.support.image_modal')--}}

    <script src="{{asset('js/lazyload.js' ).'?'.$version}}"></script>
    <script src="{{asset('js/simpleCountdown.js')}}"></script>
    <script>
        var lazyLoad = null;
        lazyLoadImages()
        function lazyLoadImages() {
            lazyLoad = new LazyLoad({
                elements_selector: ".lazyload"
            });
        }
    </script>
@endsection