Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/mcoil.corals.io/resources/views/front/customers/addresses/ |
@extends('layouts.front.app')
@section('content')
@include('layouts.front.other-menu')
<section class="container content">
@include('layouts.errors-and-messages')
<div class="row">
<div class="col-md-12">
<h1 class="text-center bold">Edit Address</h1>
</div>
<form name="frm_edit_address" id="frm_edit_address" action="{{ route('customer.address.update', [$customer->id, $address->id]) }}" method="post" class="form" enctype="multipart/form-data">
<input type="hidden" name="status" value="1">
<input type="hidden" id="address_country_id" value="{{ $address->country_id }}">
<input type="hidden" id="address_province_id" value="{{ $address->province_id }}">
<input type="hidden" id="address_state_code" value="{{ $address->state_code }}">
<input type="hidden" id="address_city" value="{{ $address->city }}">
<input type="hidden" name="_method" value="put">
<div class="row">
<div class="col-md-6">
{{ csrf_field() }}
<div class="form-group">
<label for="address_1">Address 1 <span class="text-danger">*</span></label>
<input type="text" name="address_1" id="address_1" required="" placeholder="Address 1" class="form-control input-lg" value="{{ old('address_1') ?? $address->address_1 }}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="address_2">Address 2 </label>
<input type="text" name="address_2" id="address_2" placeholder="Address 2" class="form-control input-lg" value="{{ old('address_2') ?? $address->address_2 }}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="town">Town <span class="text-danger">*</span></label>
<input type="text" name="town" id="town" required="" placeholder="Town" class="form-control input-lg" value="{{ old('town') ?? $address->town }}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="county">County <span class="text-danger">*</span></label>
<input type="text" name="county" id="county"required="" placeholder="County" class="form-control input-lg" value="{{ old('county') ?? $address->county }}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="zip">Post Code </label>
<input type="text" name="zip" id="zip" required="" placeholder="Post Code" class="form-control input-lg" value="{{ old('zip') ?? $address->zip }}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="phone">Phone Number </label>
<input type="text" name="phone" id="phone" required="" placeholder="Phone number" class="form-control input-lg" value="{{ old('phone') ?? $address->phone }}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row margin-top-30">
<div class="col-md-6 btn-margin-top">
<a href="{{ route('accounts', ['tab' => 'address']) }}" class="btn btn-dark btn-lg btn-block font-black">Back</a>
</div>
<div class="col-md-6 btn-margin-top">
<button type="submit" class="btn btn-lg btn-block btn-send">Update</button>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
@include('layouts.front.call-to-action-footer')
@endsection
@section('css')
<link href="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css') }}" rel="stylesheet" />
@endsection
@section('js')
<script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js') }}"></script>
<script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js') }}"></script>
<script type="text/javascript">
function findProvinceOrState(countryId) {
$.ajax({
url : '/api/v1/country/' + countryId + '/province',
contentType: 'json',
success: function (res) {
if (res.data.length > 0) {
let province = jQuery('#address_province_id').val();
let html = '<label for="province_id">Provinces </label>';
html += '<select name="province_id" id="province_id" class="form-control input-lg select2">';
$(res.data).each(function (idx, v) {
html += '<option';
if (+province === v.id) {
html += ' selected="selected"';
}
html += ' value="'+ v.id+'">'+ v.name +'</option>';
});
html += '</select>';
$('#provinces').html(html).show();
$('.select2').select2();
findCity(countryId, province);
$('#province_id').change(function () {
var provinceId = $(this).val();
findCity(countryId, provinceId);
});
} else {
$('#provinces').hide();
$('#cities').hide();
}
}
});
}
function findCity(countryId, provinceOrStateId) {
$.ajax({
url: '/api/v1/country/' + countryId + '/province/' + provinceOrStateId + '/city',
contentType: 'json',
success: function (data) {
let html = '<label for="city_id">City </label>';
html += '<select name="city_id" id="city_id" class="form-control input-lg select2">';
$(data.data).each(function (idx, v) {
let city = jQuery('#address_city').val();
console.log(city);
html += '<option ';
if (city === v.name) {
html += ' selected="selected" ';
}
html +=' value="'+ v.name+'">'+ v.name +'</option>';
});
html += '</select>';
$('#cities').html(html).show();
$('.select2').select2();
},
errors: function (data) {
// console.log(data);
}
});
}
function findUsStates() {
$.ajax({
url : '/country/' + countryId + '/state',
contentType: 'json',
success: function (res) {
if (res.data.length > 0) {
let html = '<label for="state_code">States </label>';
html += '<select name="state_code" id="state_code" class="form-control input-lg select2">';
$(res.data).each(function (idx, v) {
let state_code = jQuery('#address_state_code').val();
html += '<option ';
if (state_code === v.state_code) {
html += ' selected="selected" ';
}
html +=' value="'+ v.state_code+'">'+ v.state +'</option>';
});
html += '</select>';
$('#provinces').html(html).show();
$('.select2').select2();
findUsCities('AK');
$('#state_code').change(function () {
let state_code = $(this).val();
findUsCities(state_code);
});
} else {
$('#provinces').hide().html('');
$('#cities').hide().html('');
}
}
});
}
function findUsCities(state_code) {
$.ajax({
url : '/state/' + state_code + '/city',
contentType: 'json',
success: function (res) {
if (res.data.length > 0) {
let html = '<label for="city">City </label>';
html += '<select name="city" id="city" class="form-control input-lg select2">';
$(res.data).each(function (idx, v) {
let city = jQuery('#address_city').val();
html += '<option ';
if (city === v.name) {
html += ' selected="selected" ';
}
html +=' value="'+ v.name+'">'+ v.name +'</option>';
});
html += '</select>';
$('#cities').html(html).show();
$('.select2').select2();
$('#state_code').change(function () {
let state_code = $(this).val();
findUsCities(state_code);
});
} else {
$('#provinces').hide().html('');
$('#cities').hide().html('');
}
}
});
}
let countryId = +$('#address_country_id').val();
$(document).ready(function () {
// Form validation
$('#frm_edit_address').validate({
rules: {
address_1: { required: true },
county: { required: true },
town: { required: true },
zip: { required: true },
phone: { required: true, digits: true, minlength: 7, maxlength: 11 }
},
messages: {
address_1: { required: 'Please enter Address 1' },
county: { required: 'Please enter county' },
town: { required: 'Please enter town' },
zip: { required: 'Please enter post code' },
phone: { required: 'Please enter phone number', digits: 'Please enter a valid phone number', minlength: 'The phone must be between 7 and 11 digits', maxlength: 'The phone must be between 7 and 11 digits' }
}
});
if (countryId === 226) {
findUsStates(countryId);
} else {
findProvinceOrState(countryId);
}
$('#country_id').on('change', function () {
countryId = $(this).val();
findProvinceOrState(countryId);
});
$('#city_id').on('change', function () {
cityId = $(this).val();
findProvinceOrState(countryId);
});
$('#province_id').on('change', function () {
provinceId = $(this).val();
if (countryId === 226) {
findUsStates(countryId);
} else {
findProvinceOrState(countryId);
}
});
});
</script>
@endsection