@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@extends('layouts.frontend')
@foreach ($tab_list as $k => $v)
@if ($tab_id == $v->id) 
@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_study-recommand-courses', $country->country_id, $country->country_name, $tab_id, $tab->title))
@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 ($tab_id == $v->id) active @endif" href="/countries/study-recommand-courses/{{ request()->segment(3) }}/{{ $v->id }}">{{ $v->title }}</a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</nav>

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

<main class="main">
    @foreach ($course_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">
                    <div class="text-center">
                        <div class="embed__img py-md-10 mb-6 mb-md-0" style="background-image: url({{ asset($v->pic) }});">
                            <div class="py-25 py-md-25"></div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="h3 font-weight-bold mb-3">{{ $v->title }}</div>
                    <p>
                        {!! nl2br($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">
                <div class="text-center">
                    <div class="embed__img py-md-10 mb-6 mb-md-0" style="background-image: url({{ asset($v->pic) }});">
                        <div class="py-25 py-md-25"></div>
                    </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>
                    {!! nl2br($v->description) !!}
                </p>
            </div>
        </div>
        </div>
    </div>
    @endif
    @endforeach
    
    @if (count($intro_list) > 0)
    <!-- 介紹學校推薦課程 -->
    <div class="container-fluid">
        <div class="container">
            <div class="text-center">
                <div class="h3 font-weight-bold mt-6 mt-md-14 mb-10">介紹學校推薦課程</div>
            </div>
            <div class="slick-school">
                @foreach ($intro_list as $k => $v)
                <div id="carousel-course-{{$k}}" class="carousel slide" data-ride="carousel">
                    <div class="row no-gutters">
                        <div class="col-12 col-lg-6">
                            <div class="carousel-inner">
                                @if ($v->pic_1 != '')
                                <div class="carousel-item active">
                                    <div class="d-block w-100 embed__img py-md-25" style="background-image: url({{ asset($v->pic_1 )}});" alt="First slide">
                                        <div class="py-25 py-md-25"></div>
                                    </div>
                                    {{-- <img class="d-block w-100" src="{{ asset($v->pic_1 )}}" alt="First slide"> --}}
                                </div>
                                @endif
                                @if ($v->pic_2 != '')
                                <div class="carousel-item">
                                    <div class="d-block w-100 embed__img py-md-25" style="background-image: url({{ asset($v->pic_2 )}});" alt="Second slide">
                                        <div class="py-25 py-md-25"></div>
                                    </div>
                                    {{-- <img class="d-block w-100" src="{{ asset($v->pic_2 )}}" alt="Second slide"> --}}
                                </div>
                                @endif
                                @if ($v->pic_3 != '')
                                <div class="carousel-item">
                                    <div class="d-block w-100 embed__img py-md-25" style="background-image: url({{ asset($v->pic_3 )}});" alt="Third slide">
                                        <div class="py-25 py-md-25"></div>
                                    </div>
                                    {{-- <img class="d-block w-100" src="{{ asset($v->pic_3 )}}" alt="Third slide"> --}}
                                </div>
                                @endif
                                @if ($v->pic_4 != '')
                                <div class="carousel-item">
                                    <div class="d-block w-100 embed__img py-md-25" style="background-image: url({{ asset($v->pic_4 )}});" alt="Four slide">
                                        <div class="py-25 py-md-25"></div>
                                    </div>
                                    {{-- <img class="d-block w-100" src="{{ asset($v->pic_3 )}}" alt="Third slide"> --}}
                                </div>
                                @endif
                            </div>
                        </div>

                        <div class="col-12 col-lg-6">
                            <div class="row h-100">
                                <div class="px-3 px-md-8 col-12">
                                    <div class="my-6">
                                        <div class="embed__img" style="width: 158px; height: 53px; background-image: url({{ asset($v->logo )}});">
                                        </div>
                                        {{-- <img class="img-fluid" src="{{ asset($v->logo )}}"> --}}
                                    </div>
                                    <div class="h5 font-weight-bold mb-3">{{ $v->title }}</div>
                                    <p>
                                        {!! $v->description !!}
                                    </p>
                                </div>
                                <div class="nav-responsive mt-auto col-12 order-first order-md-last">
                                    <ul class="bg-light nav py-3 px-2 carousel-indicators">
                                        @if ($v->pic_1 != '')
                                        <li data-target="#carousel-course-{{$k}}" data-slide-to="0" class="nav-item mx-1 active">
                                            <div class="embed__img" style="background-image: url({{ asset($v->pic_1) }});">
                                                <div class="px-13 py-13"></div>
                                            </div>
                                            {{-- <img class="img-fluid" src="{{ asset($v->pic_1) }}" width="130"> --}}
                                        </li>
                                        @endif
                                        @if ($v->pic_2 != '')
                                        <li data-target="#carousel-course-{{$k}}" data-slide-to="1" class="nav-item mx-1">
                                            <div class="embed__img" style="background-image: url({{ asset($v->pic_2) }});">
                                                <div class="px-13 py-13"></div>
                                            </div>
                                            {{-- <img class="img-fluid" src="{{ asset($v->pic_2) }}" width="130"> --}}
                                        </li>
                                        @endif
                                        @if ($v->pic_3 != '')
                                        <li data-target="#carousel-course-{{$k}}" data-slide-to="2" class="nav-item mx-1">
                                            <div class="embed__img" style="background-image: url({{ asset($v->pic_3) }});">
                                                <div class="px-13 py-13"></div>
                                            </div>
                                            {{-- <img class="img-fluid" src="{{ asset($v->pic_3) }}" width="130"> --}}
                                        </li>
                                        @endif
                                        @if ($v->pic_4 != '')
                                        <li data-target="#carousel-course-{{$k}}" data-slide-to="3" class="nav-item mx-1">
                                            <div class="embed__img" style="background-image: url({{ asset($v->pic_4) }});">
                                                <div class="px-13 py-13"></div>
                                            </div>
                                            {{-- <img class="img-fluid" src="{{ asset($v->pic_3) }}" width="130"> --}}
                                        </li>
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="text-center mt-3">
                <a class="btn-slick-prev text-dark" href="javascript:void();">
                    <i class="fas fa-chevron-left"></i>
                </a>
                <span class="slick-count mx-8"></span>
                <a class="btn-slick-next text-dark" href="javascript:void();">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </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">
                <div class="text-center">
                    @if (isset($v->school->schoolImage))
                    @foreach ($v->school->schoolImage as $i)
                    <div class="embed__img py-md-13" style="background-image: url({{$i->url}});">
                        <div class="py-25 py-md-25"></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>
$('.more').click(function () {
    $(this).parent().hide();
    $('.row-scholarship').show();
});

var $status = $('.slick-count');
var $slickElement = $('.slick-school');

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
    //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
    var i = (currentSlide ? currentSlide : 0) + 1;
    $status.text(i + '/' + slick.slideCount);
});

$slickElement.slick({
    arrows: false,
    swipe: false
});

$('.btn-slick-prev').click(function(){
    $slickElement.slick('slickPrev');
});
$('.btn-slick-next').click(function(){
    $slickElement.slick('slickNext');
});

$('.slick-nav').slick();
</script>
@stop