@extends('layouts.private')

@section('content')
    <div class="container" id="messages-view">
        <div class="row border mt-4 bg-white">
            <div class="col-sm-3 border-right p-0">
                <div class="row py-3 pr-2 pl-2 m-0 border-bottom">
                    <div class="col-sm-12">
                        <div class="dropdown show">
                            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Order
                            </a>
                            <div class="dropdown-menu selected-order" id="selected-order"
                                 aria-labelledby="dropdownMenuLink">
                                <a class="dropdown-item" id="created_at" href="#">Unread messages</a>
                                <a class="dropdown-item" id="read_at" href="#">Most recent conversations</a>
                                <a class="dropdown-item" id="alphabetical" href="#">Person Name</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-100 pr-3 pt-1 pb-1 pl-3" style="height: 72vh; overflow-y:scroll ">
                    @foreach($data as $key=> $value)
                        <div class="row border-bottom pt-3 pb-1 selected" id="room-list-{{$value->id}}"
                             data-room="{{$value->id}}"
                             data-last-message="{{$value->latestMessage}}" style="cursor: pointer">
                            <div></div>
                            <div class="col-sm-12">
                                <div class="row">
                                    @foreach($value->members as $key=> $person)
                                        @if($authPersonId !== $person->id)
                                            <div class="col-sm-3">
                                                @if($person->profil_photo != null)
                                                    <img src="{{$person->profile_photo}}" width="60" height="60"
                                                         class="rounded-circle mb-3 bg-primary"/>
                                                @else
                                                    <img
                                                        src="https://avatars.dicebear.com/v2/avataaars/{{ $person->user_id }}.svg?options[mood][]=happy"
                                                        width="60" height="60"
                                                        class="rounded-circle mb-3 bg-primary"/>
                                                @endif
                                            </div>
                                            <div class="col-sm-9">
                                                <strong>{{$person->first_name}} {{$person->last_name}}</strong>
                                                @if($loop->count > 2)
                                                    <span> + {{$loop->count -2}}</span>
                                                @endif
                                                @if($value->latestMessage)
                                                    <br/><span
                                                        class="small">{{$value->latestMessage->created_at}}: </span>
                                                    @foreach($value->latestMessage->unreadMembers as $message)
                                                        @if($message->read_at == null && $authPersonId != $value->latestMessage->person_id)
                                                            <span class="small"
                                                                  id="unread-message-{{$value->latestMessage->id}}"
                                                                  style="font-weight: 600; color: red">{{$value->latestMessage->message}}</span>
                                                            <em id="room-{{$value->latestMessage->room_id}}-typing"></em>
                                                            <div>
                                                                <em id="room-{{$value->latestMessage->room_id}}-typing"></em>
                                                            </div>
                                                        @else
                                                            <span id="unread-message-{{$value->latestMessage->id}}"
                                                                  class="small">{{$value->latestMessage->message}}</span>
                                                            <div>
                                                                <em id="room-{{$value->latestMessage->room_id}}-typing"></em>
                                                            </div>
                                                        @endif
                                                        @break
                                                    @endforeach
                                                    <input type="hidden" id="messageId"
                                                           value="{{$value->latestMessage->id}}">
                                                @else
                                                    <strong></strong><br/><span class="small"></span>
                                                    <span class="small" id="unread-message-0">Dont have message</span>
                                                @endif
                                                @if($value->latestMessage->attachments)
                                                                                                        <div class="d-flex">
                                                        <div id="last-message-{{$value->latestMessage->id}}-images">
                                                            @foreach($value->latestMessage->attachments as $attachment)
                                                                @if( $count > 3)
                                                                    @break
                                                                @endif
                                                                @if(Illuminate\Support\Str::substr($attachment->type, 0, 5) === 'image')
                                                                                                                                        @if( $count > 3)
                                                                        @break
                                                                    @endif
                                                                    <img src="/attachments/images/{{$attachment->path}}"
                                                                         alt="" srcset="" width="30" height="30"
                                                                         class="rounded-circle mb-3 bg-primary">
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                        <div
                                                            id="last-message-{{$value->latestMessage->id}}-videos">
                                                            @foreach($value->latestMessage->attachments as $attachment)
                                                                @if( $count > 3)
                                                                    @break
                                                                @endif
                                                                @if(Illuminate\Support\Str::substr($attachment->type, 0, 5) === 'video')
                                                                                                                                        @if( $count > 3)
                                                                        @break
                                                                    @endif
                                                                    <i class="fa fa-video-camera p-1"
                                                                       style="font-size: 25px; color: #0e90d2"
                                                                       aria-hidden="true"></i>
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                        <div id="last-message-{{$value->latestMessage->id}}-files">
                                                            @foreach($value->latestMessage->attachments as $attachment)
                                                                @if( $count > 3)
                                                                    @break
                                                                @endif
                                                                @if(Illuminate\Support\Str::substr($attachment->type, 0, 5) !== 'video' &&  Illuminate\Support\Str::substr($attachment->type, 0, 5) !== 'image')
                                                                                                                                        @if( $count > 3)
                                                                        @break
                                                                    @endif
                                                                    <i class="fa fa-file"
                                                                       style="font-size: 25px; color: #0e90d2"
                                                                       aria-hidden="true"></i>
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                        <div
                                                            id="last-message-{{$value->latestMessage->id}}-attachments-count">
                                                            @if($count > 3)
                                                                <i class="p-1">+{{$value->latestMessage->attachments->count()-3}}</i>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                            @break
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                            <input type="hidden" id="roomId" value="{{$value->id}}">
                            <input type="hidden" id="authPerson" value="{{$authPersonId}}">
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="col-sm-9">
                <div class="row py-3 border-bottom">
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-primary open-modal" data-toggle="modal"
                                data-target=".modal-new-chat">New
                            Chat
                        </button>
                        <div class="modal fade modal-new-chat" tabindex="-1" role="dialog"
                             aria-labelledby="mySmallModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-search-dialog">
                                <div class="modal-content" style="height: 400px; padding: 10px; text-align: center;">
                                    <div class="search-person">Search persons</div>
                                    <div class="persons-search-input-container">
                                        <input placeholder="Person..." class="persons-search-input">
                                        <span class="search-result-empty-message">No Search Results</span>
                                    </div>
                                    <div class="select-searched-user-container">
                                        <select class="select-searched-user" size="4"></select>
                                    </div>
                                    <form action="{{ url('my/room') }}" method="POST" enctype="multipart/form-data"
                                          id="assign-and-send-message-form">
                                        <div class="row mb-2">
                                            <div class="col-sm-12">
                                                <hr/>
                                                <h4><strong>Messages</strong></h4>
                                                <div class="form-group row block">
                                                    <div class="col-sm-12">
                                                        {!! Form::textarea('message', null, array('placeholder' => 'Send message to '.'person name', 'class' => 'form-control','rows' => 5)) !!}
                                                    </div>
                                                    <input type="hidden" name="person_ids[]" class="suggested-person"
                                                           value="">
                                                    <div class="col-sm-12 mt-1">
                                                        <button type="submit"
                                                                class="btn btn-primary btn-block submit-my-form">Send
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="success">"Success"</div>
                                        <div class="popup-error-message-send"></div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-primary open-modal" data-toggle="modal"
                                data-target=".modal-add-people">+ Add People
                        </button>
                        <div class="modal fade modal-add-people" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-search-dialog">
                                <div class="modal-content" style="height: 230px; padding: 10px; text-align: center;">
                                    <div class="search-person">Search persons</div>
                                    <div class="persons-search-input-container">
                                        <input placeholder="Person..." class="persons-search-input search-people">
                                        <span class="search-result-empty-message">No Search Results</span>
                                    </div>
                                    <div class="select-searched-user-container">
                                        <select class="select-searched-user select-searched-room-persons"
                                                size="4"></select>
                                    </div>
                                    <form action="{{ url('my/room/member') }}" method="POST" class="mb-0"
                                          enctype="multipart/form-data" id="addPeople">
                                        <div class="row mb-2">
                                            <div class="col-sm-12">
                                                <div class="form-group row mt-4 mb-0 block">
                                                    <input type="hidden" name="person_id" class="suggested-person"
                                                           value="">
                                                    <input type="hidden" name="person_id" class="existing-room"
                                                           value="">
                                                    <div class="col-sm-12">
                                                        <button type="submit"
                                                                class="btn btn-primary btn-block submit-my-form">Add
                                                            People
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="success">"Success"</div>
                                        <div class="popup-error-message-send"></div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row  pb-4 position-relative messages-container">
                    <div class="col-sm-8 pr-0">
                        <div id="messages" class="messages">
                            @foreach($data as $key=> $value)
                                <div id="room-{{$value->id}}" data-room="{{$value->id}}"></div>
                            @endforeach
                        </div>
                        <div class="row py-3 border-top position-relative w-100">
                            <div class="w-100 d-flex ">
                                <i class="fa upload-image fa-upload"></i>
                                <div>
                                    <input type="file" id="filesImage" class="upload-image-input"
                                           name="files[]" multiple/>
                                </div>
                                <div id="image_preview" class="uploaded-image-container"></div>
                            </div>
                            <div class="progress-background-mode"></div>
                            <div class="progress">
                                <div id="dynamic" class="progress-bar progress-bar-success progress-bar-striped active"
                                     role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                                     style="width: 0%">
                                    <span id="current-progress"></span>
                                </div>
                            </div>
                            <form action="/my/message/create" id="sendMessageForm" class="w-100 mt-4">
                                <div class="col-sm-12">
                                    <div class="row">
                                        <div class="col-sm-10">
                                            <textarea class="form-control" style="height:100px;  resize: none;"
                                                      name="message"
                                                      id="message"
                                                      required
                                                      placeholder="Enter your message"></textarea>
                                        </div>
                                        <div class="col-sm-2 h-100 p-0 m-0">
                                            <button type="button" class="btn btn-primary btn-lg" id="send"
                                                    style="height: 100px">Send
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex pl-3">
                                    <em id="user-is-typing"></em>
                                    <div class="error-message-send" id="error-message">Message field required</div>
                                </div>
                            </form>

                        </div>
                    </div>
                    <div class="col-sm-4 pr-0 border-left bg-white">
                        <div class="row py-3 w-100 border-bottom">
                            <div class="col-sm-12">
                                <h4 class="p-0 m-0"><strong>Members</strong></h4>
                            </div>
                        </div>
                        <div class="room-members-container">
                            <div class="row" id="room-members"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="position-absolute resize-image-background"></div>
    <div class="position-absolute resize-image-container">
        <i class="fa fa-times close-resize close c-pointer p-2"></i>
        <div class="w-100 p-5">
            <img class="img-fluid  resized-image" src="">
        </div>
        <i class="fa download-image close c-pointer fa-download"></i>
    </div>
@endsection