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">Create Address</h1>
</div>
<form action="{{ route('customer.address.store', $customer->id) }}" method="post" class="form" name="frm_create_address" id="frm_create_address" enctype="multipart/form-data" autocomplete="off">
<input type="hidden" name="status" value="1">
<div class="row margin-inner-none">
<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" placeholder="Address 1" class="form-control input-lg" value="{{ old('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') }}">
</div>
</div>
</div>
<div class="row margin-inner-none">
<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" placeholder="Town" class="form-control input-lg" value="">
</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" placeholder="County" class="form-control input-lg" value="">
</div>
</div>
</div>
<div class="row margin-inner-none">
<div class="col-md-6">
<div id="provinces" class="form-group" style="display: none;"></div>
<div id="cities" class="form-group" style="display: none;"></div>
<div class="form-group">
<label for="zip">Post Code <span class="text-danger">*</span></label>
<input type="text" name="zip" id="zip" placeholder="Post Code" class="form-control input-lg" value="{{ old('zip') }}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="phone">Phone Number <span class="text-danger">*</span></label>
<input type="text" name="phone" id="phone" placeholder="Phone number" class="form-control input-lg" value="{{ old('phone') }}">
</div>
</div>
</div>
<div class="row margin-inner-none">
<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">Create</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">
$(document).ready(function(){
$('#frm_create_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' }
}
});
});
$(document).on('change','#county_address',function(){
var county_id = $(this).val();
if(county_id != ''){
$.ajax({
url:"{{ route('address.fetch.towns') }}",
method: "POST",
data: {'county_id':county_id , "_token": "{{ csrf_token() }}"},
success:function(data){
data = JSON.parse(data);
$("#town_address").html(data);
}
});
}
});
function findProvinceOrState(countryId) {
$.ajax({
url : '/api/v1/country/' + countryId + '/province',
contentType: 'json',
success: function (res) {
if (res.data.length > 0) {
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 value="'+ v.id+'">'+ v.name +'</option>';
});
html += '</select>';
$('#provinces').html(html).show();
$('.select2').select2();
findCity(countryId, 1);
$('#province_id').change(function () {
var provinceId = $(this).val();
findCity(countryId, provinceId);
});
} else {
$('#provinces').hide().html('');
$('#cities').hide().html('');
}
}
});
}
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) {
html += '<option value="'+ v.id+'">'+ 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) {
html += '<option 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) {
html += '<option 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 = +"{{ env('SHOP_COUNTRY_ID') }}";
$(document).ready(function () {
if (countryId === 226) {
findUsStates(countryId);
} else {
findProvinceOrState(countryId);
}
$('#country_id').on('change', function () {
countryId = +$(this).val();
if (countryId === 226) {
findUsStates(countryId);
} else {
findProvinceOrState(countryId);
}
});
$('#city_id').on('change', function () {
cityId = $(this).val();
findProvinceOrState(countryId);
});
$('#province_id').on('change', function () {
provinceId = $(this).val();
findProvinceOrState(countryId);
});
});
</script>
@endsection