@extends('layouts.admin')

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

@section('breadcrumb')
 <section class="section">
    <div class="section-header">
        <h1>@lang('Trade Transaction History')</h1>

    </div>
</section>
@endsection

@section('content')

<div class="row">
    <div class="col-12 col-md-12 col-lg-12">
        <div class="card">
            <div class="card-header d-flex justify-content-end">
                <form action="" class="d-flex flex-wrap justify-content-end">
                    <div class="form-group m-1 flex-grow-1">
                     <select class="form-control" onChange="window.location.href=this.value">
                         <option value="{{filter('status','')}}">@lang('All Trades')</option>

                         <option value="{{filter('status','pending')}}" {{request('status')=='Pending'?'selected':''}}>@lang('Pending Trades')</option>

                         <option value="{{filter('status','completed')}}" {{request('status')=='Completed'?'selected':''}}>@lang('Completed Trades')</option>

                         <option value="{{filter('status','rejected')}}" {{request('status')=='Accepted'?'selected':''}}>@lang('Accepted Trades')</option>
                     </select>
                    </div>

                     <div class="form-group m-1 flex-grow-1">
                         <div class="input-group">
                             <input type="text" class="form-control" name="search" value="{{$search ?? ''}}" placeholder="@lang('Transaction ID')">
                             <div class="input-group-append">
                                 <button class="input-group-text btn btn-primary text-white" id="my-addon"><i class="fas fa-search"></i></button>
                             </div>
                         </div>
                     </div>
                </form>
            </div>
            <div class="card-body text-center">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <tr>
                            <th>@lang('#')</th>
                            <th>@lang('Transaction Ref')</th>
                            <th>@lang('User')</th>
                            <th>@lang('Descriptions')</th>
                            <th>@lang('Amount')</th>
                            <th>@lang('Referrer Bonus')</th>
                            <th>@lang('Merchant')</th>
                            <th>@lang('Status')</th>
                            <th>@lang('Conversations')</th>
                            <th>@lang('Action')</th>
                        </tr>
                        @forelse ($trades as $k=> $trade)
                            <tr>

                                 <td data-label="">
                                   {{$k=$k+1}}
                                 </td>
                                 <td >{{$trade->transaction_ref}}</td>
                                 <td >{{$trade->name}}</td>
                                 <td >{{$trade->descriptions}}</td>
                                 <td >{{toMoney($trade->amount)}}</td>
                                 <td >{{toMoney($trade->refer_bonus)}}</td>
                                 <td >{{$trade->merchant_name}}</td>
                                 <td >{{$trade->status}}</td>
                                 <td data-label="@lang('Conversation')">


                                     <a href="{{route('admin.view-trade',['id'=>$trade->request_id])}}" class="btn btn-success btn-sm m-1" data-toggle="tooltip" title="View Conversation">View Chat</a>

                                 </td>



                                 <td data-label="@lang('Action')">
                                    <div class="align-items-center justify-content-end justify-content-lg-center">

                                        <a href="javascript:void()" class="btn btn-primary approve btn-sm" data-id="{{$trade->id}}" data-toggle="tooltip" title="@lang('Approve')"><i class="fas fa-check"></i></a>
                                        <a href="javascript:void()" class="btn btn-danger reject btn-sm m-1" data-id="{{$trade->id}}" data-toggle="tooltip" title="@lang('Reject')"><i class="fas fa-ban"></i></a>
                                    </div>
                                 </td>
                            </tr>
                         @empty

                            <tr>
                                <td class="text-center" colspan="100%">@lang('No Data Found')</td>
                            </tr>

                        @endforelse
                    </table>
                </div>
            </div>
            @if ($trades->hasPages())
                {{ $trades->links() }}
            @endif
        </div>
    </div>
</div>

<div id="approveModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form action="{{route('admin.approve.payout')}}" method="POST">
            @csrf
            <input type="hidden" name="id">
            <div class="modal-content">
                <div class="modal-body">
                    <h6 class="mt-3">@lang('Are you sure to approve?')</h6>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-dark" data-dismiss="modal">@lang('Close')</button>
                    <button type="submit" class="btn btn-primary">@lang('Confirm')</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="rejectModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form action="{{route('admin.reject.payout')}}" method="POST">
            @csrf
            <input type="hidden" name="id">
            <div class="modal-content">
                <div class="modal-body">
                    <h6 class="mt-3">@lang('Are you sure to reject?')</h6>

                    <div class="form-group">
                        <label>@lang('Reject Reasons')</label>
                        <textarea name="reject_reason" class="form-control mt-2"  rows="5"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-dark" data-dismiss="modal">@lang('Close')</button>
                    <button type="submit" class="btn btn-danger">@lang('Confirm')</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('script')
    <script>
        'use strict';
        $('.approve').on('click',function () {
            $('#approveModal').find('input[name=id]').val($(this).data('id'))
            $('#approveModal').modal('show')
        })
        $('.reject').on('click',function () {
            $('#rejectModal').find('input[name=id]').val($(this).data('id'))
            $('#rejectModal').modal('show')
        })
    </script>
@endpush