@inject('sentinel', 'Cartalyst\Sentinel\Native\Facades\Sentinel')
@extends('layout.manage')

@section('css_page_level')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/clockface/css/clockface.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/icheck/skins/all.css') }}"/>

<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css') }}"/>

@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') }}">@lang('messages.homepage')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">@lang('messages.facility_module')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">@lang('messages.facility_reservation_form')</a>
					</li>
				</ul>
				<div class="page-toolbar">

				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN DASHBOARD STATS -->
			<div class="row">
				<div class="col-md-12">
					<!-- BEGIN PORTLET-->
					@if (count($errors) > 0)
						<div id="form_error_alert" class="alert alert-danger">
						<button class="close" data-close="alert"></button>
							<ul>
					            @foreach ($errors->all() as $error)
					                <li>{{ $error }}</li>
					            @endforeach
					        </ul>
						</div>
					@endif
					<div id="form_add_inst_error" class="alert alert-danger display-hide">
						<button class="close" data-close="alert"></button>
						@lang('messages.col_invalid')
					</div>
					<div id="form_add_inst_success" class="alert alert-success display-hide">
						<button class="close" data-close="alert"></button>
						@lang('messages.add_success')
					</div>
					<div class="portlet box purple-studio">
						<div class="portlet-title">
							<div class="caption">
								<i class="fa fa-album"></i>@lang('messages.create_facility_reservation_form')
							</div>
						</div>
						<div class="portlet-body form">
							<form action="{{ action('InstOrderController@store') }}" method="POST" id="form_order" class="form-horizontal form-bordered"  enctype="multipart/form-data">
								<input type="hidden" name="_token" value="{{ csrf_token() }}">
								<div id="form_add_fault_report_error" class="alert alert-danger display-hide">
									<button class="close" data-close="alert"></button>
									@lang('messages.col_invalid')
								</div>
								<div id="form_add_fault_report_success" class="alert alert-success display-hide">
									<button class="close" data-close="alert"></button>
									@lang('messages.add_success')
								</div>
								
								<div class="form-group">
									<label class="col-md-3 control-label">公設預約<span class="required" aria-required="true"> * </span></label>
									<div class="col-md-8">
										<select id="inst_id" name="inst_id" class="form-control select2me" data-placeholder="@lang('messages.select_facility_reservation')">
											<option value=""></option>
											@foreach($insts as $one)
											<option value="{{$one->id}}" data-is-box="{{$one->is_box}}">{{$one->name}}</option>
											@endforeach
										</select>
									</div>
								</div>
								{{-- #4008 --}}
								<div class="form-group">
									<label class="col-md-3 control-label">會議/活動名稱</label><span class="required" aria-required="true"></span>
									<div class="col-md-8">
										<input id="meeting_event_name" name="meeting_event_name" type="text" class="form-control" placeholder="請輸入會議名稱或活動名稱" required>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">刷卡登錄</label><span class="required" aria-required="true"></span>
									<div class="col-md-8">
										<input id="inst_cardnumber" name="inst_cardnumber" type="text" class="form-control" placeholder="請輸入卡號">
									</div>
								</div>

								<div class="form-group">
									<label class="col-md-3 control-label">預約人<span class="required" aria-required="true"> * </span></label>
									<div class="col-md-8">
										<select id="user_id" name="user_id" class="form-control select2me" data-placeholder="@lang('messages.select_agent_reserver')">
											<option value=""></option>
											@foreach($users as $user)
											<option value="{{$user->id}}" uname="{{$user->name}}" uphone="{{$user->mobile}}">{{$user->name}}({{$user->username}})</option>
											@endforeach
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">預約日期</label>
									<div class="col-md-5">
										<div class="input-group input-medium date date-picker" data-date-format="yyyy-mm-dd" data-date-start-date="+0d">
											<input id="date" name="date" type="text" class="form-control" readonly>
											<span class="input-group-btn">
											<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
											</span>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">預約時段<span class="required" aria-required="true"> * </span></label>
									<div class="col-md-8">
										<select id="time_section" class="form-control" name="time_section">

										</select>
									</div>
								</div>
								<div class="form-group is-box">
									<label class="col-md-3 control-label">是否包廂<span class="required" aria-required="true"> * </span></label>
									<div class="col-md-8">
										<input id="is_box" type="checkbox" name="is_box" class="make-switch" data-on-text="@lang('messages.yes')" data-off-text="@lang('messages.no')">
									</div>
								</div>
								<div class="form-group person">
									<label class="col-md-3 control-label">預約人數<span class="required" aria-required="true"> * </span></label>
									<div class="col-md-8">
										<input id="person" name="person" type="number" class="form-control" placeholder="@lang('messages.enter_reserve_people_number')">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">@lang('messages.pt_type')</label>
									<div class="col-md-9">
										<div class="input-group">
											<div class="icheck-inline">
												<label id='free_label'><input name="point_type" id="free" type="radio" class="icheck pt_icheck" data-radio="icheckbox_flat-green" value="free">@lang('messages.given_pt')</label>
												<label id='buy_label'><input name="point_type" id="buy" type="radio" class="icheck pt_icheck" data-radio="icheckbox_flat-green" value="buy">@lang('messages.buy_pt')</label>
												<label id='any_label'><input name="point_type" id="any" type="radio" class="icheck pt_icheck" data-radio="icheckbox_flat-green" value="any" checked>@lang('messages.unlimit')</label>
												<label id='mooncard_label' style="display: none"><input name="point_type" id="mooncard" type="radio" class="icheck pt_icheck"  data-radio="icheckbox_flat-green" value="mooncard">月卡付費</label>
												<input type="hidden" id="point_type">
											</div>
										</div>
									</div>
								</div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">借用物品</label>
                                    <div class="col-md-8">
                                        <select multiple="multiple" class="form-control selectpicker" id="equipments" name="equipments[]" title="請選擇借用物品" data-live-search="true" data-actions-box="true" >
                                            @foreach($inst_equipments as $one)
                                                <option value="{{$one->id}}" data-subtext="{{$one->equipment_no}}">{{$one->equipment_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">抵押物</label>
                                    <div class="col-md-8">
                                        <select id="pawn" name="pawn" class="form-control select2me" data-placeholder="請選擇抵押物">
                                            <option value=""></option>
                                            @foreach($pawns as $one)
                                                <option value="{{$one}}">{{$one}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

								<div class="form-group">
									<!--label class="col-md-3 control-label">@lang('messages.note')</label-->
									<label class="col-md-3 control-label">備註</label>
									<div class="col-md-8">
									<textarea class="form-control" name="desc" rows="1"></textarea>
									</div>
								</div>
								<div class="form-group">
									<div class="row">
										<div class="col-md-8">
										</div>
										<div class="col-md-4">
											<div class="panel panel-success">
												<div class="panel-heading">
													<h3 class="panel-title">@lang('messages.user_pt_info')</h3>
												</div>
												{{-- <div class="panel-body">
													 Panel content
												</div> --}}
												<ul class="list-group">
													<li class="list-group-item">
														 @lang('messages.left_pt') <span id="point_free" class="badge badge-success"></span>
													</li>
													<li class="list-group-item">
														 @lang('messages.buy_left_pt') <span id="point_buy" class="badge badge-success"></span>
													</li>
													<li class="list-group-item">
														 @lang('messages.consume_pt') <span id="point_cost" class="badge badge-warning"></span>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								
								<div class="form-actions">
									<div class="row">
										<div class="col-md-offset-3 col-md-9">
											<button type="button" class="btn purple pull-right" id="btn_submit"><i class="fa fa-check"></i> @lang('messages.submit')</button>
										</div>
									</div>
								</div>
								<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
								<input type="hidden" name="platform" value="manage">
								<input type="hidden" name="undertake" value="{{ $sentinel::check()->id }}">
							</form>
						</div>
					</div>
					<!-- END PORTLET-->
				</div>
			</div>
		</div>

	
@endsection

@section('plugins_page_level')
<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/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/clockface/js/clockface.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/icheck/icheck.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/select2/js/select2.min.js') }}"></script>
@endsection

@section('js_page_level')
<script>
$(document).ready(function(){
	$('#equipments').selectpicker({
    selectAllText: '全選',
    deselectAllText: '取消'
	});

	//Time Picker
	$('.date-picker').datepicker({
        orientation: "left",
        autoclose: true
    });
	
	//驗證送出表單
	$('#form_add_inst').validate({
		errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",  // validate all fields including form hidden input
		rules:{
			title:{
				required:true 
			},
			
		},
		messages:{
			title:{
				required:'@lang('messages.enter_subject')' 
			},
		},

        invalidHandler: function (event, validator) { //display error alert on form submit   
            $('#form_add_inst_success').hide();
            $('#form_add_inst_error').show();
            $(document).scrollTop($('#form_add_inst_error'));
        },

        highlight: function (element) { // hightlight error inputs
           $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error'); // set success class to the control group
        },

        submitHandler: function (form) {
			$('textarea.ckeditor').each(function () {
			   var $textarea = $(this);
			   $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
			});
			form.submit();
        }
	});
	

	$('#inst_id').on('change',function(){
			 // 獲取選中選is_box項的 data-is-box 值
			 var isBoxValue = $(this).find(':selected').data('is-box');
				
				// 如果是包廂則顯示包廂
				if(isBoxValue){
					$('.is-box').removeClass('hidden');
					// 如果是包廂，將 #is_box 設置為 true 且禁止編輯
					$('#is_box').bootstrapSwitch('state', true, true);

    				$('#is_box').bootstrapSwitch('readonly', true);
					// 原本不做設定就是on
					$('#is_box').val('on');
	
					// 隱藏預約人數 並將值設為1
					$('.person').addClass('hidden');
					$('#person').val('1');

				}else{
					// 如果不是包廂，隱藏包廂選項
    				$('.is-box').addClass('hidden');
					// 原本不做設定就是on
					$('#is_box').val('off');
				
					// $('#is_box').bootstrapSwitch('state', false);
					// 這邊一定要將readonly設為false不然無法改$bootstrapSwitch false
					$('#is_box').bootstrapSwitch('readonly', false);

					$('#is_box').bootstrapSwitch('state', false, true);

					// 顯示預約人數 並將值設為1
					$('.person').removeClass('hidden');
				};
		$.ajax({
			type : 'GET',
			url  : '{{action("InstOrderController@getInstSection")}}',
			dataType: 'json',
			data : {
				id : $(this).val()
			},
			success : function(sendback){
				 // 在控制台中印出整個回應物件，方便檢查
				 console.log(sendback);
				// 使用 response.inst 和 response.sections 存取資料
				
				var sections = sendback.sections;
				$('#time_section').html('');
				$.each(sections, function(index, value) {
					$('#time_section').append('<option value="' + value + '">' + value + '</option>');
				});
			},
			error : function(sendback){
				toastr['error']('@lang('messages.error_refresh_try')');
			}
		});
	});

	$('#user_id').on('change',function(){
		$.ajax({
			type : 'GET',
			url  : '{{action("InstOrderController@getUserPoint")}}',
			dataType: 'json',
			data : {
				id : $(this).val()
			},
			success : function(sendback){
				console.log(sendback);
				$('#point_buy').html(sendback.point_buy);
				$('#point_free').html(sendback.point_free);
			},
			error : function(sendback){
				toastr['error']('@lang('messages.error_refresh_try')');
			}
		});
	});

	$('#person').on('change',function(){
		checkout();
	});

	$('#user_id').on('change',function(){
		checkout();
	});
	
	// $('#is_box').on('switchChange.bootstrapSwitch',function(){
	// 	checkout();
	// 	if($("#is_box").bootstrapSwitch('state') === true){
	// 		$('#person').val('999');
	// 		$('#person').attr('readonly', true);
	// 	}else{
	// 		$('#person').val('0');
	// 		$('#person').attr('readonly', false);
	// 	}
	// });

	$('#inst_id').on('change',function(){
		checkout();
	});
});

$('.pt_icheck').on('ifChanged', function(event){
	$('#point_type').val($(this).val());
	checkout();
});

var checkout = function(){
	$.ajax({
		type : 'GET',
		url  : '{{action('InstOrderController@checkout')}}',
		dataType : 'json',
		data : {
			user_id : $('#user_id').val(),
			is_box : $('#is_box').bootstrapSwitch('state'),
			person : $('#person').val(),
			inst_id : $('#inst_id').val(),
			point_type: $('#point_type').val()
		},
		success: function(sendback){
			if(sendback[0].warning != ''){
				toastr['error'](sendback[0].warning);
			}else{
				$('#point_cost').html(sendback[0].point);
			}
		},
		error : function(sendback){
			
		}
	});
}

$(document).on('click','#btn_submit',function(){
	var date = $('#date').val();
	if(date == ''){
		toastr['warning']('請選擇日期');
	}else{
		$("#btn_submit").attr('disabled', true);
		console.log($('#form_order').serialize());
		// // 阻止表单默认提交行为
		// event.preventDefault();
		$.ajax({
			type  : 'POST',
			url   : '{{action("InstOrderController@store")}}',
			dataType : 'json',
			data  : $('#form_order').serialize(),
			success : function(sendback){
				if(sendback.check === false){
					console.log("預約失敗");
					$.each(sendback.message, function( index, value ) {
						toastr['warning'](value);
						setTimeout(() => {
							window.location.reload();
						}, "3000");	
					});
				}else{
					alert("預約成功");
					toastr['success']('@lang('messages.suc_send_book_form')');
					window.location = "{{action('InstOrderController@index')}}"
				}
			},
			error : function(sendback){
				console.log(sendback);
				setTimeout(() => {
					toastr['warning'](sendback);
				}, "3000");	
				window.location.reload();
			}
		})
	}
});


// 資料登錄: 用戶查詢(按enter)
$(document).on('keypress','#inst_cardnumber',function(e){
	if(e.which == 13){
		enter_user_query();
	}
});


var enter_user_query = function(){

	var inst_cardnumber = $('#inst_cardnumber').val();
	$.ajax({
		type: 'GET',
		url: '{{ action("InstOrderTimeController@getEnterUser") }}',
		dataType:'json',
		data:{
			user : inst_cardnumber
		},
		success: function(sendback){
			if(sendback.card_type == 'mooncard'){
				$('#user_id').val(sendback.user_id).trigger('change.select2');
				
				$("#free_label").css("display","none");
				$("#buy_label").css("display","none");
				$("#any_label").css("display","none");
    			$("#mooncard_label").css("display","inline-block");

				$('#mooncard').iCheck('check');
				$('#point_type').val('mooncard');
				$('#point_buy').html(sendback.point_buy.useable_point);
				$('#point_free').html(sendback.point_free.useable_point);
			}else{
				$('#user_id').val(sendback.user_id).trigger('change.select2');

				$("#free_label").css("display","inline-block");
				$("#buy_label").css("display","inline-block");
				$("#any_label").css("display","inline-block");
				$("#mooncard_label").css("display","none");

				$('#any').iCheck('check');
				$('#point_type').val('any');
				$('#point_buy').html(sendback.point_buy.useable_point);
				$('#point_free').html(sendback.point_free.useable_point);
			}
		},
		error: function(sendback){
			clear_enter_display();
			toastr["error"](sendback.responseText);
		}

	});
}

//資料登錄欄位清除
var clear_enter_display = function(){
	$('#user_id').val('').trigger('change.select2');
}



</script>
@endsection