@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@extends('layouts.frontend')
@section('title', $page->meta_title)
@section('meta_description', $page->meta_description)
@section('meta_keywords', $page->meta_keyword)
@section('css')
    <style>
        button.editable, button.editable-right {
            position: absolute;
            z-index: 19;
            border: solid 1px #fff;
            line-height: 1rem;
            font-size: small;
            font-weight: bold;
            background: rgba(220,53,69,0.8);
        }
        button.editable-right {
            right: 0;
        }

        .kv-item *:hover {
            cursor: pointer;
            opacity: 0.8
        }

        .sub-h4 {
            font-size: small;
            color: #828282
        }
        .custom-control-label {
            font-size: small;
        }
        .custom-checkbox {
            display: flex;
            align-items: center;
        }

        .school-search {
            background: #6EC12D;
            padding: 1rem
        }
        .school-search select {
            padding: 0.5em 3.5em 0.5em 1em;
            background-color: transparent;
            border: solid 1px #fff;
            border-radius: 0;
            color: #fff;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
        .school-search select option {
            color: #000
        }
        .school-search select {
            background-image:
                linear-gradient(45deg, transparent 50%, #fff 50%),
                linear-gradient(135deg, #fff 50%, transparent 50%),
                linear-gradient(to right, #fff, #fff);
            background-position:
                calc(100% - 20px) calc(1em + 2px),
                calc(100% - 15px) calc(1em + 2px),
                calc(100% - 2.5em) 0.5em;
            background-size:
                5px 5px,
                5px 5px,
                1px 1.5em;
            background-repeat: no-repeat;
        }
        .school-search select:focus {
            background-image:
                linear-gradient(45deg, green 50%, transparent 50%),
                linear-gradient(135deg, transparent 50%, green 50%),
                linear-gradient(to right, #ccc, #ccc);
            background-position:
                calc(100% - 15px) 1em,
                calc(100% - 20px) 1em,
                calc(100% - 2.5em) 0.5em;
            background-size:
                5px 5px,
                5px 5px,
                1px 1.5em;
            background-repeat: no-repeat;
            border-color: green;
            outline: 0;
        }

        .school-search button {
            width: 100%
        }
        #school-search-form {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        #school-search-form select {
            flex: 1 0 100%;
            margin-bottom: .3rem
        }
        #school-search-form button {
            flex: 1;
            padding: 0.5em 1em 0.5em 1em;
        }
        #school-search-form p {
            color: #fff;
            margin: 0 1rem 1rem 0;
            line-height: 1.2;
            width: 100%;
            font-size: large;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #school-search-form p i {
            font-size: x-large;
            margin-right: .5rem
        }

        #student-review {
            position: relative;
        }
        #student-review .owl-nav {
            justify-content: flex-end;
            position: absolute;
            width: auto;
            height: 1rem;
            top: 0;
            left: auto;
            right: 0;
            background: transparent;
        }
        #student-review .owl-prev,
        #student-review .owl-next {
            flex: 1 0 1rem;
            width: 1rem;
            height: 1rem
        }

        .experience-item {
            display: flex;
            flex-direction: column;
        }
        .experience-item .-image {
            max-width: 100%;
            height: 210px;
            margin-bottom: 1rem;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .experience-item .-content {
            margin-bottom: 2rem
        }

        .right-section {
            margin-top: 3rem
        }

        .index-section-hot {
            display: none;
        }

        @media (min-width: 768px) {
            .experience-item {
                flex-direction: row;
            }
            .experience-item .-image {
                flex: 1 0 210px;
                width: 210px;
                margin-bottom: 0
            }
            .experience-item .-content {
                padding-left: 1rem
            }
            #experience .owl-dots {
                margin-bottom: 0
            }

            .right-section {
                margin-top: 0
            }

            .index-section-hot {
                display: block;
            }
        }

        ul.right-list {
            list-style-type: none;
            margin: 2rem 0 0 0;
            padding: 0
        }
        ul.right-list li {
            display: flex;
            align-items: center;
            padding: 1.5rem 1rem;
        }
        ul.right-list li a {
            margin-right: 1rem
        }
        ul.right-list li a i {
            font-size: 60px
        }


        @foreach ($list_2 as $k => $v)
        .kv-item-{{($k + 1)}} {
            background-image: url('{{ asset($v->pic_m) }}');
        }
        @endforeach

        @media (min-width: 768px) {
            .school-search button {
                width: auto;
            }
            #school-search-form {
                flex-wrap: nowrap;
                margin-left: -10px;
            }
            #school-search-form select {
                flex: 1 1 auto;
                margin: 0 10px;
            }
            #school-search-form p {
                margin-bottom: 0;
                font-size: medium;
                font-weight: normal;
                width: auto;
            }

            @foreach ($list_2 as $k => $v)
            .kv-item-{{($k + 1)}} {
                background-image: url('{{ asset($v->pic) }}');
            }
            @endforeach
        }
    </style>
@endsection
@section('content')
    <div class="kv">
        <div class="kv-list js-carousel">
            @foreach ($list_2 as $k => $v)
            <a class="kv-item kv-item-{{($k + 1)}} d-block" href="{{ $v->url }}">
                <div class="jumbotron">
                    <h2 class="jumbotron__caption">{{$v->title}}</h2>
                    <p class="txt mb-6">{{$v->description}}</p>
                </div>
            </a>
            @endforeach
        </div>
    </div>

    <div class="school-search">
        <div class="container">
            <form name="school-search-form" id="school-search-form" method="get" action="{{ route('search') }}">
                <p><i class="fas fa-school"></i> 請搜尋有興趣的學校</p>
                <select name="type">
                    <option value="language">遊學</option>
                    <option value="degree">留學</option>
                </select>

                <select name="country" id="school-search-country">
                    <option value="">所有國家</option>
                    @foreach ($country_list as $k => $v)
                        <option value="{{$v->country_name_en}}">{{$v->country_name}}</option>
                    @endforeach
                </select>

                <select name="city[]" id="school-search-city" disabled>
                    <option value="">城市</option>
                </select>

                <button class="btn btn-white" type="submit">學校搜尋 <i class="fas fa-search"></i></button>
            </form>
        </div>
    </div>

    <main class="main p-0">

        <!-- 熱門遊學課程 -->
        <div class="container px-0 px-md-3 index-section-course" style="margin-top: 5rem">
            <br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function _contentType() in /home/edmedu/www/edmtw.com/dev.bak/resources/views/frontend/main.blade.php:286
Stack trace:
#0 {main}
  thrown in <b>/home/edmedu/www/edmtw.com/dev.bak/resources/views/frontend/main.blade.php</b> on line <b>286</b><br />