@extends('layouts/fullLayoutMaster')

@section('title', 'استعادة كلمة المرور')

@section('page-style')
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('css/base/pages/authentication.css')) }}">
  <link rel="stylesheet" href="{{ asset('css/custom/forget-password.css') }}">
@endsection

@section('content')
<div class="page">
    <div class="wrapper">
        <div class="interact">
            <div class="alert-frame">
                <div class="successMessage alert-msg-frame alert alert-success rounded-0" role="alert" style="display: none">
                    <div class="successMessageBody alert-body"></div>
                </div>
            </div>
            <div class="alert-frame">
                <div class="errorMessage alert-msg-frame alert alert-danger mb-1 rounded-0" role="alert" style="display: none">
                    <div class="errorMessageBody alert-body"></div>
                    <div class="errorBody alert-body"></div>
                </div>
            </div>
            <div class="alert-frame">
                <div class="OTPStatus centered alert-msg-frame alert rounded-0" role="alert" style="display: none">
                </div>
            </div>
            <div class="alert-frame">
                <div class="passwordValidation centered alert-msg-frame alert rounded-0" role="alert" style="display: none">
                </div>
            </div>

            <!-- forget-interact -->
            <div  id="forgetInteract" class="forgetInteract interact-frame forget-interact" >
                <div class="header-group-wrapper">
                    <div class="header-frame">
                        <div class="logo">
                        <img src="{{ asset('assets/logo.png') }}" alt="" />
                        </div>
                        <h2 class="header-text main-header centered">استعاده كلمة المرور</h2>
                    </div>
                    <div class="group-frame">
                    <div class="grid-wrapper">
                        <div class="group-header-frame">
                            <h4 class="card-title mb-1">تسيت كلمة المرور ؟ 🔒</h4>
                            <p class="card-text mb-2">ادخل رقم الجوال المسجل لدينا وسنقوم بأرسال كود استعادة كلمة المرور فورا !!</p>
                        </div>
                        <div class="group-form-body">
                            <form class="auth-forgot-password-form mt-2" method="POST" action="{{ route('forgotPassword') }}">
                                @csrf
                                <div class="mb-1 phone-input-wrapper">
                                    <x-inputs.text.Input class="phone-input" label="الجوال" name="phone" placeholder="رقم الجوال"
                                        required />
                                    <span class="prefix">966+</span>
                                </div>
                            </form>
                        </div>
                        <button type="button" id="submit" class="open btn btn-primary w-100 btn-submit">
                            <span class="btn-text secoundery-header centered">ارسال كود استعاده كلمة المرور</span>
                        </button>
                        <hr>
                        <p class="text-center mt-2">
                            @if (Route::has('showLoginPage'))
                            <a href="{{ route('showLoginPage') }}"> تسجيل الدخول <em data-feather="chevron-right"></em> </a>
                            @endif
                        </p>
                    </div>
                    </div>

                </div>
            </div>

            <!-- OTP-CODE-interact -->
            <div id="otpCodeInteract" class="otpCodeInteract otp-code-interact" style="display:none">
                <h2 class="header-text main-header centered">ادخل رمز التاكيد </h2>
                <p class="header-paragraph lead-header centered">برجاء ادخال الرقم </p>
                <div class="digits-frame">
                <form id="otpVerification" method="POST" class="otp-form centered">
                    <input
                        class="otp main-header"
                        id="opt1"
                        type="number"
                        inputmode="numeric"
                        oninput="digitValidate(this)"
                        onkeyup="tabChange(1)"
                        maxlength="1"
                    />
                    <input
                        class="otp main-header"
                        id="opt2"
                        type="number"
                        inputmode="numeric"
                        oninput="digitValidate(this)"
                        onkeyup="tabChange(2)"
                        maxlength="1"
                    />
                    <input
                        class="otp main-header"
                        id="opt3"
                        type="number"
                        inputmode="numeric"
                        oninput="digitValidate(this)"
                        onkeyup="tabChange(3)"
                        maxlength="1"
                    />
                    <input
                        class="otp main-header"
                        id="opt4"
                        type="number"
                        inputmode="numeric"
                        oninput="digitValidate(this)"
                        onkeyup="tabChange(4)"
                        maxlength="1"
                    />
                </form>
                </div>
                <div class="timer-resend-frame">
                    <div class="timer-frame centered secoundery-header">
                        <p>
                            الكود صالح لمدة دقيقتين
                            <span id="timer" class="js-timeout timer-num">2:00</span>
                            ثانية
                        </p>

                    </div>
                    <div class="mb-1 mt-1">
                        <x-inputs.password required name="password" label="إعاده ادخال كلمه مرور جديده" />
                    </div>
                    <div class="resend-frame centered">
                        <span
                        id="resend"
                        class=" resend"
                        style="display: none"
                        >
                        إعاده إرسال الكود
                        </span>
                    </div>
                    <div class="comfirm-frame secoundery-header centered customBtn">
                        <span class="">تاكيد</span>
                    </div>

                </div>
            </div>
        </div>
        <div class="baner">
            <div class="logo-baner">
                <img src="{{ asset('assets/logo-baner.png') }}" alt="logo-baner-img" />
            </div>
            <div class="brand-frame centered">
                <div class="logo">
                    <img src="{{ asset('assets/logo.png') }}" alt="" />
                </div>
                <h1 class="text">ابنائي</h1>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
    $('.interact').removeClass("otp-code-interact-active");
    $(".errorMessage").css("display","none");
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(".open, .resend").click(function (event) {
        console.log("clc");
        $(".sessionMessage").css("display","none");
        $.ajax({
            url: "{{route('forgotPassword')}}",
            method: 'post',
            data: {
                "phone": $("#phone").val(),
            },
            success: function (response){
                console.log(response);
                if(response.code == 401){
                    hideAllAlerts();
                    $(".errorMessage").css("display","flex");
                    $('.errorMessageBody').text(response.message);
                    $('.errorBody').text(response.error);
                    $(".otpCodeInteract").css("display","none");
                }else if(response.code == 200){
                    $('.interact').addClass("otp-code-interact-active");
                    $(".forgetInteract").css("display","none");
                    hideAllAlerts();
                    $(".otpCodeInteract").css("display","flex");
                    $('.js-timeout').html("2:00");
                    countdown();
                    $(".OTPStatus").css("display","flex");
                    $('.OTPStatus').text(response.message);
                    $('.OTPStatus').removeClass("alert-success");
                    $('.OTPStatus').removeClass("alert-danger");
                    $('.OTPStatus').addClass("alert-success");
                    if(event.target.id == "resend"){
                        $('.resend').css("display","none");
                        $('.customBtn').css("display","flex");
                    }
                }
            }
        });
    });

    $(".customBtn").on('click',function(){
            var code = $("#opt1").val() + $("#opt2").val() + $("#opt3").val() + $("#opt4").val();
            var validCode = code == ''?"null":code;
            if($("#password").val().length >= 8){
                $.ajax({
                    url: "{{route('forgotPassword')}}",
                    method: 'post',
                    data: {
                        "phone": $("#phone").val(),
                        "code": validCode,
                        "password": $("#password").val()
                    },
                    success: function (response){
                        if(response.code == 402){
                            hideAllAlerts();
                            $('.OTPStatus').css("display","flex");
                            $('.OTPStatus').html(response.error + "</br>" + response.message);
                            $('.OTPStatus').removeClass("alert-success");
                            $('.OTPStatus').addClass("alert-danger");
                        }else if(response.code == 200){
                            $(".otpCodeInteract").css("display","none");
                            hideAllAlerts();
                            $(".successMessage").css("display","flex");
                            $('.successMessageBody').text(response.message);
                            window.setTimeout(function(){
                                window.location.href = "/parent/login";
                            }, 3000);
                        }else if (response.code == 403){
                            hideAllAlerts();
                            $(".errorMessage").css("display","flex");
                            $('.errorMessageBody').text(response.message);
                            $('.errorBody').text(response.error);
                            $(".otpCodeInteract").css("display","none");
                        }
                    }
                });

            }else{
                hideAllAlerts();
                $('.passwordValidation').css("display","flex");
                $('.passwordValidation').html("كلمة المرور يجب ان تكون 8 احرف علي الاقل");
                $('.passwordValidation').removeClass("alert-success");
                $('.passwordValidation').addClass("alert-danger");
            }
    });


    var interval;
    function countdown() {
        clearInterval(interval);
        interval = setInterval( function() {
            var timer = $('.js-timeout').html();
            timer = timer.split(':');
            var minutes = timer[0];
            var seconds = timer[1];
            seconds -= 1;
            if (minutes < 0) return;
            else if (seconds < 0 && minutes != 0) {
                minutes -= 1;
                seconds = 59;
            }
            else if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;

            $('.js-timeout').html(minutes + ':' + seconds);

            if (minutes == 0 && seconds == 0){
                clearInterval(interval);
                $('.customBtn').css("display","none");
                $('.resend').css("display","inline-block");
                $("#opt1").val('');
                $("#opt2").val('');
                $("#opt3").val('');
                $("#opt4").val('');
            };
        }, 1000);
    }

    let digitValidate = function digitValidate(ele){
        ele.value = ele.value.replace(/[^0-9]/g,'');
    }

    let hideAllAlerts = () =>{
        $('.successMessage').css("display","none");
        $('.errorMessage').css("display","none");
        $('.OTPStatus').css("display","none");
        $('.passwordValidation').css("display","none");
    }

    var tabChange = function(val){
        let ele = document.querySelectorAll('input.otp');
        if(ele[val-1].value != ''){
            if (val == 4){
                return;
            }
            ele[val].focus()
        }else if(ele[val-1].value == ''){
            ele[val-2].focus()
        }
    }



</script>
@endsection