{% extends 'layouts/base.html' %}
{% load static %}

{% block content %}
    <style>
      .btn{
        margin-bottom:0
      }
      .tab-pane#chat-tab .card {
        border: 1px solid;
      }
      .card-message .dropdown-toggle::after {
        display: none;
      }
      .card-message-assistant{
        background-color: #e8e8e8;
      }
      .card-message-system{
        background-color: #bcf0bf;
      }
      
      #chat-form {
        position: sticky;
        bottom: 0;
        margin-top: auto; /* push the #chat-form element to the bottom of the #chat element */
        z-index: 1; /* set a z-index to ensure the #chat-form element remains on top */
      }
      .btn-group-vertical button {
        border-radius: 0;
      }
    </style>
    <div class="container-fluid">
      <div class="page-header min-height-200 border-radius-xl mt-4" style="background-image: url('{% static 'img/curved-images/curved0.jpg' %}'); background-position-y: 50%;">
        <span class="mask bg-gradient-primary opacity-6"></span>
      </div>
      <div class="card card-body blur shadow-blur mx-4 mt-n6 overflow-hidden">
        <div class="row gx-4">
          <div class="col-auto my-auto">
            <div class="h-100">
              <h5 class="mb-1">
                Daisy
              </h5>
              <p class="mb-0 font-weight-bold text-sm">
                LLM Platform
              </p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
            <div class="nav-wrapper position-relative end-0">
              <ul class="nav nav-pills nav-fill p-1 bg-transparent" role="tablist">
                <li class="nav-item" role="presentation">
                  <a class="nav-link mb-0 px-0 py-1 active " data-bs-toggle="tab" data-bs-target="#chat-tab" href="javascript:;" role="tab" aria-selected="true">
                    <svg class="text-dark" width="16px" height="16px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
                          <g transform="translate(1716.000000, 291.000000)">
                            <g transform="translate(603.000000, 0.000000)">
                              <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z">
                              </path>
                              <path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path>
                              <path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <span class="ms-1">Chat</span>
                  </a>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link mb-0 px-0 py-1 " data-bs-toggle="tab" data-bs-target="#modules-tab" href="javascript:;" role="tab" aria-selected="false">
                    <svg class="text-dark" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                      <title>document</title>
                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
                          <g transform="translate(1716.000000, 291.000000)">
                            <g transform="translate(154.000000, 300.000000)">
                              <path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
                              <path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z">
                              </path>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <span class="ms-1">Modules</span>
                  </a>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link mb-0 px-0 py-1 " data-bs-toggle="tab" data-bs-target="#settings-tab" href="javascript:;" role="tab" aria-selected="false">
                    <svg class="text-dark" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                      <title>settings</title>
                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
                          <g transform="translate(1716.000000, 291.000000)">
                            <g transform="translate(304.000000, 151.000000)">
                              <polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667">
                              </polygon>
                              <path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
                              <path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z">
                              </path>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <span class="ms-1">Settings</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-body p-5">
              <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="chat-tab" role="tabpanel" aria-labelledby="chat-tab">

                  <div id="messages-section">
                    {% include 'Dashboard_WebConfigDjango/templates/includes/chat-messages.html' %}
                  </div>
                  <div class="row bottom-2" id="chat-form">   
                    <div class="card border-light bg-light">
                      <div class="card-body p-5">
                        <form action="{% url 'dashboard' %}" method="post">
                          {% csrf_token %}
                          <div class="input-group">
                            <textarea name="message" class="form-control" aria-label="With textarea"></textarea>
                            <div class="btn-group-vertical">
                            <button type="submit" id="send-as-button" name="send" value="user" class="btn bg-gradient-primary">Send as User</button>
                            <button type="submit" id="append-as-button" name="append" value="user" class="btn btn-outline-secondary">Append as User</button>
                            </div>
                            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                              <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                              <li><a class="dropdown-item" href="#" data-value="user" onclick="updateButton(event)">User</a></li>
                              <li><a class="dropdown-item" href="#" data-value="assistant" onclick="updateButton(event)">Assistant</a></li>
                              <li><a class="dropdown-item" href="#" data-value="system" onclick="updateButton(event)">System</a></li>
                            </ul>
                          </div>
                        </form>                          
                      </div>
                    </div>
                  </div>


                </div>
                <div class="tab-pane fade" id="modules-tab" role="tabpanel" aria-labelledby="modules-tab">
                  <div id="modules-section">
                    {% include 'Dashboard_WebConfigDjango/templates/includes/modules.html' %}
                  </div>
                </div>
                <div class="tab-pane fade" id="settings-tab" role="tabpanel" aria-labelledby="settings-tab">Settings is a WIP</div>
              </div>
       

           
        
            </div>



          </div>
        </div>
      </div>
      <footer class="footer pt-3  ">
        <div class="container-fluid">
          <div class="row align-items-center justify-content-lg-between">
            <div class="col-lg-6 mb-lg-0 mb-4">
              <div class="copyright text-center text-sm text-muted text-lg-start">
                © <script>
                  document.write(new Date().getFullYear())
                </script>
                <i class="fa fa-heart"></i> by
                <a href="https://www.github.com/myrakrusemark" class="font-weight-bold" target="_blank">Myra Krusemark</a>
              </div>
            </div>
            <div class="col-lg-6">
              <ul class="nav nav-footer justify-content-center justify-content-lg-end">
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/presentation" class="nav-link text-muted" target="_blank">Daisy on GitHub</a>
                </li>
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/blog" class="nav-link text-muted" target="_blank">Blog</a>
                </li>
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/license" class="nav-link pe-0 text-muted" target="_blank">License</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </div>
  <script>
    
    function sendRequest(action, message, index, role) {
      const csrfmiddlewaretoken = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
    
      const xhr = new XMLHttpRequest();
      xhr.open('POST', `${window.location.pathname}`);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.onload = function() {
          if (xhr.status === 200) {
              const messagesSection = document.querySelector('#messages-section');
              messagesSection.innerHTML = xhr.responseText;
              
              const modulesSection = document.querySelector('#modules-section');
              modulesSection.innerHTML = xhr.responseText;
    
              // Re-attach event listeners to the new messages
              attachEventListeners();
          }
      };
      xhr.send(`csrfmiddlewaretoken=${encodeURIComponent(csrfmiddlewaretoken)}&action=${encodeURIComponent(action)}&message=${encodeURIComponent(message)}&index=${encodeURIComponent(index)}&role=${encodeURIComponent(role)}`);
    }
    
    //Update modules section every second
    setInterval(function() {
      //sendRequest("module_update", "module-update", null, null);
    }, 1000);

    // Update the submit button when an option is chosen from the dropdown
    const sendButton = document.querySelector('#send-as-button');
    const appendButton = document.querySelector('#append-as-button');

    function updateButton(event) {
      // Get the option value from the event target
      const option = event.target.dataset.value;

      // Update the send button text and value
      sendButton.textContent = `Send as ${option.charAt(0).toUpperCase() + option.slice(1)}`;
      sendButton.value = option;

      // Update the append button text and value
      appendButton.textContent = `Append as ${option.charAt(0).toUpperCase() + option.slice(1)}`;
      appendButton.value = option;
    }

    function attachEventListeners() {
      // Handle message delete action
      document.querySelectorAll('.delete-message').forEach((button) => {
        button.addEventListener('click', (event) => {
          const index = event.target.closest('.card-message').dataset.messageIndex;
          sendRequest('delete', null, index, null);
        });
      });

      // Handle message edit action
      document.querySelectorAll('.edit-message').forEach((button) => {
        button.addEventListener('click', (event) => {
          const index = event.target.closest('.card-message').dataset.messageIndex;
          const message = prompt('Edit message', event.target.closest('.card-message').querySelector('.card-text').textContent);
          sendRequest('edit', message, index, null);
        });
      });

      // Handle plugin toggle action
      document.querySelectorAll('.module-button').forEach((button) => {
        button.addEventListener('click', (event) => {
          const message = event.target.value;                 
          sendRequest('module_update', message, null, null);
        });
      });


    }

    // Call attachEventListeners initially to attach listeners to the existing messages
    attachEventListeners();

    // Handle chat submit
    const form = document.querySelector('#chat-form');

    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const message = event.target.elements.message.value;
      const action = event.submitter.name;
      const type = event.submitter.value;
      sendRequest(action, message, null, type);
    });

      
  </script>

  
  

{% endblock content %}