@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>{{ __('Edit First Category') }}</h5>
					</div>
					<div class="ibox-content">
						<form  class="form-horizontal" id="categoryForm" method="POST" action="{{route('updateFirstCategory').'/'.$courseCategoryLevelOne->id}}" enctype="multipart/form-data">
							{{ csrf_field() }}
							<div class="form-group">
								<label class="col-sm-2 control-label"><span class="red">*</span>{{ __('Name of first category in ChineseName of first category in Chinese') }}</label>
								<div class="col-sm-4">
									<input type="text" placeholder="{{__('Name')}}" class="form-control" id="levelOneNameChinese" name="levelOneNameChinese" value="{{$courseCategoryLevelOne->levelOneNameChinese}}" required>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label"><span class="red">*</span>{{ __('Name of first category in English') }}</label>
								<div class="col-sm-4">
									<input type="text" placeholder="{{__('Name')}}" class="form-control" id="levelOneName" name="levelOneName" value="{{$courseCategoryLevelOne->levelOneName}}" required>
								</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="{{$courseCategoryLevelOne->displayOrder}}">
								</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>
						</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 Change') }}</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($('#levelOneName').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