@extends('layout.emapp')
@section('content')
    <section class="home">
        <div class="container pt-4">
            <div class="row pt-4">
                 <!--<div style="position: absolute; left: 20; top: 70px; float:left; padding-right: 0; z-index: -99;">-->
                 <!--                   <img src="{{asset('employer-con/images/clients.png')}}" class="resize-img" height="98" width="150"-->
                 <!--                       style="opacity: .1">-->
                 <!--               </div>-->
                                
                 <!--                <div style="position: absolute; top: 170px; right: 0; float: right; padding-right: 0; z-index: -99;">-->
                 <!--                   <img src="{{asset('employer-con/images/Career.png')}}" class="resize-img" height="98" width="150"-->
                 <!--                       style="opacity: .2">-->
                 <!--               </div>-->
                                
                 <!--                <div-->
                 <!--                       style="position: absolute; right: 260px; top: 280px; float: right; padding-right: 0; z-index: -99;">-->
                 <!--                       <img src="{{asset('employer-con/images/Arrow.png')}}" class="resize-img" height="70" width="250"-->
                 <!--                           style="opacity: 6%;">-->
                 <!--                   </div>-->
                <!--<div class="col-1">-->

                <!--</div>-->
                <div class="col-md-8 pt-4">

                    <h3 class="text-center pb-3">{{__('Change Password')}}</h3>
                     
                    <div class="form pt-4">

                        <form action="change-password-em" method="POST">
                            @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
                            <div class=" form-group row">
                                <!--<div style="position: absolute; left: 20; float: left; padding-right: 0; z-index: -99;">-->
                                <!--    <img src="{{asset('employer-con/images/clients.png')}}" class="resize-img" height="98" width="150"-->
                                <!--        style="opacity: .1">-->
                                <!--</div>-->

                                <!--<div style="position: absolute; right: 0; float: right; padding-right: 0; z-index: -99;">-->
                                <!--    <img src="{{asset('employer-con/images/Career.png')}}" class="resize-img" height="98" width="150"-->
                                <!--        style="opacity: .2">-->
                                <!--</div>-->
                                <div class="col">
                                    <label class="pb-0 col-form-label">{{__('Old Password')}}</label>
                                    <span class="eyeicon"> <input
                                            class="form-control form-control-lg bg-light  contact-form-field "
                                            type="password" placeholder="{{__('Old Password')}}" name="old_pwd" id="old_pwd"
                                            required>
                                        <a href="#" onclick="old_pwd();" id="fa1" class="fa-solid fa-eye-slash "></a> </span>
                                </div>
                            </div>

                            <div class=" form-group row">
                                <div class="col">
                                    <label class="pb-0 col-form-label">{{__('New Password')}}</label>
                                    <span class="eyeicon"> <input
                                            class="form-control form-control-lg bg-light  contact-form-field "
                                            type="password" placeholder="{{__('Enter Password')}}" id="pwd" name="password"
                                            required>
                                        <a href="#" onclick="pwd();" id="fa2" class="fa-solid fa-eye-slash "></a> </span>
                                </div>
                            </div>

                            <div class=" form-group row">
                                <div class="col">
                                    <!--<div-->
                                    <!--    style="position: absolute; right: 0; top: 0px; float: right; padding-right: 0; z-index: -99;">-->
                                    <!--    <img src="{{asset('employer-con/images/Arrow.png')}}" class="resize-img" height="70" width="250"-->
                                    <!--        style="opacity: .1;">-->
                                    <!--</div>-->
                                    <!--<div-->
                                    <!--    style="position: absolute;  left: 100px; float: left; padding-right: 0; z-index: -99;">-->
                                    <!--    <img src="{{asset('employer-con/images/bag.png')}}" class="resize-img" height="98" width="150"-->
                                    <!--        style="opacity: 6%">-->
                                    <!--</div>-->

                                    <label class="pb-0 col-form-label">{{__('Confirm Password')}}</label>
                                    <span class="eyeicon"> <input
                                            class="form-control form-control-lg bg-light  contact-form-field "
                                            type="password" placeholder="{{__('Repeat Password')}}" id="ch_pwd"
                                            name="password_confirmation" required>
                                        <a href="#" onclick="ch_pwd();" id="fa3" class="fa-solid fa-eye-slash "></a> </span>
                                </div>
                            </div>
                            <input type="hidden" value="{{session()->get('locale')}}" id="session">
                            <span id="error_pwd"></span>
                            <div id="error_pw"></div>


                            <div class=" form-group row">
                                <div class="col pt-4 text-center">
                                    <button id="submit" class="btn btn-primaryy btn-block" type="submit"
                                        style="font-size: 18px; font-weight: 500;">{{__('SAVE')}}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div> <!-- 10-col -->

                <!-- </div> -->
                
                 <!--<div style="position: absolute; left: 20; bottom: -50px; float:left; padding-right: 0; z-index: -99;">-->
                 <!--                   <img src="{{asset('employer-con/images/clients.png')}}" class="resize-img" height="98" width="150"-->
                 <!--                       style="opacity: .1">-->
                 <!--               </div>-->
                                
                 <!--                <div style="position: absolute; bottom: -140px; right: 0; float: right; padding-right: 0; z-index: -99;">-->
                 <!--                   <img src="{{asset('employer-con/images/Career.png')}}" class="resize-img" height="98" width="150"-->
                 <!--                       style="opacity: .2">-->
                 <!--               </div>-->
                                
                 <!--                <div-->
                 <!--                       style="position: absolute; bottom: -190px;  left: 270px; float: left; padding-right: 0; z-index: -99;">-->
                 <!--                       <img src="{{asset('employer-con/images/bag.png')}}" class="resize-img" height="98" width="150"-->
                 <!--                           style="opacity: 6%">-->
                 <!--                   </div>-->
                                
                 <!--                <div-->
                 <!--                       style="position: absolute; right: 260px; bottom: -230px; float: right; padding-right: 0; z-index: -99;">-->
                 <!--                       <img src="{{asset('employer-con/images/Arrow.png')}}" class="resize-img" height="70" width="250"-->
                 <!--                           style="opacity: 6%;">-->
                 <!--                   </div>-->
            </div> <!-- ....row -->
        </div> <!-- container -->

    </section>
@endsection
@section('script')
    <script type="text/javascript">
    var valid = false;
    var match = false;
        function old_pwd(){
            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('old_pwd').type = 'text';
            } else {
                document.getElementById('fa1').classList.remove('fa-eye');
                document.getElementById('fa1').classList.add('fa-eye-slash');
                document.getElementById('old_pwd').type = 'password';
            }
        }
        function pwd(){
            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('pwd').type = 'text';
            } else {
                document.getElementById('fa2').classList.remove('fa-eye');
                document.getElementById('fa2').classList.add('fa-eye-slash');
                document.getElementById('pwd').type = 'password';
            }
        }
        function ch_pwd(){
            if (document.getElementById('fa3').classList.contains('fa-eye-slash')) {
                document.getElementById('fa3').classList.remove('fa-eye-slash');
                document.getElementById('fa3').classList.add('fa-eye');
                document.getElementById('ch_pwd').type = 'text';
            } else {
                document.getElementById('fa3').classList.remove('fa-eye');
                document.getElementById('fa3').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