@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">@lang('messages.homepage')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">財務系統</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">@lang('messages.batch_import')</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">
							<ul class="nav nav-tabs">
								<li class="active">
									<a href="#tab_0" data-toggle="tab">
									@lang('messages.batch_import_record') </a>
								</li>
								<li>
									<a href="#tab_1" data-toggle="tab">
									@lang('messages.batch_importing') </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> @lang('messages.time')
														</th>
														<th class="hidden-xs">
															<i class="fa fa-text"></i> @lang('messages.mark')
														</th>
														<th>
															@lang('messages.success_import_item')
														</th>
														<th>
															@lang('messages.fail_import_item')
														</th>
													</tr>
													</thead>
													<tbody>
													@foreach ($imports as $import)
													<tr>
														<td>
															{{ $import->created_at }}
														</td>
														<td class="hidden-xs">
															{{ $import->title }}
														</td>
														<td>
															{{ $import->import_success }}
														</td>
														<td>
															{{ $import->import_failed }}
														</td>
													</tr>
													@endforeach
													</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
									<div class="tab-pane" id="tab_1">
										<div class="row">
											<div class="col-md-12">
												<form id="form_import" action="{{ route('manage::finance::import_receipt') }}" 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. @lang('messages.first_down_xls')</span>
														</div>
													</div>
													<div class="portlet-body">
														<p><a class="btn blue btn-block" href="{{ url('import/finance_receipt_sample.xlsx') }}">@lang('messages.download_sample') sample.xls</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. @lang('messages.upload_en_build')</span>
														</div>
													</div>
													<div class="portlet-body">
														<p>@lang('messages.upload_xls_here')</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">
																@lang('messages.select_file') </span>
																<span class="fileinput-exists">
																@lang('messages.change') </span>
																<input type="file" name="import_file">
																</span>
																<a href="javascript:;" class="input-group-addon btn red fileinput-exists" data-dismiss="fileinput">
																@lang('messages.remove') </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. @lang('messages.batch_setting')</span>
														</div>
													</div>
													<div class="portlet-body">
														<p>@lang('messages.mark4_this_batch')</p>
														<form action="#" class="form-horizontal">
															<div class="form-body">
																<div class="form-group">
																	<label class="col-md-2 control-label">@lang('messages.this_batch_name')</label>
																	<div class="col-md-10">
																		<input name="title" type="text" class="form-control input-circle" placeholder="20210101 @lang('messages.found_file')">
																		<br>
																	</div>
																</div>
															</div>
															<div class="form-actions">
																<div class="row">
																	<div class="col-md-offset-2 col-md-10">
																		<button type="submit" class="btn btn-circle blue">@lang('messages.submit')</button>
																		<button type="button" class="btn btn-circle default">@lang('messages.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:'@lang('messages.least_upload_1xls')'
			},
			title:{
				required: '@lang('messages.enter_batch_name')',
				minlength: '@lang('messages.batch_name_min4')',
				maxlength: '@lang('messages.batch_name_max25')'
			}
		},

        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> @lang('messages.sure_del_batch_import')</h3><br><div class='alert alert-danger'><strong>@lang('messages.warning')!</strong> @lang('messages.cant_back_first') </div>", function(result) {
		if(result == true){
			$.ajax({
				type  : 'DELETE',
				url   : url,
				dataType:'json',
				data  : {
					_token   : '{{csrf_token()}}',
				},
				success : function(sendback){
					toastr['success']('@lang('messages.del_success')');
					window.location.reload();
				},
				error : function(sendback){
					toastr['error']('@lang('messages.del_failll')');
				}
			});	
		}
	}); 
});
</script>


@endsection