@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_between.js?20191126') }}"></script>
<link href="{{ url('/css/travel.css?004') }}" rel="stylesheet" type="text/css" />

@endsection

@section('page_content')

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

					<div class="icon"></div>
					<h1>出團期間查詢<span>Between search</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 col-md-offset-3">
							<h2>選擇出團日期：</h2>
							<div id="datepicker"></div>
						</div>
						<div id="calendar2" class="col-md-3">
							<h2>選擇回程日期：</h2>
							<div id="datepicker2"></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 = "../../between/"+selectedDate+"/{!! $datas['enddate'] !!}";
			}
		});
		var startDate = new Date('{!! $datas['startdate'] !!}');
		$("#datepicker").datepicker('setDate', startDate);

		$("#datepicker2").datepicker({
			dateFormat: "yyyy-mm-dd",
			onSelect: function () {
				selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
				window.location = "../../between/{!! $datas['startdate'] !!}/"+selectedDate;
			}
        });
        var endDate = new Date('{!! $datas['enddate'] !!}');
		$("#datepicker2").datepicker('setDate', endDate);
	});
</script>
@endsection