@extends('layouts.master')
@section('title', config('app.name') . ' : Transaksi Deposit & Withdraw Proses Instan')
@section('content')
<div class="main-content transaksi bonus">
    <div class="container">
      <ul class="component-tabs nav nav-tabs" id="transactionTabs">
          <li class="nav-item">
          <a class="button-pills nav-link active" id="nav-deposit-qris-tab" data-toggle="tab" href="#nav-deposit-qris" role="tab" aria-controls="nav-deposit-qris" aria-expanded="false">
            <i class="fas fa-qrcode"></i>
            <span>QRIS INSTANT (Otomatis)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="button-pills nav-link" id="nav-deposit-tab" data-toggle="tab" href="#nav-deposit" role="tab" aria-controls="nav-deposit" aria-expanded="false">
            <i class="fas fa-wallet"></i>
            <span>Tambah Dana</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="button-pills nav-link" id="nav-withdraw-tab" data-toggle="tab" href="#nav-withdraw" role="tab" aria-controls="nav-withdraw" aria-expanded="false">
            <i class="fas fa-coins"></i>
            <span>Tarik Dana</span>
          </a>
        </li>
      </ul>
      <div class="component-tab-content tab-content" id="pills-tabContent">
          <div class="tab-pane fade show active" id="nav-deposit-qris" role="tabpanel" aria-labelledby="nav-deposit-qris-tab">
          <div class="transaksi-grid row">
            <div class="col-lg-8">
              <div class="transaksi-form">
                <div class="transaksi-formulir">
                  <div class="formulir-title">
                    <div class="row d-flex justify-content-between px-4">
                      <div>Formulir Deposit</div>
                    </div>
                  </div>
                  <div class="transaksi-payment-holder">
    @auth
        {{-- BOX INFO USER ID (LOCK) --}}

        @php
            // CONFIG BASE64 QRIS (PAKAI PUNYA KAMU YANG SEKARANG)
            // ini string yang sebelumnya hardcoded di src=?data=...
            $dataParam = 'eyJjbGllbnQiOiJtZW5hbmdrdWgxODgiLCJsYWJlbCI6IiIsInV1aWQiOiI3NDRmMzUzMy0wOThiLTQ3YzUtOWIzZi0wYjUzOWFkZjIwOWMiLCJiZ2NvbG9yIjoidHJhbnNwYXJlbnQiLCJib3JkZXJjb2xvciI6IiNGRkZGRkYiLCJmb250Y29sb3IiOiIjRkZGRkZGIiwibWluIjoxMDAwLCJtYXgiOjEwMDAwMDAwLCJmZWUiOjY1MDAsImJvbnVzc2hvdyI6ZmFsc2UsImJvdGgiOmZhbHNlfQ==';

            // DATA YANG DI-LOCK KE USER, DIKIRIM LEWAT PARAMETER msg (BASE64)
            // pattern-nya sama persis dengan contoh yang kamu kirim:
            // $data = ['username' => $username];
            // $json  = json_encode($data);
            // $base64 = base64_encode($json);
            $msgData = [
                'username' => auth()->user()->username
                              ?? auth()->user()->name
                              ?? auth()->id(),
            ];
            $msgBase64 = base64_encode(json_encode($msgData));
        @endphp

        {{-- IFRAME QRIS OTOMATIS, SEKARANG PAKAI data + msg --}}
        <iframe
            src="https://iframe1.otomatis.vip/?data={{ $dataParam }}&msg={{ $msgBase64 }}"
            height="850px"
            width="100%"
            class="w-100"
            style="border:none;">
        </iframe>
    @else
        <p class="text-white">
            Silakan <a href="{{ route('login') }}" class="text-warning">login</a>
            untuk menggunakan deposit QRIS otomatis.
        </p>
    @endauth
    </div>
                </div>
                <div class="modal custom-popup fade" id="pendingPaymentQR" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content" style="height: 90vh">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                      </button>
                      <div class="modal-body">
                        <iframe width="100%" src="" frameborder="0" id="paymentQRiframe" style="min-height: 100%"></iframe>
                     </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 h-auto">
              <div class="transaksi-info">
                <div class="info-header">Informasi</div>

<div class="info-content" id="infoBox">
    <h2>HARAP PERHATIKAN NOMOR REKENING TUJUAN DENGAN BENAR !</h2>
    <p>
        Kami tidak memberikan toleransi apabila terjadi kesalahan transfer uang (Deposit) ke rekening yang bukan tertera pada menu Deposit.<br><br>
        Kami hanya proseskan Deposit dari Rekening yang terdaftar di AKUN nya masing-masing.<br><br>
        <b>Minimal Deposit (BANK) MENANGKUH188</b> adalah <b>Rp 50.000,-</b><br>
        <b>Minimal Deposit (EWALLET) MENANGKUH188</b> adalah <b>Rp 25.000,-</b><br>
        <b>Minimal Deposit (QRIS) MENANGKUH188</b> adalah <b>Rp 10.000,-</b><br><br>
        Jika ingin deposit antar bank (contoh: BRI -> MANDIRI), harap info ke CS terlebih dahulu untuk menanyakan nomor rekeningnya.<br><br>
        <b class="warning-text">DILARANG DEPOSIT MENGGUNAKAN SELAIN YANG DI DAFTARKAN KARENA DANA TIDAK AKAN KAMI PROSES !!</b><br><br>
        Sistem akan otomatis mengunci akun Anda apabila mengisi form deposit palsu.<br><br>
        Untuk konfirmasi deposit hubungi <b>LIVECHAT</b>.<br><br>
        <i>Terimakasih</i>
    </p>
</div>

<style>
.info-content {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
    color: white;
    font-family: Arial, sans-serif;
    margin-top: 10px;
    position: relative;
    animation: fadeIn 1s ease-in-out;
}
.info-content h2 {
    text-align: center;
    font-weight: bold;
}
.warning-text {
    color: #ff4c4c;
    font-weight: bold;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
</style>


              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="nav-deposit" role="tabpanel" aria-labelledby="nav-deposit-tab">
          <div class="transaksi-grid row">
            <div class="col-lg-8">
              <div class="transaksi-form">
                <div class="transaksi-formulir">
                  <div class="formulir-title">
                    <div class="row d-flex justify-content-between px-4">
                      <div>Formulir Deposit</div>
                    </div>
                  </div>
                  <div class="transaksi-payment-holder">
                    <div class="transaksi-payment transaction-payment-swiper swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
                        <div class="swiper-wrapper" id="swiper-wrapper-b36247b2c51ae987" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
                            @foreach ($bankdata as $data)
                                <div class="swiper-slide payment-item" role="group" aria-label="{{ $loop->iteration }} / {{ count($bankdata) }}" style="width: 155px; margin-right: 10px;">
                                    <div class="payment-status {{ $data->status == 'online' ? 'online' : 'offline' }}"></div>
                                    <div class="payment-body">
                                        <div class="payment-icon">
                                            <img loading="lazy" src="{{ $data->image }}" alt="pay-icon">
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                    </div>
                    <div class="payment-navigation">
                        <button class="btn-custom-sm navigation-prev--payment" tabindex="0" aria-label="Previous slide" aria-controls="swiper-wrapper-af2e04815c451b34" aria-disabled="false">
                            <i class="fas fa-angle-left"></i>
                        </button>
                        <button class="btn-custom-sm navigation-next--payment" tabindex="0" aria-label="Next slide" aria-controls="swiper-wrapper-af2e04815c451b34" aria-disabled="false">
                            <i class="fas fa-angle-right"></i>
                        </button>
                    </div>
                </div>
                  <div class="tab-content" id="transactionContent">
                    <div class="tab-pane text-white fade  show active " id="v-manualtrf" role="tabpanel" aria-labelledby="v-manualtrf-tab">
                        <div class="transaksi-note">
                            @if($hasMainBank && $mainBank)
                              <div class="addbank-note">Selalu pastikan rekening pengirim atau rekening tujuan sesuai dengan data yang terdaftar.</div>
                              <form id="formDepositManual" enctype="multipart/form-data" novalidate="novalidate">
                                <div class="formulir-form">
                                  <div class="form-group" id="bank-lain">
                                    <div class="row">
                                      <div class="col-lg-3 d-flex align-items-center">
                                        <label>Pilih Bank Anda</label>
                                      </div>
                                      <div class="col-lg-7">
                                        <div class="input-group">
                                          <select name="bankMemberManual" class="custom-selection form-control" id="memberBankSelectManual">
                                            @if($hasMainBank && $mainBank)
                                            <optgroup label="Main Bank">
                                                <option value="{{ encrypt($mainBank->id) }}" data-bankcategory="bank" data-code="{{ $mainBank->bank_name }}" data-accountnumber="{{ $mainBank->account_number }}">
                                                    {{ strtoupper($mainBank->bank_name) }} - {{ $mainBank->account_number }}
                                                </option>
                                            </optgroup>
                                            @endif
                                            @if($otherBank->isNotEmpty())
                                            <optgroup label="Bank Lain">
                                                @foreach($otherBank as $bank)
                                              <option value="{{ encrypt($bank->id) }}" data-code="{{ $bank->bank_name }}" data-accountnumber="{{ $bank->account_number }}"> {{ strtoupper($bank->bank_name) }} - {{ $bank->account_number }}</option>
                                                @endforeach
                                            </optgroup>
                                            @endif
                                          </select>
                                        </div>
                                        <span id="memberBankSelectManual-error"></span>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="form-group">
                                    <div class="row">
                                      <div class="col-lg-3 d-flex align-items-center">
                                        <label>Pilih Bank</label>
                                      </div>
                                      <div class="col-lg-7">
                                        <select name="bankManual" class="custom-selection form-control" id="bankSelectManual">
                                            <option value="">--- Pilih Bank ---</option>
                                            </optgroup>
                                            @foreach (['epayment', 'phonecredit', 'bank', 'bankva'] as $type)
                                                @if ($orderedBanks[$type]->isNotEmpty())
                                                    <optgroup label="{{ $type }}">
                                                        @foreach ($orderedBanks[$type] as $bank)
                                                            <option value="{{ $bank->id }}" data-code="{{ $bank->bank_name }}" data-min="{{ $bank->min_deposit }}" data-max="{{ $bank->max_deposit }}" data-rate="{{ $bank->rate }}"> {{ strtoupper($bank->bank_name) }} @if ($bank->bank_type == 'phonecredit') - {{ $bank->rate }}% @endif </option>
                                                        @endforeach
                                                    </optgroup>
                                                @endif
                                                @endforeach
                                        </select>
                                        <span id="bankSelectManual-error"></span>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="form-group bankOption" id="ewallet-2f22524d-fd44-11ef-a393-d85ed3770afc" style="display: none;">
                                    <div class="row">
                                      <div class="col-lg-3"></div>
                                      <div class=" col-lg-7">
                                        <div class="card">
                                          <div class="card-header text-center p-1">
                                            <img loading="lazy" class="img-fluid" style="max-height: 150px" src="{{ asset('themes/default/img/bank-icon/qris.png') }}" alt="img-bank">
                                          </div>
                                          <div class="card-body text-dark" style="font-weight: 600; font-size: 11px;">
                                            <div class="row">
                                              <div class="col-6"> Nama Tujuan Akun: </div>
                                              <div class="col"> (BARCODE AKAN MUNCUL SETELAH ISI FORM) CH2 </div>
                                            </div>
                                            <div class="row">
                                              <div class="col-6"> Min. Deposit: </div>
                                              <div class="col-6"> IDR 25,000 </div>
                                            </div>
                                            <div class="row">
                                              <div class="col-6"> Max. Deposit: </div>
                                              <div class="col-6"> IDR 10,000,000 </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-6"> Rate: </div>
                                                <div class="col-6">98.599998474121%</div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  @foreach ($danacepat as $bankva)
                                  <div class="form-group bankOption" id="{{ $bankva->bank_type }}-{{ $bankva->id }}" style="display: none;">
                                    <div class="row">
                                      <div class="col-lg-3"></div>
                                      <div class=" col-lg-7">
                                        <div class="card">
                                          <div class="card-header text-center p-1">
                                            <img loading="lazy" class="img-fluid" style="max-height: 150px" src="{{ $bankva->image }}" alt="img-bank">
                                          </div>
                                          <div class="card-body text-dark" style="font-weight: 600; font-size: 11px;">
                                            <div class="row">
                                              <div class="col-6"> Nama Tujuan Akun: </div>
                                              <div class="col">{{ $bankva->account_holder }}</div>
                                            </div>
                                            <div class="row">
                                              <div class="col-6"> Nomor Akun Tujuan: </div>
                                              <div class="col-auto flex-shrink-1">
                                                <a href="javascript:;" class="ml-2 p-1" name="copyAddress" id="{{ $bankva->id }}">
                                                  <span id="addressText-{{ $bankva->id }}">@if($bankva->bank_type === 'bankva')(NOMOR AKAN MUNCUL SETELAH ISI FORM)@else{{ $bankva->account_number }}@endif</span>
                                                  <span name="buttonCopy">
                                                    <i class="fas fa-copy"></i>
                                                  </span>
                                                </a>
                                              </div>
                                            </div>
                                            <div class="row">
                                              <div class="col-6"> Min. Deposit: </div>
                                              <div class="col-6"> IDR {{ $bankva->min_deposit_formatted }} </div>
                                            </div>
                                            <div class="row">
                                              <div class="col-6"> Max. Deposit: </div>
                                              <div class="col-6"> IDR {{ $bankva->max_deposit_formatted }} </div>
                                            </div>
                                            @if ($bankva->bank_type == 'phonecredit')
                                            <div class="row">
                                                <div class="col-6"> Rate: </div>
                                                <div class="col-6"> {{ $bankva->rate }}% </div>
                                            </div>
                                            @endif
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  @endforeach
                                  <div class="form-group">
                                    <div class="row mb-2">
                                      <div class="col-lg-3 d-flex align-items-center">
                                        <label>Jumlah Deposit</label>
                                      </div>
                                      <div class="col-lg-9 select-amount">
                                        <div class="button-deposit">
                                          <div for="10000" class="btn-close amnt-close" name="amnt-closeManual" style="display: none">
                                            <i class="fas fa-times"></i>
                                          </div>
                                          <span name="amountPickManual" value="10000" class="btn btn-outline-secondary my-1 btn-amount"> 10,000 <span for="10000" class="badge badge-danger cstm-danger" name="cstm-dangerManual" style="display: none"></span>
                                          </span>
                                        </div>
                                        <div class="button-deposit">
                                          <div for="20000" class="btn-close amnt-close" name="amnt-closeManual" style="display: none">
                                            <i class="fas fa-times"></i>
                                          </div>
                                          <span name="amountPickManual" value="20000" class="btn btn-outline-secondary my-1 btn-amount"> 20,000 <span for="20000" class="badge badge-danger cstm-danger" name="cstm-dangerManual" style="display: none"></span>
                                          </span>
                                        </div>
                                        <div class="button-deposit">
                                          <div for="50000" class="btn-close amnt-close" name="amnt-closeManual" style="display: none">
                                            <i class="fas fa-times"></i>
                                          </div>
                                          <span name="amountPickManual" value="50000" class="btn btn-outline-secondary my-1 btn-amount"> 50,000 <span for="50000" class="badge badge-danger cstm-danger" name="cstm-dangerManual" style="display: none"></span>
                                          </span>
                                        </div>
                                        <div class="button-deposit">
                                          <div for="100000" class="btn-close amnt-close" name="amnt-closeManual" style="display: none">
                                            <i class="fas fa-times"></i>
                                          </div>
                                          <span name="amountPickManual" value="100000" class="btn btn-outline-secondary my-1 btn-amount"> 100,000 <span for="100000" class="badge badge-danger cstm-danger" name="cstm-dangerManual" style="display: none"></span>
                                          </span>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="form-group choosePromo">
                                    <div class="row mb-2">
                                      <div class="col-lg-3 d-flex align-items-center">
                                        <label>Pilih Promo</label>
                                      </div>
                                      <div class="col-lg-7">
                                        <select name="bonusTypeManual" class="custom-selection form-control">
                                          <option value="noPromo">Tanpa Ambil Promosi</option>
                                          <option value="promo">Promotion</option>
                                          <option value="cashback">Cashback</option>
                                        </select>
                                      </div>
                                    </div>
                                    <div class="row mb-2">
                                      <div class="col-lg-3 d-flex align-items-center"></div>
                                      <div class="col-lg-7">
                                        <span id="promoListLoaderManual" style="display:none;">
                                          <div class="spinner-border spinner-border-sm" role="status">
                                            <span class="sr-only"></span>
                                          </div> Mohon tunggu sebentar ...
                                        </span>
                                        <span id="promoInfoTextManual" style="display:none;"></span>
                                        <select name="promoListManual" id="promoListManual" class="custom-selection form-control" style="display:none;"></select>
                                        <span id="promoListManual-error"></span>
                                      </div>
                                    </div>
                                    <div class="row">
                                      <div class="col-lg-3 d-flex align-items-center"></div>
                                      <div class="col-lg-7">
                                        <select name="providerCodeManual" id="providerCodeManual" class="custom-selection form-control" style="display:none;"></select>
                                        <span id="providerCodeManual-error"></span>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="form-group">
                                    <div class="row">
                                      <div class="col-lg-3 d-flex align-items-center"></div>
                                      <div class="col-lg-7">
                                        <div class="row">
                                          <div class="col-7">
                                            <div id="amountInputManual">
                                              <input class="custom-textfield form-control" type="text" id="depositShowAmountManual" placeholder="...">
                                              <input name="amountManual" id="depositAmountManual" type="hidden" placeholder="..." value="">
                                            </div>
                                            <span id="depositAmountManual-error"></span>
                                          </div>
                                          <div class="col-5">
                                            <div id="promoAmountInputManual">
                                              <div class="custom-textfield form-control" name="promoAmountManual" id="promoAmountManual" type="number" placeholder="0"></div>
                                            </div>
                                            <span id="promoAmountManual-error"></span>
                                          </div>
                                          <small id="depositAmountManualHelp" class="form-text mx-3"> Pastikan jumlah yang Anda masukkan sesuai dengan jumlah yang Anda transfer. </small>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row mb-3">
                                    <div class="col-lg-3 d-flex align-items-center">
                                      <label style="font-size: 14px;" id="notesLabel">Keterangan</label>
                                    </div>
                                    <div class="col-lg-7">
                                      <div id="chooseMode" class="">
                                        <div class="input-group-prepend" style="display: none;">
                                          <span id="chooseModeText" class="input-group-text dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SN</span>
                                          <div class="dropdown-menu">
                                            <span id="chooseModeSN" class="dropdown-item">Serial Number</span>
                                            <span id="chooseModeHP" class="dropdown-item">Nomor pengirim</span>
                                          </div>
                                        </div>
                                        <input id="notesManual" class="custom-selection form-control" name="notesManual" maxlength="100" type="text" placeholder="...">
                                      </div>
                                    </div>
                                    <input type="hidden" name="phoneCreditMode">
                                  </div>
                                  <div class="form-group">
                                    <div class="row">
                                      <div class="col-lg-3 d-flex align-items-center">
                                        <label>Bukti Pembayaran</label>
                                      </div>
                                      <div class="col-lg-5">
                                        <input id="proofManual" name="proofManual" type="file">
                                      </div>
                                      <div class="col-lg-4">
                                        <label class="formulir-desc">Hanya format *.jpg, *.jpeg, dan *.png yang diperbolehkan, maksimal 1 MB</label>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="form-group text-center">
                                    <div class="row">
                                      <div class="col-lg-12 center">
                                        <button name="deposit" type="submit" class="btn-custom btn-block">Kirim</button>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </form>
                            @else
                            <div class="addbank-note">
                              <p>Silahkan tambah bank anda.</p>
                              <a class="btn-custom" href="#" data-toggle="modal" data-target="#setBank">
                                <i class="fa fa-plus mr-1"></i> Tambah Bank </a>
                            </div>
                            @endif
                          </div>
                    </div>
                  </div>
                </div>
                <div class="modal custom-popup fade" id="pendingPaymentQR" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content" style="height: 90vh">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                      </button>
                      <div class="modal-body">
                        <iframe width="100%" src="" frameborder="0" id="paymentQRiframe" style="min-height: 100%"></iframe>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 h-auto">
              <div class="transaksi-info">
                <div class="info-header">Informasi</div>
                <div class="info-content" id="infoBox">
    <h2>HARAP PERHATIKAN NOMOR REKENING TUJUAN DENGAN BENAR !</h2>
    <p>
        Kami tidak memberikan toleransi apabila terjadi kesalahan transfer uang (Deposit) ke rekening yang bukan tertera pada menu Deposit.<br><br>
        Kami hanya proseskan Deposit dari Rekening yang terdaftar di AKUN nya masing-masing.<br><br>
        <b>Minimal Deposit (BANK) MENANGKUH188</b> adalah <b>Rp 50.000,-</b><br>
        <b>Minimal Deposit (EWALLET) MENANGKUH188</b> adalah <b>Rp 25.000,-</b><br>
        <b>Minimal Deposit (QRIS) MENANGKUH188</b> adalah <b>Rp 10.000,-</b><br><br>
        Jika ingin deposit antar bank (contoh: BRI -> MANDIRI), harap info ke CS terlebih dahulu untuk menanyakan nomor rekeningnya.<br><br>
        <b class="warning-text">DILARANG DEPOSIT MENGGUNAKAN SELAIN YANG DI DAFTARKAN KARENA DANA TIDAK AKAN KAMI PROSES !!</b><br><br>
        Sistem akan otomatis mengunci akun Anda apabila mengisi form deposit palsu.<br><br>
        Untuk konfirmasi deposit hubungi <b>LIVECHAT</b>.<br><br>
        <i>Terimakasih</i>
    </p>
</div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="nav-withdraw" role="tabpanel" aria-labelledby="nav-withdraw-tab">
          <div class="transaksi-grid row">
            <div class="col-lg-8">
              <div class="transaksi-form">
                <div class="transaksi-formulir">
                  <div class="formulir-title">Formulir Penarikan</div>
                  <div class="transaksi-payment-holder">
                    <div class="transaksi-payment transaction-payment-swiper swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
                        <div class="swiper-wrapper" id="swiper-wrapper-b36247b2c51ae987" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
                            @foreach ($bankdata as $data)
                                <div class="swiper-slide payment-item" role="group" aria-label="{{ $loop->iteration }} / {{ count($bankdata) }}" style="width: 155px; margin-right: 10px;">
                                    <div class="payment-status {{ $data->status == 'online' ? 'online' : 'offline' }}"></div>
                                    <div class="payment-body">
                                        <div class="payment-icon">
                                            <img loading="lazy" src="{{ $data->image }}" alt="pay-icon">
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                    </div>
                    <div class="payment-navigation">
                        <button class="btn-custom-sm navigation-prev--payment" tabindex="0" aria-label="Previous slide" aria-controls="swiper-wrapper-af2e04815c451b34" aria-disabled="false">
                            <i class="fas fa-angle-left"></i>
                        </button>
                        <button class="btn-custom-sm navigation-next--payment" tabindex="0" aria-label="Next slide" aria-controls="swiper-wrapper-af2e04815c451b34" aria-disabled="false">
                            <i class="fas fa-angle-right"></i>
                        </button>
                    </div>
                </div>
                  <div class="transaksi-note">
                    @if($hasMainBank && $mainBank)
                    <form id="formWithdraw" novalidate="novalidate">
                        <div class="formulir-form">
                          <div class="form-group mb-2">
                            <div class="row">
                              <div class="col-lg-3 d-flex align-items-center">
                                <label>Nama Rekening</label>
                              </div>
                              <div class="col-lg-7">
                                <input type="text" name="bankName" class="custom-selection form-control font-weight-bold" value="{{ $mainBank->account_holder }}" disabled="">
                              </div>
                            </div>
                          </div>
                          <div class="form-group mb-2">
                            <div class="row">
                              <div class="col-lg-3 d-flex align-items-center">
                                <label>Nomor Rekening</label>
                              </div>
                              <div class="col-lg-7">
                                <select class="custom-selection form-control font-weight-bold is-valid" name="bankDestination" id="memberBankSelect" aria-invalid="false">
                                    @if($hasMainBank && $mainBank)
                                    <optgroup label="Main Bank">
                                        <option value="{{ encrypt($mainBank->id) }}" data-bankcategory="bank" data-code="{{ $mainBank->bank_name }}" data-accountnumber="{{ $mainBank->account_number }}">
                                            {{ strtoupper($mainBank->bank_name) }} - {{ $mainBank->account_number }}
                                        </option>
                                    </optgroup>
                                    @endif
                                    @if($otherBank->isNotEmpty())
                                    <optgroup label="Bank Lain">
                                        @foreach($otherBank as $bank)
                                      <option value="{{ encrypt($bank->id) }}" data-code="{{ $bank->bank_name }}" data-accountnumber="{{ $bank->account_number }}"> {{ strtoupper($bank->bank_name) }} - {{ $bank->account_number }}</option>
                                        @endforeach
                                    </optgroup>
                                    @endif
                                </select>
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <div class="row">
                              <div class="col-lg-3 d-flex align-items-center">
                                <label>Nominal</label>
                              </div>
                              <div class="col-lg-7">
                                <div class="row">
                                  <div class="col-lg-12">
                                    <div class="input-group">
                                      <div class="input-group-prepend">
                                        <span class="input-group-text">Rp</span>
                                      </div>
                                      <input class="custom-textfield form-control" type="text" id="withdrawShowAmount" placeholder="...">
                                      <input type="hidden" min="50000" max="777000000" name="amount" id="withdrawAmount" placeholder="0" value="">
                                      <div class="input-group-append">
                                        <a href="javascript:;" id="wdAmountAll" class="btn btn-secondary" type="button">100%</a>
                                      </div>
                                    </div>
                                    <small class="form-text mx-3"> Saldo yang dapat anda tarik = Rp <span id="balanceAvailableWd">0</span>
                                    </small>
                                  </div>
                                </div>
                                <span id="withdrawAmount-error"></span>
                              </div>
                            </div>
                          </div>
                          <div class="form-group center">
                            <button type="submit" class="btn-custom btn-block" id="submit-withdraw">Kirim</button>
                          </div>
                        </div>
                      </form>
                    @else
                    <div class="addbank-note">
                        <p>Silahkan tambah bank anda.</p>
                        <a class="btn-custom" href="#" data-toggle="modal" data-target="#setBank">
                        <i class="fa fa-plus mr-1"></i> Tambah Bank </a>
                    </div>
                    @endif
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4">
              <div class="transaksi-info">
                <div class="info-header">Informasi</div>
                <div class="info-content" id="infoBox">
    <h2>PENARIKAN</h2>
    <p>
        <b>Minimal Withdraw: </b>Rp.50.000,-<br><br>

        Proses Withdraw sesuai dengan <b>Nama & Nomor Rekening</b> yang terdaftar!<br><br>

        Jika terdapat <b>perbedaan data pemain</b>, maka data dianggap tidak valid. <b>Kredit kemenangan & bonus akan ditarik!</b><br><br>

        Jika mengalami kesulitan harap hubungi <b>LIVECHAT</b> kami.<br><br>

        <i>Terimakasih</i>
    </p>
</div>

<style>
.info-content {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
    color: white;
    font-family: Arial, sans-serif;
    margin-top: 10px;
    position: relative;
    animation: fadeIn 1s ease-in-out;
}
.info-content h2 {
    text-align: center;
    font-weight: bold;
}
.warning-text {
    color: #ff4c4c;
    font-weight: bold;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
</style>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal custom-popup fade" id="setBank" tabindex="-1" aria-labelledby="setBankLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <i class="fas fa-times"></i>
        </button>
        <form id="setBankForm">
          <div class="modal-body">
            <div class="popup-bank-detail">
              <div class="bank-detail-header">
                <h4>Rekening Saya </h6>
              </div>
              <div class="add-bank-form">
                <div class="row">
                  <div class="col-lg-12">
                    <div class="add-bank-cont">
                      <div class="title">Nama Rek.</div>
                      <input name="setAccountName" class="form-control" type="text" />
                      <span id="setAccountName-error"></span>
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div class="add-bank-cont">
                      <div class="title">Pilih Bank</div>
                      <select class="form-control" name="setAccountBank" id="setAccountBank">
                        <option>--- Pilih Bank ---</option>
                        <optgroup label="EPAYMENT">
                        <option value="dana" data-id="dana" data-max="0" data-min="0"> DANA </option>
                        <option value="ovo" data-id="ovo" data-max="0" data-min="0"> OVO </option>
                        <option value="gopay" data-id="gopay" data-max="0" data-min="0"> GOPAY </option>
                        <option value="linkaja" data-id="linkaja" data-max="0" data-min="0"> LINKAJA </option>
                        </optgroup>
                        <optgroup label="PHONECREDIT">
                          <option value="xl" data-id="xl" data-max="13" data-min="0"> XL </option>
                          <option value="telkomsel" data-id="telkomsel" data-max="13" data-min="0"> TELKOMSEL </option>
                        </optgroup>
                        <optgroup label="OTHER">
                          <option value="banklain" data-id="banklain" data-max="0" data-min="0"> BANK LAIN </option>
                        </optgroup>
                        <optgroup label="BANK">
                        <option value="bca" data-id="bca" data-max="10" data-min="10"> BCA </option>
                        <option value="bri" data-id="bri" data-max="15" data-min="15"> BRI </option>
                        <option value="mandiri" data-id="mandiri" data-max="13" data-min="13"> MANDIRI </option>
                        <option value="bni" data-id="bni" data-max="10" data-min="10"> BNI </option>
                        </optgroup>
                      </select>
                      <span id="setAccountBank-error"></span>
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div class="add-bank-cont">
                      <div class="title" id="labelAccNumb">Nomor Rek.</div>
                      <div class="input-group input-group-sm">
                        <div class="input-group-prepend" id="phoneInputPrepend" style="display: none;">
                          <span class="input-group-text"> +62 </span>
                        </div>
                        <input class="form-control" type="text" name="setAccountNumber" id="setAccountNumber" minlength="8" maxlength="20" autocomplete="off">
                      </div>
                      <span id="setAccountNumber-error"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="bank-button" id="bankButton">
              <button type="submit" class="btn-custom">Simpan</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
<script>
    $("select[id=setAccountBank]").on("change", function (e) {
        e.preventDefault()
        const cat = $('select[id=setAccountBank] :selected').parent().attr('label').toLowerCase()
        if (cat == "bank" || cat == "other") {
            $("#phoneInputPrepend").hide()
            $("input[name=setAccountNumber]").unbind()
            $("#labelAccNumb").text("Nomor Rek.")
            const max = $("select[id=setAccountBank]").find(':selected').data('max')
            const min = $("select[id=setAccountBank]").find(':selected').data('min')
            if (max == 0) {
                $("input[name=setAccountNumber]").removeAttr("minlength").removeAttr("maxlength")
                return false
            }
            $("input[name=setAccountNumber]").attr("minlength", min).attr("maxlength", max)
        } else {
            $("#phoneInputPrepend").show()
            $("#labelAccNumb").text("Nomor Ponsel")
            $("input[name=setAccountNumber]").removeAttr("minlength").removeAttr("maxlength")
            $("input[name=setAccountNumber]").on('input propertychange paste', function () {
                var reg = /^0+/gi
                if (this.value.match(reg)) {
                    this.value = this.value.replace(reg, '')
                }
            });
        }
    })

    jQuery.validator.addMethod("validatePhone", function(value, element){
        if ($('select[id=setAccountBank] :selected').parent().attr('label') != "bank" && $("input[name=setAccountNumber]").val()[0] != 8) {
            return false;
        } else {
            return true;
        }
    }, "Nomor ponsel tidak valid, mohon periksa kembali nomor ponsel anda.");

    function allowedKey(event, regex) {
        let reg = new RegExp(regex);
        let k = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!reg.test(k)) {
            event.preventDefault();
            return false;
        }
    }

    $('input[name=setAccountName]').bind('keypress input propertychange paste', function(e) {
        return allowedKey(e, "^[a-zA-Z ]+$")
    });

    $('input[name=setAccountNumber]').bind('keypress input propertychange paste', function(e) {
        return allowedKey(e, "^[0-9]+$")
    });

    $("form[id=setBankForm]").validate({
        onkeyup: false,
        rules: {
            bank: { required: true },
            setAccountName: { required: true },
            setAccountNumber: { required: true },
        },
        messages: {
            bank: {
                required: "The Bank field is required.",
            },
            setAccountName: {
                required: "The Account Name field is required.",
            },
            setAccountNumber: {
                required: "The Account Number field is required.",
            }
        },
        errorPlacement: function (error, element) {
            let error_id = element.attr("id")
            error.insertAfter($(`span[id=${error_id}-error]`))
        },
        highlight: function(element, errorClass) {
            $(element).closest(".form-control").addClass("is-invalid");
        },
        unhighlight: function(element, errorClass) {
            $(element).closest(".form-control").removeClass("is-invalid").addClass("is-valid");
        }
    });

    $("form[id=setBankForm]").on("submit", function (e) {
        e.preventDefault()
        $.ajax({
            type: "POST",
            url: "{{ route('profile.addBankMember') }}",
            data: {
                _token: "{{ csrf_token() }}",
                bank: $("select[name=setAccountBank]").val(),
                accountName: $("input[name=setAccountName]").val(),
                accountNumber: $("input[name=setAccountNumber]").val()
            },
            success: function (response) {
                if (response.success) {
                    location.reload()
                } else {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'error',
                        title: response.error
                    });
                }
            }
        });
    });
</script>
<script>
    $(document).ready(function () {
            });

	function transaksiPaymentSwiper() {
		var transactionPaymentSwiper = new Swiper(".transaction-payment-swiper", {
			slidesPerView: 4,
			slidesPerGroup: 3,
			spaceBetween: 10,
			breakpoints: {
				768: {
					slidesPerView: 4,
					spaceBetween: 10,
				},
				320: {
					slidesPerView: 3,
					spaceBetween: 10,
				},
			},
			navigation: {
				nextEl: ".navigation-next--payment",
				prevEl: ".navigation-prev--payment",
			},
			observer: true,
			observeParents: true,
		})
	}

	transaksiPaymentSwiper();

	function pushStateUrlOnTabShow(elementId) {
		(history.pushState) ? history.pushState(null, null, `#${elementId}`): location.hash = `#${elementId}`;
	}

	$(".button-pills").on('click', function(e) {
		e.preventDefault();
		pushStateUrlOnTabShow(this.id.split('-')[1]);
		$('.tabs-sidebar').removeClass('active');
		$('#' + this.id.split('-')[1] + 'Sidebar li').addClass('active');
		transaksiPaymentSwiper();
	});

	if (location.hash == "#point") {
		$('#nav-point-tab').click()
		$('.tabs-sidebar').removeClass('active');
		$('#pointSidebar li').addClass('active');
	} else if (location.hash == "#withdraw") {
		$('#nav-withdraw-tab').click();
		$('.tabs-sidebar').removeClass('active');
		$('#withdrawSidebar li').addClass('active');
	} else {
		(history.pushState) ? history.pushState(null, null, '#deposit'): location.hash = '#deposit';
		$('.tabs-sidebar').removeClass('active');
		$('#depositSidebar li').addClass('active');
		transaksiPaymentSwiper();
	}

	$('input[name=pointAmount], #depositAmount, #withdrawAmount').bind('keypress', function(event) {
		return allowedKey(event, "^[0-9]+$")
	});

    function checkDepoStatus(trxId) {
        $.ajax({
            type: "POST",
            url: "/transaction/checkDepositStatus",
            data: {
                _token: "{{ csrf_token() }}",
                trxId: trxId
            },
            success: function (response) {
                if (response.success) {
                    $.showPaydiaQr(null, false)
                    location.reload();
                }
            }
        });
    }

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        let activeTab = $(this).attr("data-type");
        amountPicker(activeTab)
    })
    amountPicker("Auto")
    amountPicker("Auto")
    amountPicker("Manual")
    function getAvailablePromo(bonusType, paymentType, depositType) {
        let loader = $(`span[id=promoListLoader${depositType}]`)
        let promoList = $(`select[name=promoList${depositType}]`)
        let promoInfoText = $(`span[id=promoInfoText${depositType}]`)
        let providerCodeSelect = $(`select[name=providerCode${depositType}]`)
        let route = {
            promo: "{{ route('transaction.getAvailablePromo') }}",
            cashback: "{{ route('transaction.getAvailableCashback') }}",
        }
        $(`[name=promoAmountAuto]`).text(`+${numberAmount(0)}`)
        if (bonusType == 'noPromo') {
            promoList.hide()
            providerCodeSelect.hide()
            promoInfoText.hide()
            return;
        }
        $.ajax({
            type: "POST",
            url: route[bonusType],
            data: {
                _token: "{{ csrf_token() }}",
                paymentType: paymentType
            },
            beforeSend: function (e) {
                loader.show()
                promoList.hide()
                providerCodeSelect.hide()
                promoInfoText.hide()
            },
            success: function (response) {
                if (!$.trim(response.data)) {
                    $(`select[name=bonusType${depositType}]`).val('noPromo')
                    promoInfoText.html(response.error)
                    promoInfoText.show()
                    loader.hide()
                } else {
                    let html = '';
                    if (bonusType == 'promo') {
                        html += '<option value="" data-promorate="0">Pilih Promosi</option>';
                        $.each(response.data, function (i, v) {
                            html += `<option value="${v.uuid}" data-providerlist="${JSON.parse(v.game_list)}" data-promorate="${v.promo_rate}" data-maxdeposit="${v.max_deposit}" data-mindeposit="${v.min_deposit}" data-fixbonus="${v.fix_bonus}">${v.event_title}</option>`
                        });
                        promoList.html(html)
                        promoList.show()
                        promoList.on('change', function (e) {
                            let providerNameList = "{&quot;AFB&quot;:&quot;AFB&quot;,&quot;M88&quot;:&quot;OPUS Sports&quot;,&quot;SBO&quot;:&quot;SBO&quot;,&quot;SAB&quot;:&quot;SABA SPORTS&quot;,&quot;CMD&quot;:&quot;CMD368&quot;,&quot;JLI&quot;:&quot;JILI&quot;,&quot;JDB&quot;:&quot;JDB&quot;,&quot;FAC&quot;:&quot;FA CHAI&quot;,&quot;SPR&quot;:&quot;SPRIBE&quot;,&quot;NLC&quot;:&quot;NoLimit City&quot;,&quot;AFG&quot;:&quot;AFB GAMING&quot;,&quot;RED&quot;:&quot;RED TIGER&quot;,&quot;FSP&quot;:&quot;FASTSPIN&quot;,&quot;PGS&quot;:&quot;PG SOFT&quot;,&quot;PLS&quot;:&quot;PLAYSTAR&quot;,&quot;CQ9&quot;:&quot;CQ9&quot;,&quot;MIC&quot;:&quot;MICROGAMING&quot;,&quot;HCG&quot;:&quot;GB GAME&quot;,&quot;PRA&quot;:&quot;PRAGMATIC PLAY&quot;,&quot;ADV&quot;:&quot;ADVANTPLAY&quot;,&quot;SPD&quot;:&quot;SPADE GAMING&quot;,&quot;HBN&quot;:&quot;HABANERO&quot;,&quot;JOK&quot;:&quot;JOKER GAMING&quot;,&quot;NEX&quot;:&quot;NEXTSPIN&quot;,&quot;ORS&quot;:&quot;OG SLOT&quot;,&quot;PLA&quot;:&quot;PLAYTECH SLOT&quot;,&quot;TOG&quot;:&quot;4D&quot;,&quot;EVO&quot;:&quot;EVOLUTION&quot;,&quot;LG8&quot;:&quot;LG88&quot;,&quot;WEC&quot;:&quot;WE CASINO&quot;,&quot;WMC&quot;:&quot;WMCASINO&quot;,&quot;PLC&quot;:&quot;PRAGMATIC PLAY LC&quot;,&quot;PCA&quot;:&quot;PLAYTECH CASINO&quot;,&quot;ORI&quot;:&quot;OG CASINO&quot;,&quot;AFC&quot;:&quot;AFB CASINO&quot;,&quot;SAG&quot;:&quot;SA GAMING&quot;,&quot;GD8&quot;:&quot;GD88&quot;,&quot;SEG&quot;:&quot;SEXY GAMING&quot;,&quot;DRG&quot;:&quot;DG CASINO&quot;,&quot;WE1&quot;:&quot;WE1 POKER&quot;,&quot;PKQ&quot;:&quot;POKER Q&quot;,&quot;GA2&quot;:&quot;GA28&quot;,&quot;COD&quot;:&quot;COD GAMING&quot;,&quot;LVG&quot;:&quot;LIVE GAMES&quot;,&quot;SV3&quot;:&quot;SV388&quot;,&quot;MKI&quot;:&quot;MIKI&quot;}"
                            let providerStatusList = "{&quot;AFB&quot;:1,&quot;M88&quot;:1,&quot;SBO&quot;:1,&quot;SAB&quot;:3,&quot;CMD&quot;:1,&quot;JLI&quot;:1,&quot;JDB&quot;:1,&quot;FAC&quot;:1,&quot;SPR&quot;:1,&quot;NLC&quot;:1,&quot;AFG&quot;:1,&quot;RED&quot;:1,&quot;FSP&quot;:1,&quot;PGS&quot;:1,&quot;PLS&quot;:1,&quot;CQ9&quot;:1,&quot;MIC&quot;:1,&quot;HCG&quot;:1,&quot;PRA&quot;:1,&quot;ADV&quot;:1,&quot;SPD&quot;:1,&quot;HBN&quot;:1,&quot;JOK&quot;:1,&quot;NEX&quot;:1,&quot;ORS&quot;:1,&quot;PLA&quot;:3,&quot;TOG&quot;:1,&quot;EVO&quot;:1,&quot;LG8&quot;:1,&quot;WEC&quot;:1,&quot;WMC&quot;:1,&quot;PLC&quot;:1,&quot;PCA&quot;:3,&quot;ORI&quot;:1,&quot;AFC&quot;:1,&quot;SAG&quot;:1,&quot;GD8&quot;:4,&quot;SEG&quot;:1,&quot;DRG&quot;:1,&quot;WE1&quot;:1,&quot;PKQ&quot;:5,&quot;GA2&quot;:1,&quot;COD&quot;:3,&quot;LVG&quot;:1,&quot;SV3&quot;:3,&quot;MKI&quot;:1}"
                            providerNameList = JSON.parse(providerNameList.replace(/&quot;/g,'"'))
                            providerStatusList = JSON.parse(providerStatusList.replace(/&quot;/g,'"'))
                            let status = ["DISABLED", "ACTIVE", "MAINTENANCE", "COMING SOON", "NEW", "HIDE", "PROMO", "HOT"]
                            let providerList = promoList.find(":selected").attr('data-providerlist').split(",")
                            let providerSelect = $(`select[name=providerCode${depositType}]`)
                            let html = '<option value="">Pilih Provider</option>';
                            $.each(providerList, function (i, v) {
                                let textVal = ($.inArray(providerStatusList[v], [2, 3]) != -1) ? `(${status[providerStatusList[v]]})` : '';
                                html += `<option value="${v}">${providerNameList[v]} ${textVal}</option>`
                            });
                            providerSelect.html(html)
                            providerSelect.show()
                        })
                    }
                    if (bonusType == 'cashback') {
                        $.each(response.data, function (i, v) {
                            html += `<option value="${v.uuid}" data-promorate="0">[${v.category_name}] - ${v.title}</option>`
                        });
                        promoList.html(html)
                        promoList.show()
                        promoList.unbind()
                    }
                    loader.hide()
                }
            },
            error: function (e) {
                promoInfoText.hide()
                loader.hide()
            }
        });
    }

    function amountPromo(type) {
        let promo = $(`select[name=promoList${type}]`).find(':selected')
        let rate = promo.attr('data-promorate')
        let maxDepo = promo.attr('data-maxdeposit')
        let fixBonus = promo.attr('data-fixbonus')
        let amount = $(`input[name=amount${type}]`).val()
        let result = (amount > parseFloat(maxDepo)) ? fixBonus : (parseFloat(rate) == 0) ? fixBonus : amount * parseFloat(rate)
        result = (amount == 0) ? 0 : result
        result = (isNaN(result)) ? 0 : result
        $(`[name=promoAmount${type}]`).text(`+${numberAmount(result)}`)
    }

    function amountPicker(activeTab) {
        $(`span[name=cstm-danger${activeTab}]`).text('').hide();
        $(`input[name=amount${activeTab}]`).val('').unbind()
        $(`span[name=amountPick${activeTab}]`).removeClass("btn-secondary");
        $(`span[name=amountPick${activeTab}]`).addClass("btn-outline-secondary");
        $(`[name=amnt-close${activeTab}]`).hide();

        $(`input[id=depositShowAmount${activeTab}]`).on("keyup", function () {
            if(event.which >= 37 && event.which <= 40) return
            $(this).val(function(index, value) {
                return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            });
            $(this).siblings(`input[id=depositAmount${activeTab}]`).val($(this).val().replace(/,/g, ''))
            const amountPick = $(`span[name=amountPick${activeTab}]`)
            $(`[name=amnt-close${activeTab}]`).hide()
            amountPick.addClass("btn-outline-secondary").removeClass("btn-secondary")
            amountPick.find(`[name=cstm-danger${activeTab}]`).text('').hide()
            amountPromo(activeTab)
        });

        $(`span[name=amountPick${activeTab}]`).unbind().on("click", function () {
            let value = $(this).attr("value")
            if (!$(`[name=amnt-close${activeTab}]`).is(':visible')) {
                $(`input[name=amount${activeTab}]`).val(0)
            }
            $(`[name=amnt-close${activeTab}][for=${value}]`).show()
            let amountValue = $(`input[name=amount${activeTab}]`).val()
            if (amountValue > 0) {
                value = parseInt(amountValue) + parseInt(value)
            }
            let clickCount = $(this).find(`[name=cstm-danger${activeTab}]`).text()
            let countClickUp = (clickCount == 0) ? 1 : parseInt(clickCount) + 1
            $(this).find(`[name=cstm-danger${activeTab}]`).text(countClickUp).show()
            $(this).removeClass("btn-outline-secondary")
            $(this).addClass("btn-secondary")
            $(`input[id=depositShowAmount${activeTab}]`).val(numberAmount(value))
            $(`input[name=amount${activeTab}]`).val(value)
            amountPromo(activeTab)
        });

        $(`[name=amnt-close${activeTab}]`).unbind().on("click", function () {
            let value = $(this).attr('for');
            let clickCount = parseInt($(`[name=cstm-danger${activeTab}][for=${value}]`).text())
            if (clickCount != 0) {
                if (clickCount == 1) {
                    $(`[name=cstm-danger${activeTab}][for=${value}]`).text(clickCount - 1).hide()
                    $(`[name=amnt-close${activeTab}][for=${value}]`).hide()
                    $(`span[name=amountPick${activeTab}][value=${value}]`).removeClass("btn-secondary")
                    $(`span[name=amountPick${activeTab}][value=${value}]`).addClass("btn-outline-secondary")
                } else {
                    $(`[name=cstm-danger${activeTab}][for=${value}]`).text(clickCount - 1)
                }
            }
            let amountValue = $(`input[name=amount${activeTab}]`).val()
            $(`input[id=depositShowAmount${activeTab}]`).val(numberAmount(amountValue - value))
            $(`input[name=amount${activeTab}]`).val(amountValue - value)
            amountPromo(activeTab)
        })
    }

    $('a[name=copyAddress]').on('click', function (e) {
        e.preventDefault();
        const code = this.id;
        const htmlExist = $(this).html();
        const buttonText = $("span[name=buttonCopy]").html()
        const addressText = $(`#addressText-${code}`)[0];
        $("span[name=buttonCopy]").html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="loading"></span>`)
        let temp = document.createRange();
        temp.selectNodeContents(addressText)
        let select = window.getSelection();
        select.removeAllRanges();
        select.addRange(temp)
        document.execCommand("copy");
        setTimeout(() => {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: "Berhasil di copy.."
            });
            $(this).html(htmlExist)
            $("span[name=buttonCopy]").html(buttonText)
        },1000)
    });
</script>
  <script>
    $('.bankOption').hide();
    $('#bankSelectManual').change(function() {
        if ($(this).val() == "") {
            $('.bankOption').hide()
            $(".walletDest").hide()
            return false
        }
        let payment = $('select[id=bankSelectManual] :selected').parent().attr('label')
        $("select[name=bonusTypeManual]").val('noPromo').trigger('change')
        $(`[name=promoAmountManual]`).text(`+${numberAmount(0)}`)
        showBankDetail($(this).val());
    });

    function showBankDetail(val) {
        $(".walletDest").show()
        const cat = $('#bankSelectManual :selected').parent().attr('label');
        const selected = $('#bankSelectManual').find('option:selected');
        const min = selected.data('min')
        const max = selected.data('max')
        const rate = selected.data('rate')
        const code = selected.data('code')
        const currency = "IDR"
        $('input[id=depositAmount]').attr('min', min)
        $('input[id=depositAmount]').attr('max', max)
        $('.bankOption').hide();
        $('#' + cat + '-' + val).show();
        if (cat == "phonecredit") {
            $("#depositAmount").attr("placeholder", "...")
            $("#amountDesc").text("Contoh: setoran deposit 50.000, tulis Rp 50 (3 digit dihilangkan)")
            if (rate == 100) {
                $(".walletDest").hide()
                $("select[name=walletDestination]").val("main").trigger('change')
            }
            $('label[id=notesLabel]').html("Serial Number / <br/> Nomor pengirim")
            $('[id=chooseMode]').addClass("input-group")
            $('[id=chooseMode] > .input-group-prepend').show()
            $("span[id=chooseModeText]").text("SN")
            $("#notes").attr("placeholder", "Serial Number")
            $("span[id=chooseModeSN]").on("click", function(e) {
                $("span[id=chooseModeText]").text("SN")
                $("input[name=phoneCreditMode]").val("")
                $("#notes").attr("placeholder", "Serial Number")
            })
            $("span[id=chooseModeHP]").on("click", function(e) {
                $("span[id=chooseModeText]").text("HP")
                $("input[name=phoneCreditMode]").val("91dc2695-4dcd-4be2-90dd-e7d8387b3e35")
                $("#notes").attr("placeholder", "Nomor pengirim")
            })
            $("#amountInput").removeClass().addClass("col-lg-12")
            $("#multiplierAmount").hide()
        } else if (cat == "crypto") {
            $('[id=chooseMode]').removeClass("input-group")
            $('[id=chooseMode] > .input-group-prepend').hide()
            $('label[id=notesLabel]').text("Keterangan")
            $("#notes").attr("placeholder", "Keterangan")
            $("#amountDesc").text("Jumlah deposit Anda akan diproses sesuai dengan rate yang tertera")
            $("#depositAmount").attr("placeholder", code.toUpperCase())
            $("#amountInput").removeClass().addClass("col-lg-5")
            $("#multiplierAmount").show()
        } else {
            $("#amountDesc").text("Contoh: setoran deposit 50.000, tulis Rp 50 (3 digit dihilangkan)")
            $("#depositAmount").attr("placeholder", "...")
            $('label[id=notesLabel]').text("Keterangan")
            $('[id=chooseMode]').removeClass("input-group")
            $('[id=chooseMode] > .input-group-prepend').hide()
            $("#notes").attr("placeholder", "Keterangan")
            $("#amountInput").removeClass().addClass("col-lg-12")
            $("#multiplierAmount").hide()
        }
    }

    $("form[id=formDepositManual]").validate({
        onkeyup: false,
        rules: {
            bankManual: {
                required: true
            },
            amountManual: {
                required: true
            },
            promoListManual: {
                required: function(e) {
                    return $("select[name=bonusTypeManual]").val() != "noPromo"
                }
            },
            providerCodeManual: {
                required: function(e) {
                    return $("select[name=promoListManual]").val() != ""
                }
            }
        },
        messages: {
            bankManual: {
                required: "The Bank field is required."
            },
            amountManual: {
                required: "The Amount field is required.",
                min: "Deposit tidak boleh kurang dari minimal.",
                max: "Deposit tidak boleh melebihi maximal."
            },
            promoListManual: {
                required: "The Promotion field is required."
            },
            providerCodeManual: {
                required: "The Provider field is required."
            },
        },
        errorPlacement: function(error, element) {
            let error_id = element.attr("id")
            error.insertAfter($(`span[id=${error_id}-error]`))
        },
        highlight: function(element, errorClass) {
            $(element).closest(".form-control").addClass("is-invalid");
        },
        unhighlight: function(element, errorClass) {
            $(element).closest(".form-control").removeClass("is-invalid").addClass("is-valid");
        },
    });

        $("form[id=formDepositManual]").on("submit", function(e) {
        e.preventDefault();
        if ($("form[id=formDepositManual]").valid()) {
            const files = $("input[name=proofManual]")[0].files;
            let formData = new FormData();

            formData.append('_token', "{{ csrf_token() }}");
            formData.append('bankMember', $("select[name=bankMemberManual]").val());
            formData.append('bank', $("select[name=bankManual]").val());
            formData.append('providerCode', $("select[name=providerCodeManual]").val());
            formData.append('promoUuid', $("select[name=promoListManual]").val());
            formData.append('bonusType', $("select[name=bonusTypeManual]").val());
            formData.append('walletDestination', $("select[name=walletDestinationManual]").val());
            formData.append('amount', $("input[name=amountManual]").val());
            formData.append('notes', $("input[name=notesManual]").val());

            if (files.length > 0) {
                formData.append('proof', files[0]);
            }
            $.ajax({
                type: "POST",
                url: "{{ route('deposit') }}",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                },
                success: function(response) {
                    $('.form-control').removeClass('is-valid').removeClass('is-invalid');
                    $('.bankOption').hide();
                    $(".walletDest").hide();
                    if (response.status == true) {
                        Swal.fire({
                            icon: 'success',
                            title: "Berhasil.",
                            html: response.messages,
                            timerProgressBar: true,
                            showButtonConfirm: false,
                            timer: 2000,
                        }).then(() => {
                            location.reload();
                        });
                    } else if (response.status == 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: "Berhasil.",
                            html: response.messages,
                            timerProgressBar: true,
                            showButtonConfirm: false,
                            timer: 2000,
                        }).then(() => {
                            $('#pendingPaymentQR').modal('show');
                            $('#paymentQRiframe').attr('src', "{{ url('/payment/iframe') }}?data=" + encodeURIComponent(response.qr_data));
                        });
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: "Perhatian.",
                            html: response.messages,
                            timerProgressBar: true,
                            showButtonConfirm: false,
                            timer: 2000,
                        });
                    }
                },
                error: function(e) {
                    $('.form-control').removeClass('is-valid').removeClass('is-invalid');
                    $('.bankOption').hide();
                    $(".walletDest").hide();
                    let msg = '';
                    $.each(e.responseJSON.errors, function(index, valueOfElement) {
                        msg += valueOfElement + '<br />';
                    });
                    Swal.fire({
                        icon: 'error',
                        title: "Perhatian.",
                        html: (msg == '') ? "Mohon maaf atas ketidaknyamanannya, halaman ini akan dimuat ulang dalam #1 detik" : msg,
                        timerProgressBar: true,
                        showButtonConfirm: false,
                        timer: 2000
                    });
                    if (msg == '') {
                        location.reload();
                    }
                }
            });
        }
    });
    $('#pendingPaymentQR').on('hidden.bs.modal', function () {
    location.reload();
    });
    $('#proof').bind('change', function() {
        const imgSize = (this.files[0].size);
        if (imgSize > 1024000) {
            Swal.fire("Perhatian.", "Ukuran gambar harus kurang dari 1Mb", 'error');
            $(this).val("");
        }
    });

    $("select[name=bonusTypeManual]").on("change", function(e) {
        let bank = $('select[id=bankSelectManual] :selected')
        if (bank.val() == '') {
            bank.addClass('is-invalid')
            $(`span[id=bankSelectManual-error]`).text("The Bank field is required.")
            $(`select[name=bonusTypeManual]`).val('noPromo')
            setTimeout(() => {
                bank.removeClass("is-invalid")
                $("span[id=bankSelectManual-error]").text("")
            }, 2500);
            return;
        }
        let payment = bank.parent().attr('label')
        getAvailablePromo($(this).val(), payment, "Manual")
    })

    $("select[name=promoListManual]").on('change', function() {
        amountPromo("Manual")
        $('input[name=amountManual]').attr('min', $(this).find(":selected").attr('data-mindeposit'))
    })
</script>
<script>
    function getEvent() {
        $.ajax({
            type: "GET",
            url: "/transaction/getEvent",
            success: function (res) {
                $(`#event-banner_url`).attr("src", res.banner_url)
                $(`#event-title`).text(res.title)
                $(`#event-periode`).text(`${new Date(res.start_date).toLocaleString('en-GB', { year: 'numeric', month: 'short', day: 'numeric'})} - ${new Date(res.end_date).toLocaleString('en-GB', { year: 'numeric', month: 'short', day: 'numeric'})}`)
                $(`#event-accumulation`).text(`${res.type} - ${numberAmount(~~res.accumulation)} - 1 Point`)
                $(`#event-description`).html(res.description)
            }
        });
    }

    function getPlayerPoint() {
        $.ajax({
            type: "GET",
            url: "/transaction/getPlayerPoint",
            success: function (res) {
                $(`#player-current_accumulation`).text(~~res.current_accumulation)
                $(`#player-point`).text(`${res.point} Point`)
            }
        });
    }

    function getReleasePoint() {
        $.ajax({
            type: "GET",
            url: "/transaction/getReleasePoint",
            success: function (res) {
                if (res.success == false) {
                    $("#tbody-getReleasePoint").html(`
                        <tr>
                            <td class="text-center" colspan="4">
                                Tidak ada data
                            </td>
                        </tr>
                    `)
                    return false;
                }
                let row = '';
                $.each(res, function (key, value) {
                    let release_date = value.released_date ? new Date(value.released_date).toLocaleString('en-GB', { year: 'numeric', month: 'short', day: 'numeric'}) : '-';
                    row += `
                    <tr>
                        <td class="text-center">
                            ${new Date(value.created_date).toLocaleString('en-GB', { year: 'numeric', month: 'short', day: 'numeric'})}
                        </td>
                        <td class="text-center">${value.total_point}</td>
                        <td class="text-center">
                            <div class="table-status ${value.status.toLowerCase()}">${value.status}</div>
                        </td>
                        <td class="text-center">
                            ${release_date}
                        </td>
                    </tr>
                    `
                });
                $("#tbody-getReleasePoint").html(row)
            }
        });
    }

    $('a[id="nav-point-tab"]').on('shown.bs.tab', function (e) {
        getEvent()
        getPlayerPoint()
        getReleasePoint()
    })

    function tukarPoint(_this){
        var point = $("input[name='pointAmount']").val();
        var url = "/transaction/doTukarPoint";
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                point: point
            },
            beforeSend: function() {
                $(_this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
            },
            success: function(result) {
                if (result.success) {
                    Swal.fire(
                        'Success',
                        result.msg,
                        'success'
                    );
                } else {
                    Swal.fire(
                        'Failed !',
                        result.msg,
                        'error'
                    );
                }
                $(_this).text("Kirim");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error: ' + textStatus);
                $(_this).text("Kirim");
            }
        });
    }
</script>
 <script>
    $.fn.digits = function(){
        return this.each(function(){
            $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
        })
    }

    $("input[id=withdrawShowAmount]").on("keyup", function () {
        if(event.which >= 37 && event.which <= 40) return
        $(this).val(function(index, value) {
            return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
        })
        $(this).siblings('input[id=withdrawAmount]').val($(this).val().replace(/,/g, ''))
    });

    $("#wdAmountAll").on("click", function (e) {
        e.preventDefault()
        const maxWd = parseFloat($("#withdrawAmount").attr('max'));
        let result = ~~window.mainBalance
        if (result > maxWd) {
            result = maxWd
        }
        $("#withdrawShowAmount").val(result).keyup()
        $("#withdrawAmount").val(result)
    });

    $("form[id=formWithdraw]").validate({
		onkeyup: false,
        rules: {
            amount: { required: true },
        },
        messages:{
            amount: {
                required: "The :attribute field is required.",
                min: "Withdraw tidak boleh kurang dari " + numberAmount($("input[id=withdrawAmount]").attr("min")),
                max: "Withdraw tidak boleh melebihi " + numberAmount($("input[id=withdrawAmount]").attr("max"))
            },
        },
		errorPlacement: function (error, element) {
			let error_id = element.attr("id")
			error.insertAfter($(`span[id=${error_id}-error]`))
		},
        highlight: function(element, errorClass) {
            $(element).closest(".form-control").addClass("is-invalid");
        },
        unhighlight: function(element, errorClass) {
            $(element).closest(".form-control").removeClass("is-invalid").addClass("is-valid");
        },
    });

    $("form[id=formWithdraw]").on("submit", function (e) {
        e.preventDefault()
        if ($("form[id=formWithdraw]").valid()) {
            const payloads = {
                _token : "{{ csrf_token() }}",
                bankDestination : $("select[name=bankDestination]").val(),
                amount : $("input[id=withdrawAmount]").val()
            }

            $("#submit-withdraw").prop("disabled", true);
            $("#submit-withdraw").html('Processing...');

            $.ajax({
                type: "POST",
                url: "{{ route('withdraw') }}",
                data: payloads,
                beforeSend: function () {
                },
                success: function (response) {
                    $('.form-control').removeClass('is-valid').removeClass('is-invalid')
                    $("form[id=formWithdraw]")[0].reset()
                    if (response.success == true) {
                        Swal.fire({
                            icon: 'success',
                            title: "Berhasil.",
                            html: response.messages,
                            timer: 2000
                        })
                        $("a[name=refreshWallet]").click()
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: "Perhatian.",
                            html: response.messages,
                            timer: 2000
                        })
                    }
                    $("#submit-withdraw").prop("disabled", false);
                    $("#submit-withdraw").html('Kirim');
                }
            });
        }
	})
</script>
@endpush