@foreach($chatData->sortBy('id') as $chat)
    <li class="{{ $chat->from_id == \Auth::user()->id ? 'replies' : 'sent'}}">
        @if($chat->from_id != \Auth::user()->id)
            <img src="{{ $chat->from->profile_photo_url }}" alt="" />
        @endif
        <p @if($chat->is_file && ( $chat->is_video || $chat->is_image )) class="media{{ $chat->from_id == \Auth::user()->id ? ' media__left' : '' }} " @endif >
            @if($chat->is_file)
            <a href="{{ $chat->file_url}}" target="_blank">
            @endif
                <svg width="57" height="24" viewBox="0 0 57 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M27.2572 1.06431C28.0287 0.512119 29.066 0.51212 29.8375 1.06431L55.4492 19.3963C57.2018 20.6507 56.3143 23.4153 54.159 23.4153H2.93563C0.780329 23.4153 -0.107127 20.6507 1.64549 19.3963L27.2572 1.06431Z" fill="{{ $chat->from_id == \Auth::user()->id ? $chat->is_file ? '#d8f1ea' : '#1ECB98' : ' #F4F4F4'}}"></path>
                </svg>
                @if($chat->is_file && $chat->is_video)
                    <video src="{{ $chat->file_url}}" controls width="100%"></video>
                @elseif($chat->is_file && $chat->is_image)
                    <img src="{{ $chat->file_url}}" alt="">
                @elseif($chat->is_file)
                        <i class="fas fa-download"></i>
                        <span class="name">{{$chat->message}}</span>

                @else
                    {{ $chat->message }}
                @endif
            @if($chat->is_file)
            </a>
            @endif
        </p>
        <label class="mt-2">
            @php
                if(isset($_COOKIE['timezone'])) {
                    $tz = ($_COOKIE['timezone'] == 'Asia/Calcutta') ? 'Asia/Kolkata' : $_COOKIE['timezone'];
                }
                else {
                    $tz = 'UTC';
                }
            @endphp
            <span id="spane_{{$chat->id}}">{{ \Carbon\Carbon::parse($chat->created_at)->setTimezone($tz)->format('Y-m-d h:i A')}}
        </label>
    </li>
@endforeach