@extends('layouts.acorn.acorn_frontend_app')
@section('header_styles')
    <style>
        .sm-link {
            margin-left: 10px !important;
            font-size: 13px
        }

        .password-input {
            position: relative;
        }

        .toggle-password {
            position: absolute;
            top: 50%;
            right: 10px;
            /* Adjust the right position as needed */
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-auto d-none d-lg-flex">
            <div class="nav flex-column sw-25 mt-n2" id="settingsColumn">
            </div>
        </div>

        <div class="col">

            <div class="page-title-container">
                <div class="row">
                    <div class="col">
                        <h1 class="mb-0 pb-0 display-4" id="title">Security</h1>
                    </div>

                    @include('frontend.profile.component.menu')

                </div>
            </div>

            <h2 class="small-title">Change Password</h2>
            <div class="card mb-5">
                <div class="card-body">
                    <form id="password_change_form" class="needs-validation" novalidate>
                        <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Current Password</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <div class="password-input eye-box">
                                    <input type="password" class="form-control toggle-password-input" id="current_password"
                                        name="current_password" />
                                    <i class="fa fa-eye" id="togglePassword"></i>
                                </div>
                                <div id="current_password_err" class="password-details"></div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">New Password</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <div class="password-input eye-box">
                                    <input type="password" class="form-control toggle-password-input" id="new_password"
                                        name="new_password" />
                                    <i class="fa fa-eye" id="toggleNewPassword"></i>
                                </div>
                                <div id="new_password_err" class="password-details"></div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Confirm Password</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <div class="password-input eye-box">
                                    <input type="password" class="form-control toggle-password-input" id="confirm_password"
                                        name="confirm_password" />
                                    <i class="fa fa-eye" id="toggleConfirmPassword"></i>
                                </div>
                                <div id="confirm_password_err" class="password-details"></div>
                            </div>
                        </div>
                        <div class="mb-3 row mt-5">
                            <div class="col-sm-8 col-md-9 col-lg-10 ms-auto">
                                <button type="submit" class="btn btn-outline-primary">Update</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {

            $('#togglePassword').on('click', function() {
                togglePasswordVisibility($('#current_password'), $('#togglePassword'));
            });

            $('#toggleNewPassword').on('click', function() {
                togglePasswordVisibility($('#new_password'), $('#toggleNewPassword'));
            });

            $('#toggleConfirmPassword').on('click', function() {
                togglePasswordVisibility($('#confirm_password'), $('#toggleConfirmPassword'));
            });

            $('#password_change_form').submit(function(event) {
                event.preventDefault();
                document.body.classList.add('spinner');
                $('#password_change_btn').prop("disabled", true);
                let formData = new FormData(this);

                $(".form-control").removeClass("is-invalid");
                $(".password-details").text('');
                $(".password-details").removeClass("invalid-feedback");
                $(".password-details").css("display", "none");

                $.ajax({
                    type: "POST",
                    url: frontendURL + 'client/password-change',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        document.body.classList.remove('spinner');
                        if (data.status != 0) {

                            swal({
                                title: data.msg,
                                text: 'You will be now redirected to login page.',
                                type: "success",
                                icon: "success",
                                position: 'center-start',
                                showConfirmButton: true,
                            }).then(function() {
                                window.location.href = frontendURL + 'client/login';
                            });


                        } else {
                            swal({
                                title: data.msg,
                                type: "error",
                                icon: "error",
                                showConfirmButton: true,
                            });
                            document.body.classList.remove('spinner');
                        }
                    },
                    error: function(response) {
                        document.body.classList.remove('spinner');
                        var errorJson = JSON.parse(response.responseText);
                        displayFormFieldErrors('password_change_form', errorJson.errors);
                        $('#password_change_btn').prop("disabled", false);
                    }
                });

                return false;
            });

        });

        function togglePasswordVisibility(input, toggleElement) {
            if (input.attr('type') === 'password') {
                input.attr('type', 'text');
                toggleElement.removeClass('fa-eye').addClass('fa-eye-slash');
            } else {
                input.attr('type', 'password');
                toggleElement.removeClass('fa-eye-slash').addClass('fa-eye');
            }
        }
    </script>
@endsection
@section('footer_scripts')
    <script src="{{ asset('acorn/js/pages/profile.settings.js') }}"></script>
    <script src="{{ asset('acorn/js/vendor/movecontent.js') }}"></script>
@endsection