@extends('layouts.blank')

@push('custom_css')
    <link rel="stylesheet" href="{{ asset('admin-lte/plugins/fontawesome-free/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('admin-lte/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
{{--    <link rel="stylesheet" href="{{ asset('admin-lte/dist/css/adminlte.min.css') }}">--}}
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
@endpush

@section('custom_script')
    <script src="{{ asset('admin-lte/plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('admin-lte/dist/js/adminlte.min.js') }}"></script>

    <script>
        $(document).ready(function(){

            $(document).on('submit', '#formToSubmit', function (e){

                if($('#submitBtnForgetPassword').is(':disabled'))
                {
                    e.preventDefault();
                }else{
                    return true;
                }
            })

            $(document).on('keyup change focusout', '#email', function (e){
                if(this.value != '')
                {
                    $.ajax({
                        url: $('#routeCheckEmailIfExist').val(),
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: 'post',
                        dataType: 'text',
                        data: {
                            email: this.value
                        },
                        async: true
                    }).done(function(dataDone){

                        if(this.value != '')
                        {
                            $('#email').removeClass('is-invalid');
                            $('#ajaxFeedbackConfirm').remove();
                            $('#submitBtnForgetPassword').prop('disabled', false);

                            if(dataDone <= 0)
                            {
                                $('#ajaxFeedbackConfirm').remove();

                                var newErrorSpan = document.createElement('label');
                                newErrorSpan.setAttribute('class', 'col-form-label text-danger');
                                newErrorSpan.setAttribute('id', 'ajaxFeedbackConfirm');
                                newErrorSpan.innerHTML = '<i class="far fa-times-circle"></i> &nbsp; Email / Mobile No. Doesnt Exist!';

                                $('#email').addClass('is-invalid');
                                $('#emailInputForm').append(newErrorSpan);
                                $('#submitBtnForgetPassword').prop('disabled', true);
                            }
                        }
                    })
                }else{
                    $('#email').removeClass('is-invalid');
                    $('#ajaxFeedbackConfirm').remove();
                    $('#submitBtnForgetPassword').prop('disabled', true);
                }

            })

            if($('#alertMess').length > 0)
            {
                setTimeout(() => {
                    $('#alertMess').fadeOut();
                }, 1000);
            }

        })
    </script>
@endsection

@section('content')
    <div class="register-box">
        <div class="register-logo">
            <a href="{{ route('login') }}"><b>{{ $env_app_name ?? config('app.name') }}</b></a>
        </div>

        <input type="hidden" id="routeCheckEmailIfExist" value="{{ route('checkEmailIfExist') }}">

        <div class="card">
            <div class="card-body register-card-body">
                <p class="login-box-msg">Please enter your Email Address or Mobile Number! </p>

                <div class="card-body">
                    @if (isset($message))
                         <div class="alert alert-success" role="alert" id="alertMess">
                            {{ $message }}
                        </div>
                    @endif

                    <form method="POST" action="{{ route('ForgetPasswordPost') }}" id="formToSubmit">
                        @csrf
                        <div class="col-12 rounded mb-2" id="emailInputForm">
                            <div class="input-group">
                                <input id="email" type="text" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="off" autofocus>
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-lock"></span>
                                    </div>
                                </div>
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            </div>
                        </div>
                        <div class="col-12 pt-2">
                            <button type="submit" class="btn btn-primary btn-block" id="submitBtnForgetPassword" disabled>
                                {{ __('Send Password Reset Link') }}
                            </button>
                        </div>

                        <div class="col-12 pt-2">
                            <!-- <a href="{{ route('login') }}" class="btn btn-danger btn-block"> -->
                            <a href="http://159.138.1.117:10001/" class="btn btn-danger btn-block">
                            
                                {{ __('Cancel') }}
                            </a>
                        </div>
                    </form>
            </div>
            <!-- /.form-box -->
        </div><!-- /.card -->
    </div>
@endsection