@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@extends('layouts.frontend')
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'study-article'))
@section('content')
<style>
h3, .h3 {
    font-size: 1.5rem;
}
</style>
<!-- kv-share -->
<div id="kv-share">@include('frontend.module.kv-share')</div>
<!-- ./kv-share -->

<nav class="nav-main">
    <div class="nav-primary">
        <div class="container d-none d-lg-block slick-nav">
            <div class="row no-gutters d-flex">
                <div class="col-2">
                    <a class="nav-link active" href="{{ route('share_study-article') }}">留學後記</a>
                </div>
                <div class="col-2">
                    <a class="nav-link" href="{{ route('share_language-article') }}">遊學後記</a>
                </div>
                <div class="col-2">
                    <a class="nav-link" href="{{ route('share_thanks-edm') }}">感謝 ed:m</a>
                </div>
            </div>
        </div>
        <div class="d-lg-none">
            <select class="custom-select" onchange="location = this.value;">
                <option value="{{ route('share_study-article') }}" selected>留學後記</option>
                <option value="{{ route('share_language-article') }}">遊學後記</option>
                <option value="{{ route('share_thanks-edm') }}">感謝 ed:m</option>
            </select>
        </div>
    </div>
    <div class="nav-secondary">
        <div class="container d-none d-lg-block">
            <nav class="navbar">
                <ul class="nav nav-pills mr-auto">
                    <li class="nav-item">
                        <div class="nav-link font-weight-bold">分類</div>
                    </li>
                    @foreach ($filter_list as $filter)
                    <li class="nav-item dropdown w-min">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <div>
                                {{$filter->filter_name}}
                                @if (request()->input('filter'))
                                <span class="badge badge-primary badge-counter">
                                {{sizeof(explode(',', request()->input('filter')))}}
                                </span>
                                @endif
                                {{-- <span class="badge badge-primary badge-counter">2</span> --}}
                            </div>
                        </a>
                        <div class="dropdown-menu">
                            @foreach ($filter->filterDetail as $k => $v)
                            <div class="dropdown-item">
                                <div class="custom-control custom-checkbox">
                                        {{-- 1{{request()->has('filter')}}1 --}}
                                    <input type="checkbox" class="custom-control-input" name="filter[]" id="fd-{{$v->fd_id}}" value="{{$v->fd_id}}" @if (in_array($v->fd_id, explode(',', request()->input('filter')))) checked @endif>
                                    <label class="custom-control-label w-100" for="fd-{{$v->fd_id}}">{{$v->fd_name}}</label>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </li>
                    @endforeach
                </ul>
                 <div class="my-2 my-lg-0">
                    <a class="btn btn-link btn-sm text-info submit" href="javascript:void(0);">
                        <i class="fas fa-sm fa-redo-alt mr-2"></i>搜尋
                    </a>
                </div> 
                <div class="my-2 my-lg-0">
                    <a class="btn btn-link btn-sm text-info reset" href="javascript:void(0);">
                        <i class="fas fa-sm fa-redo-alt mr-2"></i>重新整理
                    </a>
                </div>
            </nav>
        </div>
        <div class="d-lg-none">
            <div class="list-group list-group-flush border-bottom">
                <a class="list-group-item bg-light" data-toggle="collapse" href="#collapse-filter">
                    <div>
                        分類 
                        {{-- <span class="badge badge-primary badge-counter">2</span> --}}
                        @if (request()->input('filter'))
                        <span class="badge badge-primary badge-counter">
                        {{sizeof(explode(',', request()->input('filter')))}}
                        </span>
                        @endif
                    </div>
                </a>
                <div id="collapse-filter" class="collapse border-top" role="tabpanel">
                    @foreach ($filter_list as $filter)
                    <a class="list-group-item" data-toggle="collapse" href="#collapse-filter-{{$filter->filter_id}}">
                        {{$filter->filter_name}}
                    </a>
                    <div id="collapse-filter-{{$filter->filter_id}}" class="collapse collapse-sub border-top" role="tabpanel">
                        <div class="list-group-item">
                            @foreach ($filter->filterDetail as $k => $v)
                            <div class="custom-control custom-checkbox my-2">
                                <input type="checkbox" class="custom-control-input" name="filter[]" id="fdm-{{$v->fd_id}}" value="{{$v->fd_id}}" @if (in_array($v->fd_id, explode(',', request()->input('filter')))) checked @endif>
                                <label class="custom-control-label w-100" for="fdm-{{$v->fd_id}}">{{$v->fd_name}}</label>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                    <a class="list-group-item list-group-item-action text-info text-center mobile_submit" href="javascript:void(0);">
                        <i class="fas fa-sm fa-redo-alt mr-2"></i>搜尋
                    </a>
                    <a class="list-group-item list-group-item-action text-info text-center reset" href="javascript:void(0);">
                        <i class="fas fa-sm fa-redo-alt mr-2"></i>重新整理
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>

<div class="container breadcrumbs">
    {{ Breadcrumbs::render('study-article') }}
</div>

<main class="main study-article">
    <div class="container">
        <div class="card-grid">
            <div class="card-sizer"></div>
            @foreach ($article_list as $k => $v)
            <div class="card my-4">
                <img class="card-img-top" src="{{ asset($v->pic) }}">
                <div class="card-body px-0">
                    <div class="">
                        <a class="font-weight-bold text-muted" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">{{ $v->articleCategory->ac_name }}</a>｜{{ $FrontendPresenter->articleDate($v->date) }}
                    </div>
                    <a class="card-title h3 font-weight-bold d-block my-2" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">{{ $v->title }}</a>
                    <p class="card-text text-row-2 mb-8">{{ $v->summary }}</p>
                    <a class="btn btn-primary" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">繼續閱讀</a>
                </div>
            </div>
            @endforeach
        </div>

        <nav class="mt-10">
            <!-- nav-pagination -->
            <div id="nav-pagination">
                {!! $FrontendPresenter->pagination($article_list) !!}
            </div>
            <!-- ./nav-pagination -->
        </nav>
    </div>
</main>
@stop
@section('js')
<script>
@if (count($article_list) == 0)
alert('目前沒有符合的文章，請重新選擇！');
location.href = '{{ asset(explode('?', $_SERVER['REQUEST_URI'])[0]) }}';
@endif

$('.submit').click(function () {
    var filter=[]; 
    $('.dropdown-item input[name="filter[]"]:checked').each(function(){
       
        filter.push($(this).val());

    });
    filter = filter.join(",");
    if (filter.length > 0) {
        location.href = window.location.href.split('?')[0]+'?filter=' + filter;
    } else {
        location.reload();
    }
});

$('.mobile_submit').click(function () {
    var filter=[]; 
    $('.list-group-item input[name="filter[]"]:checked').each(function(){
       
        filter.push($(this).val());

    });
    filter = filter.join(",");


    if(filter.length>0){
        location.href = window.location.href.split('?')[0]+'?filter=' + filter;

    }else{
        location.reload();

    }
});


$('input[name="filter[]"]').click(function () {
    var filter_id = $(this).val();
    var checked = $(this).prop('checked');
    if (!checked) {
        $('input[name="filter[]"][value="' + filter_id + '"]').prop('checked', false);
    }
    var filter = $('input[name="filter[]"]:checked').map(function(){
        return this.value;
    }).get().join(',');

   // location.href = '?filter=' + filter;
});
        
$('.reset').click(function () {
    $('input[name="filter[]"]').prop('checked', false);
    location.href = '/share/study-article';
});
</script>
<!-- single -->
<script src="/assets/js/vendor/imagesloaded.pkgd.min.js"></script>
<script src="/assets/js/vendor/masonry.pkgd.min.js"></script>
<script>
var $grid = $('.card-grid').imagesLoaded( function() {
    $grid.masonry({
        itemSelector: '.card',
        percentPosition: true,
        columnWidth: '.card-sizer'
    });
});


// $.home();
</script>
@stop