@extends('style.master')

@section('home_title',' - 離島遊')
@section('page_description','宇柏旅行社')

@section('page_style')
<script type="text/javascript" src="{{ url('/js/bulletin.js?20191126') }}"></script>
<script type="text/javascript" src="{{ url('/js/travel_4.js?20191126') }}"></script>
<link href="{{ url('/css/travel.css?004') }}" rel="stylesheet" type="text/css" />

@endsection

@section('page_content')

			<!-- REVOLUTION SLIDER --><!-- data-title=出現在切換鈕上的標題文字  data-transition=動畫樣式(只有 random 及 fade) -->
			<!-- <div class="slider fullwidthbanner-container roundedcorners">

				<div class="fullwidthbanner" data-height="500" data-shadow="0" data-navigationStyle="preview2">
					
					<ul class="hide">

						<li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-saveperformance="off" data-title="">
							<img src="images/index/banner-17.jpg" data-lazyload="images/index/banner-17.jpg" alt="" data-bgfit="cover" data-bgposition="center bottom" data-duration="10000" data-bgrepeat="no-repeat" />
							<div class="overlay dark-1"></div>

							<div class="tp-caption customin ltl tp-resizeme"
								data-x="center"
								data-y="0"
								data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
								data-speed="100"
								data-start="100"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="100"
								data-endeasing="Power4.easeIn" style="z-index: 10;">
								<a href="hunter-center" class="btn-hidden">
									<span></span> 
								</a>
							</div>
						</li>

					</ul>

					<div class="tp-bannertimer"></div>
				</div>
				
			</div> -->
			<!-- /REVOLUTION SLIDER -->

			<!-- PAGE HEADER -->
			<section class="page-header-xs">
				<div class="container">

					<div class="icon"></div>
					<h1>離島遊行程<span>Outlying islands tour</span></h1>

					<!-- breadcrumbs -->
					<ol class="breadcrumb">
						<li><a href="{{ url('home') }}">首頁</a></li>
						<li><a href="#">旅遊行程</a></li>
						<li class="active">離島遊</li>
					</ol><!-- /breadcrumbs -->

				</div>
			</section>
			<!-- /PAGE HEADER -->

			<!-- 日曆與公告區 -->
			<section class="top">
				<div class="container">
					<div class="row">
						<div id="calendar" class="col-md-3">
							<h2>選擇出團日期：</h2>
							<div id="datepicker"></div>
						</div>
						<div id="bulletin" class="col-md-9">
							<h2>公告區：</h2>
							<div id="bulletin">
								<!-- 公告區 -->
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- /日曆與公告區 -->

			<!-- 旅遊行程 -->
			<section id="section-1">
				<div class="container">

					<div id="travel" class="row">
						
						<!-- travel list -->

					</div>
				</div>
			</section>
			<!-- /旅遊行程 -->
			

			
			<script type="text/javascript" src="{{ url('/assets/plugins/jquery/jquery-2.2.3.min.js') }}"></script>
			
@endsection

@section('page_js')
<script type="text/javascript" src="{{ url('js/jquery-ui-1.12.1/jquery-ui.js') }}"></script>
<link href="{{ url('js/jquery-ui-1.12.1/jquery-ui.theme.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ url('js/jquery-ui-1.12.1/jquery-ui.css') }}" rel="stylesheet" type="text/css" />
<script>
  $(function() {
	$("#datepicker").datepicker({
		dateFormat: "yyyy-mm-dd",
        onSelect: function () {
			selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
			window.location = "../start/"+selectedDate;
        }
	});
  });
</script>
@endsection