@extends('frontend.layouts.app')
@section('title')
    {{ $title ?? 'Page header' }}
@endsection

{{-- @section('meta')
    <meta property="og:title" content="{{ $og_title }}" />
    <meta property="og:description" content="{{ $og_description }}" />
    <meta property="og:image" content="{{ asset($og_image) }}" />
@endsection --}}

@push('style')
{{-- <link rel="stylesheet" href="{{ asset('assets/adminlte/css/adminlte.min.css') }}"> --}}
<link rel="stylesheet" href="{{ asset('assets/css/chat.css') }}">
<style>
    .jq-ry-container {
        padding: 4px 0;

    }
    .avatar {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: bottom;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.direct-chat-success .right > .direct-chat-text {
    background-color: #2A3741;
    border-color: #2A3741;
}
.direct-chat-success .right > .direct-chat-text::before, .direct-chat-success .right>.direct-chat-text::after{
    border-left-color: #2A3741;
}
.chat-box-max-height{
    height: 500px !important;
    overflow-y:auto
}
.nav-link.text-start.active{
    background-color: #3b79c24d !important
}
</style>
@endpush

@section('content')
    <!-- ======================= breadcrumb start  ============================ -->
    @include('frontend.layouts.includes.breadcrumb',
    ['links'=>[[$title=>route('frontend.about')]]])
    <!-- ======================= breadcrumb end  ============================ -->

    <!-- ======================= message start  ============================ -->
    <div class="messge_section mb-5">
        <div class="content-wrapper">
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1 class="m-0">Messages</h1>
                        </div><!-- /.col -->
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item active">Message</li>
                                <li class="breadcrumb-item active">{{ $receiver?->name }}</li>
                            </ol>
                        </div><!-- /.col -->
                    </div>
                </div>
            </div>
    
            <!-- Main content -->
            <div class="content">
                <div class="container-fluid">
                    <div class="">
                        <div class="" style="">
                            <div class="card direct-chat direct-chat-success shadow-sm">
                                <div class="card-header">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="">
                                            <h4 class="card-title">Chat List</h4>
                                        </div>
                                        <div class="">
                                            <a href="{{ route('user.messageform') }}" class="btn btn-primary btn-sm">Back</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body p-4">
                                    <div class="row">
                                        <div class="mb-3 mb-md-0 col-12 col-lg-5 col-xl-3 border">
                                            {{-- <div class="card-header d-none d-md-block">
                                              <div class="input-icon">
    
                                                <input type="text" value="" class="form-control shadow-none" placeholder="Search…" aria-label="Search">
                                              </div>
                                            </div> --}}
                                            <div class="card-body p-0 scrollable" style="max-height: 35rem">
                                              <div class="nav flex-column nav-pills" role="tablist">
                                                @php
                                                    $chatIds = []
                                                @endphp
                                                @forelse ($allMessages as $msg)
                                                @php
                                                    $authUserAct = '';
                                                    if($msg->from_id == $sender->id){
                                                        // auth user sender
                                                        $authUserAct = 'sender';
                                                        $target = $msg->to_id;
                                                        $name = $msg->receiver?->name;
                                                        $image = $msg->receiver?->image;
                                                    }else{
                                                        // receiver
                                                        $authUserAct = 'receiver';
                                                        $target = $msg->from_id;
                                                        $name = $msg->sender?->name;
                                                        $image = $msg->sender?->image;
                                                    }
    
                                                    if(in_array($target,$chatIds)){
                                                        continue;
                                                    }else{
                                                        $chatIds[] = $target;
                                                    }
    
                                                @endphp
    
                                                <a href="{{ route('user.messageform',$target) }}" class="nav-link text-start mw-100 p-3 border {{ $target==$receiver->id ? 'active' : '' }} {{ $loop->first ? 'mt-2' : '' }}" id="chat-1-tab" data-bs-toggle="pill" role="tab" aria-selected="false" tabindex="-1">
                                                  <div class="row align-items-center flex-fill">
                                                    <div class="col-2"><span class="avatar">
                                                        <img width="100%" src="{{ getPhoto($image) }}" alt="{{ ($name) }}">
                                                    </span>
                                                    </div>
                                                    <div class="col-10 text-body">
                                                      <div style="font-size: 16px;">{{ ($name) }}</div>
                                                      <div class="text-secondary text-truncate {{ ($authUserAct == 'receiver' && !$msg->read) ? 'font-weight-bold text-dark' : '' }} " style="font-size: 12px;">{!! nl2br(Str::of($msg->body)->limit(36)) !!}</div>
                                                    </div>
                                                  </div>
                                                </a>
                                                @empty
                                                <div class="text-center mt-5 font-weight-bold ">
                                                    No Chat Available!
                                                </div>
                                                @endforelse
                                              </div>
                                            </div>
                                          </div>
    
                                          <div class="mt-4 mt-md-0 col-12 col-lg-7 col-xl-9 ">
                                            <h4 class="card-title font-weight-bold"><img src="{{ getPhoto($receiver?->image) }}" width="50" class="img-fluid img-thumbnail" alt=""> {{ $sender?->name == $receiver?->name ? '' : $receiver?->name }} </h4>
                                            <br><hr>
                                            <div class="direct-chat-messages chat-box-max-height">
                                                @forelse ($messages as $message)
    
    
                                                <div class="direct-chat-msg {{ $loop->last ? 'select-user-last-msg' : '' }} {{ $message->from_id==$receiver->id ? '' : 'right' }}">
                                                    <div class="direct-chat-infos clearfix">
                                                        <span class="direct-chat-name float-{{ $message->from_id==$receiver->id ? 'right' : 'left' }}">{{ $message->from_id==$receiver->id ?  $receiver->name: $sender->name }}</span>
                                                        <span class="direct-chat-timestamp float-{{ $message->from_id==$receiver->id ? 'left' : 'right' }}">{{ now()->parse($message->created_at)->format('d M h:m a') }}</span>
                                                    </div>
                                                    <img class="direct-chat-img" src="{{ getPhoto($message->from_id==$receiver->id ?  $receiver->image: $sender->image) }}"
                                                        alt="{{ $message->from_id==$receiver->id ?  $receiver->name: $sender->name }}">
                                                    <div class="direct-chat-text" title="{{ !$message->read ? 'delivered' : 'seen' }}">
                                                        {!! nl2br($message->body) !!}
                                                    </div>
                                                    @if ($message->from_id==$sender->id)
                                                    <div class=""><small style="font-size: x-small">{{ !$message->read ? 'delivered' : 'seen' }}</small></div>
                                                    @endif
                                                    @isset($message->attachments)
                                                            @foreach ($message->attachments as $attachment)
                                                            <a target="_blank" class="btn btn-light text-pink" href="{{ asset($attachment) }}">
                                                                @if (in_array(pathinfo($attachment,PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'tiff', 'tif', 'webp']))
                                                                <img class="img-fluid img-thumbnail" width="150" src="{{ asset($attachment) }}" alt="">
                                                                @else
                                                                {{ basename($attachment) }}
                                                                @endif
                                                            </a>
                                                        @endforeach
    
                                                    @endisset
                                                </div>
                                                @empty
                                                <div class="text-center mt-5">
                                                    Start communicating today!
                                                </div>
                                                @endforelse
                                            </div>
                                            @if ($receiver)
                                            {{-- start msg form --}}
                                            <form id="msg-form" action="{{ route('user.messagesend',$receiver->id) }}" method="post" enctype="multipart/form-data">
                                                @csrf
                                                <div class="input-group mb-2">
                                                    <input value="{{ old('message') }}" type="file" name="files[]" multiple class="form-control shadow-none">
                                                </div>
                                                <div class="input-group">
                                                    <textarea name="message" placeholder="Type Message ..." id="message" cols="30" rows="1" class="form-control shadow-none" required></textarea>
                                                    <span class="input-group-append">
                                                        <button type="submit" class="btn btn-success msg-send-btn">Send</button>
                                                    </span>
                                                </div>
                                            </form>
                                            @endif
    
                                        </div>
                                    </div>
    
    
                                </div>
                                <div class="card-footer">
    
                                </div>
                            </div>
                        </div>
                    </div>
    
                </div>
            </div>
    
    
        </div>
        <div class="container">
        </div>
    </div>
    <!-- ======================= message end  ============================ -->


@endsection
@push('scripts')
    <script>
        $(document).on('submit', '#msg-form', function(event) {
                $('.msg-send-btn').prop('disabled','true')
            });
            $('.nav-link.text-start.active').focus().blur();
            $('.select-user-last-msg')[0].scrollIntoView();
    </script>
@endpush