@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@extends('layouts.frontend')
@foreach ($rank_type_list as $k => $v)
@if ($v->sr_id == $type_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-rank', $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" id="rank_{{$v->id}}">
                        <a class="nav-link @if ($v->id == $tab_id) active @endif" href="{{ route('countries_study-rank', [request()->segment(3), $v->id]) }}#rank_{{$v->id}}">{{$v->title}}</a>
                    </li>
                    @endforeach
                    {{-- <li class="nav-item">
                        <a class="nav-link" href="study-department-rank.html">科系綜合排名</a>
                    </li> --}}
                </ul>
            </div>
        </div>
    </div>
</nav>

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

<main class="main">
    <div class="container-fluid">
    <div class="container">
        <div class="position-releative text-center mb-10">
            @foreach ($tab_list as $k => $v)
            @if ($v->id == $tab_id)
            <div class="h3 font-weight-bold">{{$v->title}}</div>
            @foreach ($rank_type_list as $val)
            @if ($val->sr_id == $type_id) 
            <div class="text-date-source mt-1">{{$val->source}}</div>
            @endif
            @endforeach
            @endif
            @endforeach
        </div>
        <div class="nav-responsive text-center mb-10">
            <ul class="nav nav-rank justify-content-center">
                @foreach ($rank_type_list as $k => $v)
                <li class="nav-item" id="rank_detail_{{$v->sr_id}}">
                    <a class="btn @if ($v->sr_id == $type_id) btn-outline-primary @else btn-outline-secondary @endif mx-2" href="{{ route('countries_study-rank', [request()->segment(3), $tab_id, $v->sr_id]) }}#rank_detail_{{$v->sr_id}}">{{$v->title}}</a>
                </li>
                @endforeach
            </ul>
        </div>
        {{-- <div class="text-center mb-10">
            @foreach ($rank_type_list as $k => $v)
            <a class="btn @if ($v->sr_id == $type_id) btn-outline-primary @else btn-outline-secondary @endif m-1" href="{{ route('countries_study-rank', [request()->segment(3), $tab_id, $v->sr_id]) }}">{{$v->title}}</a>
            @endforeach
        </div> --}}
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th class="lead font-weight-bold text-center" nowrap>排行</th>
                            <th class="lead font-weight-bold">名稱</th>
                            {{-- @if (isset($rank_list[0]) && $rank_list[0]->score != '')
                            <th class="lead font-weight-bold text-center">總分</th>
                            @endif --}}
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($rank_list as $k => $v)
                        <tr>
                            <td class="text-center">{{$v->rank}}</td>
                            <td class="">{{$v->title}}</td>
                            {{-- @if (isset($rank_list[0]) && $rank_list[0]->score != '')
                            <td class="text-center">{{$v->score}}</td>
                            @endif --}}
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
</main>

    <!-- global-footer -->
    <div id="global-footer"></div>
    <!-- ./global-footer -->

</div>
@stop
@section('js')
<!-- single -->
<script src="/assets/js/vendor/jquery.readmore.min.js"></script>
<script>
    $('.slick-nav').slick();
    $.home();
    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>
{{-- 
    <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W53SKVJ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<script src="/assets/js/kule.urbrowser.min.js" id="urbrowser" data-domain="www.edmtw.com"></script>
	<script src="/assets/js/jquery/jquery-3.3.1.min.js?v=1537528068"></script>
	<script src="/assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="/assets/js/vendor/bootstrap.responsive-paginate.js"></script>
	<script src="/assets/js/vendor/jquery.slick.min.js"></script>
	<script src="/assets/js/vendor/jquery.hc-sticky.min.js"></script>
	<script src="/assets/js/vendor/jquery.pushy.min.js"></script>
	<script src="/assets/js/vendor/jquery.readmore.min.js"></script>
	<script src="/assets/js/jquery/jquery.scrollbar.min.js?v=1537528068"></script>
	<script src="/assets/js/jquery/owl.carousel.min.js?v=1537528068"></script>
	<script src="/assets/js/main.js?v=1538384436"></script>
	<script src="/assets/js/custom.js"></script>

    <!-- module include -->
    <script src="/assets/js/function/module.js"></script>
    <script>
        $("#kv-countries-study").load("../module/kv-countries-study.html");
    </script>

    <!-- single -->
    <script>
        $('.slick-nav').slick();
        $.home();
    </script> --}}
    @stop