@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')
    <style>
        .bg-primary{
            background: var(--primary) !important;
            color:var(--white);
        }
    </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="container">
            <div class="card">
                <div class="card-header">
                    <div class="card-title row d-flex align-items-center">
                        <div class="col-lg-5 col-xl-3">Chat List</div>
                        <div class="col border_start d-flex justify-content-between align-items-center">
                            <div class=""><a @if ($receiver) target="_blank" href="{{ route('seller.shop',['id' => $receiver?->id,'name' => Str::slug($receiver?->name)]) }}" @endif>{{ $receiver?->name }}</a></div>
                            <div class="float-right">
                                <button class="btn btn-primary ms-auto btn-sm" id="chatRefreshBtn"><i class="fas fa-refresh"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-0">
                    <div class="col-12 col-lg-5 col-xl-3 border-end">
                        <div class="card-body p-0 scrollable" style="max-height: 39rem">
                            <div class="nav flex-column nav-pills" id="chatList" role="tablist">
                                @include('user.chat.list')
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-7 col-xl-9 d-flex flex-column">
                        <div class="card-body scrollable chat-scroll" style="height: 35rem">
                            <div class="chat">
                                <div class="chat-bubbles" id="messageList">
                                    @include('user.chat.messages')
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            @if ($receiver?->id)
                            <form action="{{ route('user.chatsend',$receiver?->id) }}" method="post" id="messageSendForm">
                                <div class="input-group">
                                    @csrf
                                    <input type="text" name="message" class="form-control rounded rounded-end-0 shadow-none"
                                        autocomplete="off" placeholder="Type message" required>
                                    <span class="input-group-text p-0 ">
                                        <button type="submit" class="btn btn-primary btn-sm rounded-start-0">Send</button>
                                    </span>
                                </div>
                            </form>
                            @else
                            <div class="text-center"><a href="{{ route('ads') }}">Start Chatting with seller</a></div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ======================= message end  ============================ -->
@endsection
@push('scripts')
    <script>
        function chatPageReady(){
            $('.nav-link.text-start.active').focus().blur();
            // $('.select-user-last-msg')[0].scrollIntoView();
            $('.chat-scroll').scrollTop($('.chat-scroll')[0].scrollHeight);
        }
        jQuery(document).ready(function($) {
            chatPageReady()
        });
        $(document).on('click', '#chatRefreshBtn', function(event) {
            event.preventDefault();
            /* Act on the event */
            loadChat()
        });

        $(document).on('submit', '#messageSendForm', function(event) {
            event.preventDefault();
            /* Act on the event */
            var submitBtn = $(this).find('button')
            var msgBox = $(this).find('input')


            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                headers : {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: new FormData($(this)[0]),
                processData: false,
                contentType: false,
            })
            .done(function(e) {
                if(e.success){
                    toastr.success(e.message)
                    loadChat();
                    submitBtn.text('Send').attr('disabled',false)
                    msgBox.val('')
                }else{
                    toastr.error(e.message)
                }
            })
            .fail(function() {
                toastr.error('Failed send message')
            });

        });
        function loadChat(){

            $.ajax({
                url: '{{ route("user.chatform",["load-chat" => "","id" => $receiver?->id]) }}',
            })
            .done(function(e) {
                try {
                    if(e.success){
                      $('#chatList').html(e.chatList)
                      $('#messageList').html(e.chatMessages)
                      chatPageReady();
                    }else{
                        toastr.error('Failed to load chat, refresh this page')
                    }
                } catch (error) {
                    toastr.error('Failed to load chat, refresh this page')
                }
            })
            .fail(function() {
                toastr.error('Failed to load chat, refresh this page')
            });
        }
    </script>
@endpush