<?php
isset($_GET['authModal']) ? '' : include 'header.php';
?>

<div class="page center-content flex-center">

    <div class="container p-0">

        <div class="auth-layout">

            <div class="start">
                <div class="image-wrapper">
                    <img src="assets/img/auth/auth-bg-lg.jpg">
                </div>
            </div>

            <div class="end">

                <div class="data-wrapper">

                    <div class="data-wrapper-start">

                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div class="flex-center gap-2">
                                <a href="#" class="auth-back flex-center color-gray"> <i class="icon icon-arrow-left"></i> </a>
                                <img src="assets/img/logo-wide-black.svg" class="h-30px">
                            </div>
                            <a href="#" class="close-modal" data-dismiss="modal"> <i class="icon icon-close-circle"></i> Close </a>
                        </div>

                        <div class="mb-4">
                            <h2 class="bold mb-2"> Enter your OTP </h2>
                            <p class="lead"> Enter the 6 digits code that you received on your phone </p>

                            <div class="d-flex justify-content-between align-items-center">
                                <p class="phone-number bold m-0">+965237262562</p>
                                <a href="homepage.php?authModal=1" class="btn btn-primary-faded"> Edit Number </a>
                            </div>

                        </div>

                        <div class="activate-inputs-container mb-4">

                            <form action="test.php" id="activate-code" class="d-none">
                                <input id="activate-code-input" name="code" type="text">
                            </form>

                            <!-- add invalid class to be "activate-inputs invalid" for invalid values -->
                            <div class="activate-inputs mb-3">
                                <input class="num1" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                                <input class="num2" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                                <input class="num3" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                                <input class="num4" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                                <input class="num5" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                                <input class="num6" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                            </div><!-- activate-inputs -->

                            <div class="flex-center flex-column d-none">

                                <p class="text-center color-danger mb-2"> Please enter the correct digits </p>

                                <div class="count-down-numbers-wrapper mb-2">
                                    <p class="lead m-0"> Send code Again (
                                        <span class="black" id="minutes">02</span>
                                        <span class="black" id="colon">:</span>
                                        <span class="black" id="seconds">00</span>
                                        )
                                    </p>
                                </div>

                                <div class="text-center mb-4">
                                    <p class="color-gray"> Oops! You've requested OTP too many times. <br /> No worries, You can try again later. </p>
                                    <a href="#" class="btn btn-primary btn-block"> Back to home</a>
                                </div>

                                <div class="text-center">
                                    <span class="loader"></span>
                                </div>


                            </div>



                        </div>

                    </div>

                    <div class="data-wrapper-end">
                        <div class="links-and-help-btn">
                            <div class="help-btn-wrapper mb-3">
                                <a href="#" class="need-help-button"> <i class="fab fa-whatsapp me-2"></i> Need Help ? </a>
                            </div>
                            <div class="links-wrapper">
                                <a href="#" class=" me-3"> Privacy Policy </a>
                                <a href="#"> Terms & Conditions </a>
                            </div>
                        </div>
                    </div>


                </div> <!-- data-wrapper -->

            </div> <!-- end data-wrapper -->

        </div> <!-- auth-layout -->

    </div>
</div> <!-- page -->

<?php
isset($_GET['authModal']) ? '' : include 'footer.php';
?>

<script>
    focusFirstInputInPinCode();
    counterDownTwoMinutes();
</script>