updated checkout flow

2021-11-03 21:30:42 +08:00
parent 148df27117
commit 08c274f5bd
18 changed files with 254594 additions and 26526 deletions
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -18,7 +19,7 @@
 		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 	<![endif]-->
 	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-        
+
 	<link href="{{asset('public/assets/css/style.css')}}" rel="stylesheet">
 	<!-- <link href="{{asset('public/assets/login/css/style.css')}}" rel="stylesheet">
 	<link href="{{asset('public/assets/login/css/form-elements.css')}}" rel="stylesheet"> -->
@@ -27,12 +28,16 @@
 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-136108155-1"></script>
 	<script>
 		window.dataLayer = window.dataLayer || [];
-		function gtag(){dataLayer.push(arguments);}
+
+		function gtag() {
+			dataLayer.push(arguments);
+		}
 		gtag('js', new Date());

 		gtag('config', 'UA-136108155-1');
 	</script>
 </head>
+
 <body>
 	<!-- <nav class="navbar navbar-default">
 		<div class="container">
@@ -70,14 +75,14 @@
 	@include('layout.navbar')
 	@yield('content')
 	<!-- Footer -->
-	
+
 	<!-- Scripts -->
 	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
 	<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
 	<script>
-		$(document).ready(function(){
-			$('.reveal-password').click(function(e){
+		$(document).ready(function() {
+			$('.reveal-password').click(function(e) {
 				var $pwd = $(".pwd");
 				if ($pwd.attr('type') === 'password') {
 					$pwd.attr('type', 'text');
@@ -88,7 +93,7 @@
 				}
 			});

-			if($('.data-errors').length > 0){
+			if ($('.data-errors').length > 0) {
 				$('#team-store-login').modal('show')
 				return false;
 			}
@@ -109,7 +114,7 @@
 					var placement = $(element).data('error');
 					if (placement) {
 						$(placement).append(error);
-					}else {
+					} else {
 						error.insertAfter(element);
 					}
 				},
@@ -118,12 +123,15 @@

 			$("#frm-register").validate({
 				rules: {
-					name: {
-						required : true
+					firstname: {
+						required: true
 					},
-					username: {
-						required : true
+					lastname: {
+						required: true
 					},
+					// username: {
+					//     required: true
+					// },
 					email: {
 						required: true,
 						email: true
@@ -131,6 +139,24 @@
 					password: {
 						required: true
 						//minlength: 6  // <-- removed underscore
+					},
+					mobilenumber: {
+						required: true
+					},
+					address: {
+						required: true
+					},
+					state: {
+						required: true
+					},
+					city: {
+						required: true
+					},
+					zipcode: {
+						required: true
+					},
+					countryCode: {
+						required: true
 					}
 				},
 				messages: {},
@@ -138,14 +164,14 @@
 					var placement = $(element).data('error');
 					if (placement) {
 						$(placement).append(error);
-					}else {
+					} else {
 						error.insertAfter(element);
 					}
 				},
 				submitHandler: submitRegisterForm
 			});

-			$('.password-protected').click(function(){
+			$('.password-protected').click(function() {

 				$('#_teamstore_id').val($(this).data('store-id'))
 				// console.log($(this).data('store-id'))
@@ -158,32 +184,173 @@
 				event.preventDefault();
 				$('#frm_search_store').submit();
 			});
-                
+

 		}); // end document ready

-		function submitLoginForm (){
+		function getSelectedCountry() {
+			var selectedState = $('#select_country').data('selected');
+			if (selectedState) {
+				// console.log(selectedState)
+				$("#select_country").val(selectedState).change();
+				// selectCountry()
+			}
+
+		}
+
+		function selectCountry(item) {
+
+			const country = item.options[item.selectedIndex].text;
+			const countryCode = item.options[item.selectedIndex].value
+			console.log(countryCode)
+
+			if (countryCode === "US") {
+				fetchUSA()
+			}
+
+			if (countryCode === "CA") {
+				fetchCanada()
+			}
+
+		}
+
+		function fetchCanada() {
+			$.getJSON("{{ asset('/public/api/canada.json') }}", function(items) {
+				var states = [];
+
+				Object.keys(items).forEach(function(state) {
+					states.push(state)
+				});
+
+				var uniqueStates = Array.from(new Set(states));
+				var selectedState = $('#lst-states').data('selected');
+
+				$('.dynamic-state').remove();
+				$('.dynamic-city').remove();
+				uniqueStates.sort().forEach(function(key) {
+					if (selectedState == key) {
+						$('#lst-states').append('<option value="' + key + '" selected class="dynamic-state">' + key + '</option>');
+
+						var cities = [];
+						cities = items[selectedState];
+						var uniqueCities = Array.from(new Set(cities));
+						var selectedCity = $('#lst-cities').data('selected');
+						$('.dynamic-city').remove();
+						uniqueCities.sort().forEach(function(key) {
+							if (selectedCity == key) {
+								$('#lst-cities').append('<option value="' + key + '" class="dynamic-city" selected>' + key + '</option>');
+							} else {
+								$('#lst-cities').append('<option value="' + key + '" class="dynamic-city">' + key + '</option>');
+							}
+						});
+
+					} else {
+						$('#lst-states').append('<option value="' + key + '" class="dynamic-state">' + key + '</option>');
+					}
+				});
+
+
+				$(document).on('select change', '#lst-states', function() {
+					var cities = [];
+					var selectedState = $(this).val()
+					cities = items[selectedState];
+					var uniqueCities = Array.from(new Set(cities));
+					$('.dynamic-city').remove();
+					uniqueCities.sort().forEach(function(key) {
+						$('#lst-cities').append('<option value="' + key + '" class="dynamic-city">' + key + '</option>');
+					});
+				});
+			});
+		}
+
+		function fetchUSA() {
+			$.getJSON("{{ asset('/public/api/usaCities.json') }}", function(data) {
+				var states = [];
+
+				for (i = 0; i < data.length; i++) {
+					states.push(data[i]['state']);
+				}
+				var uniqueStates = Array.from(new Set(states));
+				var selectedState = $('#lst-states').data('selected');
+				$('.dynamic-state').remove();
+				$('.dynamic-city').remove();
+				uniqueStates.sort().forEach(function(key) {
+					if (selectedState == key) {
+						$('#lst-states').append('<option value="' + key + '" selected class="dynamic-state">' + key + '</option>');
+						// 
+						var cities = [];
+						for (i = 0; i < data.length; i++) {
+							console.log(data[i])
+							cities.push(data[i]);
+						}
+						var city = getCities(cities, key);
+						var uniqueCities = Array.from(new Set(city));
+						var selectedCity = $('#lst-cities').data('selected');
+						$('.dynamic-city').remove();
+						uniqueCities.sort().forEach(function(key) {
+							if (selectedCity == key) {
+								$('#lst-cities').append('<option value="' + key + '" class="dynamic-city" selected>' + key + '</option>');
+							} else {
+								$('#lst-cities').append('<option value="' + key + '" class="dynamic-city">' + key + '</option>');
+							}
+						});
+
+					} else {
+						$('#lst-states').append('<option value="' + key + '" class="dynamic-state">' + key + '</option>');
+					}
+				});
+
+
+
+				$(document).on('select change', '#lst-states', function() {
+					var cities = [];
+					for (i = 0; i < data.length; i++) {
+						cities.push(data[i]);
+					}
+					var city = getCities(cities, $(this).val());
+					var uniqueCities = Array.from(new Set(city));
+					$('.dynamic-city').remove();
+					uniqueCities.sort().forEach(function(key) {
+
+						$('#lst-cities').append('<option value="' + key + '" class="dynamic-city">' + key + '</option>');
+					});
+				});
+
+			});
+		}
+
+		function getCities(arr, q) {
+			var sd = [];
+			arr.find(function(element) {
+				if (element['state'] == q) {
+					sd.push(element['city']);
+				}
+			});
+			return sd;
+		}
+
+		function submitLoginForm() {
 			// method="POST" action="{{ url('/auth/login') }}"
 			var data = $("#frm-login").serialize();
 			// console.log(data)
 			$.ajax({
-				type : 'POST',
-				url  : "{{ url('/custom/auth') }}",
-				data : data,
-				dataType : 'json',
-				beforeSend: function() { 
+				type: 'POST',
+				url: "{{ url('/custom/auth') }}",
+				data: data,
+				dataType: 'json',
+				beforeSend: function() {
 					$("#login-response-msg").fadeOut();
 					$("#btn-login").html('Signing in &nbsp; <i class="fa fa-spinner fa-spin"></i>');
 				},
-				success :  function(response){ 
+				success: function(response) {
 					$("#login-response-msg").html("");
-					$("#login-response-msg").fadeIn(1000, function(){
-						
-						if(response.success){
+					$("#login-response-msg").fadeIn(1000, function() {
+
+						if (response.success) {
 							// $("#login-response-msg").html(response);
 							// console.log();
 							location.reload();
-						}else{
+						} else {
 							$("#login-response-msg").html(response.message);
 						}
 						//
@@ -194,27 +361,35 @@
 				}
 			});
 			return false;
-		}/* login submit */
+		} /* login submit */

-		function submitRegisterForm (){
-			var data = $("#frm-register").serialize();
+		function submitRegisterForm() {
+			var data = $("#frm-register").serializeArray();
+			data.push({
+				name: "country",
+				value: $("#select_country option:selected").text()
+			});

 			$.ajax({
-				type : 'POST',
-				url  : "{{ url('/custom/register') }}",
-				data : data,
-				dataType : 'json',
-				beforeSend: function() { 
+				type: 'POST',
+				url: "{{ url('/custom/register') }}",
+				data: data,
+				dataType: 'json',
+				beforeSend: function() {
 					$("#register-response-msg").fadeOut();
 					$("#btn-register").html('Please wait &nbsp; <i class="fa fa-spinner fa-spin"></i>');
 				},
-				success :  function(response){ 
+				success: function(response) {
 					$("#register-response-msg").html("");
-					$("#register-response-msg").fadeIn(1000, function(){
-						
-						if(response.success){
-							location.reload();
-						}else{
+					$("#register-response-msg").fadeIn(1000, function() {
+
+						if (response.success) {
+							if (response.redirect != "") {
+								window.location = response.redirect;
+							} else {
+								location.reload();
+							}
+						} else {
 							$("#register-response-msg").html(response.message);
 						}
 						$("#btn-register").html('Register');
@@ -226,8 +401,7 @@
 			return false;

 		}
-
-		
 	</script>
 </body>
-</html>
+
+</html>
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -2,11 +2,12 @@

@section('content')
 <style>
-	.error{
+	.error {
 		color: red;
 	}
+
 	.g-recaptcha {
-		width:100%;
+		width: 100%;
 	}
 </style>
 <div class="container">
@@ -22,25 +23,40 @@
 							<div class="col-xs-12">
 								<div id="register-response-msg"></div>
 								<form role="form" id="frm-register">
+									<div class="form-group text-center">
+										<h5>Personal Information</h5>
+									</div>
+									<input type="hidden" name="redirect" value="{{ Request::get('redirectUrl')  }}">
 									<input type="hidden" name="_token" value="{{ csrf_token() }}">
+
 									<div class="form-group">
-										<label class="control-label">Fullname</label>
-										<input type="text" class="form-control" name="name" value="{{ old('name') }}" placeholder="Fullname">
+										<label class="control-label">First name</label>
+										<input type="text" class="form-control" name="firstname" placeholder="First name">
 									</div>

 									<div class="form-group">
+										<label class="control-label">Last name</label>
+										<input type="text" class="form-control" name="lastname" placeholder="Last name">
+									</div>
+
+									<!-- <div class="form-group">
 										<label class="control-label">Username</label>
 										<input type="text" class="form-control" name="username" value="{{ old('username') }}" placeholder="Username">
-									</div>
+									</div> -->

 									<div class="form-group">
 										<label class="control-label">Email Address</label>
 										<input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="Email Address">
 									</div>

+									<div class="form-group">
+										<label class="control-label">Phone Number</label>
+										<input type="text" class="form-control" name="mobilenumber" placeholder="Phone Number">
+									</div>
+
 									<div class="form-group">
 										<label class="control-label">Password</label>
-										<input type="password" class="form-control" name="password" id="password"  required placeholder="Password">
+										<input type="password" class="form-control" name="password" id="password" required placeholder="Password">
 									</div>

 									<div class="form-group">
@@ -48,6 +64,50 @@
 										<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" data-rule-equalTo="#password" required>
 									</div>

+									<div class="form-group text-center">
+										<h5>Address Information</h5>
+									</div>
+
+									<div class="form-group">
+										<label class="control-label">Select Country</label>
+										<select name="countryCode" id="select_country" class="form-control" onchange="selectCountry(this)">
+											<option value="">Select Country</option>
+											<option value="US">United States</option>
+											<option value="CA">Canada</option>
+										</select>
+									</div>
+
+									<div class="form-group">
+										<label class="control-label">State / Province</label>
+										<label></label>
+										<select class="form-control" name="state" id="lst-states">
+											<option value="">Select State</option>
+										</select>
+									</div>
+
+									<div class="form-group">
+										<label class="control-label">City</label>
+										<select class="form-control" name="city" id="lst-cities">
+											<option value="">Select City</option>
+										</select>
+									</div>
+
+									<div class="form-group">
+										<label class="control-label">Address 1</label>
+										<input type="text" class="form-control" name="address" placeholder="Address 1">
+									</div>
+
+									<div class="form-group">
+										<label class="control-label">Address 2</label>
+										<input type="text" class="form-control" name="address2" placeholder="Address 2">
+									</div>
+
+									<div class="form-group">
+										<label class="control-label">Zip Code</label>
+										<input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code">
+									</div>
+
+
 									<div class="form-group">
 										<div class="g-recaptcha text-center" data-sitekey="{{ env('CAPTCHA_SITE_KEY') }}"></div>
 									</div>
@@ -57,7 +117,7 @@
 									<div class="form-group">
 										<button type="submit" id="btn-register" class="btn btn-primary btn-block">Register</button>
 									</div>
-								
+
 								</form>
 							</div>
 						</div>
@@ -74,4 +134,4 @@
 		</div>
 	</div>
 </div>
-@endsection
+@endsection
--- a/resources/views/sublayouts/cart.blade.php
+++ b/resources/views/sublayouts/cart.blade.php
@@ -29,7 +29,7 @@
            @if(Session::has('cartkeyError'))
                <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-                        <h4><i class="fa fa-exclamation-circle"></i> Error:</h4>
+                        <h4><i class="fa fa-exclamation-circle"></i> Almost there:</h4>
                        {!! Session::get('cartkeyError') !!}
                </div>
            @endif
@@ -51,9 +51,42 @@
            @endif
            <h3>Order Summary</h3>
        </div>
+
+        @if (!Auth::guest())
+
+        <div style="border: 1px solid #e2e2e2; padding: 10px; border-bottom: none;">
+
+            <p><strong>Ship to:</strong></p>
+
+            @if ($address_book === null)
+            <a href="{{ url('user/address-book/create') }}">[ Add ]</a>
+            @else
+            <div>{{ $address_book[0]->Fullname }}</div>
+            <div>{{ $address_book[0]->ContactNumber }}</div>
+            <div>
+                {{ $address_book[0]->Address . ' ' . $address_book[0]->Address2 . ', ' . $address_book[0]->State . ', ' . $address_book[0]->City . ', ' . $address_book[0]->Country . ', ' . $address_book[0]->CountryCode . ' ' . $address_book[0]->ZipCode }}
+                <a href="{{ url('user/address-book/edit/'.$address_book[0]->Id) }}">[ Edit ]</a>
+            </div>
+            @endif
+
+        </div>
+        @endif
        
        <div style="border: 1px solid #e2e2e2; padding: 10px; border-bottom: none;">
-            <h3>Subtotal: <span id="my_subtotal">{{  round($getSubtotal, 2)  }}</span> <small>{{ $store_array[0]->StoreCurrency }}</small></h3>
+            {{-- <h3>Subtotal: <span id="my_subtotal">{{  round($getSubtotal, 2)  }}</span> <small>{{ $store_array[0]->StoreCurrency }}</small></h3> --}}
+            <h5><strong>Subtotal:</strong> 
+                <span>{{ number_format($tax['order_grandtotal'], 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
+            </h5>
+            <h5><strong>Shipping Fee:</strong>
+                <span>{{ number_format($shipping_fee, 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
+            </h5>
+            <h5> <strong>Tax:</strong>
+                <span>{{ number_format($tax['tax'], 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
+            </h5>
+            <hr>
+            <h3> <strong>Total:</strong> <span id="my_subtotal">{{ number_format($tax['order_grandtotal'] + $shipping_fee + $tax['tax'], 2) }}</span>
+                <span>{{ $store_array[0]->StoreCurrency }}</span>
+            </h3>
            <hr>
            <div class="form-group" id="voucher_list">
                @foreach($row as $item)
--- a/resources/views/user-layouts/address_book.blade.php
+++ b/resources/views/user-layouts/address_book.blade.php
@@ -34,15 +34,13 @@
                                    <tr>
                                        <th>Full name</th>
                                        <th>Address</th>
-                                        <th>Postcode</th>
                                        <th>Phone Number</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                    @foreach($array_address_book as $row)
                                        <tr>
                                            <td>{{ $row->Fullname }}</td>
-                                            <td>{{ $row->Address }}</td>
-                                            <td>{{ $row->State }}, {{ $row->City }}, {{ $row->ZipCode }}</td>
+                                            <td>{{ $row->Address . ' ' . $row->Address2 }}, {{ $row->State }}, {{ $row->City }}, {{ $row->Country}} {{ $row->CountryCode}},   {{ $row->ZipCode }}</td>
                                            <td>{{ $row->ContactNumber }}</td>
                                            <td class="text-center">
                                                <a href="{{ url('user/address-book/edit/') }}/{{ $row->Id }}" class="btn btn-default btn-xs"><i class="fa fa-edit"></i> Edit</a>
--- a/resources/views/user-layouts/create_address_book.blade.php
+++ b/resources/views/user-layouts/create_address_book.blade.php
@@ -1,81 +1,93 @@
@extends('user-layouts.user_template')
@section('content')
-    <div class="content-wrapper" style="min-height: 916px;">
-        <!-- Content Header (Page header) -->
-        <section class="content-header">
-            <h1>
-                Address Book
-                <!-- <small>Control panel</small> -->
-            </h1>
-            <ol class="breadcrumb">
-                <li><a href="{{ url ('user') }}"><i class="fa fa-home"></i> Home</a></li>
-                <li><a href="{{ url ('user/address-book') }}"><i class="fa fa-address-book-o"></i> Address Book</a></li>
-                <li class="active">Add New Address</li>
-               
-            </ol>
-        </section>
+<div class="content-wrapper" style="min-height: 916px;">
+    <!-- Content Header (Page header) -->
+    <section class="content-header">
+        <h1>
+            Address Book
+            <!-- <small>Control panel</small> -->
+        </h1>
+        <ol class="breadcrumb">
+            <li><a href="{{ url ('user') }}"><i class="fa fa-home"></i> Home</a></li>
+            <li><a href="{{ url ('user/address-book') }}"><i class="fa fa-address-book-o"></i> Address Book</a></li>
+            <li class="active">Add New Address</li>

-        <!-- Main content -->
-        <section class="content">
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="box box-primary">
-                        <div class="box-header with-border">
-                            
-                            <h3 class="box-title">
-                                Add New Address
-                            </h3>
-                        </div>
-                        <form role="form" id="frm-create-address-book">
-                            <div class="box-body">
-                                <div class="row">
-                                    <div class="col-md-6">
-                                        <div class="form-group">
-                                            <label>Fullname</label>
-                                            <input type="text" class="form-control" name="fullname" placeholder="Fullaname">
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Mobile Number</label>
-                                            <input type="text" class="form-control" name="mobilenumber" placeholder="Please enter your mobile number">
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Other Notes</label>
-                                            <input type="text" class="form-control" name="othernotes" placeholder="Please enter your notes">
-                                        </div>
-                                        <!-- /.box-body -->
+        </ol>
+    </section>
+
+    <!-- Main content -->
+    <section class="content">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+
+                        <h3 class="box-title">
+                            Add New Address
+                        </h3>
+                    </div>
+                    <form role="form" id="frm-create-address-book">
+                        <div class="box-body">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label>Fullname</label>
+                                        <input type="text" class="form-control" name="fullname" placeholder="Fullaname">
                                    </div>
-                                    <div class="col-md-6">
-                                        <div class="form-group">
-                                            <label>House Number, Building and Street Name</label>
-                                            <input type="text" class="form-control" name="address" placeholder="Please enter your House Number, Building and Street Name">
-                                        </div>
-                                        <div class="form-group">
-                                            <label>State</label>
-                                            <select class="form-control" name="state" id="lst-states" >
-                                                <option value="">Select State</option>
-                                            </select>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>City</label>
-                                            <select class="form-control" name="city" id="lst-cities">
-                                                <option value="">Select City</option>
-                                            </select>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Zip Code</label>
-                                            <input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code">
-                                        </div>
+                                    <div class="form-group">
+                                        <label>Mobile Number</label>
+                                        <input type="text" class="form-control" name="mobilenumber" placeholder="Please enter your mobile number">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Other Notes</label>
+                                        <input type="text" class="form-control" name="othernotes" placeholder="Please enter your notes">
+                                    </div>
+                                    <!-- /.box-body -->
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label>Country</label>
+                                        <select class="form-control" name="countryCode" id="select_country" onchange="selectCountry(this)">
+                                            <option value="">Select Country</option>
+                                            <option value="US">United States</option>
+                                            <option value="CA">Canada</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>State / Province</label>
+                                        <select class="form-control" name="state" id="lst-states">
+                                            <option value="">Select State</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>City</label>
+                                        <select class="form-control" name="city" id="lst-cities">
+                                            <option value="">Select City</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Address 1</label>
+                                        <textarea type="text" class="form-control" name="address" placeholder="Address 1"></textarea>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Address 2</label>
+                                        <textarea type="text" class="form-control" name="address2" placeholder="Address 2"></textarea>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Zip Code</label>
+                                        <input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code">
                                    </div>
                                </div>
                            </div>
-                            <div class="box-footer">
-                                <button type="submit" class="btn btn-primary btn-custom-save">Save</button>
-                            </div>
-                        </form>
+                        </div>
+                        <div class="box-footer">
+                            <button type="submit" class="btn btn-primary btn-custom-save">Save</button>
+                        </div>
+                    </form>
                    <div>
+                    </div>
                </div>
-            </div>
-        </section>
+    </section>
    <!-- /.content -->
-    </div>
-@endsection
+</div>
+@endsection
--- a/resources/views/user-layouts/edit_address_book.blade.php
+++ b/resources/views/user-layouts/edit_address_book.blade.php
@@ -46,8 +46,12 @@
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
-                                            <label>House Number, Building and Street Name</label>
-                                            <input type="text" class="form-control" name="address" placeholder="Please enter your House Number, Building and Street Name" value="{{ $array_address_book[0]->Address }}">
+                                            <label>Country</label>
+                                            <select class="form-control" name="countryCode" id="select_country" onchange="selectCountry(this)" data-selected="{{ $array_address_book[0]->CountryCode }}">
+                                                <option value="">Select Country</option>
+                                                <option value="US">United States</option>
+                                                <option value="CA">Canada</option>
+                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>State</label>
@@ -61,6 +65,15 @@
                                                <option value="">Select City</option>
                                            </select>
                                        </div>
+                                        <div class="form-group">
+                                            <label>Address 1</label>
+                                            <input type="text" class="form-control" name="address" placeholder="Address 1" value="{{ $array_address_book[0]->Address }}">
+                                        </div>
+
+                                        <div class="form-group">
+                                            <label>Address 2</label>
+                                            <input type="text" class="form-control" name="address2" placeholder="Address 2" value="{{ $array_address_book[0]->Address2 }}">
+                                        </div>
                                        <div class="form-group">
                                            <label>Zip Code</label>
                                            <input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code" value="{{ $array_address_book[0]->ZipCode }}">
--- a/resources/views/user-layouts/user_template.blade.php
+++ b/resources/views/user-layouts/user_template.blade.php