@extends('layouts.fullLayoutMaster')

@section('title', 'تسجيل الدخول')

@section('page-style')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/authentication.css')) }}">
    <link rel="stylesheet" href="{{ asset('css/custom/login.css') }}">
@endsection

@section('content')
<div class="page">
    <div class="wrapper">
        <div class="interact">
            @if (session()->has('userRegistrationSuccessMessage'))
            <div class="alert-frame">
                <div class="sessionMessage alert-msg-frame alert alert-success rounded-0" role="alert">
                    <div class="alert-body">
                        {{ session()->get('userRegistrationSuccessMessage') }}
                    </div>
                </div>
            </div>
            @endif
            <div class="alert-frame">
                <div class="errorMessage alert-msg-frame alert alert-danger rounded-0" role="alert"
                    style="display: none">
                    <div class="alert-body">
                        <span class="errorMessageBody"></span>
                        <span class="errorBody"></span>
                    </div>
                </div>
            </div>
            <div class="alert-frame">
                <div class="OTPStatus centered alert-msg-frame alert rounded-0" role="alert" style="display: none">

                </div>
            </div>
            <!-- LOGIN-interact -->
            <div  id="loginInteract" class="loginInteract interact-frame login-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-login-form mt-2" method="POST" action="{{ route('userLogin') }}">
                                    @csrf
                                    <div class="mb-1 phone-input-wrapper">
                                        <x-inputs.text.Input oninput="isValidPhone(this)" class="phone-input" label="الجوال" name="phone" placeholder="رقم الجوال"
                                            required />
                                          <span class="prefix">966+</span>
                                    </div>
                                    <div style="direction: ltr; float: left;">
                                        <a href="{{ route("showForgotPasswordPage") }}">
                                            <small class="forget-text">نسيت كلمة المرور ؟</small>
                                        </a>
                                    </div>
                                    <div class="mb-1">
                                        <x-inputs.password oninput="isValidPassword(this)" required name="password" label="كلمة المرور" />
                                    </div>
                                    <div class="remember-frame mb-1">
                                        <x-inputs.checkbox name="remember">
                                            <span class="remember-text"> تذكرني</span>
                                        </x-inputs.checkbox>
                                    </div>
                                </form>
                            </div>
                            <button type="button" id="submit" class="open btn btn-primary w-100 btn-submit disabled">
                                <span class="btn-text secoundery-header centered">تسجيل الدخول</span>
                            </button>
                            <div class="interact-footer">
                                @if (Route::has('showRegistrationPage'))
                                <div class="group-form-footer">
                                    <a href="{{ route('showRegistrationPage') }}">
                                        <h3 class="link-text">
                                            <span class="question-txt"> ليس لديك حساب ؟</span>
                                            <span class="register-txt"> تسجيل حساب جديد ولي امر </span>
                                        </h3>
                                    </a>
                                </div>
                                @endif
                                <div class="divider-frame">
                                    <div class="divider"></div>
                                    <div class="divider-or">
                                        <div class="divider-text">or</div>
                                    </div>
                                    <div class="divider"></div>
                                </div>
                                <div class="action-frame">
                                        <a href="#" class="btn-link">
                                            <img src="{{ asset('assets/icon-google.png') }}"  alt="google">
                                        </a>
                                        <a href="#" class="btn-link">
                                            <img src="{{ asset('assets/icon-twitter.png') }}"  alt="twitter">
                                        </a>
                                        <a href="#" class="btn-link">
                                            <img src="{{ asset('assets/icon-facebook.png') }}"  alt="facebook">
                                        </a>
                                </div>
                                <div class="link-frame">
                                        <a href="{{ route('homePage') }}">
                                            <h3 class="link-text">الرجوع لحساب الموظف</h3>
                                        </a>
                                </div>
                            </div>
                        </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="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>
    // $(".otpCodeInteract").css("display","none");
    $('.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) {
        $(".sessionMessage").css("display","none");
        $.ajax({
            url: "/parent/userLogin",
            method: 'post',
            data: {
                "phone": $("#phone").val(),
                "password": $("#password").val(),
            },
            success: function (response){
                console.log(response);
                if(response.code == 401){
                    $(".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");
                    $(".loginInteract").css("display","none");
                    $(".errorMessage").css("display","none");
                    $(".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");
                    }
                }
            }
        });
    });

    $(".close1").on('click',function(){
        $(".otpCodeInteract").css("display","none");
    });

    $(".modal-backdrop1").click(function () {
        $(".otpCodeInteract").css("display","none");
    });

    $(".customBtn").on('click',function() {
        if ($("#opt1").val() == '' || $("#opt2").val() == '' || $("#opt3").val() =='' || $("#opt4").val() == '')
        {
            $('.OTPStatus').html('قم بادخال كود التحقق');
            $('.OTPStatus').removeClass("alert-success");
            $('.OTPStatus').addClass("alert-danger");
            // $(".errorMessage").css("display","flex");
            // $('.errorMessageBody').text('كود التحقق غير صحيح');
            // $('.errorBody').text('قم بادخال كود التحقق');
        } else{
        $.ajax({
            url: "/parent/userLogin",
            method: 'post',
            data: {
                "phone": $("#phone").val(),
                "password": $("#password").val(),
                "code": $("#opt1").val() + $("#opt2").val() + $("#opt3").val() + $("#opt4").val()
            },
            success: function (response) {
                if (response.code == 402) {
                    $('.OTPStatus').html(response.error + "</br>" + response.message);
                    $('.OTPStatus').removeClass("alert-success");
                    $('.OTPStatus').addClass("alert-danger");
                } else if (response.code == 200) {
                    window.location.href = '{{route("parent.showParentDashboard")}}';
                } else if (response.code == 403) {
                    $(".errorMessage").css("display", "flex");
                    $('.errorMessageBody').text(response.message);
                    $('.errorBody').text(response.error);
                    $(".otpCodeInteract").css("display", "none");
                }
            }
        });
    }
    });

    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 isValidPhoneLength =false;
    let isValidPasswordLength =false;
    let isValidPhone = function isValidPhone(ele){
        isValidPhoneLength = ele.value.trim().length >= 9;
        canEnableBtn();
    }
    let isValidPassword = function isValidPassword(ele){
        isValidPasswordLength = ele.value.trim().length >= 8;
        canEnableBtn();
    }
    let canEnableBtn = function canEnableBtn(){
        if (isValidPasswordLength && isValidPhoneLength) {
            $('.btn-submit').removeClass("disabled");
        }else{
            if(!$(".btn-submit").hasClass("disabled")){
                $('.btn-submit').addClass("disabled");
            }
        }
    }

    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