@extends('auth_api.layouts.auth')
@section('title')
    {{ __('verify_otp') }}
@endsection
@section('content')
@php
    $token_data = Crypt::decryptString($token);
    $token_data=unserialize(base64_decode($token_data));//string to array 
    // dd($token_data);
    $token_data['name']=ucfirst($token_data['name']);
@endphp
<div id="verify_screen" class="mid-content common-space container">
    <div class="heading">
        <a href="javascript:;" id="return_back_btn" class="back" aria-label="back">
            <img src="{{ asset('frontend') }}/student-panel/images/arrow.svg" width="100%" height="100%" alt="arrow" />
        </a>
        <a href="javascript:;" class="logo" aria-label="logo">
            <img src="{{ asset('frontend') }}/student-panel/images/logo.svg" width="100%" height="100%" alt="logo">
        </a>
        <img src="{{ asset('frontend') }}/student-panel/images/code.jpg" width="100%" height="100%" class="img" alt="code" />
        <p class="head">Verification Code</p>
        <p class="sub-head">Please Enter 4 Digit Code sent to: </p>
        <p class="edit-num"><span class="phone_edit">
            {{($token_data['from']=="email")?$token_data['email']:"+".$token_data['country_code']." ".$token_data['phone']}}</span>
            <a href="javascript:;" id="edit_{{$from}}_btn" class="edit-icon" aria-label="edit">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M7.30978 3.59676L2.18753 8.71901C2.11695 8.78962 2.07264 8.88225 2.06197 8.98151L1.75265 11.7645C1.74589 11.8256 1.75209 11.8875 1.77086 11.9461C1.78963 12.0046 1.82054 12.0586 1.86158 12.1044C1.90262 12.1503 1.95286 12.1869 2.00902 12.212C2.06519 12.2371 2.12601 12.2501 2.18753 12.2501C2.20361 12.2501 2.21967 12.2492 2.23566 12.2474L5.02034 11.9381C5.11961 11.9275 5.21223 11.8832 5.28284 11.8126L10.4033 6.69076L7.30978 3.59676ZM12.4093 2.82851L11.1716 1.59083C10.9255 1.34477 10.5917 1.20654 10.2437 1.20654C9.89563 1.20654 9.56185 1.34477 9.31572 1.59083L7.92841 2.97814L11.022 6.07214L12.4097 4.68439C12.6557 4.4382 12.7939 4.10439 12.7938 3.75636C12.7937 3.40833 12.6554 3.07458 12.4093 2.82851Z"
                        fill="#066AC9" />
                </svg>

            </a>
        </p>
    </div>
    <input type="hidden" name="from" id="from" value="{{$token_data['from']}}">

    <form class="form" id="verify_otp_form">
        @csrf
        <div id="otp_input" class="single-input otp-input number">
            <input type="hidden" id="token" name="token" value="{{$token}}">
            <input type="tel" name="digit1" class="input-field otp_enter" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" maxlength="1" value="" autocomplete="off" aria-label="code">
            <input type="tel" name="digit2" class="input-field otp_enter" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" maxlength="1" value="" autocomplete="off" aria-label="code">
            <input type="tel" name="digit3" class="input-field otp_enter" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" maxlength="1" value="" autocomplete="off" aria-label="code">
            <input type="tel" id="" name="digit4" class="input-field otp_enter" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" maxlength="1" value="" autocomplete="off" aria-label="code"> 
        </div>
        <p id="resend_timer" class="resend-text">Resend OTP in <span class="timer" id="timer"></span></p>
        {{-- <button class="btn" >Resend OTP</button> --}}
        <p class="resend-text" id="resend_block">Didn't get it?<a id="resend_otp" href="javascript:;" class="resend-link"> Resend Code</a></p>

        <button type="submit" id="verify_otp_button" class="btn">Verify & Continue<i id="send_spinner" class=""></i></button>
    </form>
    

</div>

<div class="mid-content common-space container" id="welcome_screen" style="display: none">
    <input type="hidden" name="web_token" id="web_token" value="">
    <div class="heading">
        <a href="javascript:;" class="logo" aria-label="logo">
            <img src="{{ asset('frontend') }}/student-panel/images/logo.svg" width="100%" height="100%" alt="logo" />
        </a>
        <p class="head">Hello {{$token_data['name']}}, <br>
            Welcome Onboard!!!</p>
        <img src="{{ asset('frontend') }}/student-panel/images/onboard.jpg" width="100%" height="100%" class="img" alt="onboard" />
        <p class="sub-head">Begin Your Study Abroad Journey with Gradding. Please Share Your Details for Personalised Assistance.
</p>
    </div>

    <a href="javascript:;" id="lets_start_btn" class="btn">Let’s Start</a>
</div>

@endsection
@section('css')
@endsection
@section('frontend_links')
    <link rel="stylesheet" href="{{ asset('frontend') }}/student-panel/css/login.css">
@endsection
@section('script')
    <script src="{{ asset('frontend') }}/student-panel/js/input-field.js"></script>
    <script src="{{ asset('frontend') }}/student-panel/js/verify_otp.js"></script>
    {{-- <script>
        $(".alert-success").on('click', function() {
            hideAlert();
        });
        function hideAlert() {
            $(".alert-success").fadeTo(2000, 500).slideUp(500, function() {
                $(".alert-success").slideUp(500);
            });
        }
        hideAlert();
    </script> --}}
@endsection