@extends('layouts.admin')

@section('title')
    @lang('Deposits')
@endsection

@section('breadcrumb')
    <section class="section">
        <div class="section-header">
            <h1>@lang('View Giftcard Trades')</h1>

        </div>
    </section>
@endsection

@push('style')

    @include('admin.manage_giftcard_trade.trade_chats.layouts.headLinks', ['messengerColor'=>$messengerColor])

@endpush
@section('content')



<div class="messenger"  >
    {{-- ----------------------Users/Groups lists side---------------------- --}}


    {{-- ----------------------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="{{route('admin.all-trade')}}" class="mr-3"><i class="fas fa-arrow-left"></i></a>
                    <a href="#" class="user-name">Trade Conversation between Client: {{$tradeRequest->name}} and Staff: {{$tradeRequest->merchant_name}}
                        <br><span class="text-primary">Trade Info: {{$tradeRequest->trade_descriptions}}</span></a>
                </div>
                {{-- header buttons --}}
                <nav class="m-header-right">

                    <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" style=" height: 400px; /* Set a fixed height for the div */
  overflow: auto; " >
                @if(!empty($messages))
                @include('admin.manage_giftcard_trade.trade_chats.layouts.messageCard', ['messages'=>$messages, 'tradeRequest'=>$tradeRequest])
             @else
                <p class="message-hint center-el"><span>No Conversation for this Trade</span></p>
                @endif
            </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('admin.manage_giftcard_trade.trade_chats.layouts.info', ['tradeDetails'=>$tradeDetails,  'tradeRequest'=>$tradeRequest])->render() !!}



@include('admin.manage_giftcard_trade.trade_chats.layouts.modals')

@endsection
@push('script')


            <script src="{{ asset('assets/chat/js/chatify/code-a.js') }}"></script>


    @endpush