Add modal window for confirmation change status of the ticket

templates/tickets/ticket_detail.html

@@ -58,7 +58,7 @@
       </div>
 
       {% if available_statuses %}
-        <form class="my-3" method="POST">
+        <form id="ticket-change-status-form" class="my-3" method="POST">
           {% csrf_token %}
           
           <label for="select-ticket-status" class="form-label">Available statuses</label>
@@ -68,8 +68,7 @@
                 <option {% if forloop.first %}selected{% endif %} value="{{ status.0 }}">{{ status.1 }}</option>
               {% endfor %}
             </select>
-            
-            <button class="btn btn-outline-secondary" type="submit">Change</button>
+            <button id="ticket-change-status-btn" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#ticket-change-status-modal">Change</button>
           </div>
         </form>
       {% else %}
@@ -144,6 +143,35 @@
             </div>
           </div>
         </div>
+
+        <!--ticket change status-->
+        <div class="modal fade" id="ticket-change-status-modal" tabindex="-1">
+          <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h1 class="modal-title fs-5">
+                  <i class="fa-solid fa-trash-can pe-1"></i>
+                  Change Status
+                </h1>
+              </div>
+              <div class="modal-body">
+                Are you sure you want to change the status of the ticket "{{ ticket.title }}"?
+                <br>
+                From "{{ ticket.get_status_display }}" to "<span id="selectedStatusOption">12312</span>"
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
+                  <i class="fa-solid fa-xmark pe-1"></i>
+                  Close
+                </button>
+                <button form="ticket-change-status-form" class="btn btn-outline-primary" type="submit">
+                  <i class="fa-solid fa-check pe-1"></i>
+                  Confirm
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       {% endif %}
     </div>
   </div>
@@ -237,4 +265,14 @@
       $(this).next('.custom-file-label').html(fileName);
     })
   </script>
+
+  <script>
+    $('#ticket-change-status-btn').on('click', (e) => {
+      e.preventDefault();
+
+      const selectValue = $('#select-ticket-status')[0].selectedOptions[0].textContent;
+
+      $('#selectedStatusOption')[0].textContent = selectValue;
+    })
+  </script>
 {% endblock extra_js %}