Kundesone/resources/views/partials/chat-messages.blade.php

102 lines
2.5 KiB
PHP

<style>
.attachment {
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
}
.chat-sender .single-message-chat{
display: flex;
justify-content: flex-end;
}
.chat-sender .single-message-chat{
text-align:right;
}
.chat_style p{
text-align:left !important;
}
.single-message-chat img {
width: 83% !important;
height: auto !important;
max-height:200px;
}
.left_box img {
width: 62% !important;
height: auto !important;
}
.left_box p{
color: rgba(117, 138, 137, 1);
font-family: "Satoshi", sans-serif;
font-size: 10px;
transform: translate(8px, 2px);
}
#cannedResponseModal ul {
list-style: none;
padding: 0;
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.canned-response {
width: 100%;
padding: 10px;
font-size: 16px;
border: none;
background-color: #748C62 !important;
color: white;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s, box-shadow 0.3s;
}
.single-message-chat {
width: 100%;
height: -webkit-fill-available !important;
}
</style>
@foreach($messages as $message)
<!-- Recepient Message -->
@if($message->user_id == 0)
<div class="chat-message chat-recepient d-flex">
<div class="chat-user-img-box align-self-end">
<img src="{{ asset('images/Avatar.png') }}" alt="User">
</div>
<div class="single-message-chat">
<div class="user-message">
{!!$message->message!!}
@if(!is_null($message->attachments) && count(json_decode($message->attachments)) > 0)
@foreach(json_decode($message->attachments) as $attachment)
<div class="attachment">
@php
$fileName = basename($attachment);
@endphp
<a download href="{{ url('' . $attachment) }}">{{$fileName}}</a>
</div>
@endforeach
@endif
</div>
<p class="message-time">{{ \Carbon\Carbon::parse($message->created_at)->format('h:i A') }}</p>
</div>
</div>
<!-- Sender Message -->
@elseif($message->user_id == 1)
<div class="chat-message chat-sender d-flex justify-content-end">
<div class="single-message-chat">
<div class="user-message bg-light-green-color color-light chat_style">{!!$message->message!!}</div>
<div class="chat-user-img-box align-self-end left_box">
<img src="{{ asset('images/Avatar.png') }}" alt="User">
<p class="message-time">{{ \Carbon\Carbon::parse($message->created_at)->format('h:i A') }}</p>
</div>
</div>
</div>
@endif
@endforeach