@extends('dashboard.layout.layout')
@section('body','content-left-sidebar chat-application')
@section('body_col','content-left-sidebar')
@section('content_area')

<div class="sidebar-left">
    <div class="sidebar">
        <!-- User Chat profile area -->
        <div class="chat-profile-sidebar">
            <header class="chat-profile-header">
                <div class="header-profile-sidebar">
                    <div class="avatar">
                        <img src="{{ $client->avatar }}" alt="user_avatar" height="70" width="70">
                        <span class="avatar-status-busy avatar-status-lg" id="online_{{ $client->id }}"></span>
                    </div>
                    <h4 class="chat-user-name">{{ $client->fullname }}</h4>
                </div>
            </header>
            <div class="profile-sidebar-area">
                <div class="scroll-area">
                    <h6>{!! trans('dashboard.user.profile') !!}</h6>
                    <div class="about-user">
                        <fieldset class="mb-0">
                            <div class="form-group row">
                                <div class="col-md-12 position-relative has-icon-left">
                                    <input type="text" value="{{ $client->phone }}" class="form-control" readonly>
                                    <div class="form-control-position">
                                        <i class="feather icon-phone"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-12 position-relative has-icon-left">
                                    <input type="text" value="{{ $client->email }}" class="form-control" readonly>
                                    <div class="form-control-position">
                                        <i class="feather icon-mail"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-12 position-relative has-icon-left">
                                    <input type="text" value="{{ $client->country_name }}" class="form-control" readonly>
                                    <div class="form-control-position">
                                        <i class="feather icon-flag"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-12 position-relative has-icon-left">
                                    <input type="text" value="{{ $client->city_name }}" class="form-control" readonly>
                                    <div class="form-control-position">
                                        <i class="feather icon-flag"></i>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
        <!--/ User Chat profile area -->
        <!-- Chat Sidebar area -->
        <div class="sidebar-content card">
            <span class="sidebar-close-icon">
                <i class="feather icon-x"></i>
            </span>
            <div class="chat-fixed-search">
                <div class="d-flex align-items-center">
                    <div class="sidebar-profile-toggle position-relative d-inline-flex">
                        <div class="avatar">
                            <img src="{{ $client->avatar }}" alt="{{ $client->fullname }}" height="40" width="40">
                            <span class="avatar-status-busy" id="online_{{ $client->id }}"></span>
                        </div>
                        <div class="bullet-success bullet-sm position-absolute"></div>
                    </div>
                    <fieldset class="form-group position-relative has-icon-left mx-1 my-0 w-100">
                        <input type="text" class="form-control round" id="chat-search" placeholder="Search or start a new chat">
                        <div class="form-control-position">
                            <i class="feather icon-search"></i>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div id="users-list" class="chat-user-list list-group position-relative all_clients_div">
                <h3 class="primary p-1 mb-0">{!! trans('dashboard.chat.chats') !!}</h3>
                <ul class="chat-users-list-wrapper media-list all_clients_order">
                    @forelse ($chat_clients as $chat_client)
                    <li>
                        <a href="{!! route('dashboard.client.show',$client->id) !!}?chat_id={{ $chat_client->id }}" style="display:contents;">
                            <div class="pr-1">
                                <span class="avatar m-0 avatar-md"><img class="media-object rounded-circle" src="{{ $chat_client->sender_id == $client->id ? $chat_client->receiver->avatar : $chat_client->sender->avatar }}" height="42" width="42"
                                        alt="{{ $chat_client->sender_id == $client->id ? $chat_client->receiver->fullname : $chat_client->sender->fullname }}">
                                    <i></i>
                                </span>
                            </div>
                            <div class="user-chat-info">
                                <div class="contact-info">
                                    <h5 class="font-weight-bold mb-0">{{ $chat_client->sender_id == $client->id ? $chat_client->receiver->fullname : $chat_client->sender->fullname }}</h5>
                                    <p class="truncate">{{ str_limit($chat_client->last_message,20) }}</p>
                                </div>
                                <div class="contact-meta">
                                    <span class="float-right mb-25">{{ optional(optional($chat_client->messages->last())->created_at)->format("h:i A") }}</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    @empty
                    <li class="d-flex justify-content-center text-bold-700 font-medium-2" style="cursor: default;">{!! trans('dashboard.chat.no_messages') !!}</li>
                    @endforelse
                    <li class="ajax-load text-center" style="display:none">
                        <div class="spinner-border text-success" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--/ Chat Sidebar area -->

    </div>
</div>

<div class="content-right">
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <div class="chat-overlay"></div>
            <section class="chat-app-window">
                <div class="start-chat-area  d-none">
                    <span class="mb-1 start-chat-icon feather icon-message-square"></span>
                    <h4 class="py-50 px-1 sidebar-toggle start-chat-text">Start Conversation</h4>
                </div>
                <div class="active-chat">
                    <div class="chat_navbar">
                        <header class="chat_header d-flex justify-content-between align-items-center p-1">
                            <div class="vs-con-items d-flex align-items-center">
                                <div class="sidebar-toggle d-block d-lg-none mr-1"><i class="feather icon-menu font-large-1"></i></div>
                                <div class="avatar user-profile-toggle m-0 m-0 mr-1">
                                    <img src="{{ $chat->sender_id == $client->id ? $chat->receiver->avatar : $chat->sender->avatar }}" alt="" height="40" width="40" />
                                    <span class="avatar-status-busy" id="online_{{ $chat->sender_id == $client->id ? $chat->receiver_id : $chat->sender_id }}"></span>
                                </div>
                                <h6 class="mb-0">{{ $chat->sender_id == $client->id ? $chat->receiver->fullname : $chat->sender->fullname }}</h6>
                            </div>
                        </header>
                    </div>
                    <div class="user-chats chat_list">
                        <div class="chats">
                            <div class="ajax-message-load text-center" style="display:none">
                                <div class="spinner-border text-success" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </div>
                            @forelse (\Arr::sortRecursive($messages->items()) as $message)
                            @if ($message->created_at->format("Y-m-d") != $format )
                            @php
                            $format= $message->created_at->format("Y-m-d");
                            @endphp
                            <div class="divider">
                                <div class="divider-text">{{ $format }}</div>
                            </div>
                            @endif

                            @if ($message->sender_id != $client->id)

                            <div class="chat chat-left">

                                @if ($last_message_sender != $message->sender_id || $message->created_at->format("Y-m-d") != $format)
                                <div class="chat-avatar">
                                    <a class="avatar m-0" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="">
                                        <img src="{{ $message->sender->avatar }}" alt="avatar" height="40" width="40" />
                                    </a>
                                </div>
                                <div class="chat-body">
                                    @if ($message->message_type == 'image')
                                    <div class="chat-content-media">
                                        <a href="{{ $message->message }}" data-fancybox="gallery">
                                            <img src="{{ $message->message }}" class="img-thumbnail chat-image" alt="">
                                        </a>
                                    </div>
                                    @elseif ($message->message_type == 'sound')
                                    <div class="chat-content-media">
                                        <audio id="plyr-audio-player" class="audio-player" controls>
                                            <source src="{{ $message->message }}" type="audio/mp3" />
                                            <source src="{{ $message->message }}" type="audio/ogg" />
                                            <source src="{{ $message->message }}" type="audio/m4a" />
                                        </audio>
                                    </div>
                                   @elseif ($message->message_type == 'file')
                                    <div class="chat-content-media">
                                        <a href="{{ $message->message }}" download class="text-success">{{ str_after($message->message,'___file_') }}</a>
                                    </div>
                                    @else
                                    <div class="chat-content">
                                        <p>{{ $message->message }}</p>
                                    </div>
                                    @endif
                                </div>
                                @else
                                <div class="chat-body">
                                    @if ($message->message_type == 'image')
                                    <div class="chat-content-media">
                                        <a href="{{ $message->message }}" data-fancybox="gallery">
                                            <img src="{{ $message->message }}" class="img-thumbnail chat-image" alt="">
                                        </a>
                                    </div>
                                    @elseif ($message->message_type == 'sound')
                                    <div class="chat-content-media">
                                        <audio id="plyr-audio-player" class="audio-player" controls>
                                            <source src="{{ $message->message }}" type="audio/mp3" />
                                            <source src="{{ $message->message }}" type="audio/ogg" />
                                            <source src="{{ $message->message }}" type="audio/m4a" />
                                        </audio>
                                    </div>
                                   @elseif ($message->message_type == 'file')
                                    <div class="chat-content-media">
                                        <a href="{{ $message->message }}" download class="text-success">{{ str_after($message->message,'___file_') }}</a>
                                    </div>
                                    @else
                                    <div class="chat-content">
                                        <p>{{ $message->message }}</p>
                                    </div>
                                    @endif
                                </div>
                                @endif
                            </div>
                            @else
                            <div class="chat">
                                @if ($last_message_sender != $message->sender_id || $message->created_at->format("Y-m-d") != $format)
                                <div class="chat-avatar">
                                    <a class="avatar m-0" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="">
                                        <img src="{{ $message->sender->avatar }}" alt="avatar" height="40" width="40" />
                                    </a>
                                </div>
                                <div class="chat-body">
                                    @if ($message->message_type == 'image')
                                    <div class="chat-content-media">
                                        <a href="{{ $message->message }}" data-fancybox="gallery">
                                            <img src="{{ $message->message }}" class="img-thumbnail chat-image" alt="">
                                        </a>
                                    </div>
                                    @elseif ($message->message_type == 'sound')
                                    <div class="chat-content-media">
                                        <audio id="plyr-audio-player" class="audio-player" controls>
                                            <source src="{{ $message->message }}" type="audio/mp3" />
                                            <source src="{{ $message->message }}" type="audio/ogg" />
                                            <source src="{{ $message->message }}" type="audio/m4a" />
                                        </audio>
                                    </div>
                                    @elseif ($message->message_type == 'file')
                                    <div class="chat-content-media">
                                        <a href="{{ $message->message }}" download class="text-success">{{ str_after($message->message,'___file_') }}</a>
                                    </div>
                                    @else
                                    <div class="chat-content">
                                        <p>{{ $message->message }}</p>
                                    </div>
                                    @endif
                                </div>
                                @else
                                <div class="chat-body">
                                    @if ($message->message_type == 'image')
                                    <div class="chat-content-media">
                                        <a href="{{ $message->message }}" data-fancybox="gallery">
                                            <img src="{{ $message->message }}" class="img-thumbnail chat-image" alt="">
                                        </a>
                                    </div>
                                    @elseif ($message->message_type == 'sound')
                                    <div class="chat-content-media">
                                        <audio id="plyr-audio-player" class="audio-player" controls>
                                            <source src="{{ $message->message }}" type="audio/mp3" />
                                            <source src="{{ $message->message }}" type="audio/ogg" />
                                            <source src="{{ $message->message }}" type="audio/m4a" />
                                        </audio>
                                    </div>
                                    @elseif ($message->message_type == 'file')
                                    <div class="chat-content-media">
                                        <a href="{{ $message->message }}" download class="text-success">{{ str_after($message->message,'___file_') }}</a>
                                    </div>
                                    @else
                                    <div class="chat-content">
                                        <p>{{ $message->message }}</p>
                                    </div>
                                    @endif
                                </div>
                                @endif
                            </div>
                            @endif
                            @php
                            if ($last_message_sender != $message->sender_id) {
                            $last_message_sender = $message->sender_id;
                            }else {
                            $same_loop = true;
                            }
                            @endphp
                            @empty
                            <h3 class="d-flex justify-content-center no_message">{!! trans('dashboard.chat.no_messages') !!}</h3>
                            @endforelse
                            <div class="typing-part">
                                <div class="chat chat-left whisper chat_sender_right d-none">
                                    <div class="chat-avatar">
                                        <a class="avatar m-0" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="">
                                            <img src="{{ $client->avatar }}" alt="avatar" height="40" width="40">
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <img src="{{ asset('dashboardAssets') }}/global/images/icons/typing.gif">
                                        </div>
                                    </div>
                                </div>

                                <div class="chat whisper chat_sender_left d-none">
                                    <div class="chat-avatar">
                                        <a class="avatar m-0" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="">
                                            <img src="{{ $chat->receiver_id == $client->id ? $chat->sender->avatar : $chat->receiver->avatar }}" alt="avatar" height="40" width="40">
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <img src="{{ asset('dashboardAssets') }}/global/images/icons/typing.gif">
                                        </div>
                                    </div>
                                </div>
                            </div>



                        </div>
                    </div>
                    {{-- <div class="chat-app-form">
                            <form class="chat-app-input d-flex" onsubmit="enter_chat();" action="javascript:void(0);">
                                <input type="text" class="form-control message mr-1 ml-50" id="iconLeft4-1" placeholder="Type your message">
                                <button type="button" class="btn btn-primary send" onclick="enter_chat();"><i class="fa fa-paper-plane-o d-lg-none"></i> <span class="d-none d-lg-block">Send</span></button>
                            </form>
                        </div> --}}
                </div>
            </section>
            <!-- User Chat profile right area -->
            <div class="user-profile-sidebar">
                <header class="user-profile-header">
                    <span class="close-icon">
                        <i class="feather icon-x"></i>
                    </span>
                    <div class="header-profile-sidebar">
                        <div class="avatar">
                            <img src="{{ $chat->receiver_id == $client->id ? $chat->sender->avatar : $chat->receiver->avatar }}" alt="user_avatar" height="70" width="70">
                            <span class="avatar-status-busy avatar-status-lg" id="online_{{ $chat->receiver_id == $client->id ? $chat->sender_id : $chat->receiver_id }}"></span>
                        </div>
                        <h4 class="chat-user-name">{{ $chat->receiver_id == $client->id ? $chat->sender->fullname : $chat->receiver->fullname }}</h4>
                    </div>
                </header>
                <div class="user-profile-sidebar-area p-2">
                    <h6>{!! trans('dashboard.user.profile') !!}</h6>
                    <div class="about-user">
                        <fieldset class="mb-0">
                            <div class="form-group row">
                                <div class="col-md-12 position-relative has-icon-left">
                                    <input type="text" value="{{ $chat->receiver_id == $client->id ? $chat->sender->phone : $chat->receiver->phone }}" class="form-control" readonly>
                                    <div class="form-control-position">
                                        <i class="feather icon-phone"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-12 position-relative has-icon-left">
                                    <input type="text" value="{{ $chat->receiver_id == $client->id ? $chat->sender->email : $chat->receiver->email }}" class="form-control" readonly>
                                    <div class="form-control-position">
                                        <i class="feather icon-mail"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-12 position-relative has-icon-left">
                                    <input type="text" value="{{ $chat->receiver_id == $client->id ? $chat->sender->country_name : $chat->receiver->country_name }}" class="form-control" readonly>
                                    <div class="form-control-position">
                                        <i class="feather icon-flag"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-12 position-relative has-icon-left">
                                    <input type="text" value="{{ $chat->receiver_id == $client->id ? $chat->sender->city_name : $chat->receiver->city_name }}" class="form-control" readonly>
                                    <div class="form-control-position">
                                        <i class="feather icon-flag"></i>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
            <!--/ User Chat profile right area -->

        </div>
    </div>
</div>
@endsection
@section('vendor_styles')
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/vendors/css/extensions/plyr.css">
@endsection
@section('page_styles')
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/pages/app-chat.css">
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/plugins/extensions/media-plyr.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<style media="screen">
    .chat-image {
        max-height: 400px;
        max-width: 200px;
    }
</style>
@endsection
@section('vendor_scripts')

{{-- <script src="{{ asset('dashboardAssets') }}/vendors/js/media/plyr.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/media/plyr.polyfilled.js"></script> --}}
@endsection
@section('page_scripts')
<script src="{{ asset('dashboardAssets') }}/js/scripts/pages/app-chat.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
{{-- <script src="{{ asset('dashboardAssets') }}/js/scripts/extensions/media-plyr.min.js"></script> --}}
@include('dashboard.client.chat_scripts')
@endsection