{{ extends 'global/Page.html' }}
{{ block title }}Chat{{ endblock }}

{{ block content }}


<style>
    /* Optional: Disable text selection via CSS */
    body {
        user-select: none; /* Prevents text highlighting */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
</style>

<script>
    // Disable right-click context menu
    document.addEventListener('contextmenu', function (e) {
        e.preventDefault();
        alert("Right-click is disabled on this page.");
    });

    // Disable copy
    document.addEventListener('copy', function (e) {
        e.preventDefault();
        alert("Copying is disabled on this page.");
    });

    // Disable paste
    document.addEventListener('paste', function (e) {
        e.preventDefault();
        alert("Pasting is disabled on this page.");
    });

    // Disable cut
    document.addEventListener('cut', function (e) {
        e.preventDefault();
        alert("Cutting is disabled on this page.");
    });
</script>
Managers usually learn more about <u><strong>all</strong></u> of the following topics before submitting a budget. The following questions are based on recent data from budgets prepared for similar products. 
            <br> 
             <br> Please type your question in this textbox based on the suggested questions. Please type one question at a time.
  <ul>
     <br> 
    <li><strong>Typical Cost Range</strong>
      <ul>
        <li>What’s the usual cost per unit?</li>
      </ul>
    </li>

    <li><strong>Reliability of Estimates</strong>
      <ul>
        <li>How have actual production costs compared with estimates?</li>
      </ul>
    </li>


    <li><strong>Market Volatility</strong>
      <ul>
        <li>How would market conditions affect these costs?</li>
      </ul>
    </li>

        <li><strong>Raw Material Suppliers</strong>
      <ul>
        <li> How reliable are the raw material suppliers?</li>
      </ul>
    </li>

        <li><strong>Labor Cost</strong>
      <ul>
        <li> How is the labor cost?</li>
      </ul>
    </li>
          <li><strong>Transportation Cost</strong>
      <ul>
        <li> How is the transportation cost?</li>
      </ul>
    </li>
  </ul>

 

<div class='otree-chat' id='ai-chat'>
  <div class='otree-chat__messages' id='chat-messages'></div>
  <input type="text" class="otree-chat__input" id='chat-input' size="40">
  <button type="button" class="otree-chat__btn-send" id='chat-send'>Send</button>
</div>

<style>
.otree-chat {
    border: 1px solid #ccc;
    padding: 5px;
    margin: 0 0 0 0;
}
.otree-chat__messages {
    height: 200px;
    overflow: auto;
    background: #eee;
    margin: 2px 0 5px 0;
}

.otree-chat__nickname {
    display: inline-block;
    color: #C07A36;
    width: 150px;
    font-weight: bold;
}
</style>

{{ next_button }}

{{ endblock }}

{{ block scripts }}
<script>
(function(){
  const messages = document.getElementById('chat-messages');
  const input = document.getElementById('chat-input');
  const sendBtn = document.getElementById('chat-send');

  function escapeHtml(s){
    return s.replace(/[&<>"']/g, c => (
      {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]
    ));
  }

  function appendMessage(nickname, text){
    const div = document.createElement('div');
    div.innerHTML = `<span class='otree-chat__nickname'>${escapeHtml(nickname)}</span>${escapeHtml(text)}`;
    messages.appendChild(div);
    messages.scrollTop = messages.scrollHeight;
  }

  function sendMessage(){
    const text = input.value.trim();
    if(!text) return;
    appendMessage("Manager (Me)", text);
    input.value = "";
    liveSend({type: "user_msg", text});
  }

  // receive AI messages from server
  function liveRecv(data){
    // Extract the message from oTree's nested structure

    if (data && data.type === "ai_msg" && data.text) {
        appendMessage("Consultant", data.text);
    }
  }

  sendBtn.addEventListener('click', sendMessage);
  input.addEventListener('keydown', e => { if(e.key === 'Enter') sendMessage(); });
  window.liveRecv = liveRecv;
})();
</script>
{{ endblock }}