@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)
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'countries_study-des', $country->country_id, $country->country_name, $tab->id, $tab->title))
@endif
@endforeach
@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>
    <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">
                        <a class="nav-link @if ($v->id == request()->segment(4) || ($k == 0 && request()->segment(4) == '')) active @endif " href="/countries/study-courses/{{ request()->segment(3) }}/{{ $v->id }}">{{$v->title}}</a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</nav>

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

<main class="main">
    <div class="container-fluid">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-10">
                    <div class="text-center">
                        <div class="h3 font-weight-bold mb-10">{{ $tab->course_title }}</div>
                    </div>
                    {!! $tab->course_description !!}
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid container-courses">
        <div class="object-bg"></div>
        <div class="container">
            <div class="row">
                @foreach ($course_list as $k => $v)
                <div class="col-12 col-md-6 my-3">
                    <figure class="pr-md-18 m-0">
                        <div class="embed__img py-md-8" style="background-image: url({{ asset($v->pic) }});">
                            <div class="py-25 py-md-25"></div>
                        </div>
                        {{-- <img class="img-fluid" src="{{ asset($v->pic) }}"> --}}
                    </figure>
                    <div class="p-8 bg-white">
                        <div class="h5 font-weight-bold">{{ $v->title }}</div>
                        <p class="my-4">
                            {!! $v->description !!}
                        </p>
                        <a class="btn btn-primary" href="{{ route('countries_study-courses-post', $v->sc_id) }}">閱讀更多</a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    @if ($tab->department_title != '')
    <div class="container-fluid container-department py-10">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-10 mb-10 text-white">
                    <div class="text-center">
                        <div class="h3 font-weight-bold mb-5">{{ $tab->department_title }}</div>
                    </div>
                    <p class="text-center">{!! $tab->department_description !!}</p>
                </div>

                <div class="col-12 col-md-4 mb-7">
                    <div class="p-10 bg-white h-100">
                        <div class="media align-items-center">
                            <div class="mr-5">
                                <div class="display-4 text-gray-4">01</div>
                            </div>
                            <div class="media-body">
                                <p>{!! $tab->department_description_1 !!}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-4 mb-7">
                    <div class="p-10 bg-white h-100">
                        <div class="media align-items-center">
                            <div class="mr-5">
                                <div class="display-4 text-gray-4">02</div>
                            </div>
                            <div class="media-body">
                                <p>{!! $tab->department_description_2 !!}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-4 mb-7">
                    <div class="p-10 bg-white h-100">
                        <div class="media align-items-center">
                            <div class="mr-5">
                                <div class="display-4 text-gray-4">03</div>
                            </div>
                            <div class="media-body">
                                <p>{!! $tab->department_description_3 !!}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container py-13">
        <div class="row">
            <div class="col-12 col-md-5 my-5">
                <div class="h3 font-weight-bold mb-6">{{ $tab->requirement_title }}</div>
                <p>{!! $tab->requirement_description !!}</p>
            </div>
            <div class="col-12 col-md-7">
                <div class="row">
                    <div class="col-12 col-md-6 my-5">
                        <div class="media align-items-center">
                            <i class="icon-courses-profile mx-4"></i>
                            <div class="media-body">
                                <p>{!! $tab->requirement_description_1 !!}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 my-5">
                        <div class="media align-items-center">
                            <i class="icon-courses-calendar mx-4"></i>
                            <div class="media-body">
                                <p>{!! $tab->requirement_description_2 !!}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 my-5">
                        <div class="media align-items-center">
                            <i class="icon-courses-chat mx-4"></i>
                            <div class="media-body">
                                <p>{!! $tab->requirement_description_3 !!}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 my-5">
                        <div class="media align-items-center">
                            <i class="icon-courses-rating mx-4"></i>
                            <div class="media-body">
                                <p>{!! $tab->requirement_description_4 !!}</p>
                            </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 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">
                <div class="text-center">
                    @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>
            <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();
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