@extends('layout.manage')

@section('css_page_level')
<link href="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') }}" rel="stylesheet" type="text/css"/>
@endsection

@section('page-content-wrapper')
	<!-- BEGIN CONTENT -->
	<div class="page-content-wrapper">
		<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="index.html">首頁</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">對講機管理</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">批次匯入</a>
					</li>
				</ul>
				<div class="page-toolbar">

				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN PAGE CONTENT-->
			<div class="row">
				<div class="col-md-12">
					<!-- Begin: life time stats -->
					<div class="portlet light bordered">
						<div class="portlet-title tabbable-line">
							<div class="caption">
								<i class="fa fa-home"></i>批次匯入
							</div>
							<ul class="nav nav-tabs">
								<li class="active">
									<a href="#tab_0" data-toggle="tab">
									批次匯入紀錄 </a>
								</li>
								<li>
									<a href="#tab_1" data-toggle="tab">
									進行批次匯入 </a>
								</li>
							</ul>
						</div>
						<div class="portlet-body">
							<div class="tabbable">
								<div class="tab-content">
									<div class="tab-pane active" id="tab_0">
										<div class="row">
											<div class="col-md-12">
												<div class="tabbable">
													<table class="table table-striped table-bordered table-advance table-hover">
													<thead>
													<tr>
														<th>
															<i class="fa fa-calendar-o"></i> 時間
														</th>
														<th class="hidden-xs">
															<i class="fa fa-text"></i> 註記
														</th>
														<th>
															成功匯入筆數
														</th>
														<th>
															失敗匯入筆數
														</th>
														<th>
														</th>
													</tr>
													</thead>
													<tbody>
														@foreach ($imports as $import)
													<tr>
														<td>
															{{ $import->created_at }}
														</td>
														<td class="hidden-xs">
															{{ $import->title }}
														</td>
														<td>
															{{ $import->success }}
														</td>
														<td>
															{{ $import->fail }}
														</td>
														<td>
															<div class="btn-group">
																<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
																動作 <i class="fa fa-angle-down"></i>
																</button>
																<ul class="dropdown-menu pull-right" role="menu">
																	<li>
																		<a href="{{action('Manage\Intercom\IntercomImportController@downloadExcel',['id'=>$import->id])}}">
																		<i class="fa fa-file"></i>
																		下載本次xlsx檔</a>
																	</li>
																	<li class="divider">
																	</li>
																	<li>
																		<a class="btn_destroy_import" url="{{action('Manage\Intercom\IntercomImportController@destroyImport',['id'=>$import->id])}}">
																		<i class="fa fa-trash-o"></i>
																		刪除所有本次匯入 </a>
																	</li>
																</ul>
															</div>
														</td>
													</tr>
													@endforeach
													</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
									<div class="tab-pane" id="tab_1">
										<div class="row">
											<div class="col-md-12">
												<h4>進行批次匯入</h4>
												<form id="form_import" action="{{ route('manage::intercom::XLSImport') }}" method="POST" enctype="multipart/form-data">
												<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
												<div class="portlet light">
													<div class="portlet-title">
														<div class="caption">
															<i class="icon-bar-chart font-green-sharp hide"></i>
															<span class="caption-subject font-green-sharp bold uppercase">Step 1. 請先下載專用Excel檔(.xlsx)</span>
														</div>
													</div>
													<div class="portlet-body">
														<p>請將要批次匯入的對講機，用此Excel檔案編輯建立。</p>
														<p>提醒事項:</p>
														<ul>
															<li>對講機號碼以及ip位置不可重複</li>
															<li>檔案名稱不限制</li>
															<li>請使用副檔名.xlsx上傳</li>
															<li>Excel的匯入必須為「值」，不得為公式，否則會匯入錯誤。</li>
														</ul>
														<!-- <p><a class="btn blue btn-block" href="{{ url('import/intercom_sample.xlsx') }}">下載範例檔 intercom_sample.xlsx</a></p> -->

														<p><a class="btn blue btn-block" href="{{ route('manage::intercom::downloadWithTable') }}">下載範例檔 intercom_sample.xlsx</a></p>

													</div>
												</div>
												<div class="portlet light">
													<div class="portlet-title">
														<div class="caption">
															<i class="icon-bar-chart font-green-sharp hide"></i>
															<span class="caption-subject font-green-sharp bold uppercase">Step 2. 上傳&建立檔案</span>
														</div>
													</div>
													<div class="portlet-body">
														<p>請將Excel檔於此處上傳。</p>
														<div class="fileinput fileinput-new" data-provides="fileinput">
															<div class="input-group input-large">
																<div class="form-control uneditable-input input-fixed input-medium" data-trigger="fileinput">
																	<i class="fa fa-file fileinput-exists"></i>&nbsp; <span class="fileinput-filename">
																	</span>
																</div>
																<span class="input-group-addon btn default btn-file">
																<span class="fileinput-new">
																選擇檔案 </span>
																<span class="fileinput-exists">
																更改 </span>
																<input type="file" name="import_file">
																</span>
																<a href="javascript:;" class="input-group-addon btn red fileinput-exists" data-dismiss="fileinput">
																移除 </a>
															</div>
														</div>
													</div>
												</div>
												<div class="portlet light">
													<div class="portlet-title">
														<div class="caption">
															<i class="icon-bar-chart font-green-sharp hide"></i>
															<span class="caption-subject font-green-sharp bold uppercase">Step 3. 批次設定</span>
														</div>
													</div>
													<div class="portlet-body">
														<p>請為本次的匯入做一個標記</p>
														<form action="#" class="form-horizontal">
															<div class="form-body">
																<div class="form-group">
																	<label class="col-md-3 control-label">本批次名稱</label>
																	<div class="col-md-9">
																		<input name="title" type="text" class="form-control input-circle" placeholder="20160601匯入對講機資料">
																		<span class="help-block">
																		每次批次上傳都會有紀錄，建議可以在這裡輸入一個讓您好識別的註解，像是：20160601 匯入對講機資料...等等</span>
																	</div>
																</div>
															</div>
															<div class="form-actions">
																<div class="row">
																	<div class="col-md-offset-3 col-md-9">
																		<button type="submit" class="btn btn-circle blue">送出</button>
																		<button type="button" class="btn btn-circle default btn_reset">重置</button>
																	</div>
																</div>
															</div>
														</form>
													</div>
												</div>
												<div class="clearfix"></div>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- End: life time stats -->
				</div>
			</div>

			<div class="row">
				<div class="col-md-6">
					
				</div>
			</div>
			<!-- END PAGE CONTENT-->
		</div>
	</div>
	<!-- END CONTENT -->
	<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
@endsection

@section('plugins_page_level')
<script type="text/javascript" src="../../assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/global/plugins/jquery.pulsate.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/moment.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js') }}" type="text/javascript"></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 src="{{ asset('assets/global/plugins/bootstrap-confirmation/bootstrap-confirmation.min.js') }}" type="text/javascript"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.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">
$(document).ready(function(){
	$('#form_import').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:{
			import_file:{
				required:true,
			},
			title:{
				required: true,
				minlength: 4,
				maxlength: 25,
			}
		},
		messages:{
			import_file:{
				required:'請至少選擇一個Excel檔案上傳'
			},
			title:{
				required: '請輸入批次名稱',
				minlength: '批次名稱最少需要4個字元',
				maxlength: '批次名稱最少需要25個字元'
			}
		},

        invalidHandler: function (event, validator) { //display error alert on form submit   

        },

        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) {
        	form[0].submit();
        }
	});
});

$(document).on('click','.btn_destroy_import',function(){
	var url = $(this).attr('url');
	bootbox.confirm("<h3 style='font-weight:bold;'><i class='fa fa-exclamation-triangle font-red-mint'></i> 確定要刪除本次批次匯入?</h3><br><div class='alert alert-danger'><strong>警告!</strong> 一旦刪除後所有對應之對講機資料將一併刪除，且無法復原 </div>", function(result) {
		if(result == true){
			$.ajax({
				type  : 'DELETE',
				url   : url,
				dataType:'json',
				data  : {
					_token   : '{{csrf_token()}}',
				},
				success : function(sendback){
					toastr['success']('刪除成功!');
					window.location.reload();
				},
				error : function(sendback){
					toastr['error']('刪除失敗!');
				}
			});	
		}
	}); 
});

$(document).on('click','.btn_reset',function(){
	$('[name="title"]').val('');
});
</script>


@endsection