@foreach($messages as $m)

<div id="msg-{{ $m->id }}" class="chat {{ $m->sender == 'ortu' ? 'chat-right' : 'chat-left' }}">

    <div class="bubble {{ $m->sender == 'ortu' ? 'bubble-ortu' : 'bubble-admin' }}">

        {{-- NAMA --}}
        <div class="sender">
            {{ $m->sender == 'ortu' ? 'Orang Tua' : 'Admin' }}
        </div>

        {{-- REPLY --}}
        @if($m->reply)
        <div class="reply-preview" onclick="scrollToMessage({{ $m->reply->id }})">
            <div class="reply-sender">
                ↩ {{ $m->reply->sender == 'admin' ? 'Admin' : 'Orang Tua' }}
            </div>
            <div class="reply-text">
                {{ \Illuminate\Support\Str::limit($m->reply->message, 40) }}
            </div>
        </div>
        @endif

        {{-- MESSAGE --}}
        <div class="message">
            {{ $m->message }}
        </div>

        {{-- ICON --}}
        <div class="reply-btn" onclick="setReply({{ $m->id }}, `{{ addslashes($m->message) }}`)">
            ↩ Balas
        </div>

    </div>

</div>

@endforeach