@extends('user.layouts.header')
@section('styles') 
 
@endsection
@section('content')

@php
    
    $sender_id = Auth::user()->id;
        
    if($sender_id == $investor_id){
        $receiver_id = $inventor_id;
    }else{
         $receiver_id = $investor_id;
    }
        
@endphp

 <main class="admin-dashbaord-content">
        <div class="my-4">
            <div class="chat-wrap"  data-id="{{ $chatid }}" id="chat-id">
                <div class="chat-header d-flex justify-content-between align-items-center">
                    <div class="admin-data-table">
                        @foreach($allusers as $alluser)
                        @if($receiver_id == $alluser->id)
                        <a href="" class="d-flex justify-content-center align-items-center">
                            <span class="position-relative chat-person-profile">
                                
                                @if(!empty($alluser->profile_image))
                                 <img src="{{url('').'/'.$alluser->profile_image }}" alt="" class="table-avatar">
                                @else
                                 <img src="{{ URL::asset('assets/medias/images.png') }}" alt="" class="table-avatar">
                                @endif
                               
                            </span>
                            <span class="ms-3">@if(!empty($alluser->name)){{ $alluser->name}}@else {{ $alluser->email}} @endif @if(!empty($alluser->last_name)){{ $alluser->last_name}}@endif</span>
                        </a>
                        @else
                        @endif
                        @endforeach
                    </div>
                    <ul class="chat-icon-list mb-0 d-flex align-items-center">
                        <li class="chat-icon-li">
                            <a href="" class="chat-icon-link"><i class="fas fa-search"></i></a>
                        </li>
                        <li class="chat-icon-li">
                            <a href="" class="chat-icon-link"><i class="fas fa-user"></i></a>
                        </li>
                        <li class="chat-icon-li">
                            <a href="" class="chat-icon-link"><i class="fas fa-video"></i></a>
                        </li>
                        <li class="chat-icon-li">
                            <div class="dropdown">
                                <a href="" class="chat-icon-link dropdown-toggle" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></a>
                                <ul class="dropdown-menu chat-drop-menu py-0" aria-labelledby="dropdownMenuButton1">
                                    <li><a class="dropdown-item" href="#">Delete</a></li>
                                    <li><a class="dropdown-item" href="#">Mute</a></li>
                                    <li><a class="dropdown-item text-danger border-0" href="#">Block</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div id="messages"  class="chat-content px-2 px-lg-5 py-4 mt-4">
                    <!--<div class="message-received position-relative mb-3">-->
                    <!--    <ul>-->
                    <!--        <li class="position-relative">-->
                    <!--            <a href="#" class="msg-drop-menu"><i class="fas fa-angle-down chat-down-angle-received"></i></a>-->
                    <!--            <ul class="nav-ul sub-menu">-->
                    <!--                <li>-->
                    <!--                    <a href="#" class="dropdown-item text-start d-block">Delete</a>-->
                    <!--                </li>-->
                    <!--            </ul>-->
                    <!--        </li>-->
                    <!--    </ul>-->
                    <!--    <div class="message-content position-relative">-->
                    <!--        <span>Thank you for offering, Patrick. However, I will be worried and I will not be able </span>-->
                    <!--    </div>-->
                    <!--    <div class="message-options d-flex jusitfy-content-center align-items-center">-->
                    <!--        <div class="chat-avatar">-->
                    <!--            <img src="https://himanshi.dbtechserver.online/invention-funder/assets/medias/profile-img.jpg" alt="">-->
                    <!--        </div>-->
                    <!--        <span class="chat-time">9:12 AM</span>-->
                    <!--        <span class="chat-time"><i class="fas fa-check chat-visited"></i></span>-->
                    <!--    </div>-->
                    <!--</div>-->
                    <!--<div class="message-sent text-end mb-3 position-relative ms-auto">-->
                    <!--    <ul>-->
                    <!--        <li class="position-relative">-->
                    <!--            <a href="#" class="msg-drop-menu"><i class="fas fa-angle-down chat-down-angle-sent"></i></a>-->
                    <!--            <ul class="nav-ul sub-menu">-->
                    <!--                <li>-->
                    <!--                    <a href="#" class="dropdown-item text-start d-block">Delete</a>-->
                    <!--                </li>-->
                    <!--            </ul>-->
                    <!--        </li>-->
                    <!--    </ul>-->
                    <!--    <div class="message-content message-send-content">-->
                    <!--        <span>Thank you for offering, Patrick. However, I will be worried and I will not be able I will be worried and I will not be able.</span>-->
                    <!--    </div>-->
                    <!--    <div class="message-options d-flex justify-content-end align-items-center">-->
                    <!--        <span class="chat-time"><i class="fas fa-check chat-visited"></i></span>-->
                    <!--        <span class="chat-time">9:12 AM</span>-->
                    <!--        <div class="chat-avatar">-->
                    <!--            <img src="https://himanshi.dbtechserver.online/invention-funder/assets/medias/profile.jpg" alt="">-->
                    <!--        </div>-->
                    <!--    </div>-->
                    <!--</div>-->
                    @if(!empty($chats))
                    @foreach($chats as $chat)
                    @if($chat->sender_id == Auth::user()->id)
                        <div class="message-sent text-end mb-3 ms-auto">
                            <div class="message-content message-send-content">
                                <span>{{ $chat->msg }}</span>
                            </div>
                            <div class="message-options d-flex justify-content-end align-items-center">
                                <span class="chat-time"><i class="fas fa-check chat-visit-icon"></i></span>
                                <span class="chat-time">9:12 AM</span>
                                <div class="chat-avatar">
                                    @foreach($allusers as $alluser)
                                    @if($sender_id == $alluser->id)
                                    
                                            @if(!empty($alluser->profile_image))
                                             <img src="{{url('').'/'.$alluser->profile_image }}" alt="" >
                                            @else
                                             <img src="{{ URL::asset('assets/medias/images.png') }}" alt="" >
                                            @endif
                                         
                                    @else
                                    @endif
                                    @endforeach
                        
                                    <!--<img src="https://himanshi.dbtechserver.online/invention-funder/assets/medias/profile.jpg" alt="">-->
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="message-received mb-3 position-relative">
                            <div class="message-content">
                                <span>{{ $chat->msg }}</span>
                            </div>
                            <div class="message-options d-flex jusitfy-content-center align-items-center">
                                <div class="chat-avatar">
                                    @foreach($allusers as $alluser)
                                    @if($receiver_id == $alluser->id)
                                    
                                            @if(!empty($alluser->profile_image))
                                             <img src="{{url('').'/'.$alluser->profile_image }}" alt="" >
                                            @else
                                             <img src="{{ URL::asset('assets/medias/images.png') }}" alt="" >
                                            @endif
                                         
                                    @else
                                    @endif
                                    @endforeach
                                </div>
                                <span class="chat-time">9:12 AM</span>
                                <span class="chat-time"><i class="fas fa-check chat-visit-icon"></i></span>
                            </div>
                        </div>
                    @endif
                    @endforeach
                    @endif
                    
                </div>
                
                <form action=""  enctype="multipart/form-data" id="form_chat" method="post">
                     {{ csrf_field() }}
                    <div class="chat-footer d-flex">
                           
                        <div class="form-group w-100 mb-0 mt-0">
                            <input type="hidden" value="{{ $chatid }}" name="chat_id">
                            <input type="hidden" value="{{ $inventor_id }}" name="inventor_id">
                            <input type="hidden" value="{{ $investor_id }}" name="investor_id">
                            <input placeholder="Enter Message..." name="chat_messsage" type="text" class="msg_text form-control chat-input">
                        </div>
                        <label id="files" class="btn chat-upload-btn btn-link text-decoration-none font-size-16 btn-lg waves-effect">
                            <i class="fas fa-paperclip"></i>
                            <input name="fileInput" size="60" type="file" class="form-control-file d-none">
                        </label>
                        <div>
                            <button type="submit" class="chat-send-btn"><i class="fas fa-arrow-right"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
       

@endsection
@section('scripts') 
    
        <script>
            $(document).ready(function() {

                $(".message-content").hover(
                    function () {
                        $(".chat-down-angle-received").addClass("icon-visible");
                    },
                    function () {
                        $(".chat-down-angle-received").removeClass("icon-visible");
                    }
                );
                $(".chat-down-angle-received").hover(
                    function () {
                        $(".chat-down-angle-received").addClass("icon-visible");
                    },
                    function () {
                        $(".chat-down-angle-received").removeClass("icon-visible");
                    }
                );
                $(".message-content").hover(
                    function () {
                        $(".chat-down-angle-sent").addClass("icon-visible");
                    },
                    function () {
                        $(".chat-down-angle-sent").removeClass("icon-visible");
                    }
                );
                $(".chat-down-angle-sent").hover(
                    function () {
                        $(".chat-down-angle-sent").addClass("icon-visible");
                    },
                    function () {
                        $(".chat-down-angle-sent").removeClass("icon-visible");
                    }
                );
            });
            
            $(".msg-drop-menu").click(function() {

                $(".sub-menu").toggleClass("show-dropdown");

            });
        </script>
        <script>
            $("#form_chat").on('submit',(function(e) {

                e.preventDefault();
                var msg_text = $('.msg_text').val();
        
                if(msg_text ==''){
                }else{
           
                    $.ajax({
                        type: "POST", 
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        
                        url: "{{route('save-chat')}}",
                        data:  new FormData(this),
                        contentType: false,
                        cache: false,
                        processData:false,
                        beforeSend : function()
                        {
                        
                        },
                        success: function(data)
                        {
                            $('#form_chat').trigger('reset');
                            $("#messages").html(data);
                            
                        
                        },
                    });
                }
            }));
            
            
        </script>
        
        <script> 
            setInterval(function() {
            // scrollToBottom();
            let chatId = $("#chat-id").data("id");
            $.ajax({
                url: "{{route('save-chat-load')}}",
                type: "POST", 
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                "chat_id" : chatId
                },
                cache: false,
                success: function(data){
                    $("#messages").html(data); 
                }
            });
            }, 2000); 
        </script> 

@endsection