@extends('layout.simpleapp')
@section('content')
<style>
      @media only screen and (min-width: 768px) {
          #removebkimg{
                background-image:url('{{ asset('employer-con/images/image3.png') }}');
                background-size: cover; 
                background-repeat: no-repeat;
                background-position: fixed;
             
                
            }
        }
</style>
    <section>

        <div class="container-fluid" id="removebkimg"
           >
            <div class="row">
                <div class="col-md-6 text-center" style="padding-top: 4em; padding:3em;">

                    <!--<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_akio2kni.json"  background="transparent"  speed="1"  style="width: 100%; height: 440px;"  loop  autoplay></lottie-player>-->
                    <img src="{{ asset('employer-con/images/Picture4.png') }}" height="auto" width="100%"
                        class="img-responsive contactimg " alt="picture">
                </div>
                <div class="col-md-5 pt-4">
                    <h1 style="padding-top: 2rem;"><b>{{__('Create New Password')}}</b></h1>
                    <h5 class="text-capitalize">{{__('you can now make your new password')}}</h5>

                    <form method="POST" action="{{ route('newPassword') }}">

                        <div class="form ">
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            @if (Session::has('error'))
                                <div class="alert alert-danger">
                                    <ul>
                                        <li>{{ Session::get('error') }}</li>
                                    </ul>
                                </div>
                            @endif
                            @if (Session::has('status'))
                                <div class="alert alert-success">
                                    <ul>
                                        <li>{{ Session::get('status') }}</li>
                                    </ul>
                                </div>
                            @endif
                            @csrf
                            <input type="hidden" value="{{ $token }}" name="token">
                            <input type="hidden" value="{{ $email }}" name="email">

                            <div class=" form-group row">
                                <div class="col" style="padding-top: 4rem;">
                                    <label class="pl-1 col-form-label-lg">{{__('New Password')}}</label>
                                    <span class="eyeicon"> <input type="password" id="pwd" name="password"
                                            class="form-control form-control-lg bg-light  contact-form-field " required
                                            placeholder="New Password">
                                        <a href="#" onclick="myFunction();" id="fa1"
                                            class="fa-solid fa-eye-slash" style="top: 8.3em !important;"></a> </span>
                                </div>
                            </div>

                            <div class=" form-group row">
                                <div class="col">
                                    <label class="pl-1 col-form-label-lg">{{__('Confirm Password')}}</label>
                                    <span class="eyeicon"> <input type="password" id="ch_pwd"
                                            name="password_confirmation"
                                            class="form-control form-control-lg bg-light  contact-form-field " required
                                            placeholder="Confirm Password">
                                        <a href="#" onclick="myFunction2();" id="fa2"
                                            class="fa-solid fa-eye-slash"></a> </span>
                                </div>
                            </div>
                            <div id="error_pwd"></div>
                            <div id="error_pw"></div>

                            <input type="hidden" value="{{session()->get('locale')}}" id="session">


                            <div class=" form-group row pt-4">
                                <div class="col pt-4">
                                    <div class="form-group">
                                        <button id="submit" class="btn btn-lg btn-primaryy btn-block contact-form-field"
                                            style=""><b> {{__('DONE')}} </b></button>
                                    </div>
                                </div>
                            </div>

                        </div> <!-- ..form.... -->
                    </form>
                </div><!-- ....col... -->

                <div class="col-1"></div>

            </div> <!-- ......row -->



        </div>


    </section>

@endsection
@section('script')
    <script>
    var valid = false;
    var match = false;
        function myFunction() {
            if (document.getElementById('fa1').classList.contains('fa-eye-slash')) {
                document.getElementById('fa1').classList.remove('fa-eye-slash');
                document.getElementById('fa1').classList.add('fa-eye');
                document.getElementById('pwd').type = 'text';
            } else {
                document.getElementById('fa1').classList.remove('fa-eye');
                document.getElementById('fa1').classList.add('fa-eye-slash');
                document.getElementById('pwd').type = 'password';
            }
        }

        function myFunction2() {
            if (document.getElementById('fa2').classList.contains('fa-eye-slash')) {
                document.getElementById('fa2').classList.remove('fa-eye-slash');
                document.getElementById('fa2').classList.add('fa-eye');
                document.getElementById('ch_pwd').type = 'text';
            } else {
                document.getElementById('fa2').classList.remove('fa-eye');
                document.getElementById('fa2').classList.add('fa-eye-slash');
                document.getElementById('ch_pwd').type = 'password';
            }
        }
        $(document).ready(function() {
            $('#pwd, #ch_pwd').on('keyup', function() {
                if ($('#pwd').val() == $('#ch_pwd').val()) {
                    if($('#session').val()=='ar'){
                        $('#error_pwd').html('مطابقة').css('color', 'green');
                    }
                    else{
                        $('#error_pwd').html('Matching').css('color', 'green');
                    }
                    match = true
                } else{
                    if($('#session').val()=='ar'){
                        $('#error_pwd').html('كلمات السر غير متطابقة').css('color', 'red');
                    }
                    else{
                        $('#error_pwd').html('Passwords mismatch').css('color', 'red');
                    }
                    match = false
                }
                if($('#pwd').val().length < 6 ) { 
                    if($('#session').val()=='ar'){
                        $('#error_pw').html('يجب أن تتكون كلمة المرور من 6 أحرف على الأقل').css('color', 'red ');
                    }
                    else{
                        $('#error_pw').html('Password must be at least 6 characters').css('color', 'red ');
                    }
                    valid = false;
                }  else{
                    $('#error_pw').html('');
                    valid = true
                }
              
                if(valid && match){
                    $('#submit').attr('disabled', false);
                }
                else{
                    $('#submit').attr('disabled', 'disabled');
                }
            });
        });
    </script>
@endsection