From adcd02ff2b9e51d40e4f1a0464ca62f77b0b47ca Mon Sep 17 00:00:00 2001
From: Ryan Prather <ryan@rkprather.com>
Date: Sun, 5 Jan 2025 06:20:38 +0000
Subject: [PATCH] add modal to send message to supervisor and contact info for
 supervisor

---
 .../internal/staff/cases/my-cases.html.twig   | 53 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/templates/internal/staff/cases/my-cases.html.twig b/templates/internal/staff/cases/my-cases.html.twig
index b5e8caa..9b8b158 100644
--- a/templates/internal/staff/cases/my-cases.html.twig
+++ b/templates/internal/staff/cases/my-cases.html.twig
@@ -10,9 +10,11 @@
 				<div class='ms-3'>
 					<h3 class='mb-0 h4 font-weight-bolder'>My Cases</h3>
 					<p class='mb-4'>
-						{{ supervisor.name }}<br/>
+						{{ supervisor.name }}&nbsp;&nbsp;<a href='#' id='message-supervisor'>
+							<i class='material-symbols-rounded opacity-10'>message</i>
+						</a><br/>
 						<a href='mailto:{{ supervisor.email }}'>{{ supervisor.email }}</a><br/>
-						<a href='tel:'></a>
+						{% if supervisor.workPhone %}<a href='tel:{{ supervisor.workPhone }}'>{{ supervisor.getFormattedPhone() }}</a>{% endif %}
 					</p>
 				</div>
 				{% for c in cases %}
@@ -44,5 +46,52 @@
 				{% endfor %}
 			</div>
 		</div>
+
+		<div class='modal fade' id='message-modal' tabindex='-1' role='dialog' aria-labelledby='message-modal-title'>
+			<div class='modal-dialog modal-dialog-centered' role='document'>
+				<div class='modal-content'>
+					<div class="modal-header">
+						<h6 class="modal-title font-weight-normal" id="message-modal-label">Message Supervisor</h6>
+						<button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true">×</span>
+						</button>
+					</div>
+					<div class='modal-body'>
+						<form>
+							<div class='input-group input-group-outline my-3'>
+								<select id='my-cases' name='case'>
+									<option value=''>-- Case --</option>
+
+									{% for c in cases %}
+										<option value='{{ c.id }}'>{{ c.caseName }}</option>
+									{% endfor %}
+								</select>
+							</div>
+
+							<div class='input-group input-group-outline my-3'>
+                                <textarea name='message' id='message' style='width:100%;height:100px;'></textarea>
+                            </div>
+						</form>
+					</div>
+					<div class='modal-footer'>
+						<button type='button' id='close-modal' class='btn bg-gradient-secondary' data-bs-dismiss='modal'>Close</button>
+						<button type='button' id='send-supervisor-message' class='btn bg-gradient-primary'>Send Message</button>
+					</div>
+				</div>
+			</div>
+		</div>
 	</main>
 {% endblock %}
+
+{% block page_js %}
+	<script type='module'>
+		import $ from "{{ asset('vendor/jquery/jquery.index.js') }}";
+import {messageSupervisor, sendMessage} from '{{ asset("js/app/message.js") }}';
+window.$ = $;
+
+$(function () {
+document.getElementById('message-supervisor').addEventListener('click', messageSupervisor);
+document.getElementById('send-supervisor-message').addEventListener('click', sendMessage);
+});
+	</script>
+{% endblock %}