@extends("website.service-providers.layouts.layout")
@section('title', "Service Provider : Change Password")
@section("body")
<!--Banner-->

<!-- banner background image starts -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>

<!--- services section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('homepage') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Profile</li>
                <li class="breadcrumb-item active" aria-current="page">Change Password</li>
            </ol>
        </nav>
    </div>
</section>

<section class="dashboard-main">
    <div class="container">
        <div class="row sidebar_row">
            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")
            <div class="main-content">
                <div class="main-content-wrapper my-profile">
                    <div class="profile-password-change d-flex flex-column">
                        <h3 class="font-size-18">Change Password</h3>
                        <div class="profile-password-change-form ">
                            <form action="" class="d-flex flex-column forms" id="passwordUpdateForm">
                                @csrf
                                <div class="profile-password-field d-flex flex-column">
                                    <h3 class="font-size-14">Old Password</h3>
                                    <input type="password" placeholder="Old Password" id="old_password" name="old_password" value="">
                                </div>
                                <div class="profile-password-field d-flex flex-column">
                                    <h3 class="font-size-14">New Password</h3>
                                    <input type="password" placeholder="New Password" id="new_password" name="new_password" value="">
                                </div>
                                <div class="profile-password-field d-flex flex-column">
                                    <h3 class="font-size-14">Confirm New Password</h3>
                                    <input type="password" placeholder="Confirm New Password" id="confirmation_password" name="confirmation_password" value="">
                                </div>
                                <button class="btn btn-primary">Change Password</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#verifyOTPModal').on('hidden.bs.modal', function() {
            resetOTPInputFields();
        });

        function getOTP() {
            var otp = '';
            $('.otp-input-block input').each(function() {
                otp += $(this).val();
            });
            return otp;
        }


        $('#passwordUpdateForm').on('submit', function(event) {
            event.preventDefault();

            var oldPassword = $('#old_password').val();
            var newPassword = $('#new_password').val();
            var confirmationPassword = $('#confirmation_password').val();
            if (oldPassword.trim() === '') {
                handleValidationError('old_password', 'Please enter your old password');
                return;
            } else {
                removeError('old_password')
            }
            if (newPassword.trim() === '') {
                handleValidationError('new_password', 'Please enter New Password');
                return;
            } else {
                removeError('new_password')
            }
            if (confirmationPassword.trim() === '') {
                handleValidationError('confirmation_password', 'Please enter your old password');
                return;
            } else {
                removeError('confirmation_password')
            }

            if (newPassword !== confirmationPassword) {
                handleValidationError('confirmation_password', 'New password and Confirmation New Password do not match');
                return;
            } else {
                removeError('confirmation_password')
            }

            $('#verifyOTPModal').modal('show');

            $('#verifyOTPModal .btn-primary').off('click').on('click', function() {
                var fData = new FormData();
                fData.append('number', $('#number').text());
                fData.append('otp', getOTP());

                var formData = new FormData();
                formData.append('old_password', oldPassword);
                formData.append('new_password', newPassword);
                formData.append('confirmation_password', confirmationPassword);

                $.ajax({
                    url: "{{ route('sp.validateOTP') }}",
                    method: 'POST',
                    data: fData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            if (response.success.status == 200) {
                                /* START */
                                $.ajax({
                                    url: "{{ route('sp.changePassword') }}",
                                    method: 'POST',
                                    data: formData,
                                    processData: false,
                                    contentType: false,
                                    success: function(response) {
                                        if (response.status == 200) {
                                            $("#passwordUpdateForm")[0].reset();
                                            $('#verifyOTPModal').modal('hide');
                                            toastr.success(response.message);
                                            resetOTPInputFields();
                                        } else if (response.error.status == 401) {
                                            toastr.error(response.error.message);
                                        }
                                    },
                                    error: function(xhr, status, error) {
                                        console.log(error);
                                        handleAjaxError(xhr, 'There was a problem with your AJAX request');
                                    }
                                });
                                /* END */
                            } else if (response.success.status == 401) {
                                toastr.error('Invalid OTP entered');
                            }
                        } else if (response.status == 401) {
                            toastr.error(response.message);
                        } else if (response.status == 404) {
                            toastr.error(response.error);
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error('There was some problem while verifying OTP');
                    }
                });
            });
        });
    });

    function resetOTPInputFields() {
        $('.otp-input-block input').val('');
    }

    function handleValidationError(elementId, errorMessage) {
        toastr.error(errorMessage);
        $('#' + elementId).css('border-color', 'red');
    }

    function handleAjaxError(xhr, errorMessage) {
        toastr.error(errorMessage);
    }

    function removeError(elementId) {
        $('#' + elementId).css('border-color', 'var(--grey-color)');
    }
</script>

@section('footerItems')
@endsection