@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