@extends('layouts.user')
@section('title')
    @lang('Trade Gift Card')
@endsection
@section('breadcrumb')
    @lang('Trade Giftcard')
@endsection
@section('content')

<div class="nk-content-body">
    <div class="nk-block-head nk-block-head-sm">
        <div class="nk-block-between">
            @include('user.partials.breadcrumb',['btitle'=>'Trade with'])

        </div><!-- .nk-block-between -->
    </div><!-- .nk-block-head -->
    <div class="nk-block">
        <div class="card card-bordered card-stretch">
            <div class="card-inner-group">
                <div class="card-inner position-relative card-tools-toggle">
                    <div class="card-title-group">
                        <div class="card-tools">
                            <div class="form-inline flex-nowrap gx-3">

                                <div class="btn-wrap">
                                    <span class="">Available Merchant to Trade with</span>
                                    <div class="alert alert-sm alert-info">
                                        Please note: We trade 24/7. However, if all our merchants or staff are offline on the website, kindly call or message us on WhatsApp at <a href="https://api.whatsapp.com/send?phone=2348035236978" target="_blank">+2348035236978</a>
                                    </div>

                                </div>
                            </div><!-- .form-inline -->
                        </div><!-- .card-tools -->

                    </div><!-- .card-title-group -->

                </div><!-- .card-inner -->
                <div class="card-inner p-0">
                    <div class="nk-tb-list nk-tb-ulist">
                        <div class="nk-tb-item nk-tb-head">
                            <div class="nk-tb-col nk-tb-col-check">
                                <div class="custom-control custom-control-sm custom-checkbox notext">
                                   #
                                </div>
                            </div>
                            <div class="nk-tb-col"><span class="sub-text">Trader Name</span></div>

                        </div><!-- .nk-tb-item -->
                        @forelse($merchants as $k=> $merchant)
                        <div class="nk-tb-item" data-merchant-id="{{$merchant->access_key}}">

                            <div class="nk-tb-col nk-tb-col-check">
                                <div class="custom-control custom-control-sm custom-checkbox notext">
                                    {{$k+1}}
                                </div>
                            </div>
                            <div class="nk-tb-col">
                                <a href="#" >
                                    <div class="user-card">
                                        <div class="user-avatar xs bg-primary">
                                            <span>{{getAlias($merchant->name)}}</span>
                                        </div>
                                        <div class="user-name ">
                                            <span class="tb-lead">{{$merchant->name}} </span>
                                            <span class="status-{{$merchant->access_key}}">
                                           <span class="badge rounded-pill bg-danger"><small>Not Available</small></span>
                                       </span>
                                        </div>
                                    </div>
                                </a>
                            </div>


                        </div><!-- .nk-tb-item -->
                        @empty
                        @endforelse


                    </div><!-- .nk-tb-list -->
                </div><!-- .card-inner -->

            </div><!-- .card-inner-group -->
        </div><!-- .card -->
    </div><!-- .nk-block -->
</div>

@endsection

@push('script')
<script>
    $(document).ready(function () {

        // presence channel [User Active Status]
        var activeStatusChannel = pusher.subscribe("presence-activeStatus");

        // Joined
        activeStatusChannel.bind("pusher:member_added", function (member) {


            $('.status-'+member.id).html('<span class="badge rounded-pill bg-primary status-'+member.id+'"><small>Available</small></span>');
        });

        activeStatusChannel.bind('pusher:subscription_succeeded', function (members) {
            // Handle the subscription success event
            console.log('Subscription succeeded:', members);
            members.each(function (member) {
                console.log('Member ID:', member.id);
                console.log('Member Info:', member.info);

                $('.status-'+member.id).html('<span class="badge rounded-pill bg-primary status-'+member.id+'"><small>Available</small></span>');
                // Access other member properties as needed
            });

        });


        // Leaved
        activeStatusChannel.bind("pusher:member_removed", function (member) {


            $('.status-'+member.id).html('<span class="badge rounded-pill bg-danger status-'+member.id+'"><small>Not Available</small></span>');
        });

        $('.nk-tb-item').click(function(){
            var selectedMerchant = $(this).data('merchant-id');
            $.ajax({
                url:"{{route('user.giftcard.sendtradereqeust')}}",
                type:'POST',

                data:{'tradeRef':"{{$tradeId}}", 'merchantId':selectedMerchant},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success:function(response){
                   // console.log(response.requestId)
                    window.location.href = "{{url('/user/giftcard/trade/trading')}}"+"/"+response.requestId;
                },
                error: function(xhr, status, error){
showNotice(xhr.responseJSON.message, 'error');
                }

            })


        });

    })

</script>
@endpush