@extends('backend.layouts.main')
@section('panel')
    <h4 class="fw-bold py-3 mb-3">
        Deposit Transaction
    </h4>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-datatable table-responsive">
                    <table id="data-table" class="table table-bordered table-sm">
                        <thead>
                            <tr>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">#</th>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">Trx ID</th>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">Username</th>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">Amount</th>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">Invoice</th>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">Bank Users</th>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">Bank Admin</th>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">Bonus</th>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">Note</th>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">Date</th>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">Transaction By</th>
                                <th class="text-center" style="vertical-align: middle; font-size: 12px;">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Bonus Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-sm">
                    <thead class="table-dark">
                        <tr>
                            <th class="text-center">Percentage</th>
                            <th class="text-center">Amount</th>
                            <th class="text-center">Max</th>
                            <th class="text-center">Turn Over</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center" id="percent"></td>
                            <td class="text-center" id="amount"></td>
                            <td class="text-center" id="max"></td>
                            <td class="text-center" id="to"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script type="text/javascript">
    $(function () {
      var table = $('#data-table').DataTable({
          processing: true,
          serverSide: true,
          lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
          ajax: {
            url: window.location.href,
            type: "GET"
          },
          columns: [
              {data: 'id', name: 'id', orderable: false},
              {data: 'trx_id', name: 'trx_id', orderable: false},
              {data: 'username', name: 'username', orderable: false},
              {data: 'total', name: 'total', orderable: false},
              {data: 'invoice', name: 'invoice', orderable: false},
              {data: 'bank_user', name: 'bank_user', orderable: false},
              {data: 'metode', name: 'metode', orderable: false},
              {data: 'bonus', name: 'bonus', orderable: false},
              {data: 'keterangan', name: 'keterangan', orderable: false},
              {data: 'created_at', name: 'created_at', orderable: false},
              {data: 'transaction_by', name: 'transaction_by', orderable: false},
              {data: 'status', name: 'status', orderable: false, searchable: false},
          ] ,
          columnDefs: [
        { className: 'text-center', targets: '_all' }]
      });

    });
</script>

<script>
    function getbonusDetail(id) {
            $.ajax({
            type: "GET",
            url: "/deposits/bonus-detail/"+ id,
            success: function (response) {
                if (response.status == 'success') {
                    $('#staticBackdrop').modal('show');
                    document.getElementById('percent').textContent = response.percentage;
                    document.getElementById('amount').textContent = response.amount;
                    document.getElementById('max').textContent = response.max;
                    document.getElementById('to').textContent = response.turn_over;
                }
            }
        });
        }
</script>
@endpush