@if ($load_type == 'user')
    <div class="main-chat-header p-3">
        <div class="single-img-user"><img src="{{ asset('assets') }}/admin/images/users/{{ !empty($receiver_data->image) ? $receiver_data->image : 'default_avatar.png' }}" class="avatar avatar-md brround"></div>
        <div class="main-chat-msg-name">
            <h6 id="chat-user-name">{{ $receiver_data->name }}</h6>
            <small class="single_user_status single_status_{{ $receiver_data->id }}"></small>
        </div>
    </div>
    <div class="main-chat-body ps ps--active-y" id="chat_body">
        <div class="content-inner" id="chat-content-body">
            @if(count($chats) > 0)
                @foreach ($chats as $message)
                    @php
                        if($message['sender_id'] == $sender_data->id && $message['receiver_id'] == $receiver_data->id) {
                            $user_data = $sender_data;
                        } else if ($message['sender_id'] == $receiver_data->id && $message['receiver_id'] == $sender_data->id) {
                            $user_data = $receiver_data;
                        }

                        $message_css = '';
                        $text_message = $message['message'];
                        if($message['is_deleted'] == 1) {
                            $text_message = 'This message has been deleted.';
                            $message_css = 'change-message-css';
                        }

                        $files = [];
                        if(is_array(json_decode($text_message))) {
                            $files = json_decode($text_message, true);
                            $text_message = '';
                        }
                    @endphp
                    <div class="media {{ $message['sender_id'] == $sender_data->id ? 'flex-row-reverse' : '' }}">
                        <div class="main-img-user"><img src="{{ asset('assets') }}/admin/images/users/{{ !empty($user_data->image) ? $user_data->image : 'default_avatar.png' }}" class="avatar avatar-md brround"></div>
                        <div class="media-body">
                            <div class="d-flex {{ $message['sender_id'] == $sender_data->id ? 'flex-row-reverse' : '' }}">
                                <div class="main-msg-wrapper main-msg-wrapper-{{ $message['id'] }} {{ $message_css }}">
                                    @if(!empty($text_message))
                                            {{ $text_message }}
                                    @endif
                                    @if(!empty($files))
                                        @foreach ($files as $file)
                                            @if($file['file_type'] == 'image')
                                                <div class="position-relative mt-2">
                                                    <img class="chat_attached_files image_show_preview" src="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}" />
                                                </div>
                                            @elseif($file['file_type'] == 'video')
                                                <div class="position-relative mt-2">
                                                    <video class="chat_attached_files" controls>
                                                        <source src="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}">
                                                    </video>
                                                </div>
                                            @else
                                                <div class="chat_attached_all_type_file mt-2">
                                                    <div class="text-center mb-3 {{ $message['sender_id'] == $sender_data->id ? 'text-white' : '' }}">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 32 32"><path fill="currentColor" d="m25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7M18 4.4l5.6 5.6H18zM24 28H8V4h8v6c0 1.1.9 2 2 2h6z"/><path fill="currentColor" d="M10 22h12v2H10zm0-6h12v2H10z"/></svg>
                                                    </div>
                                                    <h6>{{ $file['original_name'] }}</h6>
                                                    <a href="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}" class="download-btn" download>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"/></svg>
                                                    </a>
                                                </div>
                                            @endif
                                        @endforeach
                                    @endif
                                </div>
                                @if($message['sender_id'] == $sender_data->id && $message['is_deleted'] != 1)
                                    <div class="dropdown message-info-dropdown">
                                        <a data-toggle="dropdown" class="dropdown-items" href="javascript:void(0)">
                                            <span class="feather feather-more-horizontal"></span>
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-right {{ $message['sender_id'] == $sender_data->id ? 'right-menu-dropdown' : '' }}">
                                            <li>
                                                <a class="delete_message" href="javascript:void(0)" onclick="delete_message({{ $message['id'] }})">Delete</a>
                                            </li>
                                        </ul>
                                    </div>
                                @endif
                            </div>
                            <div>
                                <span>{{ !empty($message['created_at']) ? (date('Y-m-d', strtotime($message['created_at'])) == date('Y-m-d') ? date('h:i A', strtotime($message['created_at'])) : date('d/m/Y h:i A', strtotime($message['created_at']))) : '' }}</span> <i class="icon ion-android-more-horizontal"></i>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
    <form action="" id="send_message" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="main-chat-footer">
            <nav class="nav mt-1">
                {{-- <a href="javascript:void(0)" class="nav-link" data-toggle="tooltip" title="" data-original-title="Emojia"><span class="fa fa-smile-o"></span></a> --}}
                <a href="javascript:void(0)" class="nav-link chat_send_attachment" data-toggle="tooltip" title="" data-original-title="Attach"><span class="feather feather-plus"><input class="form-control upload_file" name="attachment_file" type="file" multiple></span></a>
            </nav>
            <input type="hidden" name="chat_type" id="chat_type" value="1">
            <input class="form-control" placeholder="Type your message here..." type="text" id="chat_message" name="message" autofocus> <a class="main-msg-send" href="#"><span class="feather feather-send"></span></a>
        </div>
    </form>
@elseif($load_type == 'chat')
    @if(count($chats) > 0)
        @foreach ($chats as $message)
            @php
                if($message['sender_id'] == $sender_data->id && $message['receiver_id'] == $receiver_data->id) {
                    $user_data = $sender_data;
                } else if ($message['sender_id'] == $receiver_data->id && $message['receiver_id'] == $sender_data->id) {
                    $user_data = $receiver_data;
                }

                $message_css = '';
                $text_message = $message['message'];
                if($message['is_deleted'] == 1) {
                    $text_message = 'This message has been deleted.';
                    $message_css = 'change-message-css';
                }

                $files = [];
                if(is_array(json_decode($text_message))) {
                    $files = json_decode($text_message, true);
                    $text_message = '';
                }
            @endphp
            <div class="media {{ $message['sender_id'] == $sender_data->id ? 'flex-row-reverse' : '' }}">
                <div class="main-img-user"><img src="{{ asset('assets') }}/admin/images/users/{{ !empty($user_data->image) ? $user_data->image : 'default_avatar.png' }}" class="avatar avatar-md brround"></div>
                <div class="media-body">
                    <div class="d-flex {{ $message['sender_id'] == $sender_data->id ? 'flex-row-reverse' : '' }}">
                        <div class="main-msg-wrapper main-msg-wrapper-{{ $message['id'] }} {{ $message_css }}">
                            @if(!empty($text_message))
                                    {{ $text_message }}
                            @endif
                            @if(!empty($files))
                                @foreach ($files as $file)
                                    @if($file['file_type'] == 'image')
                                        <div class="position-relative mt-2">
                                            <img class="chat_attached_files image_show_preview" src="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}" />
                                        </div>
                                    @elseif($file['file_type'] == 'video')
                                        <div class="position-relative mt-2">
                                            <video class="chat_attached_files" controls>
                                                <source src="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}">
                                            </video>
                                        </div>
                                    @else
                                        <div class="chat_attached_all_type_file">
                                            <div class="text-center mb-3 {{ $message['sender_id'] == $sender_data->id ? 'text-white' : '' }}">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 32 32"><path fill="currentColor" d="m25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7M18 4.4l5.6 5.6H18zM24 28H8V4h8v6c0 1.1.9 2 2 2h6z"/><path fill="currentColor" d="M10 22h12v2H10zm0-6h12v2H10z"/></svg>
                                            </div>
                                            <h6>{{ $file['original_name'] }}</h6>
                                            <a href="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}" class="download-btn" download>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"/></svg>
                                            </a>
                                        </div>
                                    @endif
                                @endforeach
                            @endif
                        </div>
                        @if($message['sender_id'] == $sender_data->id && $message['is_deleted'] != 1)
                            <div class="dropdown message-info-dropdown">
                                <a data-toggle="dropdown" class="dropdown-items" href="javascript:void(0)">
                                    <span class="feather feather-more-horizontal"></span>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right {{ $message['sender_id'] == $sender_data->id ? 'right-menu-dropdown' : '' }}">
                                    <li>
                                        <a class="delete_message" href="javascript:void(0)" onclick="delete_message({{ $message['id'] }})">Delete</a>
                                    </li>
                                </ul>
                            </div>
                        @endif
                    </div>
                    <div>
                        <span>{{ !empty($message['created_at']) ? (date('Y-m-d', strtotime($message['created_at'])) == date('Y-m-d') ? date('h:i A', strtotime($message['created_at'])) : date('d/m/Y h:i A', strtotime($message['created_at']))) : '' }}</span> <i class="icon ion-android-more-horizontal"></i>
                    </div>
                </div>
            </div>
        @endforeach
    @endif
@elseif($load_type == 'group')
    <div class="main-chat-header p-3">
        <div class="single-group-img-user"><img src="{{ asset('assets') }}/admin/images/users/{{ !empty($group_data->image) ? $group_data->image : 'default_avatar.png' }}" class="avatar avatar-md brround group_image_{{ $group_data->id }}"></div>
        <div class="main-chat-msg-name">
            <h6 id="chat-user-name" class="group_name_{{ $group_data->id }}">{{ $group_data->name }}</h6>
            <small class="single_user_status"></small>
        </div>
        <a class="nav-link ml-auto" id="add-group-member" href="javascript:void(0)" data-group-id="{{ $group_data->id }}"><span class="feather feather-user-plus group-member-add-{{ $get_admin_member->id }} {{ $get_admin_member->is_admin == 1 ? '' : 'd-none' }}"></span></a>
        <li class="dropdown ml-1">
            <a data-toggle="dropdown" class="option-dots border" href="javascript:void(0)">
                <span class="feather feather-more-horizontal"></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li class="group-member-add-{{ $get_admin_member->id }} {{ $get_admin_member->is_admin == 1 ? '' : 'd-none' }}">
                    <a id="edit-group" data-group-id="{{ $group_data->id }}" href="javascript:void(0)">Edit Group</a>
                </li>
                <li>
                    <a id="group-info" data-group-id="{{ $group_data->id }}" href="javascript:void(0)">Group Info</a>
                </li>
            </ul>
        </li>
    </div>
    <div class="main-chat-body ps ps--active-y" id="chat_body">
        <div class="content-inner" id="chat-content-body" class="chat-content-body">
            @if(count($chats) > 0)
                @foreach ($chats as $message)
                    @php
                        $message_css = '';
                        $text_message = $message['message'];
                        if($message['is_deleted'] == 1) {
                            $text_message = 'This message has been deleted.';
                            $message_css = 'change-message-css';
                        }

                        $files = [];
                        if(is_array(json_decode($text_message))) {
                            $files = json_decode($text_message, true);
                            $text_message = '';
                        }
                    @endphp
                    <div class="media {{ $message['sender_id'] == $sender_id ? 'flex-row-reverse' : '' }}">
                        <div class="main-img-user"><img src="{{ asset('assets') }}/admin/images/users/{{ !empty($message['admin']['image']) ? $message['admin']['image'] : 'default_avatar.png' }}" class="avatar avatar-md brround"></div>
                        <div class="media-body">
                            @if($message['sender_id'] != $sender_id)
                                <div class="group_receiver_member_name">{{ $message['admin']['name'] }}</div>
                            @endif
                            <div class="d-flex {{ $message['sender_id'] == $sender_id ? 'flex-row-reverse' : '' }} {{ $message_css }}">
                                <div class="main-msg-wrapper main-msg-wrapper-{{ $message['id'] }}">
                                    @if(!empty($text_message))
                                            {{ $text_message }}
                                    @endif
                                    @if(!empty($files))
                                        @foreach ($files as $file)
                                            @if($file['file_type'] == 'image')
                                                <div class="position-relative mt-2">
                                                    <img class="chat_attached_files image_show_preview" src="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}" />
                                                </div>
                                            @elseif($file['file_type'] == 'video')
                                                <div class="position-relative mt-2">
                                                    <video class="chat_attached_files" controls>
                                                        <source src="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}">
                                                    </video>
                                                </div>
                                            @else
                                                <div class="chat_attached_all_type_file mt-2">
                                                    <div class="text-center mb-3 {{ $message['sender_id'] == $sender_id ? 'text-white' : '' }}">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 32 32"><path fill="currentColor" d="m25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7M18 4.4l5.6 5.6H18zM24 28H8V4h8v6c0 1.1.9 2 2 2h6z"/><path fill="currentColor" d="M10 22h12v2H10zm0-6h12v2H10z"/></svg>
                                                    </div>
                                                    <h6>{{ $file['original_name'] }}</h6>
                                                    <a href="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}" class="download-btn" download>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"/></svg>
                                                    </a>
                                                </div>
                                            @endif
                                        @endforeach
                                    @endif
                                </div>
                                @if($message['sender_id'] == $sender_id && $message['is_deleted'] != 1)
                                    <div class="dropdown message-info-dropdown">
                                        <a data-toggle="dropdown" class="dropdown-items" href="javascript:void(0)">
                                            <span class="feather feather-more-horizontal"></span>
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-right {{ $message['sender_id'] == $sender_id ? 'right-menu-dropdown' : '' }}">
                                            <li>
                                                <a class="delete_message" href="javascript:void(0)" onclick="delete_message({{ $message['id'] }})">Delete</a>
                                            </li>
                                        </ul>
                                    </div>
                                @endif
                            </div>
                            <div>
                                <span>{{ !empty($message['created_at']) ? (date('Y-m-d', strtotime($message['created_at'])) == date('Y-m-d') ? date('h:i A', strtotime($message['created_at'])) : date('d/m/Y h:i A', strtotime($message['created_at']))) : '' }}</span> <i class="icon ion-android-more-horizontal"></i>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
    <form action="" id="send_message" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="main-chat-footer">
            <nav class="nav mt-1">
                {{-- <a href="javascript:void(0)" class="nav-link" data-toggle="tooltip" title="" data-original-title="Emojia"><span class="fa fa-smile-o"></span></a> --}}
                <a href="javascript:void(0)" class="nav-link chat_send_attachment" data-toggle="tooltip" title="" data-original-title="Attach"><span class="feather feather-plus"><input class="form-control upload_file" ame="attachment_file" type="file" multiple></span></a>
            </nav>
            <input type="hidden" name="chat_type" id="chat_type" value="2">
            <input class="form-control" placeholder="Type your message here..." type="text" id="chat_message" name="message" autofocus> <a class="main-msg-send" href="#"><span class="feather feather-send"></span></a>
        </div>
    </form>
@elseif($load_type == 'group_chat')
    @if(count($chats) > 0)
        @foreach ($chats as $message)
            @php
                $message_css = '';
                $text_message = $message['message'];
                if($message['is_deleted'] == 1) {
                    $text_message = 'This message has been deleted.';
                    $message_css = 'change-message-css';
                }

                $files = [];
                if(is_array(json_decode($text_message))) {
                    $files = json_decode($text_message, true);
                    $text_message = '';
                }
            @endphp
            <div class="media {{ $message['sender_id'] == $sender_id ? 'flex-row-reverse' : '' }}">
                <div class="main-img-user"><img src="{{ asset('assets') }}/admin/images/users/{{ !empty($message['admin']['image']) ? $message['admin']['image'] : 'default_avatar.png' }}" class="avatar avatar-md brround"></div>
                <div class="media-body">
                    @if($message['sender_id'] != $sender_id)
                        <div class="group_receiver_member_name">{{ $message['admin']['name'] }}</div>
                    @endif
                    <div class="d-flex {{ $message['sender_id'] == $sender_id ? 'flex-row-reverse' : '' }}">
                        <div class="main-msg-wrapper main-msg-wrapper-{{ $message['id'] }} {{ $message_css }}">
                            @if(!empty($text_message))
                                    {{ $text_message }}
                            @endif
                            @if(!empty($files))
                                @foreach ($files as $file)
                                    @if($file['file_type'] == 'image')
                                        <div class="position-relative mt-2">
                                            <img class="chat_attached_files image_show_preview" src="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}" />
                                        </div>
                                    @elseif($file['file_type'] == 'video')
                                        <div class="position-relative mt-2">
                                            <video class="chat_attached_files" controls>
                                                <source src="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}">
                                            </video>
                                        </div>
                                    @else
                                        <div class="chat_attached_all_type_file mt-2">
                                            <div class="text-center mb-3 {{ $message['sender_id'] == $sender_id ? 'text-white' : '' }}">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 32 32"><path fill="currentColor" d="m25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7M18 4.4l5.6 5.6H18zM24 28H8V4h8v6c0 1.1.9 2 2 2h6z"/><path fill="currentColor" d="M10 22h12v2H10zm0-6h12v2H10z"/></svg>
                                            </div>
                                            <h6>{{ $file['original_name'] }}</h6>
                                            <a href="{{ asset('assets') }}/admin/images/chat_files/{{ $file['file_name'] }}" class="download-btn" download>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"/></svg>
                                            </a>
                                        </div>
                                    @endif
                                @endforeach
                            @endif
                        </div>
                        @if($message['sender_id'] == $sender_id && $message['is_deleted'] != 1)
                            <div class="dropdown message-info-dropdown">
                                <a data-toggle="dropdown" class="dropdown-items" href="javascript:void(0)">
                                    <span class="feather feather-more-horizontal"></span>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right {{ $message['sender_id'] == $sender_id ? 'right-menu-dropdown' : '' }}">
                                    <li>
                                        <a class="delete_message" href="javascript:void(0)" onclick="delete_message({{ $message['id'] }})">Delete</a>
                                    </li>
                                </ul>
                            </div>
                        @endif
                    </div>
                    <div>
                        <span>{{ !empty($message['created_at']) ? (date('Y-m-d', strtotime($message['created_at'])) == date('Y-m-d') ? date('h:i A', strtotime($message['created_at'])) : date('d/m/Y h:i A', strtotime($message['created_at']))) : '' }}</span> <i class="icon ion-android-more-horizontal"></i>
                    </div>
                </div>
            </div>
        @endforeach
    @endif
@endif

<script>
    $(document).ready(function() {
        $('#chat_body').scroll(function () {
            if ($(this).scrollTop() === 0 && !loading && available_chat == true && next_cursor != '' && next_cursor != null) {
                loading = true;
                $.ajax({
                    url: load_chat_url + "?cursor=" + next_cursor,
                    type: 'POST',
                    data: {
                        'load_type': chat_type == 'user' ? 'chat' : 'group_chat',
                        'sender_id': sender_id,
                        'receiver_id': receiver_id,
                        'group_id': group_id
                    },
                    success: function (response) {
                        if(response.success == true) {
                            next_cursor = response.next_cursor;

                            var old_height = $('#chat_body')[0].scrollHeight
                            $('#chat-content-body').prepend(response.html);

                            loading = false;
                            $('#chat_body').animate({
                                scrollTop: $('#chat_body')[0].scrollHeight - old_height
                            }, 0);
                        } else {
                            available_chat = false;
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('Error loading more chats:', error);
                    },
                });
            }
        })        

        $('.upload_file').change(function (e) {
            var files = $(this)[0].files;
            
            if (files.length > 0) {                
                if(files.length <= 5) {

                    var formData = new FormData();
                    for (var i = 0; i < files.length; i++) {
                        formData.append('files[]', files[i]);
                    }
                    var type = $('#chat_type').val();
                    formData.append('sender_id', sender_id);
                    formData.append('receiver_id', type == 1 ? receiver_id : 0);
                    formData.append('group_id', type == 2 ? group_id : 0);
                    formData.append('chat_type', type);
                    formData.append('message_type', 'file');

                    send_message_submit(formData)
                } else {
                    custom_message('error', "You can select only 5 files at a time.")
                }
            } 
        })
    })


</script>