Files
freeu-project/resources/views/Frontend/Pages/profile/investor-profile-edit.blade.php
2024-05-24 14:42:08 +05:30

455 lines
20 KiB
PHP

@extends('Frontend.layouts.master')
@section('content')
<div>
<div class="investor-profile">
<div class="aos-init invest-form aos-animate" data-aos="zoom-in">
<div class="container">
<div class="ip-header">
<h2 class="mb-0">Investor Profile</h2>
</div>
<form id="updateInvestor">
@csrf
@method('PATCH')
<div class="row form-sec">
<input type="hidden" name="id" value="{{ auth()->guard('users')->user()->id }}">
<div class="iv-form col-md-6 mb-3">
<p><label for="name">Name</label></p>
<p><input type="text" id="name" name="name"
{{-- onkeydown="return /[a-zA-Z]/i.test(event.key)" --}}
oninput="$(this).val($(this).val().replace(/[^A-Za-z\s]/g, ''))"
value="{{ auth()->guard('users')->user()->name }}" class="iv-input"></p>
</div>
<div class="iv-form col-md-6 mb-3">
<p><label for="phone">Phone Number</label></p>
<p class="edit-invest-profile"><input type="tel" id="contact_number" readonly
name="contact_number"
oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"
value="{{ auth()->guard('users')->user()->contact_number }}" class="iv-input" minlength="10" maxlength="10">
<a class="edit-mobile"><i class="fa-solid fs-5 fa-pen-to-square"></i></a>
</p>
</div>
<div class="iv-form col-md-6 mb-3">
<p><label for="email">Email Id</label></p>
<p class="edit-invest-profile"><input type="text" id="email" name="email"
value="{{ auth()->guard('users')->user()->email }}" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" readonly class="iv-input">
<a class="edit-email"><i class="fa-solid fs-5 fa-pen-to-square"></i></a>
</p>
</div>
<div class="iv-form col-md-6 mb-3">
<p><label for="email">Profile Picture</label></p>
<p><input style="padding:5px;" type="file" id="profile_image" accept="image/*"
name="profile_image" class="iv-input bg-white"></p>
</div>
<div class="iv-form col-md-12 mb-4">
<p><label>Address</label></p>
<textarea name="address">{{ auth()->guard('users')->user()->address }}</textarea>
</div>
<div class="iv-form col-md-6 mb-3">
<button class="save edit-save-btn" id="submit-btn" type="submit">Save</button>
<!--<button class='save d-none' id="loaderBtn">-->
<!-- <div class="spinner-border" role="status">-->
<!-- <span class="sr-only">Loading...</span>-->
<!-- </div>-->
<!--</button>-->
<div class="save text-center d-none" id="loaderBtn">
<span class="spinner-border"></span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade edit-modal" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="emailModalTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<form class="w-100" id="update_only_email">
@csrf
@method('PATCH')
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Update Email</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="email">New Email Id</label><br>
<input type="email" name="newEmail" id="newEmail" placeholder="Enter email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}">
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="cancle-btn removeEmail" data-bs-dismiss="modal">Close</button>
<button type="submit" class="yellow-btn">Send OTP</button>
</div>
</div>
</form>
</div>
</div>
{{-- email popup close --}}
{{-- email verify otp modal --}}
<!-- Modal -->
<div class="modal fade edit-modal" id="otpModal" tabindex="-1" role="dialog" aria-labelledby="otpModalTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<form class="w-100" id="enter_otp_for_email">
@csrf
@method('PATCH')
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Enter OTP</h5>
{{-- <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button> --}}
</div>
<div class="modal-body">
<div>
<label for="email">OTP</label>
<input type="text" oninput="$(this).val($(this).val().replace(/[^0-9]/g,''))" name="email_otp" id="email_otp">
</div>
{{-- <p>OTP has been sent to your registered email address. <br>OTP valid for <span
id="countdowns-timer"></span> sec</p>
<p id="registration_resend_otp" class="regist">Didn't receive any otp? <a href="#"
id="resend_registration_otp" class="d-none">Resend OTP</a></p> --}}
</div>
<div class="modal-footer justify-content-center">
{{-- <button type="button" class="cancle-btn removeEmail" data-bs-dismiss="modal">Close</button> --}}
<button type="submit" class="yellow-btn">Update</button>
</div>
</div>
</form>
</div>
</div>
{{-- email otp modal ends --}}
{{-- contact number modal start --}}
<!-- Modal -->
<div class="modal fade edit-modal" id="contactNumberModal" tabindex="-1" role="dialog"
aria-labelledby="contactNumberModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<form class="w-100" id="update_only_contact_number">
@csrf
@method('PATCH')
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Update Phone Number</h5>
<button type="button" class="btn-close removeMobileNumber" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="newcontact_number">New Phone Number</label>
<input type="text" name="newcontact_number" id="newcontact_number"
placeholder="Enter phone number" oninput="$(this).val($(this).val().replace(/[^0-9]/g,''))" maxlength="10" minlength="10">
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="cancle-btn removecontact_number"
data-bs-dismiss="modal">Close</button>
<button type="submit" class="yellow-btn">Send OTP</button>
</div>
</div>
</form>
</div>
</div>
{{-- mobile popup close --}}
{{-- mobile verify otp modal --}}
<!-- Modal -->
<div class="modal fade edit-modal" id="mobileOtpModal" tabindex="-1"
role="dialogmobile
aria-labelledby="mobileOtpModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<form class="w-100" id="enter_otp_for_contact_number">
@csrf
@method('PATCH')
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Enter OTP</h5>
{{-- <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button> --}}
</div>
<div class="modal-body">
<div>
<label for="mobile_otp">OTP</label>
<input type="text" oninput="$(this).val($(this).val().replace(/[^0-9]/g,''))" name="mobile_otp" id="mobile_otp">
</div>
{{-- <p>OTP has been sent to your registered email address. <br>OTP valid for <span
id="countdowns-timer"></span> sec</p>
<p id="registration_resend_otp" class="regist">Didn't receive any otp? <a href="#"
id="resend_registration_otp" class="d-none">Resend OTP</a></p> --}}
</div>
<div class="modal-footer justify-content-center">
{{-- <button type="button" class="cancle-btn"
data-bs-dismiss="modal">Close</button> --}}
<button type="submit" class="yellow-btn">Update</button>
</div>
</div>
</form>
</div>
</div>
{{-- mobile otp modal ends --}}
@endsection
@section('scripts')
<script>
$("#updateInvestor").validate({
ignore: [],
debug: false,
rules: {
name: 'required',
address: 'required',
// address: {
// required: true,
// address: true,
// maxlength: 10
// },
// email: {
// email: true,
// required: true
// },
// contact_number: {
// required: true,
// digits: true,
// minlength: 10,
// maxlength: 10,
// },
},
messages: {
name: 'Please enter your name',
// email: 'Please enter your email',
address: 'Please enter your address',
// contact_number: {
// required: 'Please enter your contact number',
// digits: 'Please enter digits',
// minlength: 'Contact Number should be 10 digits',
// maxlength: 'Contact Number should be 10 digits',
// },
},
submitHandler: function(form) {
var formData = new FormData(form);
$.ajax({
url: "{{ route('update-user-profile') }}",
type: "POST",
data: formData,
beforeSend: function() {
$('#loaderBtn').removeClass('d-none');
$('#submit-btn').addClass('d-none');
},
processData: false,
contentType: false,
dataType: "json",
success: function(result) {
if (result.status == 200) {
toastr.success(result.message);
setTimeout(() => {
location.replace("{{ route('investor-profile') }}");
}, 1000);
}
if (result.status == 400) {
$('#submit-btn').removeClass('d-none');
$('#loaderBtn').addClass('d-none');
toastr.warning(result.message);
}
},
});
},
});
// open modal if click on edit icon
$('.edit-email').click(function() {
$('#emailModal').modal('show');
})
// remove text if modal close
$('.removeEmail').on('click', function() {
$('#newEmail').val('');
})
// open modal if click on edit icon
$('.edit-mobile').click(function() {
$('#contactNumberModal').modal('show');
})
// remove text if modal close
$('.removeMobileNumber').on('click', function() {
$('#newcontact_number').val('');
})
$.validator.addMethod("customEmail", function(value, element) {
// Regular expression for email validation
return /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/.test(value);
// return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
}, "Please enter a valid email address");
// open modal and enter email to send otp
$('#update_only_email').validate({
ignore: [],
debug: false,
rules: {
newEmail: {
email: true,
required: true,
customEmail: true,
},
},
messages: {
// newEmail: 'Please enter valid email address',
required: 'Enter your email'
},
submitHandler: function(form) {
var formData = new FormData(form);
$.ajax({
url: "{{ route('send-email-otp') }}",
type: "POST",
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function(result) {
if (result.status == 200) {
toastr.success(result.message);
$('#emailModal').modal('hide');
$('#newEmail').val('');
$('#otpModal').modal('show');
// setTimeout(() => {
// location.replace("{{ route('investor-profile') }}");
// }, 1000);
}
if (result.status == 400) {
// $('#submit-btn').removeClass('d-none');
// $('#loaderBtn').addClass('d-none');
toastr.warning(result.message);
}
},
});
},
});
// verify otp for email
$('#enter_otp_for_email').validate({
ignore: [],
debug: false,
rules: {
email_otp: {
required: true,
minlength: 4,
maxlength: 4,
},
},
messages: {
email_otp: 'Please enter 4 digit OTP',
},
submitHandler: function(form) {
var formData = new FormData(form);
$.ajax({
url: "{{ route('update-user-email') }}",
type: "POST",
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function(result) {
if (result.status == 200) {
toastr.success(result.message);
// $('#emailModal').modal('hide');
$('#otpModal').modal('hide');
setTimeout(() => {
location.reload();
}, 3000);
}
if (result.status == 201) {
// $('#submit-btn').removeClass('d-none');
// $('#loaderBtn').addClass('d-none');
toastr.warning(result.message);
}
},
});
},
});
// open modal and enter mobile number to send otp
$('#update_only_contact_number').validate({
ignore: [],
debug: false,
rules: {
newcontact_number: {
required: true
},
},
messages: {
newcontact_number: {
required: 'This field is required'
}
},
submitHandler: function(form) {
var formData = new FormData(form);
$.ajax({
url: "{{ route('send-otp-mobile') }}",
type: "POST",
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function(result) {
if (result.status == 200) {
toastr.success(result.message);
$('#contactNumberModal').modal('hide');
$('#newcontact_number').val('');
$('#mobileOtpModal').modal('show');
} else if (result.status == 400) {
toastr.warning(result.message);
}
},
});
},
});
// verify otp for mobile number
$('#enter_otp_for_contact_number').validate({
ignore: [],
debug: false,
rules: {
mobile_otp: {
required: true,
minlength: 4,
maxlength: 4,
},
},
messages: {
mobile_otp: 'Please enter 4 digit OTP',
},
submitHandler: function(form) {
var formData = new FormData(form);
$.ajax({
url: "{{ route('update-user-contact-number') }}",
type: "POST",
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function(result) {
if (result.status == 200) {
toastr.success(result.message);
// $('#emailModal').modal('hide');
$('#mobileOtpModal').modal('hide');
setTimeout(() => {
location.reload();
}, 3000);
}
if (result.status == 201) {
// $('#submit-btn').removeClass('d-none');
// $('#loaderBtn').addClass('d-none');
toastr.warning(result.message);
}
},
});
},
});
</script>
@endsection