@extends('layouts.app')
@push('styles')
@endpush
@section('content')
<!-- Start Page-content-Wrapper -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="page-content-wrapper">
@include("layouts.partials.validate_alert")
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
{{-- <a href="{{url('sakura')}}">Test</a> --}}
<h4 class="card-title"> Edit Profil {{ $title }} </h4>
{{-- route($url.'.update', $user->id) --}}
<form method="POST" id="form-verifikasi-action" action="{{ url('profilss') }}">
@csrf
<input type="hidden" name="id" value="{{ base64_encode(@Auth::user()->id)}}">
@if (isset($_GET['status']) && $_GET['status'] == "mobile")
<input type="hidden" name="mobile" value="bebas">
@endif
<div class="form-content">
@include("pages.profil.form")
</div>
<div class="page_4" style="display: none;">
<h4 class="font-size-18 text-center" style="color: #5A6684;"> Verifikasi OTP </h4>
<p class="text-muted text-center">Kami telah mengirimkan nomor OTP 4 digit ke no whatsapp anda <span class="text-success" id="whatsapp_show"></span> email anda <span class="text-success" id="email_show"></span>. Silahkan masukkan dibawah ini untuk memverifikasi akun anda.</p>
<div class="mb-3 d-flex justify-content-center">
<div class="p-1">
{{-- <h6 class="text-muted">Verifikasi Nomor OTP : </h6> --}}
<div class="d-flex">
<div class="p-1">
<input type="text" maxlength="1" size="1" name="valueOTP" class="otp-input form-control" oninput="this.value = this.value.replace(/[^0-9]/g, '');" id="otp1" />
</div>
<div class="p-1">
<input type="text" maxlength="1" size="1" name="valueOTP" class="otp-input form-control" oninput="this.value = this.value.replace(/[^0-9]/g, '');" id="otp2" />
</div>
<div class="p-1">
<input type="text" maxlength="1" size="1" name="valueOTP" class="otp-input form-control" oninput="this.value = this.value.replace(/[^0-9]/g, '');" id="otp3" />
</div>
<div class="p-1">
<input type="text" maxlength="1" size="1" name="valueOTP" class="otp-input form-control" oninput="this.value = this.value.replace(/[^0-9]/g, '');" id="otp4" />
</div>
</div>
</div>
</div>
{{-- <div class="mb-3">
<h6 class="text-muted">Tekan link ini jika ingin mengirim kode OTP lagi : </h6>
</div> --}}
<div class="mb-3 row">
<div class="col-12">
<center>
<button id="checkOTP" class="btn btn-primary waves-effect waves-light"
type="button">Konfirmasi</button>
</center>
</div>
</div>
<div class="mb-3 row">
<div class="d-flex justify-content-center">
<div class="p-1">
<span id="timer_change">Anda dapat mengirim nomor OTP lagi setelah <span id="timer" style="font-weight: bolder"></span> detik</span>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- End Cardbody -->
</div>
<!-- End Card -->
</div>
</div>
<!-- End Row -->
</div>
@push('scripts')
<script>
$(document).ready(function() {
@if (isset($_GET['status']) && $_GET['status'] == "mobile")
$('#pc_tampilan').css('display', 'none');
@endif
// $('#pc_tampilan').css('display', 'none');
const inputs = document.querySelectorAll('.otp-input');
inputs.forEach((input, index) => {
input.addEventListener('input', () => {
if (input.value.length >= 1) {
if (index < inputs.length - 1) {
inputs[index + 1].focus();
}
} else if (index > 0) {
inputs[index - 1].focus();
}
});
});
var page = 1;
var OTPNumber = 0;
let timeLeft = 60; // 60 seconds
let timeStart = true;
const timerElement = document.getElementById('timer');
let countdown;
function startTimer() {
countdown = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(countdown); // Stop the timer
document.getElementById('timer_change').innerHTML = 'Nomor OTP bisa dikirim lagi : <a href="#" id="sendOTPLagi">kirim OTP!</a>';
// timerElement.innerText = 'Time is up!';
} else {
$('#timer').text(timeLeft);
// timerElement.innerText = timeLeft; // Display the remaining time
timeLeft--; // Decrease the time by 1 second
}
}, 1000);
}
$(document).on('click', '#sendOTPLagi', function() {
$('#timer_change').text("Mohon Menunggu!");
const randomNumber = Math.floor(Math.random() * 10000);
let token = $("meta[name='csrf-token']").attr("content");
$.ajax({
url: `{{url('verifikasi')}}`,
type: "POST",
cache: false,
data: {
"randomNumber": String(randomNumber).padStart(4, '0'),
"_token": token,
'nama_siswa' : $('input[name="nama_siswa"]').val(),
'no_identitas' : $('input[name="no_identitas"]').val(),
'no_hp_siswa' : $('input[name="no_hp_siswa"]').val(),
'verifikasi' : 1,
// 'no_hp_siswa' : $('#no_hp_siswa').val(),
// 'nama_siswa' : $('#nama_siswa').val(),
// 'no_identitas' : $('#no_identitas').val(),
},
success:function(response){
OTPNumber = parseInt(response.data);
// console.log(response);
document.getElementById('timer_change').innerHTML = 'Anda dapat mengirim nomor OTP lagi setelah <span id="timer" style="font-weight: bolder"></span> detik';
clearInterval(countdown); // Hentikan countdown yang sedang berjalan
timeLeft = 60; // Reset waktu ke 60 detik
timerElement.innerText = timeLeft; // Tampilkan ulang waktu 60 detik
startTimer();
},
error:function(xhr){
}
});
});
$('#checkOTP').click(function(event) {
event.preventDefault(); // Mencegah pengiriman form
// Mengambil semua input dengan nama yang sama
const inputs = document.getElementsByName('valueOTP');
const values = Array.from(inputs).map(input => input.value.trim());
// Menyatukan string menjadi satu kalimat
const result = values.filter(value => value !== '').join('');
// Menampilkan hasil
// document.getElementById('result').innerText = result;
if(OTPNumber == parseInt(result)) {
alert("Nomor OTP Benar!");
$('#form-verifikasi-action').submit();
} else {
alert("Nomor OTP Salah!");
}
// alert(parseInt(result));
});
$('#sendOTP').click(function() {
$('.alertNotif').remove();
const formData = $(this).serialize();
let token = $("meta[name='csrf-token']").attr("content");
const randomNumber = Math.floor(Math.random() * 10000);
$(this).css('display', 'none');
$(this).after(`<span id="loadingNext">Mohon Menunggu!</span>`);
// Pad with leading zeros if necessary to ensure it's 4 digits
// return String(randomNumber).padStart(4, '0');
$.ajax({
url: `{{url('verifikasi')}}`,
type: "POST",
cache: false,
data: {
"randomNumber": String(randomNumber).padStart(4, '0'),
"_token": token,
'siswa_id' : '{{Auth::user()->siswa->id}}',
'email' : $('input[name="email"]').val(),
'nama_siswa' : $('input[name="nama_siswa"]').val(),
'no_identitas' : $('input[name="no_identitas"]').val(),
// 'password' : '1',
// 'c_password' : '1',
'jenis_kelamin' : $('select[name="jenis_kelamin"]').val(),
'tempat_lahir' : $('input[name="tempat_lahir"]').val(),
'tanggal_lahir' : $('input[name="tanggal_lahir"]').val(),
'alamat_siswa' : $('textarea[name="alamat_siswa"]').val(),
'no_hp_siswa' : $('input[name="no_hp_siswa"]').val(),
'agama' : $('select[name="agama"]').val(),
'asal_sekolah' : $('input[name="asal_sekolah"]').val(),
'jurusan_sekolah' : $('input[name="jurusan_sekolah"]').val(),
'tingkatan_sekolah' : $('select[name="tingkatan_sekolah"]').val(),
'tahun_lulus_sekolah' : $('input[name="tahun_lulus_sekolah"]').val(),
'nama_orang_tua' : $('input[name="nama_orang_tua"]').val(),
'alamat_orang_tua' : $('input[name="alamat_orang_tua"]').val(),
'no_hp_orang_tua' : $('input[name="no_hp_orang_tua"]').val(),
'foto_siswa' : $('input[name="foto_siswa"]').prop('files')[0] ? $('input[name="foto_siswa"]').prop('files')[0].name : '',
'foto_orang_tua' : $('input[name="foto_orang_tua"]').prop('files')[0] ? $('input[name="foto_orang_tua"]').prop('files')[0].name : '',
// 'jabatan' : $('input[name="jabatan"]').val(),
// 'cabang' : $('input[name="cabang"]').val(),
// 'tahun_ajaran' : $('input[name="tahun_ajaran"]').val(),
// 'gelombang' : $('select[name="gelombang"]').val(),
// 'grup_pengguna' : $('select[name="grup_pengguna"]').val(),
// 'no_hp_siswa' : $('#no_hp_siswa').val(),
// 'nama_siswa' : $('#nama_siswa').val(),
// 'no_identitas' : $('#no_identitas').val(),
},
success:function(response){
$('.form-content').css({
'display': 'none',
});
$('.page_4').css({
'display': 'block',
});
$('#sendOTP').css('display', 'block');
$('#whatsapp_show').text($('input[name="no_hp_siswa"]').val());
$('#email_show').text($('input[name="email"]').val());
$('#loadingNext').remove();
document.getElementById('timer_change').innerHTML = 'Anda dapat mengirim nomor OTP lagi setelah <span id="timer" style="font-weight: bolder"></span> detik';
clearInterval(countdown); // Hentikan countdown yang sedang berjalan
timeLeft = 60; // Reset waktu ke 60 detik
timerElement.innerText = timeLeft;
startTimer();
OTPNumber = response.data;
// console.log(response);
},
error:function(xhr){
if (xhr.status === 422) {
alert('Mohon dicheck lagi inputannya!');
const errors = xhr.responseJSON.errors;
$('#sendOTP').css('display', 'block');
$('#loadingNext').remove();
$.each(errors, function(field, messages) {
// console.log(field + " : " + messages);
$(`input[name="${field}"]`).after(`<span class="m-2 text-danger alertNotif">${messages}</span>`);
$(`select[name="${field}"]`).after(`<span class="m-2 text-danger alertNotif">${messages}</span>`);
$(`textarea[name="${field}"]`).after(`<span class="m-2 text-danger alertNotif">${messages}</span>`);
});
// console.log(xhr.responseJSON.errors);
// console.log('Validation Errors:', xhr.responseJSON.errors);
} else {
console.log('An error occurred:', xhr);
}
}
});
// alert(String(randomNumber).padStart(4, '0'));
});
});
</script>
@endpush
<!-- End Page-content -->
@endsection
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell