@extends($route['layout'])
@section('title', '| Add Working Area')
@section('content')
	<style type="text/css">
		.form-control {
			font-size: 11px !important;
			padding: 5px !important;
		}
		label {
		    font-weight: 400;
		    font-size: 11px !important;
		}
		.cus-flex{
			display: flex;
		}
		.flex-first-item {
			margin-right: 20px;
		}
	</style>
	<div class="row add-data-form">
		<div class="col-md-12">
            <div class="col-md-8 col-md-offset-2 fullbody">
            	<div class="viewTitle" style="border-bottom:1px solid white;">
                    <a href="{{ url($route['path'].'/viewWorkingArea/') }}" class="btn btn-info pull-right addViewBtn">
                    	<i class="glyphicon glyphicon-th-list viewIcon"></i>
                    	Working Area Lists
                    </a>
                </div>
                <div class="panel panel-default panel-border">
                	<div class="panel-heading">
                        <div class="panel-title">New Working Area</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('name', 'Name:', ['class' => 'col-sm-2 control-label']) !!}
                        				<div class="col-sm-6">
                        					{!! Form::text('name', $value = null, ['class' => 'form-control', 'id' => 'name', 'type' => 'text']) !!}
                        				</div>
                        			</div>
                        			<!-- <div class="form-group">
                        				{!! Form::label('code', 'Code:', ['class' => 'col-sm-2 control-label']) !!}
                        				<div class="col-sm-6">
                        					{!! Form::text('code', $value = null, ['class' => 'form-control', 'id' => 'code', 'type' => 'text', 'data-mask' => '99999', 'placeholder' => 'Enter working area code']) !!}
                        				</div>
                        			</div> -->
			                        <div class="form-group">
			                            {!! Form::label('branch', 'Branch:', ['class' => 'col-sm-2 control-label']) !!}
			                            <div class="col-sm-6">
			                                {!! Form::select('branchId', ($damageData['branch']), null, array('class'=>'form-control', 'id' => 'branchId')) !!}
			                            </div>
			                        </div>
			                        <div class="form-group">
			                            {!! Form::label('division', 'Division:', ['class' => 'col-sm-2 control-label']) !!}
			                            <div class="col-sm-6">
				                            {!! Form::select('divisionId', array('' => 'Select') + ($damageData['division']), null, array('class'=>'form-control', 'id' => 'divisionId')) !!}
			                            </div>
			                        </div>
			                        <div class="form-group">
			                            {!! Form::label('district_code', 'BBS District:', ['class' => 'col-sm-2 control-label']) !!}
			                            <div class="col-sm-6">
				                            {!! Form::select('district_code', array('' => 'Select'), null, array('class'=>'form-control', 'id' => 'district_code')) !!}
			                            </div>
			                        </div>
			                        <div class="form-group">
			                            {!! Form::label('thana_code', 'BBS Thana / Upazila:', ['class' => 'col-sm-2 control-label']) !!}
			                            <div class="col-sm-6">
				                            {!! Form::select('thana_code', array('' => 'Select'), null, array('class'=>'form-control', 'id' => 'thana_code')) !!}
			                            </div>
			                        </div>
			                        <div class="form-group">
			                            {!! Form::label('unionId', 'Union:', ['class' => 'col-sm-2 control-label']) !!}
			                            <div class="col-sm-6">
				                            {!! Form::select('unionId', array('' => 'Select'), null, array('class'=>'form-control', 'id' => 'unionId')) !!}
			                            </div>
			                        </div>
			                        <div class="form-group">
			                            {!! Form::label('villageId', 'Village:', ['class' => 'col-sm-2 control-label']) !!}
			                            <div class="col-sm-6">
				                            {!! Form::select('villageId', array('' => 'Select'), null, array('class'=>'form-control', 'id' => 'villageId')) !!}
			                            </div>
			                        </div>
									<div class="form-group">
			                            {!! Form::label('urbanRuralId', 'Type:', ['class' => 'col-sm-2 control-label']) !!}
			                            <div class="col-sm-6 cus-flex ">
				                            <div class="form-check form-check-inline flex-first-item ">
												<input class="form-check-input" type="radio" name="type" id="areaTypeId1" value="Urban">
												<label class="form-check-label" for="inlineRadio1">Urban</label>
											  </div>
											  <div class="form-check form-check-inline flex-item">
												<input class="form-check-input" type="radio" name="type" id="areaTypeId2" value="Rural">
												<label class="form-check-label" for="inlineRadio2">Rural</label>
											  </div>
			                            </div>
			                        </div>
                        			<div class="form-group">
                        				<div class="col-sm-10 col-sm-offset-2">
                        					{!! Form::submit('Submit', ['id' => 'submit', 'class' => 'btn btn-info']) !!}
                        					<a href="{{url($route['path'].'/viewWorkingArea/')}}" class="btn btn-danger closeBtn">Close</a>
                        				</div>
                        			</div>
                        		{!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
		</div>
	</div>
@endsection
<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(document).on('change', '#divisionId', function() {
        	$('#district_code').empty();

        	$.ajax({
		        type: 'post',
		        url: './reqDistrict',
		        dataType: 'json',
		        data: {
		        	'divisionId': $('#divisionId').val()
		       	},
		        success: function(_response) {
                    if(_response.errors) {
                        alert(_response.errors);
                    } else {
               			$('#district_code').empty().append('<option value="">Select</option>');

               			$.each(_response.district, function(index, value) {
	                        $('#district_code').append('<option value="'+ index +'">' + value + '</option>');
	                    });
                    }
                },
                error: function(_response) {
                    alert(_response.errors);
                }
		    });
        });

        $(document).on('change', '#district_code', function() {
        	$('#thana_code').empty();

        	$.ajax({
		        type: 'post',
		        url: './reqUpzilla',
		        dataType: 'json',
		        data: {
		        	'divisionId': $('#divisionId').val(),
		        	'district_code': $('#district_code').val()
		       	},
		        success: function(_response) {
                    if(_response.errors) {
                        alert(_response.errors);
                    } else {
               			$('#thana_code').empty().append('<option value="">Select</option>');

               			$.each(_response.upzilla, function(index, value) {
	                        $('#thana_code').append('<option value="'+ index +'">' + value + '</option>');
	                    });
                    }
                },
                error: function(_response) {
                    alert(_response.errors);
                }
		    });
        });

        $(document).on('change', '#thana_code', function() {
        	$('#unionId').empty();

        	$.ajax({
		        type: 'post',
		        url: './reqUnion',
		        dataType: 'json',
		        data: {
		        	'divisionId': $('#divisionId').val(),
		        	'district_code': $('#district_code').val(),
		        	'thana_code': $('#thana_code').val()
		       	},
		        success: function(_response) {
                    if(_response.errors) {
                        alert(_response.errors);
                    } else {
               			$('#unionId').empty().append('<option value="">Select</option>');

               			$.each(_response.union, function(index, value) {
	                        $('#unionId').append('<option value="'+ index +'">' + value + '</option>');
	                    });
                    }
                },
                error: function(_response) {
                    alert(_response.errors);
                }
		    });
        });

        $(document).on('change', '#unionId', function() {
        	$('#villageId').empty();

        	$.ajax({
		        type: 'post',
		        url: './reqVillage',
		        dataType: 'json',
		        data: {
		        	'divisionId': $('#divisionId').val(),
		        	'district_code': $('#district_code').val(),
		        	'thana_code': $('#thana_code').val(),
		        	'unionId': $('#unionId').val()
		       	},
		        success: function(_response) {
                    if(_response.errors) {
                        alert(_response.errors);
                    } else {
               			$('#villageId').empty().append('<option value="">Select</option>');

               			$.each(_response.village, function(index, value) {
	                        $('#villageId').append('<option value="'+ index +'">' + value + '</option>');
	                    });
                    }
                },
                error: function(_response) {
                    alert(_response.errors);
                }
		    });
        });

		$('form').submit(function(event){
			event.preventDefault();

			$.ajax({
				type: 'post',
				url: './addWorkingAreaItem',
				data: $('form').serialize(),
				dataType: 'json',
				success: function(_response) {
					if(_response.errors) {
						if(_response.errors['name'])
							toastr.warning(_response.errors.name, null, opts);
						if(_response.errors['code'])
							toastr.warning(_response.errors.code, null, opts);
						if(_response.errors['branchId'])
							toastr.warning(_response.errors.branchId, null, opts);
						if(_response.errors['divisionId'])
							toastr.warning(_response.errors.divisionId, null, opts);
						if(_response.errors['district_code'])
							toastr.warning(_response.errors.district_code, null, opts);
						if(_response.errors['thana_code'])
							toastr.warning(_response.errors.thana_code, null, opts);
						if(_response.errors['unionId'])
							toastr.warning(_response.errors.unionId, null, opts);
						if(_response.errors['villageId'])
							toastr.warning(_response.errors.villageId, null, opts);
						if(_response.errors['type'])
							toastr.warning(_response.errors.type, null, opts);
					} else if (_response.responseTitle == 'Warning!!') {

						toastr.warning('Warning!', _response.responseText);
						return false;

            		}else {
						$('#name').val('');
						$('#code').val('');
						$('#branchId').val('');
						$('#divisionId').val('');
						$('#district_code').val('');
						$('#thana_code').val('');
						$('#unionId').val('');
						$('#villageId').val('');
						$('.error').addClass('hidden');
						toastr.success(_response.responseText, "Success!", opts);

						setTimeout(function(){
							//window.location.href = '{{ url($route['path'].'/viewWorkingArea/') }}';
							window.location.reload();
						}, 3000);
					}
				},
				error: function(_response) {
					alert(_response.errors);
				}
			});
		});
	});
</script>