@extends('layouts.app')

@push('styles')
@endpush

@section('content')
<!-- Start Page-content-Wrapper -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
    /* Container for the OTP inputs */
    .otp-container {
    display: flex;
    justify-content: space-between;
    width: 250px; /* Adjust as necessary */
    gap: 10px; /* Space between each input */
    }

    /* Styling individual OTP input boxes */
    .otp-input {
    width: 75px; /* Adjust width of each input */
    height: 75px; /* Adjust height */
    text-align: center;
    font-size: 32px; /* Adjust font size */
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    }

    .otp-input:focus {
    border-color: #4d90fe; /* Color when focused */
    box-shadow: 0 0 5px rgba(77, 144, 254, 0.5); /* Optional, gives a soft glow on focus */
    }

    .otp-input[type="text"] {
    -moz-appearance: textfield; /* Remove spinner arrows in Firefox */
    }

    .otp-input::placeholder {
    color: transparent; /* Optional, to hide placeholder text */
    }

</style>

<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">
                    <h4 class="card-title"> Lengkapi Data {{ $title }}</h4>

                    <form method="POST" id="form-verifikasi-action" action="{{ url('verifikasi') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="form-content">
                            <div class="mb-3">
                                <h6 class="text-muted">Data Grup Pengguna </h6>
                            </div>
                            {{-- <div class="mb-3">
                                <label class="form-label">Grup Pengguna <span class="text-danger">*</span></label>
                                <select class="form-select" name="grup_pengguna" >
                                    <option disabled selected>Pilih Grup Pengguna</option>
                                    <option @if( old('grup_pengguna', @$siswa->grup_pengguna) == 'Peserta Umum' ) selected @endif value="Peserta Umum">Peserta Umum</option>
                                </select>
                                @error('grup_pengguna')
                                    <span class="m-2 text-danger">{{$message}}</span>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Jabatan <span class="text-danger">*</span></label>
                                <input type="text" name="jabatan" class="form-control"  value="{{ old('asal_sekolah', @$siswa->jabatan) }}" placeholder="Jabatan" />
                                @error('jabatan')
                                    <span class="m-2 text-danger">{{$message}}</span>
                                @enderror
                            </div> --}}
                            <div class="mb-3">
                                <label class="form-label" for="nama_siswa">Nama Lengkap <span class="text-danger">*</span> </label>
                                <input type="text" class="form-control" id="nama_siswa" name="nama_siswa" readonly placeholder="Isi Nama Lengkap" value="{{ old('nama_siswa',  @Auth::user()->siswa->nama_siswa) }}" >
                                @error('nama_siswa')
                                    <span class="m-2 text-danger">{{$message}}</span>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="email">Email yang aktif<span class="text-danger">*</span><i class="text-danger" style="font-size: 11px;">(digunakan untuk login)</i> </label>
                                <input type="text" class="form-control" id="email" name="email" readonly placeholder="Isi Email" value="{{ old('email', Auth::user()->email) }}" >
                                @error('email')
                                    <span class="m-2 text-danger">{{$message}}</span>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Cabang <span class="text-danger">*</span></label>
                                <input type="text" name="cabang" class="form-control" readonly value="{{ old('cabang', @Auth::user()->siswa->cabang) }}" placeholder="Cabang" />
                                @error('cabang')
                                    <span class="m-2 text-danger">{{$message}}</span>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Tahun Ajaran <span class="text-danger">*</span></label>
                                <input type="number" name="tahun_ajaran" class="form-control" readonly value="{{ old('tahun_ajaran', @Auth::user()->siswa->tahun_ajaran) }}" placeholder="Tahun Ajaran" />
                                @error('tahun_ajaran')
                                    <span class="m-2 text-danger">{{$message}}</span>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Gelombang <span class="text-danger">*</span></label>
                                <input type="text" name="gelombang" class="form-control" readonly value="{{ old('gelombang', @Auth::user()->siswa->gelombang) }}" placeholder="Gelombang" />
                                @error('gelombang')
                                    <span class="m-2 text-danger">{{$message}}</span>
                                @enderror
                            </div>
                            {{-- @include("pages.siswa.form") --}}
                            <div class="row">
                                <div class="page_1 col-sm-12 col-md-6">
                                    <div class="mb-3">
                                        <h6 class="text-muted">Data Siswa <i>(Harap diisi dengan jelas dan lengkap)</i> </h6>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">No.Whatsapp Siswa yang aktif<span class="text-danger">* </span><i class="text-danger" style="font-size: 11px;">(digunakan untuk login)</i></label>
                                        <input type="number" name="no_hp_siswa" id="no_hp_siswa" class="form-control"  value="{{ old('no_hp_siswa', @Auth::user()->siswa->no_hp_siswa) }}" placeholder="No Hp Siswa" />
                                        @error('no_hp_siswa')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
        
                                    {{-- <div class="mb-3">
                                        <label for="password">Password <span class="text-danger">* </span><i class="text-danger" style="font-size: 11px;">(digunakan untuk login ke website reswara.top)</i> @if(@$siswa)  <i class="text-danger">(kosongkan jika tidak ingin mengubah password)</i> @endif </label>
                                        <input type="password" name="password" class="form-control" id="password" placeholder="Password" @if(!@$siswa)  @endif>
                                        @error('password')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
        
                                    <div class="mb-3">
                                        <label for="c_password">Confirm Password <span class="text-danger">* </span><i class="text-danger" style="font-size: 11px;">(samakan isi confirm password dengan input password)</i> @if(@$siswa) <i class="text-danger">(kosongkan jika tidak ingin mengubah password)</i> @endif </label>
                                        <input type="password" name="c_password" class="form-control" id="c_password" placeholder="Confirm Password" @if(!@$siswa)  @endif>
                                        @error('c_password')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div> --}}
        
        
                                    <div class="mb-3">
                                        <label class="form-label" for="no_identitas">No Identitas (KTP/SIM/ID Pengguna) <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control" id="no_identitas" name="no_identitas" placeholder="Isi No Identitas" value="{{ old('no_identitas', @Auth::user()->siswa->no_identitas) }}" >
                                        @error('no_identitas')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
        
                                    <div class="mb-3">
                                        <label class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
                                        <select class="form-select" name="jenis_kelamin" >
                                            <option value="">Jenis Kelamin</option>
                                            <option @if( old('jenis_kelamin', @Auth::user()->siswa->jenis_kelamin) == 'Laki-laki' ) selected @endif value="Laki-laki">Laki-laki</option>
                                            <option @if( old('jenis_kelamin' , @Auth::user()->siswa->jenis_kelamin) == 'Perempuan' ) selected @endif value="Perempuan">Perempuan</option>
                                        </select>
                                        @error('jenis_kelamin')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Tempat Lahir <span class="text-danger">*</span></label>
                                        <input type="text" name="tempat_lahir" class="form-control"  value="{{ old('tempat_lahir', @Auth::user()->siswa->tempat_lahir) }}" placeholder="Tempat Lahir" />
                                        @error('tempat_lahir')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Tanggal Lahir <span class="text-danger">*</span></label>
                                        <input type="text" name="tanggal_lahir" id="tanggal_lahir" class="form-control"  value="{{ old('tanggal_lahir', (@Auth::user()->siswa->tanggal_lahir) ?? '2000-01-01') }}" placeholder="Tanggal Lahir" />
                                        @error('tanggal_lahir')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">No-Telp Rumah </label>
                                        <input type="number" name="no_telp_rumah" class="form-control"  value="{{ old('no_telp_rumah', @Auth::user()->siswa->no_telp_rumah) }}" placeholder="No Telp Rumah" />
                                        @error('no_telp_rumah')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
        
                                    <div class="mb-3">
                                        <label class="form-label">Agama <span class="text-danger">*</span></label>
                                        <select class="form-select" name="agama" >
                                            <option value="">Pilih Agama</option>
                                            <option @if( old('agama', @Auth::user()->siswa->agama) == 'Islam' ) selected @endif value="Islam">Islam</option>
                                            <option @if( old('agama', @Auth::user()->siswa->agama) == 'Kristen' ) selected @endif value="Kristen">Kristen</option>
                                            <option @if( old('agama', @Auth::user()->siswa->agama) == 'Katolik' ) selected @endif value="Katolik">Katolik</option>
                                            <option @if( old('agama', @Auth::user()->siswa->agama) == 'Hindu' ) selected @endif value="Hindu">Hindu</option>
                                            <option @if( old('agama', @Auth::user()->siswa->agama) == 'Budha' ) selected @endif value="Budha">Budha</option>
                                            <option @if( old('agama', @Auth::user()->siswa->agama) == 'Konghucu' ) selected @endif value="Konghucu">Konghucu</option>
                                        </select>
                                        @error('agama')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Alamat <span class="text-danger">*</span></label>
                                        <textarea name="alamat_siswa" id="" cols="30" rows="3" class="form-control" > {{ old('alamat_siswa', @Auth::user()->siswa->alamat_siswa) }} </textarea>
                                        @error('alamat_siswa')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
                                    <div class="mb-3">
                                        <label for="foto_siswa"> Foto Siswa <span class="text-danger">*</span> </label>
                                        <input type="file" name="foto_siswa" class="form-control">
                                        @error('foto_siswa')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
                                    {{-- <div class="mb-3 row">
                                        <div class="col-12 text-end">
                                            <button class="btn btn-primary w-md waves-effect waves-light lanjut"
                                                type="button">Lanjut</button>
                                        </div>
                                    </div> --}}
                                </div>
                                <div class="page_2 col-sm-12 col-md-6">
    
                                    <div class="mb-3">
                                        <h6 class="text-muted">Data Asal Sekolah </h6>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Tingkatan Sekolah <span class="text-danger">*</span></label>
                                        <select class="form-select" name="tingkatan_sekolah" >
                                            <option disabled selected>Pilih Tingkatan Sekolah</option>
                                            <option @if( old('tingkatan_sekolah', @Auth::user()->siswa->tingkatan_sekolah) == 'Tidak Sekolah' ) selected @endif value="Tidak Sekolah">Tidak Sekolah</option>
                                            <option @if( old('tingkatan_sekolah', @Auth::user()->siswa->tingkatan_sekolah) == 'SD' ) selected @endif value="SD">SD</option>
                                            <option @if( old('tingkatan_sekolah', @Auth::user()->siswa->tingkatan_sekolah) == 'SMP' ) selected @endif value="SMP">SMP</option>
                                            <option @if( old('tingkatan_sekolah', @Auth::user()->siswa->tingkatan_sekolah) == 'SMA' ) selected @endif value="SMA/SMK">SMA/SMK</option>
                                            <option @if( old('tingkatan_sekolah', @Auth::user()->siswa->tingkatan_sekolah) == 'D1' ) selected @endif value="D1">D1 (Diploma 1)</option>
                                            <option @if( old('tingkatan_sekolah', @Auth::user()->siswa->tingkatan_sekolah) == 'D2' ) selected @endif value="D2">D2 (Diploma 2)</option>
                                            <option @if( old('tingkatan_sekolah', @Auth::user()->siswa->tingkatan_sekolah) == 'D3' ) selected @endif value="D3">D3 (Diploma 3)</option>
                                            <option @if( old('tingkatan_sekolah', @Auth::user()->siswa->tingkatan_sekolah) == 'D4' ) selected @endif value="D4">D4 (Diploma 4)</option>
                                            <option @if( old('tingkatan_sekolah', @Auth::user()->siswa->tingkatan_sekolah) == 'S1' ) selected @endif value="S1">S1 (Sarjana)</option>
                                            <option @if( old('tingkatan_sekolah', @Auth::user()->siswa->tingkatan_sekolah) == 'S2' ) selected @endif value="S2">S2 (Magister)</option>
                                            <option @if( old('tingkatan_sekolah', @Auth::user()->siswa->tingkatan_sekolah) == 'S3' ) selected @endif value="S3">S3 (Doktor)</option>
                                        </select>
                                        @error('tingkatan_sekolah')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Asal Sekolah <span class="text-danger">*</span></label>
                                        <input type="text" name="asal_sekolah" class="form-control"  value="{{ old('asal_sekolah', @Auth::user()->siswa->asal_sekolah) }}" placeholder="Asal Sekolah" />
                                        @error('asal_sekolah')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Jurusan Sekolah <span class="text-danger">*</span></label>
                                        <input type="text" name="jurusan_sekolah" class="form-control"  value="{{ old('jurusan_sekolah', @Auth::user()->siswa->jurusan_sekolah) }}" placeholder="Jurusan Sekolah" />
                                        @error('jurusan_sekolah')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Tahun Lulus Sekolah <span class="text-danger">*</span></label>
                                        <input type="number" name="tahun_lulus_sekolah" class="form-control"  value="{{ old('tahun_lulus_sekolah', @Auth::user()->siswa->tahun_lulus_sekolah) }}" placeholder="Tahun Lulus Sekolah" />
                                        @error('tahun_lulus_sekolah')
                                            <span class="m-2 text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
                                    {{-- <div class="mb-3 row">
                                        <div class="col-12 text-end">
                                            <div class="d-flex justify-content-between">
                                                <div class="p-1">
                                                    <button type="button" style="display: none;" class="btn btn-success w-md waves-effect waves-light back">Kembali</button>
                                                </div>
                                                <div class="p-1">
                                                    <button class="btn btn-primary w-md waves-effect waves-light lanjut"
                                                    type="button">Lanjut</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div> --}}
                                    {{--  --}}
                                    <div class="page_3">
                                        <div class="mb-3">
                                            <h6 class="text-muted">Data Orang Tua </h6>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Nama Orang Tua <span class="text-danger">*</span></label>
                                            <input type="text" name="nama_orang_tua" class="form-control"  value="{{ old('nama_orang_tua', @Auth::user()->siswa->nama_orang_tua) }}" placeholder="Nama Orang Tua" />
                                            @error('nama_orang_tua')
                                                <span class="m-2 text-danger">{{$message}}</span>
                                            @enderror
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Alamat Orang Tua <span class="text-danger">*</span></label>
                                            <input type="text" name="alamat_orang_tua" class="form-control"  value="{{ old('alamat_orang_tua', @Auth::user()->siswa->alamat_orang_tua) }}" placeholder="Alamat Orang Tua" />
                                            @error('alamat_orang_tua')
                                                <span class="m-2 text-danger">{{$message}}</span>
                                            @enderror
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">No Whatsapp Orang Tua aktif <span class="text-danger">*</span></label>
                                            <input type="number" name="no_hp_orang_tua" class="form-control"  value="{{ old('no_hp_orang_tua', @Auth::user()->siswa->no_hp_orang_tua) }}" placeholder="No HP Orang Tua" />
                                            @error('no_hp_orang_tua')
                                                <span class="m-2 text-danger">{{$message}}</span>
                                            @enderror
                                        </div>
                                        <div class="mb-3">
                                            <label for="foto_orang_tua"> Foto Orang Tua <span class="text-danger">*</span> </label>
                                            <input type="file" name="foto_orang_tua" class="form-control">
                                            @error('foto_orang_tua')
                                                <span class="m-2 text-danger">{{$message}}</span>
                                            @enderror
                                        </div>
                                        <div class="mb-2">
                                            <br><br>
                                            <button class="btn btn-primary" id="sendOTP" type="button">Simpan</button>
                                        </div>
                                    </div>
                                </div>
                            </div>    
                        </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() {
        $('#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,
                        // '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