@extends('layouts.user_registration_layout')
@section('content')
    <section class="auth-page">
        <div class="auth-container">
            <div class="left-div">
                <a href="/" class="close"><img src="{{ asset('frontend/assets/images/close-icon-red.svg') }}"></a>
                <div class="inner-div">
                    <div class="tab-content">
                        <div id="details-tab" class="tab-pane fade active show">
                            <h3>New Password</h3>
                            <form class="m-form m-form--state" name="frm-reset-password" id="frm-reset-password"
                                method="post" action="{{ route('reset-password') }}" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-12 col-md-12">
                                        <div class="form-group">
                                            <p>Your new password must be different from previous used password</p>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-12 fix-col">
                                        <div class="custom-form-group-s1 ">
                                            <label>Enter New password</label>
                                            <div class="input-with-right-icon">
                                                <input type="password" class="form-control-s1" placeholder="Enter New password"
                                                id="new_password" name="new_password" minlength="8" required>

                                               <i class="bi bi-eye-slash right-icon " id="togglePassword" style="cursor: pointer"></i>
                                              
                                            </div>
                                          


                                        </div>
                                    </div>
                                    <div class="col-12 col-md-12 fix-col">
                                        <div class="custom-form-group-s1 ">
                                            <label>Confirm Password</label>
                                            <div class="input-with-right-icon">
                                                <input type="password" class="form-control-s1"
                                                placeholder="Confirm New Password" id="new_password_confirm"
                                                name="new_password_confirm" minlength="8" required>

                                                {{-- <button type="button" class="right-icon"><img
                                                        src="{{ asset('frontend/assets/images/eye-icon.svg') }}"
                                                        id="toggleConfirmPassword"></button> --}}
                                               <i class="bi bi-eye-slash right-icon " id="toggleConfirmPassword" style="cursor: pointer"></i>
                                              
                                            </div>
                                            
                                            <span id="confirm_password_msg"></span>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-12 fix-col">
                                        <div class="custom-actions-group-s1">
                                            <button type="submit" id="saveData" class="theme-solid-btn submit-btn">Reset
                                                Password</button>
                                        </div>
                                    </div>
                            </form>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        <div class="right-div">
            <figure>
                <div class="auth-logo">
                    <img src="{{ asset('frontend/assets/images/logo-white.svg') }}" alt="">
                </div>
                <figcaption>
                    <h3>TransCash Solution inc</h3>
                    <p>Is an international money transfer company reliable, credible, secure, fast and at less cost.
                        Use our services for your international transfers without wasting time.</p>
                </figcaption>
            </figure>
        </div>
        </div>
    </section>
@endsection
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js">
</script>

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


        const togglePassword = document.querySelector("#togglePassword");
        const toggleConfirmPassword = document.querySelector("#toggleConfirmPassword");


        togglePassword.addEventListener("click", function(e) {
            // toggle the type attribute
            console.log('password toggle');
            const type =
            new_password.getAttribute("type") === "password" ? "text" : "password";
            new_password.setAttribute("type", type);
            // toggle the eye / eye slash icon
           
            this.classList.toggle("bi-eye");
        });
        toggleConfirmPassword.addEventListener("click", function(e) {
            // toggle the type attribute
            const type =
                new_password_confirm.getAttribute("type") === "password" ? "text" : "password";
            new_password_confirm.setAttribute("type", type);
            // toggle the eye / eye slash icon
            this.classList.toggle("bi-eye");
            
        });
















        $("#new_password_confirm").bind('keyup change', function() {

            check_Password($("#new_password").val(), $("#new_password_confirm").val())


        })





        $('#frm-reset-password').submit(function(e) {

            e.preventDefault();
            let new_password = $('#new_password').val();
            let confirm_password = $('#new_password_confirm').val();
            var url = window.location;

            var access_token = new URLSearchParams(url.search).get('access_token');
            var Bearer = access_token;
            console.log('new_password', new_password);
            console.log('confirm_password', confirm_password);
            console.log('Bearer', Bearer);


            //var Bearer = localStorage.getItem('access_token');
            console.log('Bearer', Bearer);
            var _token = $("input[name='_token']").val();
            $.ajax({
                url: "{{ route('reset-password') }}",
                type: "POST",
                headers: {
                    Authorization: 'Bearer ' + Bearer
                },
                data: {
                    _token: _token,
                    new_password: new_password,
                    confirm_password: confirm_password
                },
                success: function(data) {
                    console.log(data);
                    if ($.isEmptyObject(data.error)) {

                        $url = '/login';
                        console.log($url);
                        swal({
                            title: "Wow!",
                            text: "New Password has been updated!",
                            type: "success"
                        }).then(function() {
                            window.location.href = $url;
                        });

                        
                        $('.confirm_password_err').text('');
                        $('.new_password_err').text('');

                    } else {

                        printErrotMsg(data.error);
                        
                    }
                }
            })
        });



    });

    function printErrotMsg(msg) {
        $.each(msg, function(key, value) {
            if (key == 'new_password') {

                Swal.fire({
                    type: 'info',
                    title: 'Password Already Used',
                    text: 'New Password cannot be same as your current password. Please choose a different password'
                })
            }
            if (key == 'confirm_password') {
                Swal.fire({
                    type: 'error',
                    title: 'Opps',
                    text: 'Confirm Password can not match with new password!'
                })
            }


        })
    }

    function check_Password(Pass, Con_Pass) {

        if (Pass === "") {



        } else if (Pass === Con_Pass) {

            $("#saveData").removeAttr('disabled');
            $('#confirm_password_msg').show()
            $("#confirm_password_msg").html('<div class="alert alert-success">Password matched</div>')

            setTimeout(function() {
                $('#confirm_password_msg').fadeOut('slow');
            }, 3000);

        } else {
            $("#saveData").prop("disabled", true);
            $("#new_password_confirm").focus()
            $('#confirm_password_msg').show()
            $("#confirm_password_msg").html('<div class="alert alert-danger">Password didnot matched</div>')

            setTimeout(function() {
                $('#confirm_password_msg').fadeOut('slow');
            }, 3000);

        }

    }
</script>