@extends('layout.manage')

@section('css_page_level')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}"/>
<link href="{{ asset('assets/global/plugins/jquery-fancybox/jquery.fancybox.css') }}" rel="stylesheet" type="text/css" media="screen"/>
<style type="text/css">
	#myDiv {
		overflow: hidden;
		width: 60%;
		margin: 0px auto;
	}
	
	#myDiv img {
		height: 200px;
	}
</style>
@endsection

@section('page-content-wrapper')
	<div class="page-content-wrapper" id="main">
		<div class="page-content">
			<!-- BEGIN PAGE HEADER-->
			<h3 class="page-title">
			@inject('setting','anlutro\LaravelSettings\Facade')
			{{ $setting::get('system_name','全方位建築智慧化管理系統') }} <small>{{ $setting::get('company_name','新保科技') }}</small>
			</h3>
			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="{{route('manage::index')}}">首頁</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">社區平台管理</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="{{ action('Manage\Platform\ThemeSpotController@index') }}">主題景點</a>
					</li>
				</ul>
				<div class="page-toolbar">

				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN DASHBOARD STATS -->
			<div class="row">
				<div class="col-md-12">
					<!-- BEGIN EXAMPLE TABLE PORTLET-->
					<div class="portlet light">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="icon-speech"></i>
                                <span class="caption-subject bold uppercase">{{$themespot->title}}</span>
                                <span class="caption-helper">{{$themespot->created_at}}</span>
                            </div>
                            <div class="actions">
                            	<a href="{{action('Manage\Platform\ThemeSpotController@index')}}" class="btn btn-circle btn-default"><i class="fa fa-reply"></i> 返回列表 </a>
                                <a href="{{action('Manage\Platform\ThemeSpotController@edit',['id'=>$themespot->id])}}" class="btn btn-circle btn-default"><i class="fa fa-pencil"></i> 編輯 </a>
                                <a class="btn btn-circle btn-default btn_delete_one" utitle="{{ $themespot->title }}" uid="{{ $themespot->id }}" href="javascript:;"><i class="fa fa-trash"></i> 刪除 </a>
                            </div>
                        </div>
					
					 <div class="portlet-body">
						<table class="table table-striped table-bordered" style="width:60%;" align="center">
							<tbody>
								<tr>
									<td>
										<center>
											@if($themespot->cover_img != '')
												<img src="{{ $themespot->cover_img }}" style="padding:3px; background-color:#fff; border:1px solid #d9d9d9;" width="100%" height="90%">
											@else
												<img src="{{ asset('assets/images/blank_image01.jpg') }}" style="padding:3px; background-color:#fff; border:1px solid #d9d9d9;" width="100%" height="90%">
											@endif
										</center>
									</td>
								</tr>
								@if($themespot->map != '')
								<tr>
									<td>
										<h4><center><strong>地址：</strong>{{ $themespot->map }}</center></h4>
									</td>
								</tr>
								@endif
								<tr>
						
							</tbody>
						</table>
						
									<!--  相簿跑馬燈  -->
										<div id="myDiv">
											<table>
												<tr>
													<td id="pic1">
											<table>
												<tr>
													<td>
														@if($themespot->image1 != '')
															<a class="fancybox" rel="gallery1" href="{{ $themespot->image1 }}" title=""><img src="{{ $themespot->image1 }}" style="padding:3px; background-color:#fff;"></a>
														@else
															<a class="fancybox" rel="gallery1" href="{{ $themespot->image1 }}" title=""><img src="{{ asset('assets/images/blank_image01.jpg') }}" style="padding:3px; background-color:#fff;"></a>
														@endif
													</td>
													<td>
														@if($themespot->image2 != '')
															<a class="fancybox" rel="gallery1" href="{{ $themespot->image2 }}" title=""><img src="{{ $themespot->image2 }}" style="padding:3px; background-color:#fff;"></a>
														@else
															<a class="fancybox" rel="gallery1" href="{{ $themespot->image2 }}" title=""><img src="{{ asset('assets/images/blank_image01.jpg') }}" style="padding:3px; background-color:#fff;"></a>
														@endif
													</td>
													<td>
														@if($themespot->image3 != '')
															<a class="fancybox" rel="gallery1" href="{{ $themespot->image3 }}" title=""><img src="{{ $themespot->image3 }}" style="padding:3px; background-color:#fff;"></a>
														@else
															<a class="fancybox" rel="gallery1" href="{{ $themespot->image3 }}" title=""><img src="{{ asset('assets/images/blank_image01.jpg') }}" style="padding:3px; background-color:#fff;"></a>
														@endif
													</td>
													<td>
														@if($themespot->image4 != '')
															<a class="fancybox" rel="gallery1" href="{{ $themespot->image4 }}" title=""><img src="{{ $themespot->image4 }}" style="padding:3px; background-color:#fff;"></a>
														@else
															<a class="fancybox" rel="gallery1" href="{{ $themespot->image4 }}" title=""><img src="{{ asset('assets/images/blank_image01.jpg') }}" style="padding:3px; background-color:#fff;"></a>
														@endif
													</td>
													<td>
														@if($themespot->image5 != '')
															<a class="fancybox" rel="gallery1" href="{{ $themespot->image5 }}" title=""><img src="{{ $themespot->image5 }}" style="padding:3px; background-color:#fff;"></a>
														@else
															<a class="fancybox" rel="gallery1" href="{{ $themespot->image5 }}" title=""><img src="{{ asset('assets/images/blank_image01.jpg') }}" style="padding:3px; background-color:#fff;"></a>
														@endif
													</td>
											</table>
													</td>
													<td id="pic2"></td>
												</tr>
											</table>
										</div>
									<!--  相簿跑馬燈  -->
						
					<table class="table table-striped table-bordered" style="width:60%;" align="center">
							<tbody>
								<tr>
								@if($themespot->introduce != '')
								<tr>
									<td width="20%" style="white-space: nowrap;">
										<h4><strong>景點介紹：</strong></h4>
									</td>
									<td>
										<h4>{{ $themespot->introduce }}</h4>
									</td>
								</tr>
								@endif
								@if($themespot->safe_note != '')
								<tr>
									<td width="20%" style="white-space: nowrap;">
										<h4><strong>安全事項：</strong></h4>
									</td>
									<td>
										<h4>{{ $themespot->safe_note }}</h4>
									</td>
								</tr>
								@endif
								@if($themespot->file != '')
								<tr>
									<td width="20%" style="white-space: nowrap;">
										<h4><strong>下載附件：</strong></h4>
									</td>
									<td>
										<a type="button" class="btn green btn-xs" href="{{ $themespot->file }}">{{ $original_filename }}
									</td>
								</tr>
								@endif
								@if($themespot->content != '')
								<tr>
									<td width="20%" style="white-space: nowrap;">
										<h4><strong>簡介：</strong></h4>
									</td>
									<td>
										<h4></h4>
									</td>
								</tr>
								@endif
							</tbody>
						</table>
						
						<table class="table table-striped table-bordered" style="width:60%;" align="center">
							<tbody>
								@if($themespot->info != '')
								<tr>
									<td width="20%" style="white-space: nowrap;">
										<h4><strong>交通資訊：</strong></h4>
									</td>
									<td>
										<h4>{{ $themespot->info }}</h4>
									</td>
								</tr>
								@endif
								<tr>
									<td colspan="2"><center><div style="border:1px solid #dcdcde; margin-top:10px; width:100%;height:500px;" id="map_canvas"></div></center>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<h4><strong><center>Google Map</center></strong></h4>
									</td>
								</tr>	
							</tbody>
						</table>
                        </div>
                    </div>
				</div>
            </div>
					<!-- END EXAMPLE TABLE PORTLET-->

	<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
@endsection

@section('plugins_page_level')
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-fancybox/jquery.fancybox.pack.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
@endsection

@section('js_page_level')
<script type="text/javascript">
	//變數Speed為設定捲軸的速度用 越小越快
	var Speed=20;
	//接受setInterval所回傳的值
	var timer;
	//取得myDiv的參考用的變數
	var myDiv = document.getElementById("myDiv");
	//取得pic2的參考用的變數
	var pic2= document.getElementById("pic2");
	//讓pic2的innerHTML等於pic1的innerHTML
	pic2.innerHTML=document.getElementById("pic1").innerHTML;
	//用來捲動myDiv捲軸用的主程式
	function picMarquee(){
		//若pic2的寬小於myDiv的scrollLeft，表示捲軸已經過了第一行
		//所以讓Div的scrollLeft再回到原來的位置；反之 則繼續往右跑
		if(pic2.offsetWidth - myDiv.scrollLeft <= 0){
			myDiv.scrollLeft = 0;
		}else{
			myDiv.scrollLeft++;
		}
	}
	//每Speed毫秒就執行一次pciMarquee()
	timer=setInterval(picMarquee,Speed);
	//當滑鼠在myDiv上時 就停止捲動
	myDiv.onmouseover=function(){
		clearInterval(timer);
	}
	//當滑鼠離開myDiv上時 就繼續往右捲動
	myDiv.onmouseout=function(){
		timer=setInterval(picMarquee,Speed);
	}
</script>

<script>
$(document).ready(function(){

	$(".fancybox").fancybox();
});
		$(document).on('click','.btn_delete_one',function(){
		var id = $(this).attr('uid');
		var title = $(this).attr('utitle');
		bootbox.confirm("<h5>確定刪除"+title+"這個主題景點?</h5>", function(result) {
	       if(result === true){
	       		$.ajax({
	       			type  : 'DELETE',
	       			url   : "{{ action('Manage\Platform\ThemeSpotController@destroy' ,['id'=>'']) }}/"+id,
	       			dataType : 'json',
	       			data  : {
	       				_token   : $('#_token').val(),
	       				id : id
	       			},
	       			success : function(){
	       				toastr['success']('刪除主題景點成功');
	       				window.location.replace('{{ action('Manage\Platform\ThemeSpotController@index') }}');
	       			},
	       			error   : function(){
	       				toastr['error']('刪除主題景點失敗');
	       			}
	       		});
	       }
	    });
	});

</script><script src="http://ditu.google.com/maps?file=api&amp;v=2.x&amp;key=AIzaSyBwO048p23eWOsmHbPU4H0uUEIm2TEXaCU" type="text/javascript"></script>
<script type="text/javascript">
	var cm_baseIcon = new GIcon();
	cm_baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	cm_baseIcon.iconSize = new GSize(34, 34);
	cm_baseIcon.shadowSize = new GSize(37, 34);
	cm_baseIcon.iconAnchor = new GPoint(9, 34);
	cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
	cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);
 
    var map = null;
    var geocoder = null;
 
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
		map.setMapType(G_NORMAL_MAP);
    	map.addControl(new GSmallZoomControl());
    	map.addControl(new GMenuMapTypeControl());
		
        map.setCenter(new GLatLng(121.6,24.9), 15);
        geocoder = new GClientGeocoder();
      }
    }
 
    function showAddress(address) {
		var markerOpts = {};
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("很抱歉！"+"您輸入的「"+address+"」這個位置無法成功定位！");
            } else {
				/*var nIcon = new GIcon(cm_baseIcon);
				nIcon.image ="images/home.png";
				markerOpts.icon = nIcon;*/
				markerOpts.title=address;
				
              map.setCenter(point);
              var marker = new GMarker(point,markerOpts);
			  marker.openInfoWindowHtml("<strong>...</strong><br />"+address);
			  GEvent.addListener(marker, "click", function() {
							   marker.openInfoWindowHtml("<strong></strong>...<br />"+address);
							  });
              map.addOverlay(marker);

              
            }
          }
        );
      }
    }
		window.onload=function(){
		   initialize();
		   showAddress("");
		   }

</script>
@endsection