@extends('fronts.layouts.index_layout')

<!-- Document Title
============================================= -->
@section('content')

<!-- Document Wrapper
    ============================================= -->
<!-- Page Title-->
@include('fronts.layouts._page_title')
<!-- #page-title end -->

<!-- Content
        ============================================= -->
<section id="content">
    <div class="content-wrap">
        <div class="container clearfix">
            <div class="row justify-content-center gutter-50 blocks-faqs-3">
                @include('fronts.layouts._sidebar')
                <div class="postcontent col-lg-9 order-lg-last">
                    <!-- Posts
							============================================= -->
                    <div id="posts" class="post-timeline">

                        @foreach($article_categorys as $k=>$v)
                            @foreach($article[$v->id] as $row)
                                <div class="entry" id="category-{{$v->id}}">
                                    <div class="entry-timeline">
                                        {{date('d',strtotime($row['published_at']))}}日<span>{{date('m',strtotime($row['published_at']))}}月</span>
                                        <div class="timeline-divider"></div>
                                    </div>
                                    <div class="entry-title" style="display: flex; justify-content: space-between;" id="article-{{$row['id']}}">
                                        <h2> {{$row['title']}}</h2>
                                        <a href="{{url('news')}}" style="color: #444; font-size: 1.250em; display: flex; align-items: center;">
                                            <div class="fab fa-facebook" style="color: #444; font-size: 1.875em;" data-layout="standard" data-action="like" data-share="true"></div>
                                            <div style="font-size: 1.000em;">分享連結</div>
                                        </a>
                                    </div>
                                    <div class="entry-meta mb-3">
                                        <ul>
                                            <li><i class="icon-folder-open"></i>{{$row['publish_department']}}</li>
                                            <li><i class="fas fa-calendar-week"></i>{{date('Y-m-d', strtotime($row['published_at']))}}</li>
                                        </ul>
                                    </div>
                                    <div class="read-more-wrap style-bg">
                                        {!!$row['content']!!}
                                    </div>
                                </div>
                            @endforeach
                        @endforeach

                    </div><!-- #posts end -->

                </div>
            </div>
        </div>
    </div>
</section>

<script>
    jQuery(document).ready(function($) {
        var $faqItems = $('#faqs .faq');
        if (window.location.hash != '') {
            var getFaqFilterHash = window.location.hash;
            var hashFaqFilter = getFaqFilterHash.split('#');
            if ($faqItems.hasClass(hashFaqFilter[1])) {
                $('.grid-filter li').removeClass('activeFilter');
                $('[data-filter=".' + hashFaqFilter[1] + '"]').parent('li').addClass('activeFilter');
                var hashFaqSelector = '.' + hashFaqFilter[1];
                $faqItems.css('display', 'none');
                if (hashFaqSelector != 'all') {
                    $(hashFaqSelector).fadeIn(500);
                } else {
                    $faqItems.fadeIn(500);
                }
            }
        }

        $('.grid-filter a').on('click', function() {
            $('.grid-filter li').removeClass('activeFilter');
            $(this).parent('li').addClass('activeFilter');
            var faqSelector = $(this).attr('data-filter');
            $faqItems.css('display', 'none');
            if (faqSelector != 'all') {
                $(faqSelector).fadeIn(500);
            } else {
                $faqItems.fadeIn(500);
            }
            return false;
        });
    });

    // -------------scrollTo--------------------------------
    $(".scroll").click(function() {
        var scroll = document.getElementsByClassName('scroll');
        var data = $(this).attr('data-scrollto');
        console.log(data) ;
        $('html, body').animate({
            scrollTop: $(data).offset().top - 140 + 'px'
        }, 1000);
    });

</script>

@endsection