<div class="sidenav">
    <div class="sidenav__close"><i class="fas fa-times"></i></div>
    <div class="sidenav__logo">
         <a class="menu-link" href="?page=home">
        <img src="../assets/img/<?php echo $logo ?>" alt="WebsiteLogo">   </a>
    </div>
    <?php
        if ($id_login == false) {
            ?>
    <div class="sidenav__header">
        <div class="header-title">
                        <h5>Selamat Datang</h5>
            <h6>Silakan Login atau Mendaftar</h6>
                                </div>
        <div class="header-content">
            <div class="content-button">
                                <button class="btn-login btn-custom btn-custom-outline sidenav-login" type="button" type="button" data-toggle="modal"  data-target="#loginModal">Masuk</button>
                <button class="btn-register btn-custom" onclick="window.location.href = '?page=daftar'">Daftar</button>
                                            </div>
                        <a class="btn-forgot" href="https://direct.lc.chat/<?php echo $id_livechat ?>/">Lupa Password </a>
                    </div>
    </div>
    <?php
              } else {
              ?>
    <div class="sidenav__header">
        <div class="header-title">
                                    <h5>Selamat Datang <?php echo $punya_user['nama_lengkap']; ?></h5>   
                    </div>
        <div class="header-content">
            <div class="content-button">
                                                                        <button class="btn-custom btn-custom voucher-button" data-toggle="modal" data-target="#voucherModal">Voucher</button>
                                                </div>
                    </div>
    </div>
    <?php
        }
    ?>
    <div class="sidenav__menu">
        <a class="menu-link" href="?page=home">
            <div class="menu-item">
                <div class="icon">
                    <img src="../assets/img/icon/home.svg">
                </div>
                <div class="label">Home</div>
            </div>
        </a>
                <a class="menu-link" href="?page=promosi">
            <div class="menu-item">
                <div class="icon">
                    <img src="../assets/img/icon/promo.svg">
                </div>
                <div class="label">Promosi</div>
            </div>
        </a>
                
                <a class="menu-link" href="#" target="_blank">
                    <div class="menu-item">
                <div class="icon">
                    <img src="../assets/img/icon/download.svg">
                </div>
                <div class="label">Download Aplikasi</div>
            </div>
        </a>
        <a class="menu-link" href="?page=berita">
            <div class="menu-item">
                <div class="icon">
                    <img src="../assets/img/icon/news.svg">
                </div>
                <div class="label">Berita</div>
            </div>
        </a>
        <?php
        if ($id_login == false) {
            ?>
        <a class="menu-link" href="?page=bantuan">
            <div class="menu-item">
                <div class="icon">
                    <img src="../assets/img/icon/other.svg">
                </div>
                <div class="label">Bantuan</div>
            </div>
        </a>
        <?php
            }
        ?>
        <?php
        if ($id_login == true) {
            ?>
        <a class="menu-link" href="?page=refferal">
            <div class="menu-item">
                <div class="icon">
                    <img src="../assets/img/icon/other.svg">
                </div>
                <div class="label">Referal</div>
            </div>
        </a>
        <?php
            }
        ?>
        <a class="menu-link" href="?page=contact">
            <div class="menu-item">
                <div class="icon">
                    <img src="../assets/img/icon/contact.svg">
                </div>
                <div class="label">Kontak Kami</div>
            </div>
        </a>
        <a class="menu-link" href="?page=event">
            <div class="menu-item">
                <div class="icon">
                    <img src="../assets/img/icon/event.svg">
                </div>
                <div class="label">Event</div>
            </div>
        </a>
        <?php
        if ($id_login == true) {
            ?>
        <a class="menu-link" href="function/logout.php">
            <div class="menu-item">
                <div class="icon">
                    <img src="../assets/img/icon/logout.svg">
                </div>
                <div class="label">Keluar</div>
            </div>
        </a>
        <?php
            }
        ?>
                            </div>
    <div class="sidenav__menu">
        
        <a class="menu-link show-popup-currency" href="javascript:void(0)" data-toggle="modal" data-target="#currencyModal">
            <div class="menu-item">
                <div class="icon">
                    <img src="../assets/img/icon/currency.svg">
                </div>
                <div class="label">Currency - Rupiah</div>
            </div>
        </a>
        <a class="menu-link show-popup-language" href="javascript:void(0)" data-toggle="modal" data-target="#languageModal">
            <div class="menu-item">
                <div class="icon">
                    <img src="../assets/img/icon/language.svg">
                </div>
                <div class="label">Language - Indonesia</div>
                <div class="flag-icon">
                    <img src="https://images.linkcdn.cloud/global/default/icon/lang/indonesia.png">
                </div>
            </div>
        </a>
    </div>
</div>
<div class="modal custom-popup fade" id="voucherModal" tabindex="-1" aria-labelledby="voucherLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fas fa-times"></i>
            </button>
            <div class="modal-body">
                <div class="popup-voucher">
                    <div class="voucher-header">
                        <h4>Tukar Voucher</h4>
                    </div>
                    <div class="voucher-label">Kode Voucher</div>
                    <div class="voucher-details">
                        <div class="voucher-details-input">
                            <input class="form-control form-control-sm" id="voucher_code" placeholder="Masukkan kode voucher anda" type="text">
                        </div>
                        <div class="voucher-details-scan">
                            <button class="btn-custom btn-custom-sm"><i class="fas fa-qrcode"></i></button>
                            <input type="file" id="qr-input-file" accept="image/*">
                        </div>
                    </div>
                    <div class="text-center my-3" id="error-message"></div>
                    <div id="reader" style="position: relative; padding: 0px; border: 1px solid silver;"><div style="text-align: left; margin: 0px;"><div style="position: absolute; top: 10px; right: 10px; z-index: 2; display: none; padding: 5pt; border: 1px solid rgb(23, 23, 23); font-size: 10pt; background: rgba(0, 0, 0, 0.69); border-radius: 5px; text-align: center; font-weight: 400; color: white;">Powered by <a href="https://scanapp.org" target="new" style="color: white;">ScanApp</a><br><br><a href="https://github.com/mebjas/html5-qrcode/issues" target="new" style="color: white;">Report issues</a></div><img alt="Info icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NjAgNDYwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NjAgNDYwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNMjMwIDBDMTAyLjk3NSAwIDAgMTAyLjk3NSAwIDIzMHMxMDIuOTc1IDIzMCAyMzAgMjMwIDIzMC0xMDIuOTc0IDIzMC0yMzBTMzU3LjAyNSAwIDIzMCAwem0zOC4zMzMgMzc3LjM2YzAgOC42NzYtNy4wMzQgMTUuNzEtMTUuNzEgMTUuNzFoLTQzLjEwMWMtOC42NzYgMC0xNS43MS03LjAzNC0xNS43MS0xNS43MVYyMDIuNDc3YzAtOC42NzYgNy4wMzMtMTUuNzEgMTUuNzEtMTUuNzFoNDMuMTAxYzguNjc2IDAgMTUuNzEgNy4wMzMgMTUuNzEgMTUuNzFWMzc3LjM2ek0yMzAgMTU3Yy0yMS41MzkgMC0zOS0xNy40NjEtMzktMzlzMTcuNDYxLTM5IDM5LTM5IDM5IDE3LjQ2MSAzOSAzOS0xNy40NjEgMzktMzkgMzl6Ii8+PC9zdmc+" style="position: absolute; top: 4px; right: 4px; opacity: 0.6; cursor: pointer; z-index: 2; width: 16px; height: 16px;"><div id="reader__header_message" style="display: none; text-align: center; font-size: 14px; padding: 2px 10px; margin: 4px; border-top: 1px solid rgb(246, 246, 246);"></div></div><div id="reader__scan_region" style="width: 100%; min-height: 100px; text-align: center;"><br><img width="64" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzEuNjQzIDM3MS42NDMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM3MS42NDMgMzcxLjY0MyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTEwNS4wODQgMzguMjcxaDE2My43Njh2MjBIMTA1LjA4NHoiLz48cGF0aCBkPSJNMzExLjU5NiAxOTAuMTg5Yy03LjQ0MS05LjM0Ny0xOC40MDMtMTYuMjA2LTMyLjc0My0yMC41MjJWMzBjMC0xNi41NDItMTMuNDU4LTMwLTMwLTMwSDEyNS4wODRjLTE2LjU0MiAwLTMwIDEzLjQ1OC0zMCAzMHYxMjAuMTQzaC04LjI5NmMtMTYuNTQyIDAtMzAgMTMuNDU4LTMwIDMwdjEuMzMzYTI5LjgwNCAyOS44MDQgMCAwIDAgNC42MDMgMTUuOTM5Yy03LjM0IDUuNDc0LTEyLjEwMyAxNC4yMjEtMTIuMTAzIDI0LjA2MXYxLjMzM2MwIDkuODQgNC43NjMgMTguNTg3IDEyLjEwMyAyNC4wNjJhMjkuODEgMjkuODEgMCAwIDAtNC42MDMgMTUuOTM4djEuMzMzYzAgMTYuNTQyIDEzLjQ1OCAzMCAzMCAzMGg4LjMyNGMuNDI3IDExLjYzMSA3LjUwMyAyMS41ODcgMTcuNTM0IDI2LjE3Ny45MzEgMTAuNTAzIDQuMDg0IDMwLjE4NyAxNC43NjggNDUuNTM3YTkuOTg4IDkuOTg4IDAgMCAwIDguMjE2IDQuMjg4IDkuOTU4IDkuOTU4IDAgMCAwIDUuNzA0LTEuNzkzYzQuNTMzLTMuMTU1IDUuNjUtOS4zODggMi40OTUtMTMuOTIxLTYuNzk4LTkuNzY3LTkuNjAyLTIyLjYwOC0xMC43Ni0zMS40aDgyLjY4NWMuMjcyLjQxNC41NDUuODE4LjgxNSAxLjIxIDMuMTQyIDQuNTQxIDkuMzcyIDUuNjc5IDEzLjkxMyAyLjUzNCA0LjU0Mi0zLjE0MiA1LjY3Ny05LjM3MSAyLjUzNS0xMy45MTMtMTEuOTE5LTE3LjIyOS04Ljc4Ny0zNS44ODQgOS41ODEtNTcuMDEyIDMuMDY3LTIuNjUyIDEyLjMwNy0xMS43MzIgMTEuMjE3LTI0LjAzMy0uODI4LTkuMzQzLTcuMTA5LTE3LjE5NC0xOC42NjktMjMuMzM3YTkuODU3IDkuODU3IDAgMCAwLTEuMDYxLS40ODZjLS40NjYtLjE4Mi0xMS40MDMtNC41NzktOS43NDEtMTUuNzA2IDEuMDA3LTYuNzM3IDE0Ljc2OC04LjI3MyAyMy43NjYtNy42NjYgMjMuMTU2IDEuNTY5IDM5LjY5OCA3LjgwMyA0Ny44MzYgMTguMDI2IDUuNzUyIDcuMjI1IDcuNjA3IDE2LjYyMyA1LjY3MyAyOC43MzMtLjQxMyAyLjU4NS0uODI0IDUuMjQxLTEuMjQ1IDcuOTU5LTUuNzU2IDM3LjE5NC0xMi45MTkgODMuNDgzLTQ5Ljg3IDExNC42NjEtNC4yMjEgMy41NjEtNC43NTYgOS44Ny0xLjE5NCAxNC4wOTJhOS45OCA5Ljk4IDAgMCAwIDcuNjQ4IDMuNTUxIDkuOTU1IDkuOTU1IDAgMCAwIDYuNDQ0LTIuMzU4YzQyLjY3Mi0zNi4wMDUgNTAuODAyLTg4LjUzMyA1Ni43MzctMTI2Ljg4OC40MTUtMi42ODQuODIxLTUuMzA5IDEuMjI5LTcuODYzIDIuODM0LTE3LjcyMS0uNDU1LTMyLjY0MS05Ljc3Mi00NC4zNDV6bS0yMzIuMzA4IDQyLjYyYy01LjUxNCAwLTEwLTQuNDg2LTEwLTEwdi0xLjMzM2MwLTUuNTE0IDQuNDg2LTEwIDEwLTEwaDE1djIxLjMzM2gtMTV6bS0yLjUtNTIuNjY2YzAtNS41MTQgNC40ODYtMTAgMTAtMTBoNy41djIxLjMzM2gtNy41Yy01LjUxNCAwLTEwLTQuNDg2LTEwLTEwdi0xLjMzM3ptMTcuNSA5My45OTloLTcuNWMtNS41MTQgMC0xMC00LjQ4Ni0xMC0xMHYtMS4zMzNjMC01LjUxNCA0LjQ4Ni0xMCAxMC0xMGg3LjV2MjEuMzMzem0zMC43OTYgMjguODg3Yy01LjUxNCAwLTEwLTQuNDg2LTEwLTEwdi04LjI3MWg5MS40NTdjLS44NTEgNi42NjgtLjQzNyAxMi43ODcuNzMxIDE4LjI3MWgtODIuMTg4em03OS40ODItMTEzLjY5OGMtMy4xMjQgMjAuOTA2IDEyLjQyNyAzMy4xODQgMjEuNjI1IDM3LjA0IDUuNDQxIDIuOTY4IDcuNTUxIDUuNjQ3IDcuNzAxIDcuMTg4LjIxIDIuMTUtMi41NTMgNS42ODQtNC40NzcgNy4yNTEtLjQ4Mi4zNzgtLjkyOS44LTEuMzM1IDEuMjYxLTYuOTg3IDcuOTM2LTExLjk4MiAxNS41Mi0xNS40MzIgMjIuNjg4aC05Ny41NjRWMzBjMC01LjUxNCA0LjQ4Ni0xMCAxMC0xMGgxMjMuNzY5YzUuNTE0IDAgMTAgNC40ODYgMTAgMTB2MTM1LjU3OWMtMy4wMzItLjM4MS02LjE1LS42OTQtOS4zODktLjkxNC0yNS4xNTktMS42OTQtNDIuMzcgNy43NDgtNDQuODk4IDI0LjY2NnoiLz48cGF0aCBkPSJNMTc5LjEyOSA4My4xNjdoLTI0LjA2YTUgNSAwIDAgMC01IDV2MjQuMDYxYTUgNSAwIDAgMCA1IDVoMjQuMDZhNSA1IDAgMCAwIDUtNVY4OC4xNjdhNSA1IDAgMCAwLTUtNXpNMTcyLjYyOSAxNDIuODZoLTEyLjU2VjEzMC44YTUgNSAwIDEgMC0xMCAwdjE3LjA2MWE1IDUgMCAwIDAgNSA1aDE3LjU2YTUgNSAwIDEgMCAwLTEwLjAwMXpNMjE2LjU2OCA4My4xNjdoLTI0LjA2YTUgNSAwIDAgMC01IDV2MjQuMDYxYTUgNSAwIDAgMCA1IDVoMjQuMDZhNSA1IDAgMCAwIDUtNVY4OC4xNjdhNSA1IDAgMCAwLTUtNXptLTUgMjQuMDYxaC0xNC4wNlY5My4xNjdoMTQuMDZ2MTQuMDYxek0yMTEuNjY5IDEyNS45MzZIMTk3LjQxYTUgNSAwIDAgMC01IDV2MTQuMjU3YTUgNSAwIDAgMCA1IDVoMTQuMjU5YTUgNSAwIDAgMCA1LTV2LTE0LjI1N2E1IDUgMCAwIDAtNS01eiIvPjwvc3ZnPg==" alt="Camera based scan" style="opacity: 0.8;"></div><div id="reader__dashboard" style="width: 100%;"><div id="reader__dashboard_section" style="width: 100%; padding: 10px 0px; text-align: left;"><div><div id="reader__dashboard_section_csr" style="display: block;"><div style="text-align: center;"><button id="html5-qrcode-button-camera-permission" class="html5-qrcode-element" type="button">Request Camera Permissions</button></div></div><div style="text-align: center; margin: auto auto 10px; width: 80%; max-width: 600px; border: 6px dashed rgb(235, 235, 235); padding: 10px; display: none;"><label for="html5-qrcode-private-filescan-input" style="display: inline-block;"><button id="html5-qrcode-button-file-selection" class="html5-qrcode-element" type="button">Choose Image - No image choosen</button><input id="html5-qrcode-private-filescan-input" class="html5-qrcode-element" type="file" accept="image/*" style="display: none;"></label><div style="font-weight: 400;">Or drop an image to scan</div></div></div><div style="text-align: center;"><span id="html5-qrcode-anchor-scan-type-change" class="html5-qrcode-element" style="text-decoration: underline; cursor: pointer;">Scan an Image File</span></div></div></div></div>
                    <div class="voucher-button">
                        <button class="btn-custom btn-custom-sm" id="submitVoucher">Kirim/Tukarkan Kode</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>