@extends('layouts/microfin_layout')
@section('title', '| Add Economic Purpose')
@section('content')

	<div class="row add-data-form">
		<div class="col-md-12">
            <div class="col-md-10 col-md-offset-1 fullbody">
            	<div class="viewTitle" style="border-bottom:1px solid white;">
                    <a href="{{ url('viewEconomicPurposeList/') }}" class="btn btn-info pull-right addViewBtn">
                    	<i class="glyphicon glyphicon-th-list viewIcon"></i>
                    	Economic Purpose Lists
                    </a>
                </div>

				{{-- // Level 1  --}}
                <div class="panel panel-default panel-border">

					<div class="panel-heading">
						<div class="panel-title">New Economic Purpose (Layer 1)</div>
					</div>

					<div class="panel-body">
						
						<div class="row">
							<div class="col-md-12">
								{!! Form::open(array('url' => '', 'role' => 'form', 'class' => 'form-horizontal form-groups')) !!}

									<div class="form-group">
										{!! Form::label('loan_purpose_level_1', 'Loan purpose (layer - 1):', ['class' => 'col-sm-2 control-label']) !!}
										<div class="col-sm-6">
											{!! Form::text('loan_purpose_level_1', $value = null, ['id' => 'loan_purpose_level_1', 'class' => 'form-control', 'type' => 'text', 'placeholder' => 'Enter loan purpose name', 'onfocus' => 'this.placeholder=""', 'onblur' => 'this.placeholder="Enter loan purpose name"' ]) !!}
										</div>
									</div>
									
									<div class="form-group">
										<div class="col-sm-10 col-sm-offset-2">
											{!! Form::submit('Submit', ['id' => 'submit', 'class' => 'btn btn-info']) !!}
										</div>
									</div>

								{!! Form::close() !!}
							</div>
						</div>
						
					</div>
                </div>
				{{-- // Level 1  --}}



				{{-- // Level 2  --}}
                <div class="panel panel-default panel-border">

					<div class="panel-heading">
						<div class="panel-title">New Economic Purpose (Layer 2)</div>
					</div>

					<div class="panel-body">
						
						<div class="row">
							<div class="col-md-12">
								{!! Form::open(array('url' => '', 'role' => 'form', 'class' => 'form-horizontal form-groups')) !!}

									<div class="form-group">
										{!! Form::label('loan_purpose_level_1_selected_2', 'Loan purpose (layer - 1):', ['class' => 'col-sm-2 control-label']) !!}
										<div class="col-sm-6">
											{!! Form::select('loan_purpose_level_1_selected_2', $data['loan_purpose_level_1_list'], null, array('id' => 'loan_purpose_level_1_selected_2', 'class'=>'form-control', 'data-validate' => 'required')) !!}
										</div>
									</div>

									<div class="form-group">
										{!! Form::label('loan_purpose_level_2', 'Loan purpose (layer - 2):', ['class' => 'col-sm-2 control-label']) !!}
										<div class="col-sm-6">
											{!! Form::text('loan_purpose_level_2', $value = null, ['id' => 'loan_purpose_level_2', 'class' => 'form-control', 'type' => 'text', 'placeholder' => 'Enter loan purpose name', 'onfocus' => 'this.placeholder=""', 'onblur' => 'this.placeholder="Enter loan purpose name"' ]) !!}
										</div>
									</div>

									<div class="form-group">
										<div class="col-sm-10 col-sm-offset-2">
											{!! Form::submit('Submit', ['id' => 'submit2', 'class' => 'btn btn-info']) !!}
										</div>
									</div>

								{!! Form::close() !!}
							</div>
						</div>
						
					</div>
                </div>
				{{-- // Level 2  --}}




				{{-- // Level 3  --}}
                <div class="panel panel-default panel-border">

					<div class="panel-heading">
						<div class="panel-title">New Economic Purpose (Layer 3)</div>
					</div>

					<div class="panel-body">
						
						<div class="row">
							<div class="col-md-12">
								{!! Form::open(array('url' => '', 'role' => 'form', 'class' => 'form-horizontal form-groups')) !!}

									<div class="form-group">
										{!! Form::label('loan_purpose_level_1_selected_3', 'Loan purpose (layer - 1):', ['class' => 'col-sm-2 control-label']) !!}
										<div class="col-sm-6">
											{!! Form::select('loan_purpose_level_1_selected_3', $data['loan_purpose_level_1_list'], null, array('id' => 'loan_purpose_level_1_selected_3', 'class'=>'form-control', 'data-validate' => 'required')) !!}
										</div>
									</div>

									<div class="form-group">
										{!! Form::label('loan_purpose_level_2_selected_3', 'Loan purpose (layer - 2):', ['class' => 'col-sm-2 control-label']) !!}
										<div class="col-sm-6">
											{!! Form::select('loan_purpose_level_2_selected_3', $data['loan_purpose_level_2_list'], null, array('id' => 'loan_purpose_level_2_selected_3', 'class'=>'form-control', 'data-validate' => 'required')) !!}
										</div>
									</div>

									<div class="form-group">
										{!! Form::label('loan_purpose_level_3', 'Loan purpose (layer - 3):', ['class' => 'col-sm-2 control-label']) !!}
										<div class="col-sm-6">
											{!! Form::text('loan_purpose_level_3', $value = null, ['id' => 'loan_purpose_level_3', 'class' => 'form-control', 'type' => 'text', 'placeholder' => 'Enter loan purpose name', 'onfocus' => 'this.placeholder=""', 'onblur' => 'this.placeholder="Enter loan purpose name"' ]) !!}
										</div>
									</div>
									
									<div class="form-group">
										<div class="col-sm-10 col-sm-offset-2">
											{!! Form::submit('Submit', ['id' => 'submit3', 'class' => 'btn btn-info']) !!}
										</div>
									</div>

								{!! Form::close() !!}
							</div>
						</div>
						
					</div>
                </div>
				{{-- // Level 3  --}}


				{{-- // Level 4  --}}
                <div class="panel panel-default panel-border">

					<div class="panel-heading">
						<div class="panel-title">New Economic Purpose (Layer 4)</div>
					</div>

					<div class="panel-body">
						
						<div class="row">
							<div class="col-md-12">
								{!! Form::open(array('url' => '', 'role' => 'form', 'class' => 'form-horizontal form-groups')) !!}

									<div class="form-group">
										{!! Form::label('loan_purpose_level_1_selected_4', 'Loan purpose (layer - 1):', ['class' => 'col-sm-2 control-label']) !!}
										<div class="col-sm-6">
											{!! Form::select('loan_purpose_level_1_selected_4', $data['loan_purpose_level_1_list'], null, array('id' => 'loan_purpose_level_1_selected_4', 'class'=>'form-control', 'data-validate' => 'required')) !!}
										</div>
									</div>

									<div class="form-group">
										{!! Form::label('loan_purpose_level_2_selected_4', 'Loan purpose (layer - 2):', ['class' => 'col-sm-2 control-label']) !!}
										<div class="col-sm-6">
											{!! Form::select('loan_purpose_level_2_selected_4', $data['loan_purpose_level_2_list'], null, array('id' => 'loan_purpose_level_2_selected_4', 'class'=>'form-control', 'data-validate' => 'required')) !!}
										</div>
									</div>

									<div class="form-group">
										{!! Form::label('loan_purpose_level_3_selected_4', 'Loan purpose (layer - 3):', ['class' => 'col-sm-2 control-label']) !!}
										<div class="col-sm-6">
											{!! Form::select('loan_purpose_level_3_selected_4', $data['loan_purpose_level_3_list'], null, array('id' => 'loan_purpose_level_3_selected_4', 'class'=>'form-control', 'data-validate' => 'required')) !!}
										</div>
									</div>

									<div class="form-group">
										{!! Form::label('loan_purpose_level_4', 'Loan purpose (layer - 4):', ['class' => 'col-sm-2 control-label']) !!}
										<div class="col-sm-6">
											{!! Form::text('loan_purpose_level_4', $value = null, ['id' => 'loan_purpose_level_4', 'class' => 'form-control', 'type' => 'text', 'placeholder' => 'Enter loan purpose name', 'onfocus' => 'this.placeholder=""', 'onblur' => 'this.placeholder="Enter loan purpose name"' ]) !!}
										</div>
									</div>

									<div class="form-group">
										{!! Form::label('mra_code', 'MRA code:', ['class' => 'col-sm-2 control-label']) !!}
										<div class="col-sm-6">
											{!! Form::text('mra_code', $value = null, ['class' => 'form-control', 'id' => 'mra_code', 'data-validate' => 'required', 'type' => 'text', 'placeholder' => 'Enter MRA code', 'onfocus' => 'this.placeholder=""', 'onblur' => 'this.placeholder="Enter category type name"' ]) !!}
										</div>
									</div>

									<div class="form-group">
										<div class="col-sm-10 col-sm-offset-2">
											{!! Form::submit('Submit', ['id' => 'submit4', 'class' => 'btn btn-info']) !!}
										</div>
									</div>

								{!! Form::close() !!}
							</div>
						</div>
						
					</div>
                </div>
				{{-- // Level 4  --}}

            </div>
		</div>
	</div>
	
	<script type="text/javascript">	




		$(document).ready(function(){

			$('input').attr('autocomplete','off');


	        $('form').submit(function(event){
	            event.preventDefault();
				
			    $.ajax({
			        type: 'post',
			        url: './storeEconomicPurpose',
			        dataType: 'json',
			        data: $('form').serialize(),
			        success: function(_response) {
                        if(_response.errors) {
                            if(_response.errors['name'])
                                toastr.warning(_response.errors.name, null, opts);
                        } else {                                                        
							if(_response.responseTitle == 'Success!'){
								toastr.success(_response.responseText, _response.responseTitle, opts);
								// setTimeout(function(){
								// 	window.location.href = '{{ url('addEconomicPurpose/') }}';
								// }, 1000);
							} else {
								toastr.warning(_response.responseText, _response.responseTitle, opts);
							}
                        }
                    },
                    error: function(_response) {
                        alert(_response.errors);
                    }
			    });
	        });
	    });



		$(document).on('change', '#loan_purpose_level_1_selected_3', function(){
			var code = $('#loan_purpose_level_1_selected_3').val();
			$("#loan_purpose_level_2_selected_3 option:gt(0)").remove();
			var csrf = "{{csrf_token()}}";
			$.ajax({
				type: 'post',
				url: './getEconomicPurposes',
				dataType: 'json',
				data: {
					'level' : 2,
					'code' : code,
					'_token' : csrf
				},
				success: function(_response) {
					for (const [key, value] of Object.entries(_response)) 
					{
						console.log(key, value);
						$("#loan_purpose_level_2_selected_3").append(
							'<option value="' + key + '">' + value + "</option>"
						);
					}
				}
			});
       });


	   	$(document).on('change', '#loan_purpose_level_1_selected_4', function(){
			var code = $('#loan_purpose_level_1_selected_4').val();
			$("#loan_purpose_level_2_selected_4 option:gt(0)").remove();
			$("#loan_purpose_level_3_selected_4 option:gt(0)").remove();
			var csrf = "{{csrf_token()}}";
			$.ajax({
				type: 'post',
				url: './getEconomicPurposes',
				dataType: 'json',
				data: {
					'level' : 2,
					'code' : code,
					'_token' : csrf
				},
				success: function(_response) {
					for (const [key, value] of Object.entries(_response)) 
					{
						console.log(key, value);
						$("#loan_purpose_level_2_selected_4").append(
							'<option value="' + key + '">' + value + "</option>"
						);
					}
				}
			});
       });


	   	$(document).on('change', '#loan_purpose_level_2_selected_4', function(){
			var code = $('#loan_purpose_level_2_selected_4').val();
			$("#loan_purpose_level_3_selected_4 option:gt(0)").remove();
			var csrf = "{{csrf_token()}}";
			$.ajax({
				type: 'post',
				url: './getEconomicPurposes',
				dataType: 'json',
				data: {
					'level' : 3,
					'code' : code,
					'_token' : csrf
				},
				success: function(_response) {
					for (const [key, value] of Object.entries(_response)) 
					{
						console.log(key, value);
						$("#loan_purpose_level_3_selected_4").append(
							'<option value="' + key + '">' + value + "</option>"
						);
					}
				}
			});
       	});


	</script>
@endsection