@extends('layouts.user')

@section('content')
    <section id="transaction">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="heading-title2">
                        <p>
                            {{$gnl->title}}
                        </p>
                        <h2>
                            DEPOSIT
                        </h2>
                    </div>
                </div>
                <div class="col-12 text-center">

                    <div class="card rich" style=" background-color: transparent; color:white; border:1px solid #dee2e6">
                        <div class="card-header">
                            <h2>YOUR DEPOSIT ADDRESS</h2>
                        </div>
                        <div class="card-body">
                            <div class="card rich" style=" background-color: transparent; color:white; border:1px solid #dee2e6" id="depositCard" style="display:none;">
                                <div class="card-header">
                                    <h3 id="depositAddress"></h3>
                                </div>
                                <div class="card-body">
                                    <img id="depositQRCode" style='width:300px;' />
                                </div>
                            </div>
                            <hr>
                            <h1><i class="fas fa-spinner" id="delaySpiner" style="display:none;"></i></h1>
                            <form id="depositForm">
                                @csrf
                                <button type="submit" class="btn btn-primary btn-submit">GENERATE DEPOSIT ADDRESS</button>
                            </form>
                            <hr>
                            <ul class="list-inline">
                                <li class="list-inline-item">Minimum Deposit: <strong>{{$gateway->minimum}}</strong> {{$gnl->cur}} |</li>
                                <li class="list-inline-item">1 DH/S = <strong>{{$gnl->dhs_price}}</strong> {{$gnl->cur}} |</li>
                                <li class="list-inline-item">Daily <strong>{{$gnl->daily}}</strong> {{$gnl->cur}} Per DH/S</li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <br>
            <hr>
            <div class="row justify-content-center">
                <h3 style="color: white">   Your Deposits</h3>
                <div class="col-md-12">
                    <br>

                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>AMOUNT</th>
                                <th>WALLET</th>
                                <th>TRX ID</th>
                                <th>TRX TIME</th>
                            </tr>
                            </thead>
                            <tbody>
                            @if(count($deposits)==0)
                                <tr>
                                    <td class="text-center" colspan="4">NO DATA AVAILABLE</td>
                                </tr>
                            @endif
                            @foreach ($deposits as $item)
                                <tr>
                                    <td>{{$item->amount}} {{$gnl->cur}}</td>
                                    <td>{{$item->wallet}}</td>
                                    <td>{{$item->trx}}</td>
                                    <td>{{$item->updated_at}}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

                        {{$deposits->links()}}
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('scripts')
<script>
  $(document).ready(function(){  
    $(document).on('submit','#depositForm',function(event)
    {
      event.preventDefault();
      $('#delaySpiner').show();
      $.ajax({
        type:"POST",
        url:"{{route('account.deposit-wallet')}}",       
        data: new FormData(document.getElementById('depositForm')),
        contentType: false,
        processData: false,
        success:function(data)
        {
          if(data==99)
          {
            $.notify({ allow_dismiss: true,title: "Sorry!",message: "Error Occurd" }, { type: 'danger' });
          }
          else
          {
            $('#delaySpiner').hide();            
            $('#depositCard').show();
            $('#depositForm').hide();
            $('#depositAddress').text(data);
            let qrcode = 'https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl='+data+'&choe=UTF-8';
            $('#depositQRCode').attr('src', qrcode);          
          }
        }
      });
    });
  });
</script>     
  
  @endsection