{% if customer and request.path == '/account' %}


<div class="dashboard-wrapper">

  <div class="dashboard-sidebar">
    
    <ul class="dashboard-menu" id="dynamic-dashboard-menu">
  
  <li><a href="#" class="tab-link active" data-tab="account" ><img src="https://custo-edit.expoundenterprise.com/public/up/icons/Group 38803.png" alt="new pages"> My Account</a></li>
      <li><a href="#" class="tab-link" data-tab="profile"><img src="https://custo-edit.expoundenterprise.com/public/up/icons/user.png" alt="new pages"> My Profile </a></li>
      <li><a href="#" class="tab-link" data-tab="addresses"><img src="https://custo-edit.expoundenterprise.com/public/up/icons/location (2).png" alt="new pages">My Addresses </a></li>
      <li><a href="#" class="tab-link" data-tab="orders"><img src="https://custo-edit.expoundenterprise.com/public/up/icons/Group 38803.png" alt="new pages"> My Orders </a></li>
      <li><a href="#" class="tab-link" data-tab="top-products"><img src="https://custo-edit.expoundenterprise.com/public/up/icons/all-included.png" alt="new pages">My Top Ordered Products</a></li>
     
      <li><a href="#"  class="tab-link" data-tab="recently-viewed"><img src="https://custo-edit.expoundenterprise.com/public/up/icons/vision.png" alt="new pages">My Recently Viewed</a></li>

      <li><a href="#" class="tab-link" data-tab="password"><img src="https://custo-edit.expoundenterprise.com/public/up/icons/reset-password.png" alt="new pages"> My Change Password</a></li>
      <ul class="dashboard-menu" id="dynamic-menu"></ul>
      <li><a href="/account/logout"> Logout</a></li>
</ul>

  </div>


  <div class="dashboard-content">
<div class="tab-content active" id="account">
      <h1>My Account</h1>
<div class="profile-details">
  <div id="profile-view">
  <div class="top-head">
  <h2>Account Information</h2>
  </div>
   <div class="mid-head">Contact Information</div>
    <div class="first_class1">
      <div class="third_class">{{ customer.first_name }}</div>
      <div class="third_class">{{ customer.last_name }}</div>
    </div>
    <div class="first_class_email">
      <div class="third_class">{{ customer.email }}</div>
    </div>
  </div>
  <div class="tab-c_p">
  <a href="#" id="change-password-link" class="password-tab2">Change Password</a>
  </div>

<div class="add-head">
<h2>Address Book</h2>
        <a href="#" id="manage-address-link" class="address-tab2">Manage Address</a>
      
</div>
<div class="add-content">
Default Billing Address
</div>
<div id="default-address-display">Loading default address...</div>
</div>
</div>

<div class="tab-content" id="profile">
<div class="pro-container">
<div id="under-bttn">
<div class="under-head">
    <h1>My profile</h1>
    </div>
    <button id="edit-profile-btn">Edit</button>
</div>
<div class="profile-details1" >
  <div id="profile-view1">
   
    <div class="first_class">
      <div class="second_class">First name :</div>
      <div class="third_class"><p>{{ customer.first_name }}</p></div>
    </div>

    <div class="first_class">
      <div class="second_class">Last name :</div>
      <div class="third_class"><p>{{ customer.last_name }}</p></div>
    </div>

    <div class="first_class">
      <div class="second_class">Email :</div>
      <div class="third_class"><p>{{ customer.email }}</p></div>
    </div>

    <div class="custom-fields-static"></div>
  </div>

  <div id="profile-edit" class="edit-pro" style="display:none;">
  <div class="edit-form-wrapper">
    <form id="profile-edit-form">
    <div class="first_class22">
  <label for="edit-first-name">First name:</label>
  <input type="text" id="edit-first-name" name="first_name" value="{{ customer.first_name }}" disabled>
</div>

<div class="first_class22">
  <label for="edit-last-name">Last name:</label>
  <input type="text" id="edit-last-name" name="last_name" value="{{ customer.last_name }}" disabled>
</div>

<div class="first_class22">
  <label for="edit-email">Email:</label>
  <input type="email" id="edit-email" name="email" value="{{ customer.email }}" disabled>
</div>

      <div class="custom-fields-edit"></div>
      <button type="submit" id="save-profile-button">Save</button>
      <button type="button" id="cancel-edit-btn">Cancel</button>
    </form>
    </div>
  </div>
</div>
</div>
</div>

   <div class="tab-content" id="addresses">
  <h3>Address Book</h3>
  <div id="addresses-container">
  <p>Loading address ...</p>
</div>
<button id="add-address-btn" class="address-btn-main"><span>Add New Address</span></button>

<div id="address-form-container" class="form-container">
  <form id="add-address-form">
  <input type="hidden" name="address_id" id="address-id"> 
  <input type="text" name="first_name" id="first_name" placeholder="First Name" required>
  <input type="text" name="last_name" id="last_name" placeholder="Last Name" required>
  <input type="text" name="address1" id="address1" placeholder="Address Line 1" required><br>
  <input type="text" name="city" id="city" placeholder="City" required><br>
  <input type="text" name="province" id="province" placeholder="State" required><br>
  <select id="country" name="country" data-default="{{ form.country }}" required>
  {{ all_country_option_tags }}
</select>
  <input type="text" name="zip" id="zip" placeholder="Zip Code" required><br>
  <input type="text" name="phone" id="phone" placeholder="Phone"><br>

  <button type="submit" id="submit-address-btn">Submit</button>
  <button type="button" id="cancel-address-btn">Cancel</button>
</form>

</div>
</div>

<div class="tab-content" id="orders">
  <h3>My Order</h3>

  <div id="orders-container">
    <p>Loading your orders...</p>
  </div>

  <!-- Hidden order templates for dynamic rendering -->
  <template id="order-template">
  <tr class="order-row">
    <td class="order-image">
      <img src="__PRODUCT_IMAGE__" alt="Product" class="product-thumb" />
    </td>
    <td class="order-id">__ORDER_ID__</td>
    <td class="order-date">__ORDER_DATE__</td>
    <td class="order-total">__TOTAL_PRICE__</td>
    <td class="order-status">
      <span class="status-label">__FULFILLMENT_STATUS__</span>
    </td>
    <td class="order-actions">
     <button class="status-btn" data-url="__STATUS_URL__">Order Status</button>
      __CANCEL_BUTTON__
      <button class="reorder-btn" data-items='__REORDER_DATA__'>Reorder</button>
    </td>
  </tr>
</template>


  <template id="line-item-template">
    <div class="line-item">
      <img src="__PRODUCT_IMAGE__" alt="__PRODUCT_TITLE__" />
      <div>
        <div class="line-item-title">__PRODUCT_TITLE__</div>
        <div class="line-item-price">__PRODUCT_PRICE__</div>
      </div>
    </div>
  </template>
</div>



    <div class="tab-content" id="top-products">
     <h3>Top product</h3>
  <div id="product-container">
    <p>Loading your top product...</p>
  </div>
</div>

<div class="tab-content" id="recently-viewed">
  <h1>Recently Viewed</h1>
  
  <div id="recently-viewed-container" class="recently-viewed-grid">
    <p>Loading...</p>
  </div>
</div>

<div class="tab-content" id="password">
  <div id="password-section">
 
    <div id="password-loading" style="display: block;">
      
    <div class="change-password-wrapper">
  <h3>Change Password</h3>

  <form class="change-password-form" method="POST" action="https://custo-edit.expoundenterprise.com/update-password" onsubmit="return validatePasswordMatch(event);">
    <input type="hidden" name="shop" value="{{ shop.domain }}">
    <input type="hidden" name="customer_id" value="{{ customer.id }}">

    <div class="form-row">
      <label for="current-password">Current Password <span class="required">*</span></label>
      <input type="password" id="current-password" name="current_password" required>
    </div>

    <div class="form-row">
      <label for="new-password">New Password <span class="required">*</span></label>
      <input type="password" id="new-password" name="new_password" required>
    </div>

    <div class="form-row">
      <label for="confirm-password">Confirm New Password <span class="required">*</span></label>
      <input type="password" id="confirm-password" name="confirm_password" required>
    </div>

    <div class="form-row checkbox-row">
      <input type="checkbox" id="show-password" onclick="togglePasswordVisibility()">
      <label for="show-password" class="checkbox-label">Show Password</label>
    </div>

    <button type="submit" class="btn-save">Save</button>
  </form>
</div>


    <div id="password-message" style="display: none;">
      <p style="color: red;">This functionality is disabled by admin</p>
    </div>
    
    <div id="password-error" style="display: none;">
      <p style="color: red;">Unable to load change password status</p>
    </div>
  </div>
</div>
<script>
function togglePasswordVisibility() {
  const fields = ['current-password', 'new-password', 'confirm-password'];
  fields.forEach(id => {
    const input = document.getElementById(id);
    if (input) {
      input.type = input.type === "password" ? "text" : "password";
    }
  });
}
</script>
  </div>
</div>

{% elsif request.path == '/account/register' %}
  <!-- Custom registration form for /account/register -->
  <div id="custom-register-form">
    
  </div>
{% endif %}   


<script>
  window.ShopifyData = {
    shop: "{{ shop.domain }}",
    customer_id: "{{ customer.id }}"
  };
</script>

{% schema %}
{
  "name": "Custom_field_extension",
  "target": "body",
  "javascript": "Advance_form.js",
  "stylesheet": "ests_css.css"
}

{% endschema %}

{% render 'recently_viewed_snippet' %}


{% comment %} "stylesheet": "app.css", {% endcomment %}