@extends('layout.front')

@section('css_page_level')

<!--  生活資訊按鈕樣式  -->
<style type="text/css">
.button {
  display: inline-block;
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 10px;
  width: 30%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  vertical-align:middle
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  font-weight: bold;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
<!--  生活資訊按鈕樣式  -->

<!--  生活資訊內文樣式  -->
<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.con_close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.con_close:hover,
.con_close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    color: white;
}

.modal-body {
	font-size: 15px;
	margin-left: 35px;
}

.modal-footer {
    padding: 2px 16px;
    color: white;
}
</style>
<!--  生活資訊內文樣式  -->
@endsection
@section('page-content')
            <!-- CONTENT -->
            <div class="wrap-fluid" id="paper-bg">
                <div class="row">
                    <div class="col-md-8 margin-bottom-30">
                        <div class="box" style="">
                            <div class="box-header">
                                <h3 class="box-title" style="padding-bottom:0px;"><i class="fontello-volume-low"></i>
                                    <span style="font-size:130%;">@lang('messages.community_news')</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">

                                <div class="widget-bg-color-white widget-tab rounded-3">
                                    <ul class="nav nav-tabs">
                                        <li class="active">
                                            <a href="#tab_1_2" data-toggle="tab"> @lang('messages.community_news') </a>
                                        </li>
                                        <li>
                                            <a href="#tab_1_1" data-toggle="tab"> @lang('messages.latest_news') </a>
                                        </li>
                                        @inject('Setting','anlutro\LaravelSettings\SettingStore')
                                        @if($Setting->get('npm_version') ==  '0')
                                        <li>
                                            <a href="#tab_1_3" data-toggle="tab"> @lang('messages.committee_info') </a>
                                        </li>
                                        @endif
                                        <li>
                                            <a href="#tab_1_4" data-toggle="tab"> @lang('messages.gd_hug') </a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane fade" id="tab_1_1">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <tbody>
                                                        @foreach($news_1 as $one)
                                                        <tr>
                                                            <td style="width:60px;">
                                                                <img alt="" class="img-circle" src="{{ asset('assets/layouts/layout4/img/news-icon.png') }}" width="50px" height="50px">
                                                            </td>
                                                            <td>
                                                                <p>
                                                                    <strong style="font-size:130%;"><a href="{{route('website::news_view',$one->id)}}">{{$one->title}}</a></strong>
                                                                    <br>{{ str_limit( strip_tags($one->content) , 30) }}
                                                                </p>
                                                            </td>
                                                            <td>
                                                                <div class="pull-right text-red">
                                                                    <span class="label label-info">{{ $one->author }}</span><small></small>
                                                                </div>
                                                                <br>
                                                                <div class="pull-right">
                                                                    <small class="pull-right" style="margin-top:10px;">{{ $one->created_at }}
                                                                    </small>
                                                                </div>
                                                                
                                                            </td>
                                                        </tr>

                                                        @endforeach
                                                        @if($news_1->count() == 0)
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="alert alert-warning" style="margin:20px;">
                                                                    <button data-dismiss="alert" class="close" type="button">×</button>
                                                                    <span class="entypo-cancel-circled"></span>
                                                                    <strong>@lang('messages.sorry!')</strong>&nbsp;&nbsp;@lang('messages.no_msg_pub')
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade active in" id="tab_1_2">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <tbody>
                                                        @foreach($news_2 as $one)
                                                        <tr>
                                                            <td style="width:60px;">
                                                                <img alt="" class="img-circle" src="{{ asset('assets/layouts/layout4/img/news-icon.png') }}" width="50px" height="50px">
                                                            </td>
                                                            <td>
                                                                <p>
                                                                    <strong style="font-size:130%;"><a href="{{route('website::news_view',$one->id)}}">{{$one->title}}</a></strong>
                                                                    <br>{{ str_limit( strip_tags($one->content) , 30) }}
                                                                </p>
                                                            </td>
                                                            <td>
                                                                <div class="pull-right text-red">
                                                                    <span class="label label-info">{{ $one->author }}</span><small></small>
                                                                </div>
                                                                <br>
                                                                <div class="pull-right">
                                                                    <small class="pull-right" style="margin-top:10px;">{{ $one->created_at }}
                                                                    </small>
                                                                </div>
                                                                
                                                            </td>
                                                        </tr>

                                                        @endforeach
                                                        @if($news_2->count() == 0)
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="alert alert-warning" style="margin:20px;">
                                                                    <button data-dismiss="alert" class="close" type="button">×</button>
                                                                    <span class="entypo-cancel-circled"></span>
                                                                    <strong>@lang('messages.sorry!')</strong>&nbsp;&nbsp;@lang('messages.no_msg_pub')
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="tab_1_3">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <tbody>
                                                        @foreach($news_3 as $one)
                                                        <tr>
                                                            <td style="width:60px;">
                                                                <img alt="" class="img-circle" src="{{ asset('assets/layouts/layout4/img/news-icon.png') }}" width="50px" height="50px">
                                                            </td>
                                                            <td>
                                                                <p>
                                                                    <strong style="font-size:130%;"><a href="{{route('website::news_view',$one->id)}}">{{$one->title}}</a></strong>
                                                                    <br>{{ str_limit( strip_tags($one->content) , 30) }}
                                                                </p>
                                                            </td>
                                                            <td>
                                                                <div class="pull-right text-red">
                                                                    <span class="label label-info">{{ $one->author }}</span><small></small>
                                                                </div>
                                                                <br>
                                                                <div class="pull-right">
                                                                    <small class="pull-right" style="margin-top:10px;">{{ $one->created_at }}
                                                                    </small>
                                                                </div>
                                                                
                                                            </td>
                                                        </tr>

                                                        @endforeach
                                                        @if($news_3->count() == 0)
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="alert alert-warning" style="margin:20px;">
                                                                    <button data-dismiss="alert" class="close" type="button">×</button>
                                                                    <span class="entypo-cancel-circled"></span>
                                                                    <strong>@lang('messages.sorry!')</strong>&nbsp;&nbsp;@lang('messages.no_msg_pub')
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="tab_1_4">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <tbody>
                                                        @foreach($news_4 as $one)
                                                        <tr>
                                                            <td style="width:60px;">
                                                                <img alt="" class="img-circle" src="{{ asset('assets/layouts/layout4/img/news-icon.png') }}" width="50px" height="50px">
                                                            </td>
                                                            <td>
                                                                <p>
                                                                    <strong style="font-size:130%;"><a href="{{route('website::news_view',$one->id)}}">{{$one->title}}</a></strong>
                                                                    <br>{{ str_limit( strip_tags($one->content) , 30) }}
                                                                </p>
                                                            </td>
                                                            <td>
                                                                <div class="pull-right text-red">
                                                                    <span class="label label-info">{{ $one->author }}</span><small></small>
                                                                </div>
                                                                <br>
                                                                <div class="pull-right">
                                                                    <small class="pull-right" style="margin-top:10px;">{{ $one->created_at }}
                                                                    </small>
                                                                </div>
                                                                
                                                            </td>
                                                        </tr>

                                                        @endforeach
                                                        @if($news_4->count() == 0)
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="alert alert-warning" style="margin:20px;">
                                                                    <button data-dismiss="alert" class="close" type="button">×</button>
                                                                    <span class="entypo-cancel-circled"></span>
                                                                    <strong>@lang('messages.sorry!')</strong>&nbsp;&nbsp;@lang('messages.no_msg_pub')
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- BEGIN WIDGET TAB -->
                        
                        <!-- END WIDGET TAB -->
                    </div>
                    
                    <div class="col-md-4">
                        @if($Setting->get('npm_version') ==  '0')
                        <div class="box">
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="news-widget">
                                    <h2>
                                        <span class="bg-blue">@lang('messages.cm_site')</span>
                                    </h2>

                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        @endif
                        @if($Setting->get('npm_version') ==  '0')
                        <div class="box">
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="news-widget">
                                    <h2>
                                        <span class="bg-red">@lang('messages.convi_service')</span>
                                    </h2>
										<button id="ConvinietBtn_1" class="button" style="background-color: #f26175;"><div class="fa fa-cutlery"></div><br><span>食</span></button>
											<div id="ConvinietModal_1" class="modal">
												<div class="modal-content">
													<div class="modal-header" style="background-color: #f26175;">
														<span class="con_close">×</span>
														<h2><div class="fa fa-cutlery"></div>&nbsp;食</h2>
													</div>
													<div class="modal-body">
														@foreach($convinient_1 as $one)
															@if($one->type == "食")
																<a href="{{ $one->link }}" target="_blank">{{ $one->title }}</a><br>
															@endif
														@endforeach
																
														@if($convinient_1->count() == 0)
															<strong>目前沒有發佈任何有關「食」分類的生活資訊。</strong>
														@endif
															</div>
															<div class="modal-footer" style="background-color: #f26175;"></div>
														</div>
													</div>
												
										<button id="ConvinietBtn_2" class="button" style="background-color: #ff7659;"><div class="fa fa-shopping-cart"></div><br><span>衣</span></button>
											<div id="ConvinietModal_2" class="modal">
												<div class="modal-content">
													<div class="modal-header" style="background-color: #ff7659;">
														<span class="con_close">×</span>
														<h2><div class="fa fa-shopping-cart"></div>&nbsp;衣</h2>
													</div>
													<div class="modal-body">
														@foreach($convinient_2 as $one)
															@if($one->type == "衣")
																<a href="{{ $one->link }}" target="_blank">{{ $one->title }}</a><br>
															@endif
														@endforeach
																
														@if($convinient_2->count() == 0)
															<strong>目前沒有發佈任何有關「衣」分類的生活資訊。</strong>
														@endif
													</div>
													<div class="modal-footer" style="background-color: #ff7659;"></div>
												</div>
											</div>
												
										<button id="ConvinietBtn_3" class="button" style="background-color: #f8cd36;"><div class="fa fa-home"></div><br><span>住</span></button>
											<div id="ConvinietModal_3" class="modal">
												<div class="modal-content">
													<div class="modal-header" style="background-color: #f8cd36;">
														<span class="con_close">×</span>
														<h2><div class="fa fa-home"></div>&nbsp;住</h2>
													</div>
													<div class="modal-body">
														@foreach($convinient_3 as $one)
															@if($one->type == "住")
																<a href="{{ $one->link }}" target="_blank">{{ $one->title }}</a><br>
															@endif
														@endforeach
																
														@if($convinient_3->count() == 0)
															<strong>目前沒有發佈任何有關「住」分類的生活資訊。</strong>
														@endif
													</div>
													<div class="modal-footer" style="background-color: #f8cd36;"></div>
												</div>
											</div>
												
										<button id="ConvinietBtn_4" class="button" style="background-color: #56dea7;"><div class="fa fa-plane"></div><br><span>行</span></button>
											<div id="ConvinietModal_4" class="modal">
												<div class="modal-content">
													<div class="modal-header" style="background-color: #56dea7;">
														<span class="con_close">×</span>
														<h2><div class="fa fa-plane"></div>&nbsp;行</h2>
													</div>
													<div class="modal-body">
														@foreach($convinient_4 as $one)
															@if($one->type == "行")
																<a href="{{ $one->link }}" target="_blank">{{ $one->title }}</a><br>
															@endif
														@endforeach
																
														@if($convinient_4->count() == 0)
															<strong>目前沒有發佈任何有關「行」分類的生活資訊。</strong>
														@endif
													</div>
													<div class="modal-footer" style="background-color: #56dea7;"></div>
												</div>
											</div>
												
										<button id="ConvinietBtn_5" class="button" style="background-color: #5ca7df;"><div class="fa fa-book"></div><br><span>育</span></button>
											<div id="ConvinietModal_5" class="modal">
												<div class="modal-content">
													<div class="modal-header" style="background-color: #5ca7df;">
														<span class="con_close">×</span>
														<h2><div class="fa fa-book"></div>&nbsp;育</h2>
													</div>
													<div class="modal-body">
														@foreach($convinient_5 as $one)
															@if($one->type == "育")
																<a href="{{ $one->link }}" target="_blank">{{ $one->title }}</a><br>
															@endif
														@endforeach
																
														@if($convinient_5->count() == 0)
															<strong>目前沒有發佈任何有關「育」分類的生活資訊。</strong>
														@endif
													</div>
													<div class="modal-footer" style="background-color: #5ca7df;"></div>
												</div>
											</div>
												
										<button id="ConvinietBtn_6" class="button" style="background-color: #9e7ac2;"><div class="fa fa-gamepad"></div><br><span>樂</span></button>
											<div id="ConvinietModal_6" class="modal">
												<div class="modal-content">
													<div class="modal-header" style="background-color: #9e7ac2;">
														<span class="con_close">×</span>
														<h2><div class="fa fa-gamepad"></div>&nbsp;樂</h2>
													</div>
													<div class="modal-body">
														@foreach($convinient_6 as $one)
															@if($one->type == "樂")
																<a href="{{ $one->link }}" target="_blank">{{ $one->title }}</a><br>
															@endif
														@endforeach
																
														@if($convinient_6->count() == 0)
															<strong>目前沒有發佈任何有關「樂」分類的生活資訊。</strong>
														@endif
													</div>
													<div class="modal-footer" style="background-color: #9e7ac2;"></div>
												</div>
											</div>

                                </div>
                            </div>
                            <!-- /.box-body -->

                        </div>
                        @endif
                        <div class="box">
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="news-widget">
                                    <h2>
                                        <span class="bg-yellow">@lang('messages.common_use_url')</span>
                                    </h2>
										<div id="leftmeqrrdiv" style="width:100%; height:300px; overflow:hidden;">
											<table width="100%">
												<tr><td id="pic1">
												@foreach($link as $one)
													<a href="{{ $one->link }}" target="_blank"><img src="{{ $one->cover_img }}" width="100%" /></a>
												@endforeach
												</td></tr>
												<tr>
													<td id="pic2"></td>
												</tr>
											</table>
										  
											@if($link->count() == 0)
											<table width="100%">
												<tr>
													<td align="center">
														<strong>@lang('messages.sorry!')</strong>&nbsp;&nbsp;@lang('messages.no_common_use_url')</td>
												</tr>
                                            </table>
											@endif
										</div>                                      
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>
                
               

            </div>
            <!-- #/paper bg -->

<script type="text/javascript">
<!--
	//變數Speed為設定捲軸的速度用 越小越快
	var Speed=50;
	//接受setInterval所回傳的值
	var timer;
	//取得leftmeqrrdiv的參考用的變數
	var leftmeqrrdiv = document.getElementById("leftmeqrrdiv");
	//取得pic2的參考用的變數
	var pic2= document.getElementById("pic2");
	//讓pic2的innerHTML等於pic1的innerHTML
	pic2.innerHTML=document.getElementById("pic1").innerHTML;
	//用來捲動leftmeqrrdiv捲軸用的主程式
	function picMarquee(){
		//若pic2的高小於leftmeqrrdiv的scrollTop，表示捲軸已經過了第一行
		//所以讓Div的scrollTop再回到原來的位置；反之 則繼續往下跑
		if(pic2.offsetHeight - leftmeqrrdiv.scrollTop <= 0){
			leftmeqrrdiv.scrollTop = 0;
		}else{
			leftmeqrrdiv.scrollTop++;
		}
	}
	//每Speed毫秒就執行一次pciMarquee()
	timer=setInterval(picMarquee,Speed);
	//當滑鼠在leftmeqrrdiv上時 就停止捲動
	leftmeqrrdiv.onmouseover=function() {
		clearInterval(timer);
	}
	//當滑鼠離開leftmeqrrdiv上時 就繼續往下捲動
	leftmeqrrdiv.onmouseout=function() {
		timer=setInterval(picMarquee,Speed);
	}
//-->
</script>
<!-- 生活資訊 -->
<script>
// Get the modal
var modal_1 = document.getElementById('ConvinietModal_1');
var modal_2 = document.getElementById('ConvinietModal_2');
var modal_3 = document.getElementById('ConvinietModal_3');
var modal_4 = document.getElementById('ConvinietModal_4');
var modal_5 = document.getElementById('ConvinietModal_5');
var modal_6 = document.getElementById('ConvinietModal_6');

// Get the button that opens the modal
var btn_1 = document.getElementById("ConvinietBtn_1");
var btn_2 = document.getElementById("ConvinietBtn_2");
var btn_3 = document.getElementById("ConvinietBtn_3");
var btn_4 = document.getElementById("ConvinietBtn_4");
var btn_5 = document.getElementById("ConvinietBtn_5");
var btn_6 = document.getElementById("ConvinietBtn_6");

// Get the <span> element that closes the modal
var span_1 = document.getElementsByClassName("con_close")[0];
var span_2 = document.getElementsByClassName("con_close")[1];
var span_3 = document.getElementsByClassName("con_close")[2];
var span_4 = document.getElementsByClassName("con_close")[3];
var span_5 = document.getElementsByClassName("con_close")[4];
var span_6 = document.getElementsByClassName("con_close")[5];

// When the user clicks the button, open the modal
btn_1.onclick = function() {
    modal_1.style.display = "block";
}
btn_2.onclick = function() {
    modal_2.style.display = "block";
}
btn_3.onclick = function() {
    modal_3.style.display = "block";
}
btn_4.onclick = function() {
    modal_4.style.display = "block";
}
btn_5.onclick = function() {
    modal_5.style.display = "block";
}
btn_6.onclick = function() {
    modal_6.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span_1.onclick = function() {
    modal_1.style.display = "none";
}
span_2.onclick = function() {
    modal_2.style.display = "none";
}
span_3.onclick = function() {
    modal_3.style.display = "none";
}
span_4.onclick = function() {
    modal_4.style.display = "none";
}
span_5.onclick = function() {
    modal_5.style.display = "none";
}
span_6.onclick = function() {
    modal_6.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal_1) {
        modal_1.style.display = "none";
    }
}
window.onclick = function(event) {
    if (event.target == modal_2) {
        modal_2.style.display = "none";
    }
}
window.onclick = function(event) {
    if (event.target == modal_3) {
        modal_3.style.display = "none";
    }
}
window.onclick = function(event) {
    if (event.target == modal_4) {
        modal_4.style.display = "none";
    }
}
window.onclick = function(event) {
    if (event.target == modal_5) {
        modal_5.style.display = "none";
    }
}
window.onclick = function(event) {
    if (event.target == modal_6) {
        modal_6.style.display = "none";
    }
}
</script>
<!-- 生活資訊 -->
@endsection