<a href="/member/directory" style="display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:#6b7280;text-decoration:none;margin-bottom:20px"><i class="bi bi-arrow-left"></i> Back to Directory</a>

<div style="max-width:800px">

  <!-- Header Card -->
  <div class="form-card" style="margin-bottom:20px">
    <div style="display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap">
      <% if (org.logo) { %>
      <img src="<%= org.logo %>" alt="<%= org.name %>" style="width:80px;height:80px;border-radius:12px;object-fit:contain;border:1px solid #e5e7eb;flex-shrink:0">
      <% } else { %>
      <div style="width:80px;height:80px;border-radius:12px;background:#eff6ff;display:flex;align-items:center;justify-content:center;font-weight:700;color:#1a56db;font-size:2rem;flex-shrink:0"><%= org.name[0] %></div>
      <% } %>
      <div style="flex:1;min-width:0">
        <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px">
          <h1 style="margin:0;font-size:1.4rem;color:#111827"><%= org.name %></h1>
          <% if (org.is_verified) { %><span style="color:#1a56db;font-size:.9rem" title="Verified Member"><i class="bi bi-patch-check-fill"></i></span><% } %>
          <% if (org.is_featured) { %><span style="background:#fef3c7;color:#b45309;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:10px">Featured</span><% } %>
        </div>
        <% if (org.category_name) { %><div style="font-size:.85rem;color:#6b7280;margin-bottom:6px"><i class="bi bi-tag-fill"></i> <%= org.category_name %></div><% } %>
        <% if (org.city || org.state) { %><div style="font-size:.85rem;color:#6b7280;margin-bottom:6px"><i class="bi bi-geo-alt-fill"></i> <%= [org.city, org.state].filter(Boolean).join(', ') %></div><% } %>
        <% if (org.rating > 0) { %>
        <div style="display:flex;align-items:center;gap:4px;font-size:.85rem;color:#f59e0b;margin-bottom:6px">
          <% for(let i=1;i<=5;i++) { %><i class="bi bi-star<%= i <= Math.round(org.rating) ? '-fill' : '' %>"></i><% } %>
          <span style="color:#6b7280;margin-left:4px"><%= parseFloat(org.rating).toFixed(1) %> (<%= org.review_count %> review<%= org.review_count !== 1 ? 's' : '' %>)</span>
        </div>
        <% } %>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:10px">
          <% if (org.website) { %><a href="<%= org.website %>" target="_blank" rel="noopener" class="btn btn-primary btn-sm"><i class="bi bi-globe"></i> Website</a><% } %>
          <button id="favBtn" onclick="toggleFav(<%= org.id %>)" class="btn btn-ghost btn-sm">
            <i class="bi bi-heart<%= isFavorited ? '-fill' : '' %>"></i> <%= isFavorited ? 'Saved' : 'Save' %>
          </button>
          <% if (currentUser && currentUser.org_id && currentUser.org_id !== org.id) { %>
          <button onclick="document.getElementById('connectModal').style.display='flex'" class="btn btn-outline-primary btn-sm"><i class="bi bi-people-fill"></i> Connect</button>
          <% } %>
        </div>
      </div>
    </div>
  </div>

  <!-- About -->
  <% if (org.description || org.short_description) { %>
  <div class="form-card" style="margin-bottom:20px">
    <h2 style="margin:0 0 12px;font-size:1rem;font-weight:700;color:#111827">About</h2>
    <% if (org.short_description) { %><p style="font-weight:600;color:#374151;margin:0 0 10px;font-size:.95rem"><%= org.short_description %></p><% } %>
    <% if (org.description) { %><p style="color:#4b5563;line-height:1.8;margin:0;font-size:.9rem;white-space:pre-wrap"><%= org.description %></p><% } %>
  </div>
  <% } %>

  <!-- Details -->
  <div class="form-card" style="margin-bottom:20px">
    <h2 style="margin:0 0 14px;font-size:1rem;font-weight:700;color:#111827">Business Details</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px">
      <% if (org.email) { %>
      <div><div style="font-size:.72rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px">Email</div><a href="mailto:<%= org.email %>" style="font-size:.875rem;color:#1a56db"><%= org.email %></a></div>
      <% } %>
      <% if (org.phone) { %>
      <div><div style="font-size:.72rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px">Phone</div><a href="tel:<%= org.phone %>" style="font-size:.875rem;color:#1a56db"><%= org.phone %></a></div>
      <% } %>
      <% if (org.year_established) { %>
      <div><div style="font-size:.72rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px">Established</div><span style="font-size:.875rem;color:#374151"><%= org.year_established %></span></div>
      <% } %>
      <% if (org.employee_count) { %>
      <div><div style="font-size:.72rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px">Team Size</div><span style="font-size:.875rem;color:#374151"><%= org.employee_count %> employees</span></div>
      <% } %>
      <% if (org.address) { %>
      <div style="grid-column:1/-1"><div style="font-size:.72rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px">Address</div><span style="font-size:.875rem;color:#374151"><%= [org.address, org.address2, org.city, org.state, org.zip].filter(Boolean).join(', ') %></span></div>
      <% } %>
      <% const social = typeof org.social_links === 'object' ? org.social_links : (org.social_links ? JSON.parse(org.social_links) : {}); %>
      <% const socialIcons = { linkedin:'linkedin', facebook:'facebook', twitter:'twitter-x', instagram:'instagram', youtube:'youtube' }; %>
      <% const socialLinks = Object.entries(social || {}).filter(([,v]) => v); %>
      <% if (socialLinks.length) { %>
      <div style="grid-column:1/-1"><div style="font-size:.72rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Social</div><div style="display:flex;gap:10px">
        <% socialLinks.forEach(([k, v]) => { %><a href="<%= v %>" target="_blank" rel="noopener" style="font-size:1.2rem;color:#6b7280"><i class="bi bi-<%= socialIcons[k] || k %>"></i></a><% }) %>
      </div></div>
      <% } %>
      <% if (org.keywords) { %>
      <div style="grid-column:1/-1"><div style="font-size:.72rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Keywords</div><div style="display:flex;gap:6px;flex-wrap:wrap">
        <% org.keywords.split(',').map(k => k.trim()).filter(Boolean).forEach(k => { %><span style="background:#f3f4f6;color:#374151;font-size:.75rem;padding:3px 10px;border-radius:20px"><%= k %></span><% }) %>
      </div></div>
      <% } %>
    </div>
  </div>

  <!-- Reviews -->
  <div class="form-card" style="margin-bottom:20px">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
      <h2 style="margin:0;font-size:1rem;font-weight:700;color:#111827"><i class="bi bi-star-fill" style="color:#f59e0b"></i> Reviews (<%= reviews.length %>)</h2>
      <% if (currentUser && currentUser.org_id && currentUser.org_id !== org.id) { %>
      <button onclick="document.getElementById('reviewForm').style.display=document.getElementById('reviewForm').style.display==='none'?'block':'none'" class="btn btn-outline-primary btn-sm"><i class="bi bi-pencil"></i> Write a Review</button>
      <% } %>
    </div>

    <!-- Review form -->
    <% if (currentUser && currentUser.org_id && currentUser.org_id !== org.id) { %>
    <div id="reviewForm" style="display:none;background:#f9fafb;border-radius:10px;padding:16px;margin-bottom:16px">
      <div style="margin-bottom:10px">
        <div style="font-size:.85rem;font-weight:600;color:#374151;margin-bottom:6px">Your Rating</div>
        <div id="starPicker" style="display:flex;gap:4px;font-size:1.4rem;color:#d1d5db;cursor:pointer">
          <% for(let i=1;i<=5;i++) { %><i class="bi bi-star" data-val="<%= i %>"></i><% } %>
        </div>
        <input type="hidden" id="ratingVal" value="0">
      </div>
      <textarea id="reviewContent" rows="3" placeholder="Share your experience with this business..." style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.875rem;resize:vertical;box-sizing:border-box;font-family:inherit"></textarea>
      <div id="reviewError" style="display:none;color:#dc2626;font-size:.8rem;margin-top:4px"></div>
      <button class="btn btn-primary btn-sm" style="margin-top:10px" onclick="submitReview(<%= org.id %>)"><i class="bi bi-send-fill"></i> Submit Review</button>
    </div>
    <% } %>

    <% if (reviews.length) { %>
    <% reviews.forEach(r => { %>
    <div style="display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #f3f4f6">
      <div style="width:36px;height:36px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:#1a56db;flex-shrink:0;overflow:hidden">
        <% if (r.avatar) { %><img src="<%= r.avatar %>" style="width:36px;height:36px;border-radius:50%;object-fit:cover"><% } else { %><%= r.first_name[0] %><% } %>
      </div>
      <div style="flex:1">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap">
          <strong style="font-size:.875rem"><%= r.first_name %> <%= r.last_name %></strong>
          <div style="color:#f59e0b;font-size:.8rem"><% for(let i=1;i<=5;i++) { %><i class="bi bi-star<%= i<=r.rating?'-fill':''%>"></i><% } %></div>
          <time class="local-ts" data-ts="<%= new Date(r.created_at).toISOString() %>" style="font-size:.72rem;color:#9ca3af;margin-left:auto"><%= new Date(r.created_at).toLocaleString() %></time>
        </div>
        <p style="margin:0;font-size:.875rem;color:#374151;line-height:1.6"><%= r.content %></p>
      </div>
    </div>
    <% }) %>
    <% } else { %>
    <p style="color:#9ca3af;font-size:.875rem;text-align:center;padding:16px 0">No reviews yet. Be the first to review this business!</p>
    <% } %>
  </div>

</div>

<!-- Connect Modal -->
<% if (currentUser && currentUser.org_id && currentUser.org_id !== org.id) { %>
<div id="connectModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center">
  <div style="background:#fff;border-radius:16px;padding:28px;max-width:440px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.2)">
    <h3 style="margin:0 0 16px;font-size:1.1rem">Connect with <%= org.name %></h3>
    <div class="form-group" style="margin-bottom:12px">
      <label style="font-size:.85rem;font-weight:600;color:#374151;margin-bottom:6px;display:block">Connection Type</label>
      <select id="connType" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.875rem">
        <option value="general">General Connection</option>
        <option value="vendor">Vendor / Supplier</option>
        <option value="customer">Customer</option>
        <option value="partner">Strategic Partner</option>
        <option value="referral">Referral Partner</option>
      </select>
    </div>
    <div class="form-group" style="margin-bottom:16px">
      <label style="font-size:.85rem;font-weight:600;color:#374151;margin-bottom:6px;display:block">Message (optional)</label>
      <textarea id="connMessage" rows="3" placeholder="Introduce yourself or explain why you'd like to connect..." style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.875rem;resize:vertical;box-sizing:border-box;font-family:inherit;max-length:500"></textarea>
    </div>
    <div style="display:flex;gap:10px;justify-content:flex-end">
      <button onclick="document.getElementById('connectModal').style.display='none'" class="btn btn-ghost">Cancel</button>
      <button onclick="sendConnect(<%= org.id %>)" class="btn btn-primary"><i class="bi bi-people-fill"></i> Send Request</button>
    </div>
  </div>
</div>
<% } %>

<script>
async function toggleFav(orgId) {
  const btn = document.getElementById('favBtn');
  const res  = await fetch(`/member/directory/${orgId}/favorite`, { method: 'POST', headers: {'Content-Type':'application/json'} });
  const data = await res.json();
  btn.innerHTML = data.favorited ? '<i class="bi bi-heart-fill"></i> Saved' : '<i class="bi bi-heart"></i> Save';
}

// Star picker
document.querySelectorAll('#starPicker i').forEach(star => {
  star.addEventListener('mouseover', () => highlight(parseInt(star.dataset.val)));
  star.addEventListener('mouseout',  () => highlight(parseInt(document.getElementById('ratingVal').value)));
  star.addEventListener('click', () => { document.getElementById('ratingVal').value = star.dataset.val; highlight(parseInt(star.dataset.val)); });
});
function highlight(n) {
  document.querySelectorAll('#starPicker i').forEach((s,i) => {
    s.className = i < n ? 'bi bi-star-fill' : 'bi bi-star';
    s.style.color = i < n ? '#f59e0b' : '#d1d5db';
  });
}

async function submitReview(orgId) {
  const rating  = parseInt(document.getElementById('ratingVal').value);
  const content = document.getElementById('reviewContent').value.trim();
  const errEl   = document.getElementById('reviewError');
  errEl.style.display = 'none';
  if (!rating) { errEl.textContent = 'Please select a rating.'; errEl.style.display = 'block'; return; }
  if (content.length < 10) { errEl.textContent = 'Review must be at least 10 characters.'; errEl.style.display = 'block'; return; }
  const res  = await fetch(`/member/directory/${orgId}/review`, { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ rating, content }) });
  const data = await res.json();
  if (data.success) { location.reload(); } else { errEl.textContent = data.error || 'Failed to submit.'; errEl.style.display = 'block'; }
}

async function sendConnect(orgId) {
  const connection_type = document.getElementById('connType').value;
  const message = document.getElementById('connMessage').value.trim();
  const res  = await fetch(`/member/directory/${orgId}/connect`, { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ connection_type, message }) });
  const data = await res.json();
  document.getElementById('connectModal').style.display = 'none';
  if (data.success) { alert('Connection request sent!'); }
}

(function () {
  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
  function relativeTime(date) {
    const diff = (date - Date.now()) / 1000;
    const abs = Math.abs(diff);
    if (abs < 60)    return rtf.format(Math.round(diff), 'second');
    if (abs < 3600)  return rtf.format(Math.round(diff / 60), 'minute');
    if (abs < 86400) return rtf.format(Math.round(diff / 3600), 'hour');
    if (abs < 2592000) return rtf.format(Math.round(diff / 86400), 'day');
    if (abs < 31536000) return rtf.format(Math.round(diff / 2592000), 'month');
    return rtf.format(Math.round(diff / 31536000), 'year');
  }
  document.querySelectorAll('time.local-ts[data-ts]').forEach(el => {
    const d = new Date(el.dataset.ts);
    el.textContent = relativeTime(d);
    el.title = d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
  });
})();
</script>
