<div class="profile-page">
  <div class="profile-tabs">
    <button class="ptab active" data-tab="org">Organization Profile</button>
    <button class="ptab" data-tab="personal">Personal Info</button>
  </div>

  <!-- Organization Tab -->
  <div class="ptab-content active" id="tab-org">
    <% if (!org) { %>
    <div class="info-banner"><i class="bi bi-info-circle-fill"></i> <strong>Set up your organization profile</strong> to get listed in the directory and access member features.</div>
    <% } %>
    <form action="/member/profile/organization" method="POST" enctype="multipart/form-data" class="profile-form">
      <div class="form-card">
        <h3>Business Information</h3>
        <div class="logo-upload-area">
          <div class="current-logo"><% if (org && org.logo) { %><img src="<%= org.logo %>" alt="Logo"><% } else { %><div class="logo-placeholder"><i class="bi bi-building"></i></div><% } %></div>
          <div><label class="btn btn-outline-primary btn-sm">Upload Logo<input type="file" name="logo" accept="image/*" style="display:none" onchange="previewLogo(this)"></label><p class="form-help">JPG, PNG, GIF up to 5MB</p></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label>Business Name *</label><input type="text" name="name" required value="<%= org?.name || '' %>" placeholder="Your Company Name"></div>
          <div class="form-group"><label>Industry</label>
            <select name="category_id">
              <option value="">Select Industry...</option>
              <% categories.forEach(c => { %><option value="<%= c.id %>" <%= (org?.category_id == c.id) ? 'selected' : '' %>><%= c.name %></option><% }) %>
            </select>
          </div>
        </div>
        <div class="form-group"><label>Short Description</label><input type="text" name="short_description" value="<%= org?.short_description || '' %>" placeholder="One-line summary of your business" maxlength="500"></div>
        <div class="form-group"><label>Full Description</label><textarea name="description" rows="4" placeholder="Describe your business, services, and what makes you unique..."><%= org?.description || '' %></textarea></div>
        <div class="form-row">
          <div class="form-group"><label>Website</label><input type="url" name="website" value="<%= org?.website || '' %>" placeholder="https://yourcompany.com"></div>
          <div class="form-group"><label>Business Email</label><input type="email" name="email" value="<%= org?.email || '' %>" placeholder="contact@yourcompany.com"></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label>Phone</label><input type="tel" name="phone" value="<%= org?.phone || '' %>" placeholder="(555) 555-5555"></div>
          <div class="form-group"><label>Year Established</label><input type="number" name="year_established" value="<%= org?.year_established || '' %>" placeholder="2010" min="1900" max="<%= new Date().getFullYear() %>"></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label>Employee Count</label>
            <select name="employee_count">
              <option value="">Select...</option>
              <% ['1-10','11-50','51-200','201-500','500+'].forEach(o => { %><option value="<%= o %>" <%= (org?.employee_count === o) ? 'selected' : '' %>><%= o %> employees</option><% }) %>
            </select>
          </div>
        </div>
        <div class="form-group"><label>Keywords / Tags</label><input type="text" name="keywords" value="<%= org?.keywords || '' %>" placeholder="web design, marketing, consulting (comma separated)"></div>
      </div>

      <div class="form-card">
        <h3>Location</h3>
        <div class="form-group"><label>Street Address</label><input type="text" name="address" value="<%= org?.address || '' %>" placeholder="123 Main Street"></div>
        <div class="form-group"><label>Suite/Unit</label><input type="text" name="address2" value="<%= org?.address2 || '' %>" placeholder="Suite 100"></div>
        <div class="form-row">
          <div class="form-group"><label>City</label><input type="text" name="city" value="<%= org?.city || '' %>" placeholder="Austin"></div>
          <div class="form-group"><label>State</label><input type="text" name="state" value="<%= org?.state || '' %>" placeholder="TX"></div>
          <div class="form-group"><label>ZIP Code</label><input type="text" name="zip" value="<%= org?.zip || '' %>" placeholder="78701"></div>
        </div>
        <div class="form-group"><label>Country</label><input type="text" name="country" value="<%= org?.country || 'USA' %>"></div>
      </div>

      <div class="form-card">
        <h3>Social Media Links</h3>
        <% const socials = typeof org?.social_links === 'object' ? org.social_links : {}; %>
        <div class="form-row">
          <div class="form-group"><label><i class="bi bi-linkedin"></i> LinkedIn</label><input type="url" name="linkedin" value="<%= socials?.linkedin || '' %>" placeholder="https://linkedin.com/company/..."></div>
          <div class="form-group"><label><i class="bi bi-facebook"></i> Facebook</label><input type="url" name="facebook" value="<%= socials?.facebook || '' %>" placeholder="https://facebook.com/..."></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label><i class="bi bi-twitter-x"></i> Twitter/X</label><input type="url" name="twitter" value="<%= socials?.twitter || '' %>" placeholder="https://twitter.com/..."></div>
          <div class="form-group"><label><i class="bi bi-instagram"></i> Instagram</label><input type="url" name="instagram" value="<%= socials?.instagram || '' %>" placeholder="https://instagram.com/..."></div>
        </div>
        <div class="form-group"><label><i class="bi bi-youtube"></i> YouTube</label><input type="url" name="youtube" value="<%= socials?.youtube || '' %>" placeholder="https://youtube.com/@..."></div>
      </div>

      <div class="form-actions">
        <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Save Organization Profile</button>
        <% if (org) { %><a href="/directory/<%= org.slug %>" target="_blank" class="btn btn-outline-primary"><i class="bi bi-box-arrow-up-right"></i> View Public Profile</a><% } %>
      </div>
    </form>
  </div>

  <!-- Personal Tab -->
  <div class="ptab-content" id="tab-personal">
    <form action="/member/profile/user" method="POST" enctype="multipart/form-data" class="profile-form">
      <div class="form-card">
        <h3>Personal Information</h3>
        <div class="avatar-upload">
          <div class="current-avatar"><% if (currentUser.avatar) { %><img src="<%= currentUser.avatar %>" alt="Avatar"><% } else { %><div class="avatar-initials"><%= currentUser.first_name[0] %><%= currentUser.last_name[0] %></div><% } %></div>
          <label class="btn btn-outline-primary btn-sm">Upload Photo<input type="file" name="avatar" accept="image/*" style="display:none"></label>
        </div>
        <div class="form-row">
          <div class="form-group"><label>First Name</label><input type="text" name="first_name" value="<%= currentUser.first_name %>"></div>
          <div class="form-group"><label>Last Name</label><input type="text" name="last_name" value="<%= currentUser.last_name %>"></div>
        </div>
        <div class="form-group"><label>Phone</label><input type="tel" name="phone" value="<%= currentUser.phone || '' %>"></div>
        <div class="form-group"><label>Email Address</label><input type="email" value="<%= currentUser.email %>" disabled><small class="form-help">To change your email, contact support.</small></div>
      </div>
      <div class="form-actions"><button type="submit" class="btn btn-primary">Save Personal Info</button></div>
    </form>
  </div>
</div>

<script>
document.querySelectorAll('.ptab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.ptab,.ptab-content').forEach(el => el.classList.remove('active'));
    tab.classList.add('active');
    document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
  });
});
function previewLogo(input) {
  if (input.files && input.files[0]) {
    const reader = new FileReader();
    reader.onload = e => { const img = document.querySelector('.current-logo img') || document.querySelector('.current-logo .logo-placeholder'); if(img) img.outerHTML = `<img src="${e.target.result}" alt="Logo" style="width:80px;height:80px;object-fit:cover;border-radius:8px">`; };
    reader.readAsDataURL(input.files[0]);
  }
}
</script>
