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

@section('content')

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

        @include('Chatify::layouts.headLinks', ['id'=>'1'])
        <div class="messenger">
            {{-- ----------------------Users/Groups lists side---------------------- --}}
            <div class="messenger-listView {{ !!$id ? 'conversation-active' : '' }}">
                {{-- Header and search bar --}}
                <div class="m-header">
                    <nav>
                        <a href="#"><i class="fas fa-inbox"></i> <span class="messenger-headTitle">MESSAGES</span> </a>
                        {{-- header buttons --}}
                        <nav class="m-header-right">
                            <a href="#"><i class="fas fa-cog settings-btn"></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>Favorites</span></p>
                            <div class="messenger-favorites app-scroll-hidden"></div>
                        </div>
                        {{-- Saved Messages --}}
                        <p class="messenger-title"><span>Your Space</span></p>
                        {!! view('Chatify::layouts.listItem', ['get' => 'saved']) !!}
                        {{-- Contact --}}
                        <p class="messenger-title"><span>All Messages</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">
                {{-- 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="/"><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 chat 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('Chatify::layouts.sendForm')
            </div>
            {{-- ---------------------- Info side ---------------------- --}}
            <div class="messenger-infoView app-scroll">
                {{-- nav actions --}}
                <nav>
                    <p>User Details</p>
                    <a href="#"><i class="fas fa-times"></i></a>
                </nav>
                {!! view('Chatify::layouts.info')->render() !!}
            </div>
        </div>

        @include('Chatify::layouts.modals')
        @include('Chatify::layouts.footerLinks')

        <div class="nk-msg">
            <div class="nk-msg-aside">

               @include('merchant.giftcard.message_sidebar')
                <!-- .nk-msg-list -->
            </div><!-- .nk-msg-aside -->

            @include('merchant.giftcard.message_body')

            <div class="nk-msg-profile hide" data-simplebar>
                <div class="card">
                    <div class="card-inner-group">
                        <div class="card-inner">
                            <div class="user-card user-card-s2 mb-2">
                                <div class="user-avatar md bg-primary">
                                    <span>AB</span>
                                </div>
                                <div class="user-info">
                                    <h5>Abu Bin Ishtiyak</h5>
                                    <span class="sub-text">Customer</span>
                                </div>
                                <div class="user-card-menu dropdown">
                                    <a href="#" class="btn btn-icon btn-sm btn-trigger dropdown-toggle" data-bs-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                    <div class="dropdown-menu dropdown-menu-end">
                                        <ul class="link-list-opt no-bdr">
                                            <li><a href="#"><em class="icon ni ni-eye"></em><span>View Profile</span></a></li>
                                            <li><a href="#"><em class="icon ni ni-na"></em><span>Ban From System</span></a></li>
                                            <li><a href="#"><em class="icon ni ni-repeat"></em><span>View Orders</span></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="row text-center g-1">
                                <div class="col-4">
                                    <div class="profile-stats">
                                        <span class="amount">23</span>
                                        <span class="sub-text">Total Order</span>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="profile-stats">
                                        <span class="amount">20</span>
                                        <span class="sub-text">Complete</span>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="profile-stats">
                                        <span class="amount">3</span>
                                        <span class="sub-text">Progress</span>
                                    </div>
                                </div>
                            </div>
                        </div><!-- .card-inner -->
                        <div class="card-inner">
                            <div class="aside-wg">
                                <h6 class="overline-title-alt mb-2">User Information</h6>
                                <ul class="user-contacts">
                                    <li>
                                        <em class="icon ni ni-mail"></em><span>info@softnio.com</span>
                                    </li>
                                    <li>
                                        <em class="icon ni ni-call"></em><span>+938392939</span>
                                    </li>
                                    <li>
                                        <em class="icon ni ni-map-pin"></em><span>1134 Ridder Park Road <br>San Fransisco, CA 94851</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="aside-wg">
                                <h6 class="overline-title-alt mb-2">Additional</h6>
                                <div class="row gx-1 gy-3">
                                    <div class="col-6">
                                        <span class="sub-text">Ref ID: </span>
                                        <span>TID-049583</span>
                                    </div>
                                    <div class="col-6">
                                        <span class="sub-text">Requested:</span>
                                        <span>Abu Bin Ishtiak</span>
                                    </div>
                                    <div class="col-6">
                                        <span class="sub-text">Status:</span>
                                        <span class="lead-text text-success">Open</span>
                                    </div>
                                    <div class="col-6">
                                        <span class="sub-text">Last Reply:</span>
                                        <span>Abu Bin Ishtiak</span>
                                    </div>
                                </div>
                            </div>
                            <div class="aside-wg">
                                <h6 class="overline-title-alt mb-2">Assigned Account</h6>
                                <ul class="align-center g-2">
                                    <li>
                                        <div class="user-avatar bg-purple">
                                            <span>IH</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="user-avatar bg-pink">
                                            <span>ST</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="user-avatar bg-gray">
                                            <span>SI</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div><!-- .card-inner -->
                    </div>
                </div>
            </div><!-- .nk-msg-profile -->


            <!-- .nk-msg-body -->
        </div><!-- .nk-msg -->
    </div>
@endsection

@push('script')

    <script src="{{asset('assets')}}/u_dashboard/js/apps/messages.js?ver=3.1.3"></script>

    <script>

        $(document).ready(function(){
            $("#textj").click(function(){
                $.ajax({
                    url:"{{route('merchant.giftcard.trading',['id'=>'ddd'])}}",
                    type:'get',

                    data:{'reference':"ddddd"},
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success:function(response){
                       // console.log(response)
                        $("#chat-body").replaceWith(response)

                    },
                    error: function(xhr, status, error){
                        showNotice(xhr.responseJSON.message, 'error');
                    }

                })

            })
            $(".profile-toggle").click(function(){
                $.ajax({
                    url:"{{route('merchant.giftcard.get-trade',['id'=>'ddd'])}}",
                    type:'get',

                    data:{'reference':"ddddd"},
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success:function(response){
                       // console.log(response)
                        $(".nk-msg-profile").html(response)

                    },
                    error: function(xhr, status, error){
                        showNotice(xhr.responseJSON.message, 'error');
                    }

                })

            })

        });
        /**
         *-------------------------------------------------------------
         * Pusher initialization
         *-------------------------------------------------------------
         */

       const channel= pusher.subscribe('my-channel');
       channel.bind('message-send',function(data){
           console.log('Alaye Message Received:',data.message);
       })
        // -------------------------------------


    </script>
    @endpush