@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>ORDER / 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="type" id="selectType" required>
               <option value="">All Type</option>
               <option value="buy">Buy</option>
                <option value="sell">Sell</option>
            </select>
            </div>


  <div class="col"><select class="form-control bn-select-option" name="status" id="selectStatus" required>
               <option value="">All Status</option>
               {!! __get_order_edit_select() !!}
            
            </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 tableRes">
                <table class="table table-responsive table-striped data-table" style="width: 100%;">
                    <thead>
                        <tr>
                            
                            <th >Time</th>
                                                        <th>Reference</th>           
                                                                    <th >Type</th>
                                                                
                                                                    <th >Symbol</th>
                                                                    <th >Amount</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="transactionModalContent">
        
    </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 = {{$client->id}}
         
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.order.list') }}"+"/"+cid,
                    data: function (d) {
                        d.type= $('#selectType').val();
                        d.coin = $('#selectCoin').val();
                        d.stats = $('#selectStatus').val();
                    }
                },
                columns: [
                    {data: 'trade_date', name: 'trade_date',searchable: false},
                    {data: 'orderID', name: 'orderID',searchable: false},
                    
                    {data: 'type', name: 'type', orderable: false,searchable: false},
                    {data: 'symbol', name: 'symbol', orderable: false,searchable: false},
                    {data: 'volume', name: 'volume',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' ,'.edit_data',  function(){
            let i = $(this).attr("data-name");
            let url = "{{route('admin.order.single')}}/"+i
          
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                
                success: function(res){
                    if(res.status == true){
                        $("#transactionModalContent").html(res.view);
                        editModal.show();
                    }
                }
            })
        })
    </script>
@endsection