@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@extends('layouts.frontend')
@section('title', $cm->meta_title)
@section('meta_description', $cm->meta_description)
@section('meta_keywords', $cm->meta_keyword)
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'countries_study-accommodation', $country->country_id, $country->country_name))
@section('content')
<!-- kv-countries-study -->
<div id="kv-countries-study">@include('frontend.module.kv-countries-study')</div>
<!-- ./kv-countries-study -->

<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>
</nav>

<div class="container breadcrumbs">
    {{ Breadcrumbs::render('countries_study-accommodation', $country->country_id, $country->country_name) }}
</div>

<main class="main">
    <div class="container-fluid">
        <div class="container">
        <div class="row align-items-center no-gutters row-accommodation">
            <div class="col-12 col-lg-3">
                <div class="h3 font-weight-bold mb-6 px-6">住宿情報</div>
                <div class="nav flex-column nav-pills">
                    @foreach ($list as $k => $v)
                    <a class="nav-link h5 m-0 px-6 py-4 @if ($k != (count($list) - 1)) border-bottom @endif @if ($k == 0) active @endif" data-toggle="pill" href="#pills-{{$k}}">{{$v->tab_title}}</a>
                    @endforeach
                    {{-- <a class="nav-link h5 m-0 px-6 py-4 border-bottom" data-toggle="pill" href="#pills-un-dormitory">大學-學生宿舍</a> --}}
                    {{-- <a class="nav-link h5 m-0 px-6 py-4" data-toggle="pill" href="#pills-language-dormitory">語言宿舍-學生宿舍</a> --}}
                </div>
            </div>
            <div class="col-12 col-lg-9">
                <div class="tab-content" id="pills-tabContent">
                    @foreach ($list as $k => $v)
                    <div class="tab-pane fade show @if ($k == 0) active @endif" id="pills-{{$k}}">
                        <div class="card card-acc">
                            <div class="embed__img" style="background-image: url({{ asset($v->pic) }});">
                            </div>
                            {{-- <img class="card-img" src="{{ asset($v->pic) }}"> --}}
                            <div class="card-img-overlay">
                                <div class="card-content">
                                <div class="h5 font-weight-bold mb-4">{{ $v->title }}</div>
                                <p>
                                    {!! $v->description !!}
                                </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach

                    {{-- <div class="tab-pane fade" id="pills-un-dormitory">
                        <div class="card card-acc">
                            <img class="card-img" src="/assets/img/uploads/accommodation-image-2.jpg" alt="">
                            <div class="card-img-overlay">
                                <div class="card-content">
                                <div class="h5 font-weight-bold mb-4">大學-學生宿舍</div>
                                    <p>大學所提供的宿舍選項，通常分為學生宿舍(Dormitary)及學生公寓(Apartment)兩種。學生宿舍(Dormitary)多屬於大學校內宿舍，學校會提供最基本的房間設備，通常衛浴設備為公用，少為2-4人；多則屬於Hallway需與同一層的同學一起共用。校內學生宿舍多數不會提供廚房設備，住宿費可選擇含餐費的選項，可於校內餐廳用餐或額外購買參卷或餐卡。學生公寓(Apartment)與學生宿舍最大不同是除了基本的房間設備外，會與同一戶的同學共用廚房及客廳而不提供餐食，多數廁所也為共用，少數房型有私人衛浴，預定時需多加注意。</p>
                                    <p>學生公寓與學校的距離相對近，其交通距離因國家及城市不同，平均的交通時間約為20-30分鐘不等，而學生宿舍位於校園內，多數可步行上學，少數則需要搭乘學校接駁車。</p>
                                    <p>學生宿舍最大的優點為有較多的社交生活，容易認識同住在宿舍中的同學，除非特殊要求，一般都事在入住之後才會知道室友，而室友的安排多以不同國籍住一間，以達到文化交流及練習英文的目的。</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-language-dormitory">
                        <div class="card card-acc">
                            <img class="card-img" src="/assets/img/uploads/accommodation-image-3.jpg" alt="">
                            <div class="card-img-overlay">
                                <div class="card-content">
                                <div class="h5 font-weight-bold mb-4">語言學校-學生宿舍</div>
                                    <p>語言學校的學生宿舍多座落於鄰近語言學校的市中心，多數為學校與旅館或當地地產公司合作之住宿選項，此種宿舍裡多為其他語言學校就讀的學生、當地的大學生及一般旅客；少數語言學校會有獨立經營的學生公寓。語言學校的宿舍房型選擇較多元，學生可選擇單人房、雙人房、是否有私人衛浴或是選擇有含餐宿舍，居住在學校宿舍的學生，自主程度及自由度較大，多數宿舍也位於生活機能相當完善的地方。</p>
                                    <p>學校宿舍與學校的距離較近，其交通距離因國家及城市不同，平均的交通時間約為20-40分鐘不等，適合可獨立自主生活的學生。</p>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>
        </div>
    </div>
</main>
@stop

@section('js')
<!-- single -->
<script src="/assets/js/vendor/jquery.readmore.min.js"></script>
<script>
if ($('.col-2').length > 6) {
    $('.slick-nav').slick({
        initialSlide: 1,
    });
} else {
    $('.slick-nav').slick();
}

new Readmore('.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