@extends('front.layout.master')
@php
    $authUser = Auth::user();
    $sellerac = App\Store::where('user_id','=', $authUser->id)->first();
    $other = $conversation->sender_id == auth()->id() ? $conversation->reciever : $conversation->sender;
    $otherImg = $other && $other->image && file_exists(public_path() . '/images/user/' . $other->image)
        ? url('images/user/' . $other->image)
        : ($other ? Avatar::create($other->name)->toBase64() : '');
@endphp
@section('title','View Chat: ' . $conversation->conv_id . ' | ')
@section('stylesheet')
    <link rel="stylesheet" href="{{ url('/css/lightbox.min.css') }}">
@endsection

@section('body')

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <a href="{{ route('user.chat.screen') }}" class="hover:text-brand-600">{{ __('My Chats') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">#{{ $conversation->conv_id }}</span>
    </nav>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5 grid lg:grid-cols-[300px_1fr] gap-5 pb-12">
    <aside class="lg:sticky lg:top-28 lg:self-start">
        @include('user.sidebar')
    </aside>

    <div class="bg-white rounded-2xl shadow-card flex flex-col overflow-hidden h-[calc(100vh-200px)] min-h-[560px]">
        {{-- Chat header --}}
        <div class="flex items-center gap-3 p-4 border-b border-slate-100 bg-white">
            <a href="{{ route('user.chat.screen') }}" class="lg:hidden w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg>
            </a>
            @if($otherImg)<img src="{{ $otherImg }}" class="w-11 h-11 rounded-full object-cover">@endif
            <div class="flex-1 min-w-0">
                <h2 class="font-semibold text-[15px] truncate">{{ $other->name ?? __('User') }}</h2>
                <div class="text-[12px] text-emerald-500 indicators_status"></div>
                <div class="text-[11px] text-slate-400">#{{ $conversation->conv_id }}</div>
            </div>
        </div>

        {{-- Messages --}}
        <div id="chat-body" class="chat-body flex-1 overflow-y-auto bg-slate-50/50 p-4 space-y-3">
            @forelse($conversation->chat as $chat)
                @if(auth()->id() != $chat->user_id)
                    <div class="flex justify-start">
                        <div class="max-w-[75%]">
                            <div class="bg-white border border-slate-200 rounded-2xl rounded-bl-sm py-2.5 px-4 shadow-sm">
                                @if($chat->type == 'media')
                                    <a href="{{ url('images/conversations/'.$chat->media) }}" data-lightbox="image-1">
                                        <img src="{{ url('images/conversations/'.$chat->media) }}" alt="" class="rounded-lg max-w-[300px]">
                                    </a>
                                @else
                                    <p class="text-[14px] text-deep leading-relaxed">{{ $chat->message }}</p>
                                @endif
                            </div>
                            <div class="text-[11px] text-slate-400 mt-1 ml-1">{{ $chat->created_at->format('d M, h:i A') }}</div>
                        </div>
                    </div>
                @else
                    <div class="flex justify-end">
                        <div class="max-w-[75%]">
                            <div class="bg-brand-500 text-white rounded-2xl rounded-br-sm py-2.5 px-4 shadow-sm">
                                @if($chat->type == 'media')
                                    <a href="{{ url('images/conversations/'.$chat->media) }}" data-lightbox="image-1">
                                        <img src="{{ url('images/conversations/'.$chat->media) }}" alt="" class="rounded-lg max-w-[300px]">
                                    </a>
                                @else
                                    <p class="text-[14px] leading-relaxed">{{ $chat->message }}</p>
                                @endif
                            </div>
                            <div class="text-[11px] text-slate-400 mt-1 mr-1 text-right">{{ $chat->created_at->format('d M, h:i A') }}</div>
                        </div>
                    </div>
                @endif
            @empty
                <div class="no_conv text-center py-12 text-slate-400">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v9Z"/></svg>
                    <h3 class="font-semibold mt-3 text-deep">{{ __('Start a conversation with') }} {{ $other->name ?? '' }}</h3>
                </div>
            @endforelse

            <div class="chatscreen space-y-3"></div>
        </div>

        {{-- Input --}}
        <form id="chatform" class="chatform border-t border-slate-100 bg-white p-3 flex items-center gap-2" enctype="multipart/form-data" action="javascript:void(0)">
            <button type="button" id="button-addonlink" class="w-10 h-10 grid place-items-center rounded-full hover:bg-slate-100 text-slate-500" aria-label="Attach">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l8.84-8.84a4 4 0 0 1 5.66 5.66L9.42 17.4a2 2 0 0 1-2.83-2.83l8.49-8.49"/></svg>
            </button>
            <input type="file" accept="image/*" name="media" class="hidden file_choose">
            <input name="message" type="text" placeholder="{{ __('Type a message') }}" class="typemessage flex-1 h-11 px-4 rounded-full border border-slate-200 focus:border-brand-500 outline-none text-[14px]">
            <button id="button-addon2" type="button" class="sendMessage w-11 h-11 grid place-items-center rounded-full bg-brand-500 hover:bg-brand-600 text-white" aria-label="Send">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="m22 2-7 20-4-9-9-4 20-7Z"/></svg>
            </button>
        </form>
    </div>
</section>

@include('front.partials.change-password-modal')
@endsection

@section('script')
<script src="//js.pusher.com/7.0/pusher.min.js"></script>
<script src='{{ url('js/lightbox.min.js') }}'></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
"use strict";
setTimeout(function(){ scrolldown(); }, 800);
function scrolldown(){
    var d = document.getElementById('chat-body'); if (d) d.scrollTop = d.scrollHeight;
}
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

var rec = @json($conversation->sender_id == auth()->id() ? $conversation->receiver_id : $conversation->sender_id);
var conv_id = @json($conversation->id);
var id = @json(auth()->id());

function debounce(f, w){ var t; return function(){ var c=this,a=arguments; clearTimeout(t); t=setTimeout(function(){ f.apply(c,a); }, w); }; }

$('.typemessage').on('keyup', debounce(function(){
    $.ajax({ method:'POST', url:@json(route('typing.message',$conversation->id)), dataType:'json', data:{ typing:0, receiver_id:rec } });
}, 300));
$('.typemessage').on('keypress', function(){
    $.ajax({ method:'POST', url:@json(route('typing.message',$conversation->id)), dataType:'json', data:{ typing:1, receiver_id:rec } });
});

$('.sendMessage').on('click', function(){
    if ($('.file_choose').val()=='' && $('.typemessage').val()=='') { toastr.warning('Message or media is required'); return false; }
    message();
});
$('.chatform').on('submit', function(){ message(); });
$('#button-addonlink').on('click', function(){ $('.file_choose').click(); });
$('.file_choose').on('change', function(e){
    if (!confirm("Send file "+ e.target.files[0].name+'?')) { $('.file_choose').val(''); } else { message(); }
});

function message(){
    var fd = new FormData($('#chatform')[0]);
    fd.append('rec_id', rec);
    $.ajax({ method:'POST', url:@json(route('send.message',$conversation->id)), dataType:'json', cache:false, contentType:false, processData:false, data:fd,
        success:function(r){ if (r.status!=='success') toastr.error('Failed: '+r.message); }
    });
}

Pusher.logToConsole = false;
var pusher = new Pusher(@json(env('PUSHER_APP_KEY')), { cluster: @json(env('PUSHER_APP_CLUSTER')) });
var rec_msg_sound = new Audio(@json(url('admin_new/assets/sounds/note.mp3')));
var typing_sound = new Audio(@json(url('admin_new/assets/sounds/typingsound.mp3')));

pusher.subscribe('chat-message').bind('conversation_'+conv_id+'_user_'+id, function(data){
    var m = data.data.message, t = data.data.time;
    $('.no_conv').remove();
    if (data.data.type !== 'media') {
        $(".chatscreen").append('<div class="flex justify-start"><div class="max-w-[75%]"><div class="bg-white border border-slate-200 rounded-2xl rounded-bl-sm py-2.5 px-4 shadow-sm"><p class="text-[14px] text-deep">'+m+'</p></div><div class="text-[11px] text-slate-400 mt-1 ml-1">'+t+'</div></div></div>');
    } else {
        $(".chatscreen").append('<div class="flex justify-start"><div class="max-w-[75%]"><div class="bg-white border border-slate-200 rounded-2xl rounded-bl-sm py-2 px-2 shadow-sm"><a href="'+data.data.media+'" data-lightbox="image-1"><img src="'+data.data.media+'" class="rounded-lg max-w-[300px]"></a></div><div class="text-[11px] text-slate-400 mt-1 ml-1">'+t+'</div></div></div>');
    }
    scrolldown(); rec_msg_sound.play();
});

pusher.subscribe('chat-msg-own').bind('conversation_own_'+conv_id+'_user_'+id, function(data){
    var m = data.data.message, t = data.data.time;
    $('.no_conv').remove();
    if (data.data.type === 'text') {
        $(".chatscreen").append('<div class="flex justify-end"><div class="max-w-[75%]"><div class="bg-brand-500 text-white rounded-2xl rounded-br-sm py-2.5 px-4 shadow-sm"><p class="text-[14px]">'+m+'</p></div><div class="text-[11px] text-slate-400 mt-1 mr-1 text-right">'+t+'</div></div></div>');
    } else {
        $(".chatscreen").append('<div class="flex justify-end"><div class="max-w-[75%]"><div class="bg-brand-500 text-white rounded-2xl rounded-br-sm py-2 px-2 shadow-sm"><a href="'+data.data.media+'" data-lightbox="image-1"><img src="'+data.data.media+'" class="rounded-lg max-w-[300px]"></a></div><div class="text-[11px] text-slate-400 mt-1 mr-1 text-right">'+t+'</div></div></div>');
    }
    $('.typemessage').val(''); $('.file_choose').val('');
    scrolldown();
});

pusher.subscribe('typing-channel').bind('typing-event-conv-'+conv_id+'-user-'+id, function(data){
    if (data.typingstatus === true) {
        typing_sound.play();
        $(".indicators_status").html('<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" class="inline-block animate-pulse"><circle cx="6" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/></svg> Typing...');
    } else {
        typing_sound.pause(); typing_sound.currentTime = 0;
        $('.indicators_status').html('');
    }
});
</script>
@endsection