@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@extends('layouts.frontend')
@foreach ($tab_list as $k => $v)
@if ($v->id == request()->segment(4) || ($k == 0 && request()->segment(4) == ''))
@section('title', $v->meta_title)
@section('meta_description', $v->meta_description)
@section('meta_keywords', $v->meta_keyword)
@endif
@endforeach
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'countries_language-city-intro', $country->country_id, $country->country_name, $tab_id, $tab->title))
@section('content')
<!-- kv-countries-language -->
<div id="kv-countries-language">@include('frontend.module.kv-countries-language')</div>
<!-- ./kv-countries-language -->

<nav class="nav-main">
    <div class="nav-primary">
        <div class="container d-none d-lg-block slick-nav">
            {!! $FrontendPresenter->countryMenuSlider() !!}
        </div>
        <div class="d-lg-none">
            <select class="custom-select" onchange="location = this.value;">
                {!! $FrontendPresenter->countryMenuSelect() !!}
            </select>
        </div>
    </div>
    <div class="nav-secondary">
        <div class="container">
            <div class="nav-responsive">
                <ul class="nav justify-content-center">
                    @foreach ($tab_list as $k => $v)
                    <li class="nav-item" id="city_{{$v->id}}">
                        <a class="nav-link @if ($v->id == request()->segment(4) || ($k == 0 && request()->segment(4) == '')) active @endif " href="{{ route('countries_language-city-intro', [request()->segment(3), $v->id]) }}#city_{{$v->id}}">{{$v->title}}</a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</nav>

<div class="container breadcrumbs">
    {{ Breadcrumbs::render('countries_language-city-intro', $country->country_id, $country->country_name, $tab_id, $tab->title) }}
</div>

<main class="main">
    @foreach ($intro_list as $k => $v)
    @if (($k % 2) == 0)
    <div class="container-fluid">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-md-6 mb-6 mb-md-0">
                    <div class="embed__img py-md-10" style="background-image: url({{ asset($v->pic) }});">
                        <div class="py-25 py-md-25"></div>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="h3 font-weight-bold mb-3">{{ $v->title }}</div>
                    <p>
                        {!! $v->description !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
    @else
    <div class="container-fluid my-10 my-md-14 py-0 py-md-10">
        <div class="block-gray"></div>
        <div class="container">
        <div class="row align-items-center">
            <div class="col-12 col-md-6 mb-6 mb-md-0">
                <div class="embed__img py-md-10" style="background-image: url({{ asset($v->pic) }});">
                    <div class="py-25 py-md-25"></div>
                </div>
            </div>
            <div class="col-12 col-md-6 order-md-first">
                <div class="h3 font-weight-bold mb-3">{{ $v->title }}</div>
                <p>
                    {!! $v->description !!}
                </p>
            </div>
        </div>
        </div>
    </div>
    @endif
    @endforeach

    <!-- 物價 -->
    <div class="section-city-price mb-14">
        <div class="container-fluid">
            <div class="text-center text-white">
                <div class="h3 font-weight-bold">物價</div>
            </div>
        </div>
        <div class="container readmore-expand">
            <div class="row">
                @if ($tab->price_1 != '-')
                <div class="col-12 col-md-4 my-3 my-md-4">
                    <div class="bs p-16 bg-white text-center">
                        <div class="h5 font-weight-bold">麥當勞大麥克</div>
                        <div class="h5">{{ $tab->price_1 }}</div>
                        <i class="icon-city-hamburger"></i>
                    </div>
                </div>
                @endif
                @if ($tab->price_2 != '-')
                <div class="col-12 col-md-4 my-3 my-md-4">
                    <div class="bs p-16 bg-white text-center">
                        <div class="h5 font-weight-bold">白吐司500克</div>
                        <div class="h5">{{ $tab->price_2 }}</div>
                        <i class="icon-city-bread"></i>
                    </div>
                </div>
                @endif
                @if ($tab->price_3 != '-')
                <div class="col-12 col-md-4 my-3 my-md-4">
                    <div class="bs p-16 bg-white text-center">
                        <div class="h5 font-weight-bold">礦泉水</div>
                        <div class="h5">{{ $tab->price_3 }}</div>
                        <i class="icon-city-water"></i>
                    </div>
                </div>
                @endif
                @if ($tab->price_4 != '-')
                <div class="col-12 col-md-4 my-3 my-md-4">
                    <div class="bs p-16 bg-white text-center">
                        <div class="h5 font-weight-bold">牛奶</div>
                        <div class="h5">{{ $tab->price_4 }}</div>
                        <i class="icon-city-milk"></i>
                    </div>
                </div>
                @endif
                @if ($tab->price_5 != '-')
                <div class="col-12 col-md-4 my-3 my-md-4">
                    <div class="bs p-16 bg-white text-center">
                        <div class="h5 font-weight-bold">單程地鐵票</div>
                        <div class="h5">{{ $tab->price_5 }}</div>
                        <i class="icon-city-subway"></i>
                    </div>
                </div>
                @endif
                @if ($tab->price_6 != '-')
                <div class="col-12 col-md-4 my-3 my-md-4">
                    <div class="bs p-16 bg-white text-center">
                        <div class="h5 font-weight-bold">單程公車</div>
                        <div class="h5">{{ $tab->price_6 }}</div>
                        <i class="icon-city-bus"></i>
                    </div>
                </div>
                @endif
                @if ($tab->price_7 != '-')
                <div class="col-12 col-md-4 my-3 my-md-4">
                    <div class="bs p-16 bg-white text-center">
                        <div class="h5 font-weight-bold">電影票</div>
                        <div class="h5">{{ $tab->price_7 }}</div>
                        <i class="icon-city-ticket"></i>
                    </div>
                </div>
                @endif
            </div>
        </div>

    </div>

    <!-- 印象 -->
    @if (!is_null($impression))
    <div class="container-fluid">
        <div class="container">
            <div class="row no-gutters">
                <div class="col-12 col-md-6 picwall">
                    <div class="embed__img card h-100" style="background-image: url({{ asset($impression->pic_1) }})">
                        {{-- <img class="card-img" src="{{ asset($impression->pic_1) }}"> --}}
                        <div class="card-img-overlay d-flex flex-column justify-content-end text-white">
                            <div class="h3 font-weight-bold mb-4">{{ $impression->title }}</div>
                            <p class="h5">
                                {!! nl2br($impression->description) !!}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="row no-gutters">
                        <div class="col-12 col-md-6" style="height: 580px;">
                            <div class="embed__img h-50" style="background-image: url({{ asset($impression->pic_2) }})"></div>
                            <!-- <img class="card-img" src="../assets/img/uploads/city-features-image-2.jpg" alt=""> -->
                            <div class="embed__img h-50" style="background-image: url({{ asset($impression->pic_3) }})"></div>
                        </div>
                        <div class="col-12 col-md-6" style="height: 580px;">
                            <div class="embed__img h-50" style="background-image: url({{ asset($impression->pic_4) }})"></div>
                            <!-- <img class="card-img" src="../assets/img/uploads/city-features-image-2.jpg" alt=""> -->
                            <div class="embed__img h-50" style="background-image: url({{ asset($impression->pic_5) }})"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if (count($school_list) > 0)
    <!-- 推薦學校 -->
    <div class="container">
        <div class="text-center">
            <div class="h3 font-weight-bold mt-6 mt-md-14 mb-10">推薦學校</div>
        </div>
        @foreach ($school_list as $k => $v)
        <div class="row align-items-center row-scholarship" @if ($k > 2) style="display:none;" @endif>
            <div class="col-12 col-md-6">
                @if (isset($v->school->schoolImage))
                @foreach ($v->school->schoolImage as $i)
                <div class="text-center">
                    <div class="embed__img py-md-13" style="background-image: url({{$i->url}});">
                        <div class="py-25 py-md-25"></div>
                    </div>
                </div>
                @break
                @endforeach
                @endif
                {{-- <img class="img-fluid" src="/assets/img/uploads/recommand-school-image-1.jpg" alt=""> --}}
            </div>
            <div class="col-12 col-md-6">
                <div class="px-4 px-md-10 py-5">
                    <div class="h5 font-weight-bold mb-3">{{$v->school->name}}</div>
                    <p>
                        {!!$v->school->feature!!}
                    </p>
                    @if ($v->school->school_type == 'ST010')
                    <a class="btn btn-primary" href="{{ route('search_school-content', $v->school_id) }}">瞭解更多</a>
                    @else
                    <a class="btn btn-primary" href="{{ route('search_school-content', $v->school_id) }}">瞭解更多</a>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
        @if (count($school_list) > 3)
        <div class="text-center">
            <a class="btn btn-primary more" href="javascript:void(0);">看更多學校</a>
        </div>
        @endif
    </div>
    @endif
</main>
@stop
@section('js')
<!-- single -->
<script src="/assets/js/vendor/jquery.readmore.min.js"></script>
<script>
$('.more').click(function () {
    $(this).parent().hide();
    $('.row-scholarship').show();
});

$('.slick-nav').slick();

$('.readmore-expand').readmore({
    speed: 500,
    collapsedHeight: 350,
    moreLink: '<p class="text-center"><a class="btn btn-primary" href="#">展開</a></p>',
    lessLink: '<p class="text-center"><a class="btn btn-primary" href="#">隱藏</a></p>',
});
</script>
@stop