Account Settings

        
<div class="row storefront-rightbar account mainTab">
  <div class="col-md-12">
     <div class="account-settings">
        <h1 class="profile-heading my-4">Account Settings</h1>
        <div class="table-tabs">
           <nav class="all-vendor-tabs custom-tabs store-sub-tabs">
              <div class="nav nav-tabs  action-tabs" id="nav-tab" role="tablist">
                 <a class="nav-item nav-link active" id="subscription-tab" data-active="acc" data-toggle="tab" href="#subscriptiontab" role="tab" aria-controls="subscriptiontab" aria-selected="false">
                 <span>Account</span>
                 </a>
                 <a class="nav-item nav-link " id="invoicepayment-tab" data-active="security" data-toggle="tab" href="#invoicePaymenttab" role="tab" aria-controls="invoicepaymenttab" aria-selected="true">
                 <span>Security & Privacy</span>
                 </a>
                 <a class="nav-item nav-link " id="invoicepayment-tab" data-active="bill" data-toggle="tab" href="#invoicePaymenttab" role="tab" aria-controls="invoicepaymenttab" aria-selected="true">
                 <span>Billing</span>
                 </a>
              </div>
              <!--Account tab content-->
              <div class="account-col mt-3 selectedTab acc">
                 <div class="row m-0">
                    <div class="col-md-8">
                       <div class="row">
                          <div class="col-md-6 mb-3">
                             <label>Name</label>
                             <div class="search-input-col">
                                <input type="text" class="form-control form-control-padding" value="Richard Ross" disabled>
                             </div>
                          </div>
                          <div class="col-md-6 mb-3">
                             <label>Email</label>
                             <div class="search-input-col">
                                <input type="text" class="form-control form-control-padding" value="richardr@synnex.com" disabled>
                             </div>
                          </div>
                          <div class="col-md-6 mb-3">
                             <label>Address</label>
                             <div class="search-input-col">
                                <input type="text" class="form-control form-control-padding" value="3797 SPINNAKER COURT" disabled>
                             </div>
                          </div>
                          <div class="col-md-6 mb-3">
                             <label>Country</label>
                             <div class="search-input-col">
                                <div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
                                   <button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
                                   <i class="icon-arrow-bottom"></i>
                                   <span class="selected-value">United States</span>
                                   </button>
                                   <div class="dropdown-menu active-menu" style="display: none; width: 225.863px;">
                                      <div class="warehouse-list" tabindex="14" style="overflow: hidden; outline: none;">
                                         <a class="dropdown-item " href="javascript:void(0);"><span>United States</span></a>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </div>
                          <div class="col-md-6 mb-3">
                             <label>State</label>
                             <div class="search-input-col">
                                <input type="text" class="form-control form-control-padding" value="New York" disabled>
                             </div>
                          </div>
                          <div class="col-md-6">
                             <div class="row">
                                <div class="col-md-6">
                                   <label>City</label>
                                   <div class="search-input-col">
                                      <input type="text" class="form-control form-control-padding" value="CA" disabled>
                                   </div>
                                </div>
                                <div class="col-md-6">
                                   <label>Zip Code</label>
                                   <div class="search-input-col">
                                      <input type="text" class="form-control form-control-padding" value="94538" disabled>
                                   </div>
                                </div>
                             </div>
                          </div>
                       </div>
                    </div>
                    <div class="col-md-4 d-flex">
                       <div class="ml-auto">
                          <ul class="edit-save-link ml-auto">
                             <li class="editProfile"><a href="javascript:void(0);"><i class="icon-line-edit"></i>Edit</a></li>
                             <li class="cancelProfile" style="display: none;"><a href="javascript:void(0);"><i class="icon-cross"></i>Cancel</a></li>
                             <li class="saveProfile" style="display: none;"><a href="javascript:void(0);"><i class="icon-save"></i>Save</a></li>
                          </ul>
                       </div>
                    </div>
                 </div>
              </div>
              <!--Account tab content End-->
              <!--security and privacy tab content End-->
              <div class="security-col mt-3 selectedTab security" style="display: none;">
                 <div class="row m-0">
                    <div class="col-md-8">
                       <div class="row">
                          <div class="col-md-6 mb-3">
                             <label>Username</label>
                             <div class="search-input-col">
                                <input type="text" class="form-control form-control-padding" value="richardr" disabled>
                             </div>
                          </div>
                          <div class="col-md-6 mb-3 pwd">
                             <label>Password</label>
                             <div class="search-input-col">
                                <i class="icon-update-password disabled" style="display: none;"></i>
                                <input type="password" class="form-control form-control-padding securityPwd" value="1234567890"  disabled>
                             </div>
                             <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" class="update-pass-link" title="Redirect to EC express" style="display: none;">Reset Password</a>
                          </div>
                          <div class="col-md-6 mb-3">
                             <label>Language</label>
                             <div class="search-input-col">
                                <div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
                                   <button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
                                   <i class="icon-arrow-bottom"></i>
                                   <span class="selected-value">English (US)</span>
                                   </button>
                                   <div class="dropdown-menu active-menu" style="display: none; width: 225.863px;">
                                      <div class="warehouse-list" tabindex="14" style="overflow: hidden; outline: none;">
                                         <a class="dropdown-item " href="javascript:void(0);"><span>English (US)</span></a>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </div>
                          <div class="col-md-6">
                                   <label>Currency</label>
                                   <div class="search-input-col">
                                      <div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
                                         <button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
                                         <i class="icon-arrow-bottom"></i>
                                         <span class="selected-value">United States (USD)</span>
                                         </button>
                                         <div class="dropdown-menu active-menu" style="display: none; width: 225.863px;">
                                            <div class="warehouse-list" tabindex="14" style="overflow: hidden; outline: none;">
                                               <a class="dropdown-item " href="javascript:void(0);"><span>Austria (USD)</span></a>
                                               <a class="dropdown-item " href="javascript:void(0);"><span>Austria (EUR)</span></a>
                                               <a class="dropdown-item " href="javascript:void(0);"><span>Canada (CAD)</span></a>
                                               <a class="dropdown-item " href="javascript:void(0);"><span>United States (USD)</span></a>
                                            </div>
                                         </div>
                                      </div>
                                   </div>
                          </div>
                       </div>
                    </div>
                    <div class="col-md-4 d-flex">
                       <div class="ml-auto">
                          <ul class="edit-save-link ml-auto">
                             <li class="editProfile"><a href="javascript:void(0);"><i class="icon-line-edit"></i>Edit</a></li>
                             <li class="cancelProfile" style="display: none;"><a href="javascript:void(0);"><i class="icon-cross"></i>Cancel</a></li>
                             <li class="saveProfile" style="display: none;"><a href="javascript:void(0);"><i class="icon-save"></i>Save</a></li>
                          </ul>
                       </div>
                    </div>
                 </div>
              </div>
              <!--security and privacy tab content End-->
              <div class="billingTab selectedTab bill" style="display: none;">
                 <div class="row">
                    <div class="col-md-4">
                       <div class="bill-address-col">
                          <h1>Billing Address <a href="javascript:void(0);" class="ml-auto" data-toggle="modal" data-target="#editbillAddressModal"><i class="icon-line-edit"></i>Edit</a></h1>
                          <div class="bill-name mt-4 mb-3"><i class="icon-user-name"></i>Richard Ross</div>
                          <div class="bill-address mb-3"><i class="icon-customer-location"></i><span>39 Pelham St. Ste. 250, Greenville, SC 29605 USA</span></div>
                          <div class="billing-phone mb-3"><i class="icon-customer-phone"></i>+1-803-795-8004</div>
                          <div class="bill-email"><i class="icon-customer-email"></i><a href="javascript:void(0);">richardr@synnex.com</a></div>
                       </div>
                    </div>
                    <div class="col-md-4">
                       <div class="bill-address-col">
                          <h1>Shipping Address <a href="javascript:void(0);" class="ml-auto"><i class="icon-line-edit"></i>Edit</a></h1>
                          <div class="bill-name mt-4 mb-3"><i class="icon-user-name"></i>Richard Ross</div>
                          <div class="bill-address mb-3"><i class="icon-customer-location"></i><span>39 Pelham St. Ste. 250, Greenville, SC 29605 USA</span></div>
                          <div class="billing-phone mb-3"><i class="icon-customer-phone"></i>+1-803-795-8004</div>
                          <div class="bill-email"><i class="icon-customer-email"></i><a href="javascript:void(0);">richardr@synnex.com</a></div>
                       </div>
                    </div>
                 </div>
                 <div class="row mt-4">
                    <div class="col-md-4">
                       <label>Payment Method</label>
                       <div class="custom-dropdown dropdown cards-custom-dropdown hideForSamePaymnt">
                          <button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <i class="icon-arrow-bottom"></i>
                          <img  class="visa-img" src="images/visa.png"><span class="selected-value">5134 0373 9596 7276</span>
                          </button>
                          <div class="dropdown-menu">
                             <span class="card-heading">Credit Cards</span>
                             <a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>7759 6186 5454 4799</span></a>
                             <a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>2752 9377 5017 0746</span><span class="badge badge-danger ml-2">Expired</span></a>
                             <a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>2589 2627 8276 3675</span></a>
                             <a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>4062 3143 2637 3837</span></a>
                             <a class="dropdown-item add-cart-link" href="javascript:void(0);" data-toggle="modal" data-target="#addCard"><i class="icon-plus"></i><span>Add Card</span></a>
                             <a class="dropdown-item add-cart-link" href="manage-card.html"><i class="icon-user-setting"></i></i><span>Manage Cards</span></a>
                             <hr class="divider-line">
                             <span class="card-heading">Net Payments</span>
                             <a class="dropdown-item net-pay" href="javascript:void(0);"><span>Net 30</span></a>
                             <a class="dropdown-item net-pay" href="javascript:void(0);"><span>Net 60</span></a>
                          </div>
                       </div>
                    </div>
                 </div>
                 <div class="row">
                    <div class="col-md-12">
                       <hr class="dash-line ml-0 my-4">
                    </div>
                 </div>
                 <div class="row">
                    <div class="col-md-9">
                       <div class="payment-opt">
                          <div class="payment-opt-lbl mb-2">Payment Options</div>
                          <div class="opt-box">
                             <div class="enable-col">
                                <h1>Agent Billing<span>Accepted at 06/24/2021 by contact David Zhang(ecittest@synnex.com)</span></h1>
                                <div class="agent-bill-link"><a href="javascript:void(0);">View Agreement</a><span class="speprator"></span><a href="javascript:void(0);">Transfer existing contracts to Agent Billing</a></div>
                             </div>
                             <div class="set-default-btn ml-auto">
                                <span class="toggle-btn">
                                <label class="switch active"><input type="checkbox" checked="" value=""><span class="slider round"></span></label></span> <span class="set-default-lbl">Enable</span>
                             </div>
                          </div>
                          <div class="opt-box mt-3">
                             <div class="enable-col">
                                <h1>Payment Gateway</h1>
                             </div>
                             <div class="set-default-btn ml-auto">
                                <span class="toggle-btn">
                                <label class="switch active"><input type="checkbox" checked="" value=""><span class="slider round"></span></label></span> <span class="set-default-lbl">Enable</span>
                             </div>
                          </div>
                       </div>
                    </div>
                 </div>
              </div>
           </nav>
        </div>
     </div>
  </div>
</div>