@extends('frontend.layouts.app')

@section('meta')
    <meta name="description" content="{{ getCachedOption('site_description_'.App::getLocale()) }}">
@endsection

@section('title', '最新消息')

@section('main')
<div class="full-more-layout" style="background:url(/frontend/images/bg-more-layout.png) no-repeat center;background-size:cover;">
    <div class="breadcrumbs">
        <div class="inner-container">
            <ul>
                <li><a href="{{ route('tsvn.home') }}">首頁</a></li>
                <li>最新消息</li>
            </ul>
        </div>
    </div>
</div>

<main class="full-content full-page page-news">
    <div class="inner-container">
        <h1 class="tt-page">最新消息</h1>
        <div class="main-page">
            <ul class="list-news flex row" id="news-data">
                
            </ul>
            <div class="page-navi">
                @for($i=1; $i <= $news->lastPage(); $i++)
                    <button type="button" id="page{{ $i }}" data-page="{{ $i }}" class="change-page">{{ $i }}</button>
                @endfor
            </div>
        </div>
    </div>
</main>
@endsection

@push('js')
<script>
$(document).ready(function() {
    $(".change-page").click(function(event) {
        event.preventDefault();
        var page = $(this).data('page');;
        changePage(page);
    });

    function changePage(page) {
        $.ajax({
                type: "GET",
                dataType: 'html',
                url: '/news/change-page',
                data: 'page=' + page,
            })
            .success(function(data) {
                $("#news-data").html(data);
                $(".change-page").removeClass("active");
                $("#page"+page).addClass("active");
            });
    }
    changePage(1);
})
</script>
@endpush