@extends('layouts.merchant')
@section('title')
    @lang('Trade Gift Card')
@endsection
@push('style')

    @include('merchant.giftcard.chat.layouts.headLinks', ['messengerColor'=>$messengerColor])
    <style >
       /* @media only screen and (max-width: 1000px) {
            .cht {
                margin-top: 65px;
            }
        }*/
    </style>
@endpush
@section('content')

    <div class="nk-content-body p-0">

<div class="messenger"  >
    {{-- ----------------------Users/Groups lists side---------------------- --}}
    <div class="messenger-listView {{ !!$id ? 'conversation-active' : '' }}">
        {{-- Header and search bar --}}
        <div class="m-header cht">
            <nav>
                <a href="#" onclick="history.go(-1)" class="btn btn-icon btn-trigger nk-chat-hide ms-n1 d-lg-none"><em class="icon ni ni-arrow-left"></em></a> <span class="messenger-headTitle">TRADINGS</span>
                {{-- header buttons --}}
                <nav class="m-header-right">
                    <a href="{{url('/merchant/')}}"><i class="fas fa-home"></i></a>
                    <a href="#" class="listView-x"><i class="fas fa-times"></i></a>
                </nav>
            </nav>
            {{-- Search input --}}
            <input type="text" class="messenger-search" placeholder="Search" />
            {{-- Tabs --}}
            {{-- <div class="messenger-listView-tabs">
                <a href="#" class="active-tab" data-view="users">
                    <span class="far fa-user"></span> Contacts</a>
            </div> --}}
        </div>
        {{-- tabs and lists --}}
        <div class="m-body contacts-container">
           {{-- Lists [Users/Group] --}}
           {{-- ---------------- [ User Tab ] ---------------- --}}
           <div class="show messenger-tab users-tab app-scroll" data-view="users">
               {{-- Favorites --}}
               <div class="favorites-section">
                <p class="messenger-title"><span>New Trading Requests</span></p>
                <div class="messenger-favorites app-scroll-hidden"></div>
               </div>
               {{-- Saved Messages --}}
               <p class="messenger-title" style="display:none"><span>Your Space</span></p>
               {!! view('merchant.giftcard.chat.layouts.listItem', ['get' => 'saved']) !!}
               {{-- Contact --}}
               <p class="messenger-title"><span>Active Trading</span></p>
               <div class="listOfContacts" style="width: 100%;height: calc(100% - 272px);position: relative;"></div>
           </div>
             {{-- ---------------- [ Search Tab ] ---------------- --}}
           <div class="messenger-tab search-tab app-scroll" data-view="search">
                {{-- items --}}
                <p class="messenger-title"><span>Search</span></p>
                <div class="search-records">
                    <p class="message-hint center-el"><span>Type to search..</span></p>
                </div>
             </div>
        </div>
    </div>

    {{-- ----------------------Messaging side---------------------- --}}
    <div class="messenger-messagingView cht">
        {{-- header title [conversation name] amd buttons --}}
        <div class="m-header m-header-messaging">
            <nav class="chatify-d-flex chatify-justify-content-between chatify-align-items-center">
                {{-- header back button, avatar and user name --}}
                <div class="chatify-d-flex chatify-justify-content-between chatify-align-items-center">
                    <a href="#" class="show-listView"><i class="fas fa-arrow-left"></i></a>
                    <div class="avatar av-s header-avatar" style="margin: 0px 10px; margin-top: -5px; margin-bottom: -5px;">
                    </div>
                    <a href="#" class="user-name">{{ config('chatify.name') }}</a>
                </div>
                {{-- header buttons --}}
                <nav class="m-header-right">
                    <a href="#" class="add-to-favorite"><i class="fas fa-star"></i></a>
                    <a href="{{url('/merchant/')}}"><i class="fas fa-home"></i></a>
                    <a href="#" class="show-infoSide"><i class="fas fa-info-circle"></i></a>
                </nav>
            </nav>
            {{-- Internet connection --}}
            <div class="internet-connection">
                <span class="ic-connected">Connected</span>
                <span class="ic-connecting">Connecting...</span>
                <span class="ic-noInternet">No internet access</span>
            </div>
        </div>

        {{-- Messaging area --}}
        <div class="m-body messages-container app-scroll">
            <div class="messages">
                <p class="message-hint center-el"><span>Please select a Trade to start messaging</span></p>
            </div>
            {{-- Typing indicator --}}
            <div class="typing-indicator">
                <div class="message-card typing">
                    <div class="message">
                        <span class="typing-dots">
                            <span class="dot dot-1"></span>
                            <span class="dot dot-2"></span>
                            <span class="dot dot-3"></span>
                        </span>
                    </div>
                </div>
            </div>

        </div>
        {{-- Send Message Form --}}
        @include('merchant.giftcard.chat.layouts.sendForm')
    </div>
    {{-- ---------------------- Info side ---------------------- --}}
    <div class="messenger-infoView app-scroll cht " style="/*
  height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
  padding: 20px;*/">
        {{-- nav actions --}}
        <nav>
            <p>Trading Details</p>
            <a href="#"><i class="fas fa-times"></i></a>
        </nav>

        {!! view('merchant.giftcard.chat.layouts.info', ['tradeDetails'=>$tradeDetails,  'tradeRequest'=>$tradeRequest])->render() !!}


</div>

@include('merchant.giftcard.chat.layouts.modals')

@endsection
@push('script')

            <script src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@3.0.3/dist/index.min.js"></script>
            <script >
                // Enable pusher logging - don't include this in production

                // Gloabl Chatify variables from PHP to JS

                window.chatify.allAllowedExtensions = chatify.allowedImages.concat(chatify.allowedFiles);
            </script>
            <script src="{{ asset('assets/chat/js/chatify/utils.js') }}"></script>
            <script src="{{ asset('assets/chat/js/chatify/code.js') }}"></script>
        @if(!empty($id))
            <script>
                $(document).ready(function () {
                    const element = $('table[data-contact="{{$tradeRequest->id}}"]');
                    if (element.find("tr[data-action]").attr("data-action") == "1") {
                        $(".messenger-listView").hide();
                        hideNav('hide');
                        // console.log("you hide");
                    }
                    const dataId = "{{$tradeRequest->id}}";
                    const dataCid = "{{Auth()->user()->getUserAccessKey($tradeRequest->request_by)}}";
                    //console.log("messager id: "+dataId);
                    setMessengerId(dataId);
                    setClientId(dataCid);
                    IDinfo(dataId);
                })
            </script>
    @endif

    @endpush