@extends('layouts.account')
  @section('content')
    <div class="container-fluid"> 
        @livewire('user-marquee')   
        <div class="row">
    <!-- chat area -->
    <div wire:ignore class="col-lg-12">
        <div class="card">
            <div  class="card-body" id="my_chat">
             <h2 class="text-center text-dark header-title mb-3" style="font-size: 20px;">
                    Welcome to our group chat
                </h2> <hr/>
                <div class="text-center text-success">Active Users:</div><div style="height: 20px; overflow: auto;" class="active_users text-center text-dark"></div>
                <ul class="conversation-list" data-simplebar style="height: 537px">
                
                <div class="all_chats">
                    @foreach ($messages as $chat)
                        @if ($chat->user_id == Auth::id())
                    <li class="clearfix odd messages_list">
                        <div class="chat-avatar">
                            <img src="{{$chat->profile}}" class="rounded" alt="dominic" />
                            <i>{{$chat->created_at->diffForHumans()}}</i>
                        </div>
                        <div class="conversation-text">
                            <div class="ctext-wrap">
                                <i>You</i>
                                <p>
                                   {{$chat->message}}
                                    <div class="row">
                                        @foreach (json_decode($chat->images) as $image)
                                            @if ($image->type == 'image')
                                                <div class="col-lg-6">
                                                    <img class="img-thumbnail img-fluid" src="{{$image->filename}}">
                                                </div>
                                               @else
                                                <div class="col-lg-12">
                                                    <div class="ratio ratio-4x3">
                                                        <iframe src="{{$image->filename}}?ecver=1"></iframe>
                                                    </div> 
                                                </div>
                                            @endif                                        
                                        @endforeach                                          
                                    </div>
                                </p>
                            </div>
                        </div>                        
                    </li>
                        @else
                            <li class="clearfix messages_list">
                                <div class="chat-avatar">
                                    <img src="{{$chat->profile}}" class="rounded" alt="Shreyu N" />
                                    <i>{{$chat->created_at->diffForHumans()}}</i>
                                </div>
                                <div class="conversation-text">
                                    <div class="ctext-wrap">
                                        <i>{{$chat->sender->name}}</i>
                                        <p>
                                           {{$chat->message}}
                                           <div class="row">
                                           @foreach (json_decode($chat->images) as $image)
                                                @if ($image->type == 'image')
                                                    <div class="col-lg-6">
                                                        <img class="img-thumbnail img-fluid" src="{{$image->filename}}">
                                                    </div>
                                                @else
                                                <div class="col-lg-12">
                                                    <div class="ratio ratio-4x3">
                                                        <iframe src="{{$image->filename}}?ecver=1"></iframe>
                                                    </div> 
                                                </div>
                                                @endif  
                                           @endforeach                                          
                                           </div>
                                        </p>
                                    </div>
                                </div>
                            </li>
                        @endif
                    @endforeach
                  </div>
                <span class="text-success typing_indicator" style="display: none;"> Typing...</span>
                </ul>

                <div class="row">
                    <div class="file_previews text-center"></div>
                    <span class="sending_indicator text-success float-right text-right col-lg-12" style="transform: translate(250px, 0px) !important; display: none;">Sending...</span>
                    <div id="text_box_container" class="message_form col-lg-12">                    
                        <form id="messenger" method="POST" action="{{url('/group-chat-message/send')}}" enctype= "multipart/form-data"> 
                        @csrf
                            <span class="dropup">
                                <span class="bi bi-paperclip" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="font-size: 24px; transform: translate(40px, -50px);"></span>
                                <span class="dropdown-menu">
                                    <label class="dropdown-item" for="image"><i class="bi bi-image" style="font-size: 24px; transform: translate(40px, -50px);"></i><span style="margin-left: 5px; font-weight: bolder;"> Images</span></label>
                                    <label class="dropdown-item" for="video"><i class="bi bi-camera-video" style="font-size: 24px; transform: translate(40px, -50px);"></i><span style="margin-left: 5px; font-weight: bolder;">Videos</span></label>
                                </span>
                            </span>

                           <textarea name="message" class="mdl-textfield__input form_inputs message_input" type="text" rows="5" id="text_content" user="{{Auth::user()->name}}" ></textarea>
                            <input id="image" style="display: none;" type="file" name="images[]" accept="image/*" multiple>
                            <input id="video" style="display: none;" type="file" name="videos[]" accept="video/*" multiple>
                            {{-- <input type="hidden" id="session_id" value="{{$session_id}}">                        --}}
                            <button id="submit_message" style="width: 40px; height: 40px; border-radius: 20px;" class="float-right btn btn-success">
                            <div class="bi bi-arrow-up-right-circle-fill" style="font-size: 24px; transform: translate(-7px, -5px);"></div>
                            </button>
                            <div class="info"></div>
                        </form>
                    </div>
                </div>
                <!-- end row -->
            </div> <!-- end card-body -->
        </div> <!-- end card -->
    </div>
    <!-- end chat area-->
</div> <!-- end row-->

    </div>
    <script src="{{ asset('js/group_chat.js') }}" defer></script>
  @endsection