@extends('layouts.admin')
@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
@endsection
@section('content')

            <main class="content">
				<div class="container-fluid p-0">
 
					<div class="row mb-2 mb-xl-3">
						<div class="col-auto d-none d-sm-block">
							<h3>WALLET / LIST @if(!blank($client)) ({{$client->email}}) @endif</h3>
							
							@if(!blank($client))
							<p><a href='{{route("admin.user.single", $client->username)}}'>Back to User Page</a></p>
							@endif
							<input type="hidden" id="clid" value="@if(!blank($client)) ({{$client->id}}) @endif" />
						</div>

					</div>
				
@include('components.admin.error-message')
<div class="row mb-3">
  
  <div class="col">
      <select class="form-control bn-select-option" name="coin" id="selectCoin" required>
               <option value="">All Coin</option>
               @if(!blank($coins))
               @foreach($coins as $coin)
               <option value="{{$coin->symbol}}">{{$coin->symbol}}</option>
               @endforeach
               @endif
            </select>
            </div>

  <div class="col">
      <button id="history-crypto-reset-button" class="btn btn-sm btn-primary">Reset</button>
  </div>
</div>
			        <div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header pb-0">
                <div class="card-actions float-end">
                    
                </div>
            
            </div>
            <div class="card-body">
                <table class="table table-responsive table-striped data-table" style="width: 100%;">
                    <thead>
                        <tr>
                            
                            <th >Time</th>
                                                
                                                                   
                                                    <th >User</th>
                                                                
                                                                    <th >Coin</th>
                                                                    <th >Balance</th>
                                                                    <th >USD Balance</th>
                                        
                                                                
                                                                    <th >Status</th>
                            <th>ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
             
                    </tbody>
                </table>
         
            </div>
        </div>
    </div>

</div>



				</div>
			</main>
<div class="modal fade" id="processModalMd" tabindex="-1" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-md" role="document" id="walletModalContent">
        
    </div>
</div>
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
 
    <script>
    var editModal = new bootstrap.Modal(document.getElementById('processModalMd'))
         $(function () {
            var cid = {{$cid}}
         
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.wallet.list') }}"+"/"+cid,
                    data: function (d) {
                     
                        d.coin = $('#selectCoin').val();
                     
                    }
                },
                columns: [
                    {data: 'created_date', name: 'created_date',searchable: false},
                    {data: 'user', name: 'user', orderable: false,searchable: false},
                    {data: 'coin', name: 'coin', orderable: false,searchable: false},
                    {data: 'balance', name: 'balance',searchable: false},
                    {data: 'convertedBal', name: 'convertedBal',searchable: false},
             
                    {data: 'status', name: 'status', orderable: false, searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
              
                ],
             
            });
            
            $(".bn-select-option").on('change' , function(){
               
                let v = $(this).val();
               
                console.log(v);
                
              
                table.draw();
            })
            
            $("#history-crypto-reset-button").on('click' , function(){
            $('#selectType').val("");
            $('#selectCoin').val("");
            $('#selectStatus').val("");
            table.search('').draw();
            })
        });
        
        $('body').on('click' ,'.wallet_data',  function(){
           let id =  $(this).attr("data-name");
           let type =  $(this).attr("data-type");
           let url = "{{secure_url('admin/wallets/single')}}/"+id+"/"+type+"/"+"{{csrf_token()}}";
           $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                
                success: function(res){
                    if(res.status == true){
                        $("#walletModalContent").html(res.view);
                        editModal.show();
                    }
                }
            })
        })
    </script>
@endsection