@extends('admin.base')

@section('title', 'account management')

@section('account_content')
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<script src="{{asset('js/plugins/layer/layer.min.js')}}"></script>
<link href="{{asset('css/style.css')}}" rel="stylesheet">
	<div class="animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>{{ __('Add Second Category') }}</h5>
					</div>
					<div class="ibox-content">
						<form  class="form-horizontal" method="POST" action="{{route('storeSecondCategory')}}" enctype="multipart/form-data" id="categoryForm">
							{{ csrf_field() }}
							<div class="row">
								<div class="form-group">
									<label class="col-sm-2 control-label"><span class="red">*</span>{{ __('Name of Second Category in Chinese') }}</label>
									<div class="col-sm-4">
										<input type="text" placeholder="{{__('Name')}}" class="form-control" id="levelTwoNameChinese" name="levelTwoNameChinese" required>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label"><span class="red">*</span>{{ __('Name of Second Category in English') }}</label>
									<div class="col-sm-4">
										<input type="text" placeholder="{{__('Name')}}" class="form-control" id="levelTwoName" name="levelTwoName" required>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label"><span class="red">*</span>{{ __('Related first category') }}</label>
									<div class="col-sm-4">
										<select class="ui search dropdown form-control" id="levelOneID" name="levelOneID" required>
											<option value="">{{ __('Select First Category') }}</option>
											@foreach($categoryLevelOnes as $key=>$value)
												<option value="{{$value->levelOneID}}">{{$value->levelOneName}}</option>
											@endforeach
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">{{__('Display Order')}}</label>
									<div class="col-sm-4">
										<input type="text" placeholder="{{__('Display Order')}}" class="form-control" id="displayOrder" name="displayOrder" value="0">
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-2 control-label"></label>
									<div class="col-sm-4">
										<div class="ui primary button" tabindex="0" onclick="storeCategory()">{{ __('Submit') }} </div>
										<div class="ui primary button" tabindex="0" onclick="lay_close_tab()">{{ __('Return') }} </div>
									</div>
								</div>
							</div>
						</form>
						<label id="overallValidation"></label>
					</div>
				</div>
			</div>
		</div>
	</div>

	{{-- Start Confirm Modal --}}
	<div class="modal" tabindex="-1" role="dialog" id="submit_confirmation_modal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h3 class="modal-title inline">{{ __('Confirm Submit') }}</h3>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" onclick="cancelSubmit()">{{ __('Cancel') }}</button>
					<button type="submit" class="btn btn-primary" id="confirmSubmit">{{ __('Confirm') }}</button>
				</div>
			</div>
		</div>
	</div>
	{{-- End Confirm Modal --}}


	<script>
        $(function(){
            $('#categoryForm').ajaxForm(function(){
                parent_reload();
            });
        });

        function storeCategory() {
            if($('#levelTwoName').val() != '' && $('#levelOneID').val() != '' )
            {
                $('#overallValidation').empty();
                $('#submit_confirmation_modal').modal('show');
                $('#confirmSubmit').on('click', function () {
                    $('#categoryForm').submit();
                });
            }
            else
            {
                $('#overallValidation').html('re-check input requirements');
            }
        }

        function cancelSubmit () {
            $('#submit_confirmation_modal').modal('hide');
        }
	</script>
	<script src="{{asset('js/content.js')}}"></script>
@endsection