{{ html()->form('PATCH', route('frontend.auth.password.update'))->class('form-horizontal update-on-ajax')->open() }}
    <div class="row">
        <div class="col">
            <div class="form-group">
                {{ html()->label(__('validation.attributes.frontend.old_password'))->for('old_password') }}
                {{ html()->password('old_password')
                    ->class('text_input')
                    ->placeholder(__('validation.attributes.frontend.old_password'))
                    ->autofocus()
                    ->required() }}
                <span class="password-toggle-dashboard" style="cursor: pointer;" data-toggle-for="old_password" onclick="togglePasswordVisibility('old_password')">
                    <i class="fa fa-eye-slash"></i>
                </span>
            </div><!--form-group-->
        </div><!--col-->
    </div><!--row-->

    <div class="row">
        <div class="col">
            <div class="form-group">
                {{ html()->label(__('validation.attributes.frontend.password'))->for('password') }}

                {{ html()->password('password')
                    ->class('text_input')
                    ->placeholder(__('validation.attributes.frontend.password'))
                    ->required() }}
                <span class="password-toggle-dashboard" style="cursor: pointer;" data-toggle-for="password" onclick="togglePasswordVisibility('password')">
                    <i class="fa fa-eye-slash"></i>
                </span>
            </div><!--form-group-->
        </div><!--col-->
    </div><!--row-->

    <div class="row">
        <div class="col">
            <div class="form-group">
                {{ html()->label(__('validation.attributes.frontend.password_confirmation'))->for('password_confirmation') }}

                {{ html()->password('password_confirmation')
                    ->class('text_input')
                    ->placeholder(__('validation.attributes.frontend.password_confirmation'))
                    ->required() }}
                <span class="password-toggle-dashboard" style="cursor: pointer;" data-toggle-for="password_confirmation" onclick="togglePasswordVisibility('password_confirmation')">
                    <i class="fa fa-eye-slash"></i>
                </span>
            </div><!--form-group-->
        </div><!--col-->
    </div><!--row-->

    <div class="row">
        <div class="col">
            <div class="form-group mb-0 clearfix">
                {{ form_submit(__('labels.general.buttons.update') . ' ' . __('validation.attributes.frontend.password'))->class('mt-3 my-1 quicky-btn-2 rounded-1') }}
            </div><!--form-group-->
        </div><!--col-->
    </div><!--row-->
{{ html()->form()->close() }}

<script>
    function togglePasswordVisibility(fieldId) {
    const field = document.getElementById(fieldId);
    const icon = document.querySelector(`[data-toggle-for="${fieldId}"] i`);

    if (field.type === "password") {
        field.type = "text";
        icon.classList.remove("fa-eye-slash");
        icon.classList.add("fa-eye");
    } else {
        field.type = "password";
        icon.classList.remove("fa-eye");
        icon.classList.add("fa-eye-slash");
    }
  }
</script>