<?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/Theme/zelma-v2-beta-mobile-<?= $config['theme']; ?>-css" rel="stylesheet"/>

</head>
<body data-online-id="DRtoiYOia/b5qnFsIyrWkaGb0wMITNaV4qPalojPseS1QFi2k6i58w=="
      data-route="password" 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">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                

                <div class="tab-menu-background-container">
                    <div class="tab-menu-container" data-style="vertical">
                        <a href="/mobile/account-summary" data-active="false">
                            <i data-icon="profile" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/profile.svg?v=20241125);--active-image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/profile-active.svg?v=20241125);"></i>
                            Akun Saya
                        </a>
                        <a href="/mobile/password" data-active="true">
                            <i data-icon="password" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/password.svg?v=20241125);--active-image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/password-active.svg?v=20241125);"></i>
                            Ubah Kata Sandi
                        </a>
                        <a href="/mobile/profile" data-active="false">
                            <i data-icon="bank-account" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/edit.svg?v=20241125);--active-image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/edit-active.svg?v=20241125);"></i>
                            Profil Saya
                        </a>
                            <a href="/download-apk" data-active="false" target="_blank">
                                <i data-icon="redemption-history" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/redemption-history.svg?v=20241125);--active-image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/tabs/redemption-history-active.svg?v=20241125);"></i>
                                Riwayat Penukaran
                            </a>
                    </div>
                </div>
                <div class="standard-form-title">
                    UBAH KATA SANDI
                </div>
                <div class="alert-success" id="alert_success" hidden></div>
                <div class="alert-danger" id="alert_danger" hidden></div>
                <div class="standard-form-note">
                    <span>Catatan:</span>
                    <ol>
                        <li>Kata Sandi harus terdiri dari 8-20 karakter.</li><li>Kata Sandi harus mengandung huruf dan angka.</li><li>Kata Sandi tidak boleh mengandung username.</li>
                    </ol>
                </div>
                                
                <form action="/Profile/Password" method="post">
                    <input type="hidden" name="csrf_token" value="<?= $csrf_token; ?>">
                        <div class="form-group">
                            <label for="OldPassword">Kata Sandi Saat Ini</label>
                            <input MaxLength="20" class="form-control" data-val="true" data-val-required="The OldPassword field is required." id="OldPassword" name="OldPassword" placeholder="Kata Sandi Saat Ini" type="password" />
                            <span class="standard-required-message">Kata sandi harus diisi.</span>
                        </div>
                    <div class="form-group standard-password-field">
                        <label for="NewPassword">Kata Sandi Baru</label>
                        <input MaxLength="20" class="form-control" data-val="true" data-val-regex="The field NewPassword 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 NewPassword field is required." id="new_password_input" name="NewPassword" placeholder="Kata Sandi Baru" type="password" />
                        <span class="standard-required-message">Kata Sandi harus terdiri dari 8-20 karakter <br /> Dan harus mengandung huruf dan angka</span>
                        <i class="glyphicon glyphicon-eye-open" id="new_password_input_trigger"></i>
                    </div>
                    <div class="form-group standard-password-field">
                        <label for="ConfirmPassword">Ulangi Kata Sandi</label>
                        <input MaxLength="20" class="form-control" data-val="true" data-val-equalto="&#39;ConfirmPassword&#39; and &#39;NewPassword&#39; do not match." data-val-equalto-other="*.NewPassword" data-val-required="The ConfirmPassword field is required." id="confirm_password_input" name="ConfirmPassword" placeholder="Ulangi Kata Sandi" type="password" />
                        <span class="standard-required-message">Kata sandi tidak cocok.</span>
                        <i class="glyphicon glyphicon-eye-open" id="confirm_password_input_trigger"></i>
                    </div>
                    <div class="standard-button-group">
                        <input type="submit" class="standard-secondary-button" value="UBAH KATA SANDI"  />
                    </div>
                </form>
            </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 src='/bundles/Profile/password-js' defer></script>

<script type="text/javascript">
  window.addEventListener('DOMContentLoaded', () => {
    initializeChangePassword({
      translations: {
        CancelChangePasswordConfirmation: "Dengan mengonfirmasi, Anda akan:<br><ul><li>Membatalkan permintaan reset kata sandi Anda.</li><li>Mencegah pembaruan kata sandi selama 24 jam.</li></ul>"
      }
    });
  });
</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>