{% extends 'base.html' %}{% block title %}Order Messages{% endblock %}{% block breadcrumb %}Order Messages{% endblock %}{% block content %}
<div class="page-head"><div><p class="small muted">PRIVATE ORDER CONVERSATION</p><h2>Messages · {{ order.order_number }}</h2><p>This chat is visible only to the customer and authorized Genez support staff. New messages refresh automatically while this page is open.</p></div><a href="{% url 'order_detail' order.pk %}" class="btn small outline">Back to order</a></div>
<div class="v10-shell"><section class="card card-pad"><div class="v27-chat-status"><span class="v27-live-dot"></span><span id="chat-connection" role="status">Chat is up to date</span>{% if thread %}<span class="v27-pill">{{ thread.get_status_display }}</span>{% endif %}</div>
<div class="v10-messages" id="v27-chat-log" role="log" aria-live="polite" aria-relevant="additions" aria-label="Order conversation" data-updates-url="{% url 'genez_conversation_updates' order.pk %}" data-last-id="{% if thread_messages %}{{ thread_messages|last.pk }}{% else %}0{% endif %}">
{% for msg in thread_messages %}<article class="v10-message {% if msg.sender_id == user.pk %}v10-mine{% endif %}" data-message-id="{{ msg.pk }}"><div class="v10-message-meta"><strong>{% if msg.sender_id == order.customer_id %}Customer{% else %}Genez Support{% endif %}{% if msg.sender_id == user.pk %} · You{% endif %}</strong><time>{{ msg.created_at|date:'d M Y H:i' }}</time></div><p>{{ msg.body|linebreaksbr }}</p></article>
{% empty %}<div class="empty-state" id="v27-empty-chat"><h3>Start the conversation</h3><p>Tell us what you need help with for this order.</p></div>{% endfor %}</div>
<form method="post" action="{% url 'genez_send_message' order.pk %}" class="v10-compose">{% csrf_token %}<label class="field">Your message{{ form.body }}</label><button type="submit" class="btn">Send message</button></form></section>
<aside class="card card-pad"><h3>Order details</h3><p><strong>{{ order.order_number }}</strong></p><p>Status: {{ order.get_status_display }}</p><p>Created: {{ order.created_at|date:'d M Y' }}</p><p class="muted small">For urgent safety issues, use the Help &amp; Support centre. Staff do not request your passwords or card PINs through messages.</p>
{% if is_support and thread %}<hr><h3>Team workflow</h3><p class="small muted">Internal labels and ownership help the team route this customer request.</p><form method="post" action="{% url 'genez_conversation_workflow' order.pk %}" class="v27-workflow">{% csrf_token %}
<label class="field">Status{{ workflow_form.status }}</label><label class="field">Priority{{ workflow_form.priority }}</label><label class="field">Topic tag{{ workflow_form.topic }}</label><label class="field">Assigned to{{ workflow_form.assigned_to }}</label><button type="submit" class="btn small">Save workflow</button></form>{% endif %}</aside></div>
<style>.v27-chat-status{display:flex;align-items:center;gap:.55rem;margin-bottom:.8rem;font-size:.85rem;color:var(--muted,#687386)}.v27-live-dot{width:.55rem;height:.55rem;border-radius:50%;background:#26a269;box-shadow:0 0 0 3px rgba(38,162,105,.14)}.v27-workflow{display:grid;gap:.7rem}.v27-workflow hr{border:0;border-top:1px solid rgba(100,110,130,.2)}@media(max-width:720px){.v10-shell{grid-template-columns:1fr!important}.v10-messages{max-height:55vh;overflow:auto}}</style>
<script>
(function(){
  const log=document.getElementById('v27-chat-log');
  if(!log)return;
  let last=Number(log.dataset.lastId||0),busy=false;
  const state=document.getElementById('chat-connection');
  async function refresh(){
    if(busy||document.hidden)return;
    busy=true;
    try{
      const response=await fetch(log.dataset.updatesUrl+'?after='+encodeURIComponent(last),{credentials:'same-origin',headers:{'Accept':'application/json'}});
      if(!response.ok)throw new Error('refresh failed');
      const data=await response.json();
      for(const item of data.messages){
        const article=document.createElement('article');
        article.className='v10-message'+(item.mine?' v10-mine':'');
        article.dataset.messageId=item.id;
        const meta=document.createElement('div');meta.className='v10-message-meta';
        const who=document.createElement('strong');who.textContent=item.sender+(item.mine?' · You':'');
        const time=document.createElement('time');time.textContent=item.created_at;
        meta.append(who,time);
        const body=document.createElement('p');body.textContent=item.body;
        article.append(meta,body);log.append(article);last=item.id;
      }
      const empty=document.getElementById('v27-empty-chat');if(empty&&data.messages.length)empty.remove();
      if(data.messages.length)log.scrollTop=log.scrollHeight;
      state.textContent='Chat is up to date';
    }catch(error){state.textContent='Reconnecting to chat…'}finally{busy=false}
  }
  refresh();window.setInterval(refresh,12000);
})();
</script>
{% endblock %}