Update admin message views

resources/views/admin/messages/home.blade.php

@@ -1,36 +1,94 @@
 @extends('admin.partial.template-full')
 
 @section('section')
-<div class="title">
-	<h3 class="font-weight-bold d-inline-block">Messages</h3>
 </div>
+<div class="header bg-primary pb-3 mt-n4">
+    <div class="container-fluid">
+        <div class="header-body">
+            <div class="row align-items-center py-4">
+                <div class="col-lg-6 col-7">
+                    <p class="display-1 text-white d-inline-block mb-0">Messages</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container mt-3">
+
+    <div class="row justify-content-center">
+        @if (session('status'))
+        <div class="col-12" id="flash">
+            <div class="alert alert-success">
+                {{ session('status') }}
+            </div>
+        </div>
+        @endif
+        <div class="col-12">
+            <ul class="nav nav-pills my-3">
+                <li class="nav-item">
+                    <a class="nav-link {{$sort=='all'?'active':''}}" href="?sort=all">All</a>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link {{$sort=='open'?'active':''}}" href="?sort=open">Open</a>
+                </li>
 
-<hr>
-<div class="table-responsive">
-  <table class="table">
-    <thead class="bg-light">
-      <tr>
-        <th scope="col">#</th>
-        <th scope="col">User</th>
-        <th scope="col">Message</th>
-        <th scope="col">Created</th>
-      </tr>
-    </thead>
-    <tbody>
-      @foreach($messages as $msg)
-      <tr>
-        <td>
-          <a href="/i/admin/messages/show/{{$msg->id}}" class="btn btn-sm btn-outline-primary">
-           	{{$msg->id}}
-          </a>
-        </td>
-        <td class="font-weight-bold"><a href="{{$msg->user->url()}}">{{$msg->user->username}}</a></td>
-        <td class="font-weight-bold">{{str_limit($msg->message, 40)}}</td>
-        <td class="font-weight-bold">{{$msg->created_at->diffForHumans()}}</td>
-      </tr>
-      @endforeach
-    </tbody>
-  </table>
+                <li class="nav-item">
+                    <a class="nav-link {{$sort=='closed'?'active':''}}" href="?sort=closed">Closed</a>
+                </li>
+            </ul>
+        </div>
+        <div class="col-12">
+            <div class="table-responsive">
+              <table class="table">
+                <thead class="bg-light">
+                  <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">User</th>
+                    <th scope="col">Message</th>
+                    <th scope="col">Created</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  @foreach($messages as $msg)
+                  <tr>
+                    <td>
+                      <a href="/i/admin/messages/show/{{$msg->id}}" class="btn btn-sm btn-outline-primary">
+                       	{{$msg->id}}
+                      </a>
+                    </td>
+                    <td class="font-weight-bold"><a href="{{$msg->user->url()}}">{{$msg->user->username}}</a></td>
+                    <td class="font-weight-bold">{{str_limit($msg->message, 40)}}</td>
+                    <td class="font-weight-bold">{{$msg->created_at->diffForHumans()}}</td>
+                  </tr>
+                  @endforeach
+                </tbody>
+              </table>
+            </div>
+            <hr />
+            {{$messages->links()}}
+        </div>
+    </div>
 </div>
-{{$messages->links()}}
-@endsection
+@endsection
+
+@push('scripts')
+<script type="text/javascript">
+    function checkAndRemoveElementOnLoad(selector, delay, action = 'hide') {
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                const element = document.querySelector(selector);
+                if (element) {
+                    if (action === 'hide') {
+                        element.style.display = 'none';
+                    } else if (action === 'remove') {
+                        element.remove();
+                    }
+                }
+            }, delay * 1000);
+        });
+    }
+
+    checkAndRemoveElementOnLoad('#flash', 5, 'remove');
+</script>
+@endpush

resources/views/admin/messages/show.blade.php

@@ -4,56 +4,155 @@
 <div class="title">
 	<div class="d-flex justify-content-between align-items-center">
 		<div class="font-weight-bold"># {{$message->id}}</div>
-		<div class="font-weight-bold h3">Message</div>
-		<div>
-			@if($message->read_at)
-			<span class="btn btn-outline-secondary btn-sm disabled" disabled>Read</span>
-			@else
-			<button type="button" class="btn btn-outline-primary btn-sm" id="markRead">Mark Read</button>
-			@endif
-		</div>
+		<div class="font-weight-bold h3">Contact Form Message</div>
+		<div></div>
 	</div>
 </div>
 
-<hr>
+<hr class="mt-0">
+
+<div class="row mb-3">
+	<div class="col-12 col-md-4">
+        <div class="card">
+            <div class="list-group list-group-flush">
+                @if($message->responded_at)
+                <div class="list-group-item">
+                    <div class="d-flex justify-content-between">
+                        <div class="small text-muted">Admin Response Sent</div>
+                        <div>
+                            <span class="font-weight-bold" title="{{$message->responded_at}}" data-toggle="tooltip">
+                                {{$message->responded_at->diffForHumans()}}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                @endif
+
+                <div class="list-group-item">
+                    <div class="d-flex justify-content-between">
+                        <div class="small text-muted">Status</div>
+                        @if($message->read_at == null)
+                        <div class="text-success font-weight-bold">Open</div>
+                        @else
+                        <div class="text-muted">Closed</div>
+                        @endif
+                    </div>
+                </div>
+                <div class="list-group-item">
+                    <div class="d-flex justify-content-between">
+                        <div class="small text-muted">Response Requested</div>
+                        @if($message->response_requested == 1)
+                        <div class="font-weight-bold">Yes</div>
+                        @else
+                        <div class="text-muted">No</div>
+                        @endif
+                    </div>
+                </div>
+
+                <div class="list-group-item">
+                    <div class="d-flex justify-content-between">
+                        <div class="small text-muted">Created</div>
+                        <div>
+                            <span class="font-weight-bold" title="{{$message->created_at}}" data-toggle="tooltip">
+                                {{$message->created_at->diffForHumans()}}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                @if($message->user && $message->user->last_active_at)
+                <div class="list-group-item">
+                    <div class="d-flex justify-content-between">
+                        <div class="small text-muted">User Last Active</div>
+                        <div>
+                            <span class="font-weight-bold" title="{{$message->user->last_active_at}}" data-toggle="tooltip">
+                                {{$message->user->last_active_at->diffForHumans()}}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                @endif
 
-<div class="row">
-	
-	<div class="col-12 col-md-3 text-md-right">
-		@if($message->response_requested)
-		<p class="text-dark font-weight-bold">Response Requested</p>
-		@endif
-		<p class="text-dark">Sent {{$message->created_at->diffForHumans()}}</p>
+                @if(!$message->read_at)
+                <div class="list-group-item">
+                    <button type="button" class="btn btn-outline-primary btn-block" id="markRead">Mark Read</button>
+                </div>
+                @endif
+            </div>
+        </div>
 	</div>
-	<div class="col-12 col-md-6">
-		
-		<div class="card shadow-none border">
-			<div class="card-header bg-white">
-				<div class="media">
-					<img src="{{$message->user->profile->avatarUrl()}}" class="mr-3 rounded-circle" width="40px" height="40px">
-					<div class="media-body">
-						<h5 class="my-0">&commat;{{$message->user->username}}</h5>
-						<span class="text-muted">{{$message->user->email}}</span>
+
+	<div class="col-12 col-md-8">
+		<div class="row">
+			<div class="col-12">
+				<div class="card shadow-none border">
+					<div class="card-header bg-white">
+						<div class="media">
+							<img
+                                src="{{$message->user->profile->avatarUrl()}}"
+                                class="mr-3 rounded-circle"
+                                width="40px"
+                                height="40px"
+                                onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
+							<div class="media-body">
+								<h5 class="my-0">&commat;{{$message->user->username}}</h5>
+								<span class="text-muted">{{$message->user->email}}</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="card-body">
-				<p class="mb-0">{{$message->message}}</p>
+					<div class="card-body">
+						<p class="text-uppercase text-muted small mb-2">Message Body</p>
+						<p class="mb-0">{{$message->message}}</p>
+
+                        <hr>
+                        <p class="text-uppercase text-muted small mb-2">Admin Reply:</p>
+
+                        @if($message->responded_at)
+                        <p class="mb-0">{{$message->response}}</p>
+                        @else
+                        <form method="post" id="mform">
+    						@csrf
+    						<div class="form-group">
+    							<textarea
+                                    class="form-control"
+                                    name="message"
+                                    id="message"
+                                    rows="4"
+                                    style="resize: none;"
+                                    maxlength="500"
+                                    placeholder="Reply to &commat;{{$message->user->username}} via email ..."></textarea>
+    							@if ($errors->any())
+    							@foreach ($errors->all() as $error)
+    							<p class="invalid-feedback mb-0" style="display:block;">
+    								<strong>{{ $error }}</strong>
+    							</p>
+    							@endforeach
+    							@endif
+    						</div>
+    						<div class="d-flex justify-content-between align-items-center">
+                                <div>
+                                    <button type="button" class="btn btn-primary font-weight-bold submit-btn">Send</button>
+    								<button type="button" class="btn btn-outline-primary font-weight-bold preview-btn">Preview</button>
+                                </div>
+
+                                <div>
+        							<span class="small text-muted font-weight-bold">
+        								<span id="messageCount">0</span>/500
+        							</span>
+                                </div>
+    						</div>
+    					</form>
+                        @endif
+    				</div>
+                </div>
 			</div>
 		</div>
 	</div>
-	<div class="col-12 col-md-3">
-		{{-- @if($message->responded_at == null)
-		<button class="btn btn-primary font-weight-bold btn-block">Send Response</button>
-		<hr>
-		@endif
-		<button class="btn btn-outline-danger font-weight-bold btn-block">Delete</button> --}}
-	</div>
 </div>
-
 @endsection
 
 @push('scripts')
+@if($message->responded_at == null)
 <script type="text/javascript">
 	$('#markRead').on('click', function(e) {
 		e.preventDefault();
@@ -61,8 +160,34 @@
 		axios.post('/i/admin/messages/mark-read', {
 			id: '{{$message->id}}',
 		}).then(res => {
-			window.location.href = window.location.href;
+			window.location.href = '/i/admin/messages/home';
 		})	
 	})
+
+    const submitBtn = document.querySelector('.submit-btn');
+    submitBtn.addEventListener('click', () => {
+        const form = document.getElementById('mform');
+        form.action = '/i/admin/messages/show/{{$message->id}}';
+        form.submit()
+    });
+
+    const previewBtn = document.querySelector('.preview-btn');
+    previewBtn.addEventListener('click', () => {
+        const form = document.getElementById('mform');
+        form.action = '/i/admin/messages/preview/{{$message->id}}';
+        form.submit()
+    });
+
+    function countChars() {
+        const input = document.getElementById('message');
+        const counter = document.getElementById('messageCount');
+
+        input.addEventListener('input', function() {
+            counter.textContent = input.value.length;
+        });
+    }
+
+    countChars();
 </script>
-@endpush
+@endif
+@endpush