@extends('layouts.member-login')
@section('title','First Time New Member Login')
@section('page_title','')

@section('page_level_css')
@endsection

@section('content')

<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
        <div class="kt-grid kt-grid--ver kt-grid--root bg-white radius-15">
            <div class="kt-grid kt-grid--hor kt-grid--root kt-login kt-login--v3  kt-login--signin" id="kt_login">

                <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
                    <div class="kt-grid__item kt-grid__item--fluid kt-login__wrapper pt-5">
                        <div class="logo-big-center text-center">
                            <img alt="Logo" src="{{getURL('assets/media/logos/login-blue-logo.png')}}" />
                        </div>
                        <div class="kt-login__container">
                            <div class="kt-login__signin">
                                <div class="kt-login__head">
                                    <h3 class="kt-login__title">Member Login</h3>
                                </div>
                                <form class="kt-form" method="POST" id="loginForm" action="{{ getURL('first-time-login') }}">
                                    @csrf
                                    <div class="input-group">
                                        <input class="form-control checkDataValidate" type="email" placeholder="{{ __('User Name:') }}" name="email" id="email" value="{{ old('email') }}">
                                    </div>
                                    <div class="input-group">
                                        <input class="form-control checkDataValidate" type="text" placeholder="{{ __('Registration ID:') }}" name="registration_code" id="registration_code" value="{{ old('registration_code') }}">
                                    </div>
                                    <div class="input-group">
                                        <input class="form-control checkDataValidate" type="password" placeholder="{{ __('Temporary Password:') }}" name="temp_password" id="temp_password" value="{{ old('temp_password') }}">
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="showPassword">
                                                <i class="la la-eye"></i>
                                                <i class="la la-eye-slash"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="kt-login__actions">
                                        <button id="kt_login_signin_submit" class="btn kt-login__btn-primary btn-pill btn-custom disabled" disabled>Next</button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="modal fade" id="showModel" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header custom-blue-header">
                <h5 class="modal-title showModelTitle">Member Login</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body pb-0">
                <div class="text-center">
                    <p class="showModelText"></p>
                </div>
            </div>
            <div class="modal-footer border-top-0 d-flex justify-content-center">
                <button type="button" class="btn btn-custom btn-pill font-weight-bold border-radius-50" data-dismiss="modal">Got it!</button>
            </div>
        </div>
    </div>
</div>
<button id="showModelButton" class="btn kt-login__btn-primary btn-pill btn-custom" data-toggle="modal" data-target="#showModel" style="display: none;">Show Model</button>

<div class="modal fade" id="resetSuccessModel" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header custom-blue-header">
                <h5 class="modal-title resetSuccessModelTitle">Reset Password</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body pb-0">
                <div class="text-center">
                    <p class="resetPasswordText">Your request to reset your password has begun. Please check your email for additional information and instructions.</p>
                </div>
            </div>
            <div class="modal-footer border-top-0 d-flex justify-content-center">
                <button type="button" class="btn btn-custom btn-pill font-weight-bold border-radius-50" data-dismiss="modal">Got it!</button>
            </div>
        </div>
    </div>
</div>
<button id="resetSuccessModelButton" class="btn kt-login__btn-primary btn-pill btn-custom" data-toggle="modal" data-target="#resetSuccessModel" style="display: none;">Request Password Reset</button>

@endsection

@push('page_level_script')

@endpush

@push('footerscript')
<script>
    $(document).on('blur', '.checkDataValidate', function() {
        var email = $('#email').val();
        var registration_code = $('#registration_code').val();
        var temp_password = $('#temp_password').val();

        if (email != '' && registration_code != '' && temp_password != '') {
            $.ajax({
                url: "{{getURL('ajax/first-time-data-validate')}}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                },
                data: {
                    'email': email,
                    'registration_code': registration_code,
                    'temp_password': temp_password
                },
                success: function(data) {
                    //console.log(data);
                    if (data.status == 1) {
                        $('#kt_login_signin_submit').removeClass('disabled');
                        $('#kt_login_signin_submit').attr('disabled', false);
                    } else {
                        $('#kt_login_signin_submit').addClass('disabled');
                        $('#kt_login_signin_submit').attr('disabled', true);
                    }
                },
                error: function(errorThrown) {
                    //
                }
            });
        } else {
            $('#kt_login_signin_submit').addClass('disabled');
            $('#kt_login_signin_submit').attr('disabled', true);
            return;
        }
    });
    $(document).on('click', '#showPassword', function() {
        var x = document.getElementById("temp_password");
        if (x.type === "password") {
            x.type = "text";
        } else {
            x.type = "password";
        }
    });
</script>
@endpush