<?php
session_start();
require_once(__DIR__ . "/../../config/db.php");
require_once(__DIR__."/../../session.php");
include(__DIR__ . "/../layouts/header.php");

?>

    <link href="/Content/zelma-v2-beta-mobile-css" rel="stylesheet"/>
    <link href="/Content/Wallet/zelma-v2-beta-mobile-withdrawal-css" rel="stylesheet"/>
    <link href="/Content/Theme/zelma-v2-beta-mobile-<?= $config['theme']; ?>-css" rel="stylesheet"/>

</head>

<body data-online-id="YAa/y0vjJWj8YL2l0OB9sQd/71VqoeyqfkBEC4qb5FADDzaEQE7Xxw=="
      data-route="withdrawal" style="--expand-icon-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/expand.gif?v=20241125);
      --collapse-icon-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/collapse.gif?v=20241125);
      --play-icon-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/play.png?v=20241125);
      --desktop-icon-src: url(//d33egg70nrp50s.cloudfront.net/Images/icons/desktop-white.png?v=20241125);
      --jquery-ui-444444-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_444444_256x240.png?v=20241125);
      --jquery-ui-555555-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_555555_256x240.png?v=20241125);
      --jquery-ui-ffffff-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_ffffff_256x240.png?v=20241125);
      --jquery-ui-777620-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_777620_256x240.png?v=20241125);
      --jquery-ui-cc0000-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_cc0000_256x240.png?v=20241125);
      --jquery-ui-777777-src: url(//d33egg70nrp50s.cloudfront.net/Images/jquery-ui/ui-icons_777777_256x240.png?v=20241125);">


<?php include(__DIR__ . "/../layouts/navbar.php");
?>

<div class="standard-form-container withdrawal-container">
    <div class="container">
        <div class="row">
            <div id="withdrawal_container" class="col-sm-12">
                <div class="tab-menu-background-container">
                    <div class="tab-menu-container">
                        <a href="/mobile/deposit" data-active="false">
                            <i data-icon="deposit" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/deposit.svg?v=20241125);--active-image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/deposit-active.svg?v=20241125);"></i>
                            Deposit
                        </a>
                        <a href="/mobile/withdrawal" data-active="true">
                            <i data-icon="withdrawal" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/withdrawal.svg?v=20241125);--active-image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/withdrawal-active.svg?v=20241125);"></i>
                            Penarikan
                        </a>
                    </div>
                </div>

                <form action="/Wallet/BankWithdrawal" id="withdrawal_form" method="post" name="withdrawalForm">
                    <input type="hidden" name="csrf_token" value="<?= $csrf_token; ?>">
                        <div class="form-group withdrawal-form-group">
                            <label for="PaymentMethod">Metode Pembayaran</label>
                            <div id="payment_method_selection" class="payment-method-selection">
                                    <div>
                                        <input type="radio" name="PaymentType" id="payment_method_BANK" value="BANK" checked />
                                        <label for="payment_method_BANK">
                                            <img loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/payment-types/BANK.svg?v=20241125" />
                                            <span>Bank</span>
                                        </label>
                                    </div>
                            </div>
                            <span class="field-validation-valid" data-valmsg-for="PaymentType" data-valmsg-replace="true"></span>
                        </div>
                        <div class="balance-info-container">
                            <a href="/mobile/history/withdrawal">Riwayat Penarikan</a>
                            <div class="total-balance">
                                <p>Saldo Saya</p>
                                <span>
                                    <?= htmlspecialchars(number_format($total_saldo, 0, ',', '.')); ?>
                                </span>
                            </div>
                        </div>
                        <hr class="withdrawal-gap" />
                        <div class="form-group withdrawal-form-group">
                            <label for="Amount">
                                Jumlah Penarikan
                                <span data-section="asterisk">*</span>
                            </label>
                            <div data-section="wd-amount">
                                <div data-field="amount" class="withdrawal-amount" data-currency="idr">
                                    <!--<div class="currency-label">IDR</div>-->
                                    <input type="text" class="form-control withdrawal_amount_display" inputmode="decimal" />
                                    <input autocomplete="off" class="form-control withdrawal_amount_input" data-val="true" data-val-required="The Amount field is required." id="Amount" inputmode="decimal" name="Amount" type="hidden" value="" />
                                    <div class="currency-suffix">IDR</div>
                                </div>
                            </div>
                        </div>
                    <div class="form-group withdrawal-form-group">
                        <label for="ToAccount">
                            Pilih Bank Anda
                            <span data-section="asterisk">*</span>
                        </label>
                        <div class="player-account-container">
                            <div class="player-account-input">
                                <select name="ToAccount" id="withdrawal_account_select" class="form-control"
                                    data-val="true"
                                    data-val-required="The PlayerBankAccountNumber field is required."
                                    data-check-for-withdrawal-availability="true">
                                    <option value="<?= $user['BankName']; ?>"
                                        data-account-holder="<?= $user['BankHolder']; ?>"
                                        data-account-number="<?= $user['BankNumber']; ?>"
                                        data-bank-logo="//dsuown9evwz4y.cloudfront.net/Images/bank-thumbnails/<?= $user['BankName']; ?>.webp?v=20240813">
                                        <?= $user['BankName']; ?> | <?= $user['BankNumber']; ?>
                                    </option>
                                </select>
                                <span class="field-validation-valid" data-valmsg-for="PlayerBankAccountNumber" data-valmsg-replace="true"></span>
                            </div>
                            <div class="player-account-add-button" id="add_payment_account_button">
                                <img loading="lazy" src="//dsuown9evwz4y.cloudfront.net/Images/icons/wallet/plus.svg?v=20240813" />
                            </div>
                        </div>
                    </div>
                        <!--<div class="withdrawal-summary-container">-->
                        <!--    <div class="withdrawal-summary-header" id="withdrawal_summary_header">-->
                        <!--        <span class="summary-title">Jumlah yang ditransfer</span>-->
                        <!--        <span class="summary-transfer-amount transfer-amount transfer_amount"></span>-->
                        <!--        <span class="toggler" id="withdrawal_summary_detail_toggler">-->
                        <!--            <i class="glyphicon glyphicon-chevron-down"></i>-->
                        <!--        </span>-->
                        <!--    </div>-->
                        <!--    <div class="withdrawal-summary-content" id="withdrawal_summary_content">-->
                        <!--        <div class="withdrawal-summary-body">-->
                        <!--            <span class="withdrawal-summary-title">Rincian Penarikan</span>-->
                        <!--            <div class="withdrawal-detail-container">-->
                        <!--                <div class="withdrawal-detail-item">-->
                        <!--                    <span>Jumlah yang ditransfer</span>-->
                        <!--                    <span class="transfer-amount transfer_amount"></span>-->
                        <!--                </div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--        <div class="withdrawal-summary-footer">-->
                        <!--            <span>Sisa Saldo</span>-->
                        <!--            <span id="remaining_balance"></span>-->
                        <!--        </div>-->
                        <!--        <div class="remarks-container">-->
                        <!--            <i>!</i>-->
                        <!--            Biaya admin akan diinfokan ketika proses transaksi telah selesai di proses.-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                        <div class="standard-button-group">
                                <input type="submit" class="standard-secondary-button" value="TARIK" />
                        </div>
                </form>
                <div id="available_payment_accounts_popup" class="available-payment-accounts-popup">
                    <div id="available_payment_accounts_container" class="available-payment-accounts-container" data-default-payment-account-icon="//d33egg70nrp50s.cloudfront.net/Images/bank-thumbnails/default.webp?v=20241125"></div>
                    </div>
                    <div id="payment_account_popup" class="available-payment-accounts-popup">
                        <div class="available-payment-accounts-container">
                            <button type="button" id="close_payment_account_popup" class="close-button" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <div id="popup_loader_container" class="popup-loader-container display">
                                <div class="loader-spinner">
                                    <span></span>
                                </div>
                            </div>
                    
                            <div id="payment_account_container" class="payment-account-container"></div>
                        </div>
                    </div>
                <div id="otp_popup_container"></div>
            </div>
        </div>
    </div>
</div>

<?php
include(__DIR__.'/../layouts/footer.php');
include(__DIR__.'/../layouts/sidebar.php');
?>

<div id="popup_modal" class="modal popup-modal" role="dialog" data-title="" aria-label="Popup Modal">
    <div class="modal-dialog">
        <div class="modal-content" style="--desktop-popup-alert-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/desktop/layout/popup/alert.png?v=20241125);;--desktop-popup-notification-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/desktop/layout/popup/notification.png?v=20241125);;--mobile-popup-alert-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/layout/popup/alert.png?v=20241125);;--mobile-popup-notification-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/layout/popup/notification.png?v=20241125);;--event-giveaway-popper-src: url(//d33egg70nrp50s.cloudfront.net/Images/giveaway/popper.png?v=20241125);">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="popup_modal_title">
                    
                </h4>
            </div>
            <div class="modal-body" id="popup_modal_body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="popup_modal_dismiss_button">
                    OK
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="popup_modal_cancel_button" style="display: none">
                    Tidak
                </button>
                <button type="button" class="btn btn-primary" id="popup_modal_confirm_button" style="display: none">
                    Ya
                </button>
            </div>
        </div>
    </div>
</div>


<script src='/bundles/zelma-v2-beta-mobile-js' defer></script>

    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', () => {
            initializeCurrency({
                conversionRate: 1000,
                locale: "id",
                thousandSeparator: "."
            });
        });
    </script>

    
                        <script src='/bundles/withdrawal-page-js' defer></script>

                        <script>
                            window.addEventListener('DOMContentLoaded', () => {
                                initializeWithdrawalPage({
                                    platform: 'mobile',
                                    currency: 'IDR',
                                    currentBalance: '0.000000000000',
                                    paymentType: 'BANK',
                                    translations: {
                                        copied: 'Tersalin',
                                        recommended: 'Rekomendasi',
                                        instantProcess: 'Proses Instan',
                                        others: 'Pembayaran Lainnya (Proses Standar)',
                                        adminFee: 'Biaya Admin',
                                        addAccount: 'Tambah Akun',
                                        lastUsed: 'Terakhir dipakai',
                                        toAccount: 'Akun Tujuan',
                                        emptyPaymentAccountNote: 'Akun pembayaran Anda belum terdaftar. Silakan tambahkan akun pembayaran Anda terlebih dahulu.',
                                        paymentAccountSelectionTitle: 'Bank Akun Tujuan'
                                    },
                                    bankLogoDirPath: '//d33egg70nrp50s.cloudfront.net/Images/bank-thumbnails/',
                                    newPaymentAccountIconPath: '//d33egg70nrp50s.cloudfront.net/Images/icons/wallet/plus-circle.svg'
                                });

                                initializeVerificationForm({
                                    translations: {
                                        whatsappRequiredMessage: 'Nomor WhatsApp harus diisi',
                                        whatsappDigitErrorMessage: 'Harap masukkan numerik saja',
                                        emailRequiredMessage: 'Email harus diisi',
                                        emailErrorMessage: 'Harap masukkan email yang valid!',
                                    }
                                });
                            });
                        </script>
                    

        <script type="text/javascript">
        navigator.serviceWorker.getRegistrations().then(registrations => {
            for (const registration of registrations) {
                registration.unregister();
            }
        });
    </script>

    





    
<div id="daily_reward_popup_modal" class="modal popup-modal loyalty-daily-reward-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="daily_reward_popup_container"></div>
            </div>
        </div>
    </div>
</div>

<script src='/bundles/daily-reward-js?v=g2V6i5LiJjbxxAa7Ut_Ow1MX9r687gVj-_6W4E5XIzY1' defer></script>


    <div class="search-popup-container" id="search_popup_container"></div>

    <script src='/bundles/reserve-js?v=8ZkoZ3svUa1mm3fUna_DT0LFrjbAHZVOgr4xzLxrZZ81' defer></script>

</body>
</html>
