@extends('master-login')
@section('title')
Login
@endsection
@section('content')
<!-- Content -->
<style>
    .authentication-wrapper.authentication-basic .authentication-inner .card .app-brand {
        margin-bottom: 1.0rem;
    }
</style>
<div class="container-xxl">
    <div class="authentication-wrapper authentication-basic container-p-y">
        <div class="authentication-inner">

            <!-- Register -->
            <div class="card">
                <div class="card-body"  id="login_div" >
                    <!-- Logo -->
                    <div class="app-brand justify-content-center">
                        <p class="app-brand-link gap-2">
                            <span class="app-brand-logo demo">
                                <img src="{{ asset('assets/img/images/qr_code.png') }}">
                            </span>
                            <span class="app-brand-text demo menu-text fw-bolder ms-2">QR Code Generator</span>
                        </p>
                    </div> 

                    <h3 style="margin-top:0rem !important;">Sign Up</h3>
                    <small>Enter your details below to create your account & get started</small>

                    <form method="POST" action="javascript:void(0)" id="login_form" class="request-form" autocomplete="off">
                        <div class="mb-3 mt-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="text" class="form-control" id="email" name="email"
                                   autofocus placeholder="Ex : john@gmail.com" />
                            <span style="color: red;">
                                @error('email')
                                {{ $message }}
                                @enderror
                            </span>
                            <span style="color: red;">
                                @error('email_not_found')
                                {{ $message }}
                                @enderror
                            </span>
                        </div>
                        <div class="mb-3 form-password-toggle">
                            <div class="d-flex justify-content-between">
                                <label class="form-label" for="password">Password</label>

                            </div>
                            <div class="input-group input-group-merge">
                                <input type="password" id="password" class="form-control password" name="password"
                                       placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                       aria-describedby="password"/>
                                <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
                            </div>
                            <span style="color: red;">
                                @error('password')
                                {{ $message }}
                                @enderror
                            </span>
                        </div>
                        <div class="mb-3">
                            By signing up, you are agree to our <a href="javascript:;">Terms & Conditions</a> and <a href="javascript:;">Policies</a>

                        </div>

                        <div class="hideClass success_msg msg_padding" role="alert">
                        </div>
                        <div class="hideClass danger_alert_msg msg_padding" role="alert">
                        </div>

                        <div class="mb-3">
                            <button class="btn btn-primary w-100 signInButton" type="submit">
                                <span class="spinner-border spinner-border-sm hideClass" role="status" aria-hidden="true"></span>
                                <p class="lodingText">Sign Up</p>
                            </button>
                        </div>
                        <p class="text-center">
                            <span>Already have an account?</span>
                            <a href="{{url('/sign-in')}}">
                                <span>Sign In</span>
                            </a>
                        </p>
                        <div class="divider my-6">
                            <div class="divider-text">or</div>
                        </div>
                        <div class="d-flex justify-content-center">
                            <!-- 
                                <a href="javascript:;" class="btn btn-sm btn-icon rounded-circle btn-text-facebook me-1_5">
                                    <i class="icon-base bx bxl-facebook-circle icon-20px"></i>
                                </a>
                                <a href="javascript:;" class="btn btn-sm btn-icon rounded-circle btn-text-twitter me-1_5">
                                    <i class="icon-base bx bxl-twitter icon-20px"></i>
                                </a>
                                <a href="javascript:;" class="btn btn-sm btn-icon rounded-circle btn-text-github me-1_5">
                                    <i class="icon-base bx bxl-github icon-20px"></i>
                                </a>
                            -->

                            <a href="javascript:;" class="btn btn-sm btn-icon rounded-circle btn-text-google-plus">
                                <i class="icon-base bx bxl-google icon-20px"></i>
                            </a>
                        </div>
                    </form>


                </div>

                <div class="card-body" id="otp_verify_div" style="display: none;">
                    <!-- Logo -->
                    <div class="app-brand justify-content-center">
                        <p class="app-brand-link gap-2">
                            <span class="app-brand-logo demo">
                                <img src="{{ asset('assets/img/images/qr_code.png') }}">
                            </span>
                            <span class="app-brand-text demo menu-text fw-bolder ms-2">QR Code Generator</span>
                        </p>
                    </div> 

                    <h3 style="margin-top:0rem !important;">Verify OTP</h3>
                    <small>Please enter the OTP we've send to <span id='otp_email'></span></small>

                    <form method="POST" action="javascript:void(0)" id="verify_otp_form" class="request-form" autocomplete="off">
                        <div class="mb-3 mt-3">
                            <label for="email" class="form-label">OTP</label>
                            <input type="text" class="form-control" id="otp" name="otp"
                                   autofocus placeholder="Ex : 4596"/>                            
                        </div>
                        <div class="mb-3">                            
                            <small>Didn't get a code? <a href="javascript:;">Re-send</a></small>                            
                        </div>
                        <div class="hideClass success_msg msg_padding" role="alert">
                        </div>
                        <div class="hideClass danger_alert_msg msg_padding" role="alert">
                        </div>


                        <div class="mb-3">
                            <button class="btn btn-primary w-100 signInButton" id="verifyButton" type="submit">
                                <span class="spinner-border spinner-border-sm hideClass" role="status" aria-hidden="true"></span>
                                <span class="verifyText">Verify</span>
                            </button>
                        </div>

                    </form>


                </div>
            </div>
            <!-- /Register -->
        </div>
    </div>
</div>

@endsection
@section('script')
<script>
    var authenticateUrl = "{{ route('sign_up_post') }}";
    var verify_otpUrl = "{{ route('verify_otp') }}";

    $(document).ready(function () {
        /**
         * Login Form Submit.
         */
        $('#login_form').on('submit', function (e) {
            e.preventDefault();
            if ($("#login_form").valid() == true) {
                // If validation passes, submit the form
                var data = new FormData($("#login_form")[0]);

                $(".signInButton").prop("disabled", true);

                $.ajax({
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: data,
                    url: authenticateUrl,
                    processData: false,
                    contentType: false,
                    beforeSend: function () {
                        $(".lodingText").html("Loading...");
                        $(".spinner-border").removeClass("hideClass");
                    },
                    success: function (response) {
                        const responseData = JSON.parse(response);

                        $(".success_msg").html('');
                        $(".danger_alert_msg").html('');
                        $(".signInButton").prop("disabled", false);
                        $(".spinner-border").addClass("hideClass");
                        if (responseData.statusCode == 200) {
                            if (responseData.data.user.is_email_verified == 1) {
                                $(".lodingText").html("Logged In......");
                                $(".success_msg").removeClass("hideClass");
                                $(".success_msg").html(responseData.message);
                                setTimeout(function () {
                                    $(".success_msg").addClass("hideClass");
                                    $(".success_msg").html("");
                                    window.location.href = "{{ route('web.home') }}";
                                }, 2000);
                            } else {
                                $(".lodingText").html("Sending OTP......");
                                $(".success_msg").removeClass("hideClass");
                                $(".success_msg").html(responseData.message);
                                setTimeout(function () {
                                    $('#login_div').hide();
                                    $('#otp_verify_div').show();
                                    $(".success_msg").html('');
                                    $(".danger_alert_msg").html('');

                                }, 3000);
                            }
                        } else if (responseData.statusCode == 400) {
                            $(".lodingText").html("Sign Up");
                            $(".danger_alert_msg").removeClass("hideClass");
                            $(".danger_alert_msg").html(responseData.message);
                            return false;
                        } else {
                            $(".lodingText").html("Sending OTP......");
                            $(".success_msg").removeClass("hideClass");
                            $(".success_msg").html(responseData.message);

                        }
                        /* if (responseData.statusCode == 200) {
                         $(".lodingText").html("Logged In......");
                         $(".success_msg").removeClass("hideClass");
                         $(".success_msg").html(responseData.message);
                         setTimeout(function () {
                         $(".success_msg").addClass("hideClass");
                         $(".success_msg").html("");
                         window.location.href = "{{url('/')}}";
                         }, 2000);
                         } else {
                         $(".lodingText").html("Sign In");
                         if (responseData.data.token) {
                         handleAjaxError(responseData.message, "otp-verification/" + responseData.data.token);
                         } else {
                         handleAjaxError(responseData.message);
                         }
                         }*/
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $("#login_form")[0].reset();
                        $(".signInButton").prop("disabled", false);
                        $(".spinner-border").addClass("hideClass");
                        $(".lodingText").html("Sign In");
                        if (JSON.parse(jqXHR.responseText).message) {
                            console.log(JSON.parse(jqXHR.responseText).message);
                            handleAjaxError(JSON.parse(jqXHR.responseText).message);
                        } else {
                            handleAjaxError("Something went wrong");
                        }
                    }
                });
            }
        });

        $('#verify_otp_form').on('submit', function (e) {
            e.preventDefault();
            if ($("#verify_otp_form").valid() == true) {
                $("#verifyButton").prop("disabled", true);
                $.ajax({
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        email: $('#email').val(),
                        otp: $('#otp').val(),
                        password: $('#password').val()
                    },
                    url: verify_otpUrl,
                    dataType: 'json',
                    beforeSend: function () {
                        $(".lodingText").html("Loading...");
                        $(".spinner-border").removeClass("hideClass");
                    },
                    success: function (response) {

                        const responseData = JSON.parse(response);

                        console.log(responseData);

                        $(".success_msg").html('');
                        $(".danger_alert_msg").html('');


                        $("#verifyButton").prop("disabled", false);
                        $(".spinner-border").addClass("hideClass");
                        $(".verifyText").html("Verifying......");
                        if (responseData.statusCode == 200) {
                            $(".success_msg").removeClass("hideClass");
                            $(".success_msg").html(responseData.message);
                            $(".verifyText").html("Verify");
                            setTimeout(function () {
                                $(".success_msg").addClass("hideClass");
                                $(".success_msg").html("");
                                window.location.href = "{{ route('web.home') }}";
                            }, 2000);


                        } else {
                            $(".verifyText").html("Verify");
                            $(".lodingText").html("Sign Up");
                            $(".success_msg").addClass("hideClass");
                            $(".danger_alert_msg").removeClass("hideClass");
                            $(".danger_alert_msg").html(responseData.message);
                            return false;
                        }
                        $(".verifyText").html("Verify");
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $("#login_form")[0].reset();
                        $("#signInButton").prop("disabled", false);
                        $(".spinner-border").addClass("hideClass");
                        $(".lodingText").html("Sign In");
                        if (JSON.parse(jqXHR.responseText).message) {
                            console.log(JSON.parse(jqXHR.responseText).message);
                            handleAjaxError(JSON.parse(jqXHR.responseText).message);
                        } else {
                            handleAjaxError("Something went wrong");
                        }
                    }
                });
            }
        });

        /**
         * Login Form Validation.
         */
        $("#login_form").validate({
            rules: {
                email: {
                    required: true,
                    email: true,
                    maxlength: 255
                },
                password: {
                    required: true,
                    maxlength: 255
                }
            },
            messages: {
                email: {
                    required: "Please enter your email",
                    email: "Please enter a valid email",
                    maxlength: "Please etner not more than 255 character."
                },
                password: {
                    required: "Please enter your password",
                    minlength: "Your password must be at least 6 characters long",
                    maxlength: "Please etner not more than 255 character."
                }
            },
            errorElement: "div",
            errorPlacement: function (error, element) {
                if (element.attr("name") === "password") {
                    error.appendTo(element.parent().parent());
                } else {
                    error.appendTo(element.parent());
                }
            },
            submitHandler: function (form) {
                return form;
            }
        });

        /**
         * Ajax error message show or redirect
         * @param {*} message 
         * @param {*} url 
         */
        function handleAjaxError(message, url = "") {
            $(".danger_alert_msg").removeClass("hideClass");
            $(".danger_alert_msg").html(message);
            setTimeout(function () {
                $("#login_form")[0].reset();
                $(".danger_alert_msg").addClass("hideClass");
                $(".danger_alert_msg").html("");
                if (url != "") {
                    $(location).attr('href', url);
                }
            }, 5000);
        }
    });
</script>


@endsection