@extends('layouts.master')
@section('title', 'Workflow Engine | Change Password')
@section('content')

{{-- @include('partials.data_table_cdn') --}}

<div class="all_applications_block">
    <div class="container bg-white rounded_area p-4 mb-3">
        <form method="post" id="changePasswordModalForm" action="{!! route('change.password') !!}">
            @csrf
            <input type="hidden" name="requestIds">
            <div class="w-1/2 mx-auto">
                <div class="flex flex-col gap-4">
                    <div>
                        <label for="current_password"
                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Current
                            Password</label>
                        <div class="relative">
                            <input type="password" id="current_password" name="current_password"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 relative"
                                placeholder="Current Password" required>
                            <i class="fa fa-eye toggle-password absolute bottom-3.5 right-3 cursor-pointer"></i>
                        </div>
                    </div>
                    <div>
                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">New
                            Password</label>
                        <div class="relative">
                            <input type="password" id="password" name="password"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                placeholder="New Password" required autocomplete="off">
                            <i class="fa fa-eye toggle-password absolute bottom-3.5 right-3 cursor-pointer"></i>
                        </div>
                    </div>
                    <div>
                        <label for="password_confirmation"
                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirm New
                            Password</label>
                        <div class="relative">
                            <input type="password" id="password_confirmation" name="password_confirmation"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                placeholder="Confirm New Password" required>
                            <i class="fa fa-eye toggle-password absolute bottom-3.5 right-3 cursor-pointer"></i>
                        </div>
                    </div>
                </div>
                <div class="flex flex-row-reverse">
                    <button type="submit" id="change-password-btn"
                        class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none dark:focus:ring-green-800 mt-3">
                        Change Password
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div class="hidden">
        <div id="editor-container1" class="hidden"></div>
    </div>
</div>
<script>
    $(document).on('click', '.toggle-password', function() {
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $(this).siblings('input');
        input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password');
    });

    $('#changePasswordModalForm').ajaxForm({
        beforeSend: function() {
            // btn_text=$("#profile_update_btn").text();
            // $("#profile_update_btn").html('<i class="fas fa-spinner fa-pulse"></i>');
            // $('#profile_update_btn').prop("disabled", true);
        },
        //uploadProgress: function(event, position, total, percentComplete) {},
        complete: function(xhr) {
            //console.log(xhr);
            if (xhr.status == 200) {
                // successModal(xhr.responseJSON);
                // xhr.responseJSON={'message':'Profile Updated successfully.',
                // 'alert_type':'alert-success',
                // 'title':'Success'};
                messageModal(xhr.responseJSON);
                // let jsonData= xhr.responseText;
                // messageModal(JSON.parse(jsonData));
                setTimeout(function() {
                    location.reload();
                }, 2000);
            } else {
                errorModal(xhr);
            }
            // $("#profile_update_btn").html('');
            // $("#profile_update_btn").text(btn_text);
            // $('#profile_update_btn').prop("disabled", false);
        }
    });

</script>
{{-- @include('user.index_script') --}}
@endsection