@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-projects">
    <div class="inner-container">
        <h1 class="tt-page">成功案例</h1>
        <div class="main-page">
            <div class="cate-projects">
                <ul>
                    <li id="themeall" class="theme-item"><a href="" data-item="all" class="change-theme">全部</a></li>
                    @foreach($themes as $theme)
                    <li id="theme{{ $theme->id }}" class="theme-item"><a href="" data-item="theme{{ $theme->id }}" class="change-theme">{{ $theme->name }}</a></li>
                    @endforeach
                    <li id="themeother" class="theme-item"><a href="" data-item="other" class="change-theme">其他</a></li>
                </ul>
            </div>
            <div class="list-project flex row" id="projects-data">
                
            </div>
           
            <div class="view-more-project">
                <button type="button" class="btn-view-project" id="view-more">瀏覽更多</button>
            </div>
        </div>
    </div>
</main>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        let themeId = 'all';
        let limit = 9;
		
		 loadProjectDatas(themeId, limit);

        $(".change-theme").click(function(event) {
            event.preventDefault();
            let itemId = $(this).data('item');
            
            if(itemId == 'all' || itemId == 'other'){
                themeId = itemId;
            } else {
                //themeId = itemId.match(/\d/g).join("");
				themeId = itemId.slice(5);
				//console.log(themeId);
            }
            var currentThemeId = $('.theme-template').data('theme');
            if(themeId != currentThemeId){
                limit = 9;
                loadProjectDatas(themeId, limit);
            } else {
                loadProjectDatas(themeId, limit);
            }
            
        });

        $(".btn-view-project").click(function(event) {
            event.preventDefault();
            limit+=6;
            var themeId = $('.theme-template').data('theme');
            loadProjectDatas(themeId, limit);
        });

        function loadProjectDatas(theme_id, limit){
            $.ajax({
                type: 'get',
                dataType: 'html',
                url: '/projects/projects-item',
                data: 'theme_id=' + themeId + '&limit=' + limit,
                success: function(response) {
                    $("#projects-data").html(response + '<span class="theme-project" data-theme="'+theme_id+'"></span>');
                    // console.log(response);
                    let totalData = $('.total-data').data('count-data');
					let currentData = $('.count-current-data').data('data');
                    // console.log(limit);
                    // console.log(totalData);
                     if(totalData <= 9 || limit >= totalData){ 
                        $('#view-more').hide();
                    } else {
                        $('#view-more').show();
                    }
					
					$(".theme-item").removeClass("active-cate");
                    $("#theme"+themeId).addClass("active-cate");
                }
            });
        }
        
    })
</script>
@endpush