<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