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

if(isset($_SESSION['user_id'])) {
    header("Location: /");
}
?>

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

</head>

<body data-online-id=""
      data-route="register" 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);">

      <input type="checkbox" id="site_menu_trigger_input" class="site-menu-trigger-input" />
      <div class="inner-body-container" id="inner_body_container">
        <div class="inner-body" id="scroll_container">
            
            <header class="site-header">
                          <a href="/mobile/home" class="logo">
                            <img alt="Logo" loading="lazy" src="/<?= $config['logo']; ?>" />
                          </a>
                          
                          <?php if (isset($_SESSION['user_id'])): ?>
                          <div class="header-info">
                            <div class="unread-announcements-button" data-announcement-count="0" id="unread_announcements_button">
                              <a href="/mobile/messages/announcement">
                                <img loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/layout/bell.svg?v=20241125" />
                              </a>
                            </div>
                          </div>
                          <?php endif; ?>
                        
                          <label class="site-menu-trigger" for="site_menu_trigger_input" data-new-notification="false">
                            <i data-icon="menu"></i>
                          </label>
                        </header>

<div class="standard-form-container register-page">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <form action="/Account/Register" method="post">
                    <input type="hidden" name="csrf_token" value="<?= $csrf_token; ?>">
                    <div class="standard-sub-section">
                        <div class="form-group">
                            <div class="alert-danger" id="register_alert" hidden></div>
                        </div>
                        <div class="form-group">
                            <div class="alert-success" id="register_success_alert" hidden></div>
                        </div>
                    </div>

                    <div class="standard-sub-section">
                        <div class="standard-form-title">Informasi Pribadi</div>
                        <div class="standard-form-content form_subcategory">
                            <div class="form-group required-form-group">
                                <label for="UserName">Nama Pengguna</label>
                                <input maxlength="12" minlenght="8" autocomplete="off" class="form-control lowercase" data-val="true" data-val-regex="^[0-9a-zA-Z]{8,12}$" data-val-required="The UserName field is required." id="username_field" name="username" placeholder="Nama Pengguna Anda" type="text" value="" />
                                <span class="standard-required-message">Harap masukkan antara 8 - 12 karakter dalam alfanumerik! Nama pengguna tidak boleh memiliki spasi!</span>
                            </div>
                            
              <div class="form-group required-form-group standard-password-field">
                <label for="Password">Kata Sandi</label>
                <input MaxLength="20" class="form-control" data-val="true" data-val-regex="The field Password must match the regular expression &#39;^(?=.{8,20}$)(?=.*?[a-z])(?=.*?[0-9]).*$&#39;." data-val-regex-pattern="^(?=.{8,20}$)(?=.*?[a-z])(?=.*?[0-9]).*$" data-val-required="The Password field is required." id="password_field" name="password" placeholder="Kata Sandi Anda" type="password" />
                <span class="standard-required-message">Password harus terdiri dari 8-20 karakter, dan harus mengandung huruf dan angka.</span>
                <div class="password-validations" id="password_validations" style="display: none;">
                  <div id="password_username_validation">
                    <i class="glyphicon"></i>
                    Kata sandi tidak boleh mengandung nama pengguna.
                  </div>
                  <div id="password_length_validation">
                    <i class="glyphicon"></i>
                    Terdiri dari 8-20 karakter.
                  </div>
                  <div id="password_alphanumeric_validation">
                    <i class="glyphicon"></i>
                    Mengandung 1 angka dan 1 huruf.
                  </div>
                </div>

                <i class="glyphicon glyphicon-eye-close password_input_trigger"></i>
              </div>
              <div class="form-group required-form-group standard-password-field">
                <label for="ConfirmedPassword">Ulangi Kata Sandi</label>
                <input MaxLength="20" class="form-control" data-val="true" data-val-equalto="&#39;ConfirmedPassword&#39; and &#39;Password&#39; do not match." data-val-equalto-other="*.Password" data-val-required="The ConfirmedPassword field is required." id="ConfirmedPassword" name="confirm_password" placeholder="Ulangi Kata Sandi Anda" type="password" />
                <span class="standard-required-message">Konfirmasi kata sandi tidak cocok!</span>
                <i class="glyphicon glyphicon-eye-close password_input_trigger"></i>
              </div>

                            <div class="form-group required-form-group">
                                <label for="Phone">No. Kontak</label>
                                <div data-section="input" class="copy-input-button-field">
                                    <input maxlength="16" autocomplete="off" class="form-control format_phone" data-val="true" data-val-length-max="16" data-val-length-min="12" data-val-regex="^(?=.*[0-9])[0-9\-]+$" id="Phone" inputmode="decimal" name="phone" placeholder="Nomor Telepon Anda" required="required" type="text" value="" />
                                    <span class="standard-required-message">Nomor Kontak Harus diantara 10 dan 13 digit</span>
                                    <button class="copy-input-button" id="copy_phone_button" type="button"><i class="glyphicon glyphicon-file"></i></button>
                                </div>
                            </div>

                            <div class="form-group required-form-group">
                                <label for="Whatsapp">WhatsApp</label>
                                <input class="form-control format_phone" data-val="true" data-val-regex="^(?=.*[0-9])[0-9\-]+$" id="WhatsApp" inputmode="decimal" name="whatsapp" placeholder="Nomor WhatsApp" required="required" type="text" value="" />
                                <span class="standard-required-message">Harap masukkan numerik saja</span>
                            </div>
                        </div>
                    </div>

                    <div class="standard-sub-section" id="bank_account_section">
                        <div class="standard-form-title">Informasi Pembayaran</div>
                        <div class="standard-form-content form_subcategory">
                            <div class="form-group">
                                <label for="SelectedBank">Metode Pembayaran</label>
                                <div data-section="input" class="payment-method-container">
                                    <label><input type="radio" name="bank_section_radio_group" value="bank" checked> BANK</label>
                                </div>
                            </div>

                            <div class="form-group required-form-group">
                                <label for="SelectedBank">Bank</label>
                                <select class="form-control" data-val="true" data-val-required="Bank harus diisi." id="selected_bank_select" name="BankName">
                                    <option value="">-- Pilih Bank --</option>
                                    <option value="BANKACEH">BANK ACEH</option>
                                    <option value="BCASYARIAH">BANK BCA SYARIAH</option>
                                    <option value="JAGO">BANK JAGO</option>
                                    <option value="BANKNEO">BANK NEO</option>
                                    <option value="BCA">BCA</option>
                                    <option value="BCADIGITAL">BCA DIGITAL</option>
                                    <option value="BNI">BNI</option>
                                    <option value="BRI">BRI</option>
                                    <option value="BSI">BANK SYARIAH INDONESIA</option>
                                    <option value="CIMB">CIMB</option>
                                    <option value="DANA">DANA</option>
                                    <option value="DANAMON">DANAMON</option>
                                    <option value="GOPAY">GOPAY</option>
                                    <option value="LINKAJA">LINK AJA</option>
                                    <option value="MANDIRI">MANDIRI</option>
                                    <option value="OVO">OVO</option>
                                    <option value="SAKUKU">SAKUKU</option>
                                    <option value="SEABANK">SEA BANK</option>
                                    <option value="LAINNYA">BANK LAINNYA (HUBUNGI LIVECHAT)</option>
                                </select>
                                <span class="standard-required-message">Bank harus diisi.</span>
                            </div>
                            <div class="form-group required-form-group">
                                <label for="BankAccountNumber">Nomor Rekening</label>
                                <input maxlength="20" autocomplete="off" class="form-control format_account_number" data-val="true" data-val-regex="^(?=.*[0-9])[0-9\-]+$" data-val-required="Nomor rekening bank diperlukan." id="bank_account_number_input" inputmode="decimal" name="BankNumber" placeholder="Nomor rekening anda" type="text" value="" />
                                <span class="standard-required-message">Nomor rekening bank diperlukan.</span>
                            </div>

                            <div class="form-group required-form-group">
                                <label for="BankAccountName">Nama Lengkap</label>
                                <input maxlength="25" autocomplete="off" class="form-control" data-val="true" data-val-regex="^[0-9a-zA-Z ]*$" data-val-required="Silakan masukkan nama lengkap yang valid." id="bank_account_name_input" name="BankHolder" placeholder="Nama Lengkap Anda" type="text" value="" />
                                <span class="standard-required-message">Silakan masukkan nama lengkap yang valid.</span>
                            </div>
                        </div>
                    </div>

                    <div class="standard-sub-section">
                        <div class="standard-form-title">Lainnya</div>
                        <div class="form-group referral-checkbox-container">
                            <input type="checkbox" class="referral-code-checkbox" id="referral_code_checkbox" checked disabled />
                            <label for="referral_code_checkbox">Kode Referensi</label>
                            <input autocomplete="off" class="form-control referral-code-input" id="referral_code_input" name="ReferrerCode" placeholder="Kode Referensi" readonly="true" type="text" value="" />
                        </div>
                    </div>
                    <div class="standard-button-group">
                        <input type="submit" class="standard-secondary-button btn-primary" value="Daftar" />
                    </div>
                </form>

                <div class="register-page-reminder">
                    Dengan klik tombol DAFTAR, saya menyatakan bahwa saya berumur diatas 18 tahun. Saya telah membaca dan menyetujui Syarat dan Ketentuan dari <?= $config['title']; ?>. 
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bonus-selection-popup-container" id="bonus_selection_popup_container" data-page="register"></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 src='/bundles/Register/page-js' defer></script>

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function () {
    const copyButton = document.getElementById('copy_phone_button');
    const phoneInput = document.getElementById('Phone');

    copyButton.addEventListener('click', function () {
      phoneInput.select();
      document.execCommand('copy');
      alert('Disalin!');
    });
  });
</script>

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

<div class="search-popup-container" id="search_popup_container"></div>
<script src='/bundles/reserve-js' defer></script>

</body>
</html>
