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

$trxid = $_GET['trxid'] ?? null;

$checkTransaction = "SELECT trxid, Amount, created_at, updated_at, is_read, status, type 
                     FROM transaction 
                     WHERE type IN ('deposit', 'withdraw') AND user_id = :user_id 
                     ORDER BY created_at DESC LIMIT 5";
$stmt = $db->prepare($checkTransaction);
$stmt->bindParam(':user_id', $user_id);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);

$sendMsg = !$trxid ? $result : null;

if ($trxid) {
  $getResult = "SELECT trxid, Amount, created_at, updated_at, is_read, status, type 
                  FROM transaction 
                  WHERE trxid = :trxid AND user_id = :user_id";
  $stmt = $db->prepare($getResult);
  $stmt->bindParam(':trxid', $trxid);
  $stmt->bindParam(':user_id', $user_id);
  $stmt->execute();
  $sendMsg = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
?>

<link href="/Content/zelma-v2-beta-mobile-css" rel="stylesheet"/>

    <link href="/Content/Message/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="5Ols5Tmv78dWnpr6gZ6RELCh9sOSJvIgZHceg/u2sdHUsNzceDBOCQ=="
      data-route="message" 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="messaging-side-menu">
    <button type="button" class="back-button" onclick="history.back();">
        <img loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/message/menu/back.svg?v=20241125" />
    </button>
    <div>
        Pengumuman
    </div>
    <div>
        <a href="/mobile/messages/announcement" data-count="<?= $pesan; ?>" data-active="true">
            <img loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/message/menu/announcement.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/message/menu/announcement-active.svg?v=20241125);" />
        </a>
        <a href="/mobile/messages/inbox" data-count="0" data-active="false">
            <img loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/message/menu/inbox.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/message/menu/inbox-active.svg?v=20241125);" />
        </a>
        <a href="/mobile/new-message" data-active="false">
            <img loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/message/menu/new-message.svg?v=20241125" style="--image-src: url(//d33egg70nrp50s.cloudfront.net/Images/v-zelma-v2-beta/<?= $config['theme']; ?>/mobile/message/menu/new-message-active.svg?v=20241125);" />
        </a>
    </div>
</div>

<?php if (!$trxid): ?>
    <div class="notification-tabs">
        <div class="notification-tab-item" data-tab="transaction" data-active="true" data-count="<?= $pesan; ?>">
            Transaksi <span>(<?= $pesan; ?>)</span>
        </div>
        <div class="notification-tab-item" data-tab="promo" data-active="false" data-count="0">
            Promo <span>(0)</span>
        </div>
        <div class="notification-tab-item" data-tab="info" data-active="false" data-count="0">
            Info <span>(0)</span>
        </div>
    </div>
    <div class="notification-tab-content">
        <div class="notification-list">
              <?php foreach ($sendMsg as $trx):
                $times = htmlspecialchars(
                  (new DateTime($trx['updated_at'], new DateTimeZone('UTC')))
                    ->setTimezone(new DateTimeZone('Asia/Jakarta'))
                    ->format('d-M-Y H:i T')
                );
              ?>
              
                <?php
                $type = $trx['type'] === 'deposit' ? 'Deposit' : 'Withdrawal';
                $statusClass = '';
                $statusText = '';
                $statusImage = $trx['type'] === 'deposit' ? 'Deposit.svg' : 'Withdrawal.svg';

                switch ($trx['status']) {
                  case 0:
                    $statusClass = 'NEW';
                    $statusTitle = "Menunggu";
                    $statusText = "Berhasil dikirim";
                    break;
                  case 1:
                    $statusClass = 'SUC';
                    $statusTitle = "Berhasil";
                    $statusText = "Berhasil diproses";
                    break;
                  case 2:
                    $statusClass = 'REJ';
                    $statusTitle = "Ditolak";
                    $statusText = "Ditolak";
                    break;
                  default:
                    $statusClass = 'PRO';
                    $statusTitle = "Diproses";
                    $statusText = "Diproses";
                    break;
                }
                ?>
                
                <a href="?trxid=<?= urlencode($trx['trxid']); ?>" onclick="markAsRead('<?= htmlspecialchars($trx['trxid']); ?>')" class="" data-ticket-number="<?= urlencode($trx['trxid']); ?>" data-rec-id="<?= urlencode($trx['trxid']); ?>">
                    <div class="notification-item" data-seen="<?= ($trx['is_read'] == 1 ? 'true' : 'false'); ?>" data-notification-type="transaction">
                        <div class="notification-header">
                            <span class="notification-date"><?= htmlspecialchars((new DateTime($trx['updated_at']))->setTimezone(new DateTimeZone('Asia/Jakarta'))->format('d-M-Y H:i:s T')); ?></span>
                            <?php if(isset($trx['is_read']) && $trx['is_read'] == 0): ?>
                                <span class="notification-label">Baru</span>
                            <?php endif; ?>
                        </div>
                        <div class="notification-title-container">
                            <div class="notification-image" data-message-category="Transaction" data-message-subcategory="<?= htmlspecialchars($type); ?>" data-transaction-status="<?= htmlspecialchars($statusClass); ?>">
                                <img loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/announcement/<?= htmlspecialchars($statusImage); ?>?v=20241125" />
                            </div>
                            <div class="notification-title-content">
                                <span><?= htmlspecialchars($type); ?></span>
                                <h3 class="notification-title"><?= htmlspecialchars($type); ?> : <?= htmlspecialchars(strtolower($statusText)); ?></h3>
                            </div>
                        </div>
                        <div class="notification-content">
                            <p>Permintaan <?= htmlspecialchars(strtolower($type)); ?> IDR <?= number_format($trx['Amount'], 0, ',', '.'); ?> anda telah <?= htmlspecialchars(strtolower($statusText)); ?>. Nomor Tiket : <?= htmlspecialchars($trx['trxid']); ?></p>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </a>
                <!--<a href="/mobile/messages/Announcement/35FC6C4287-C818-4F88-A4C5-1D75F88B7BBF87/LuckyDrawEndDate" class="" data-ticket-number="87" data-rec-id="35FC6C4287-C818-4F88-A4C5-1D75F88B7BBF87">-->
                <!--    <div class="notification-item" data-seen="true" data-notification-type="info">-->
                <!--        <div class="notification-header">-->
                <!--            <span class="notification-date">25-Feb-2025 23:59:59 WIB</span>-->
                <!--        </div>-->
                <!--        <div class="notification-title-container">-->
                <!--            <div class="notification-image" data-message-category="Info" data-message-subcategory="LuckyDrawEndDate" data-transaction-status="Unknown">-->
                <!--                <img loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/announcement/LuckyDrawEndDate.svg?v=20241125" />-->
                <!--            </div>-->
                <!--            <div class="notification-title-content">-->
                <!--                <span>Pengumuman</span>-->
                <!--                <h3 class="notification-title">Lucky Draw</h3>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--        <div class="notification-content">-->
                <!--            <p>Event lucky draw: Zoom Lucky Draw - Februari akan segera berakhir. Tukarkan loyalty poin Anda sebelum 28-Feb-2025 11:59:59 PM agar tidak ketinggalan kesempatan untuk memenangkan hadiah.</p>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</a>-->
        </div>
        <div class="empty-notification-container" id="empty_notification_container">
            <div class="empty-notification-image">
                <picture><source srcset="//d33egg70nrp50s.cloudfront.net/Images/announcement/empty.webp?v=20241125" type="image/webp" /><source srcset="//d33egg70nrp50s.cloudfront.net/Images/announcement/empty.png?v=20241125" type="image/png" /><img loading="lazy" src="//d33egg70nrp50s.cloudfront.net/Images/announcement/empty.png?v=20241125" /></picture>
            </div>
            <div class="empty-notification-content">
                <h3>Belum Ada Notifikasi</h3>
                <p>Saat Anda mendapatkan notifikasi, mereka akan muncul di sini</p>
            </div>
        </div>
    </div>
<?php else: ?>
    <div class="notification-tab-content">
        <!--<div class="notification-list">-->
              <?php foreach ($sendMsg as $trx): ?>
        <!--        Pesan Anda: <?= htmlspecialchars($trx['type'] === 'deposit' ? 'Deposit' : 'Withdrawal'); ?> : <?= htmlspecialchars($trx['status'] == 1 ? 'Berhasil' : ($trx['status'] == 0 ? 'Menunggu' : ($trx['status'] == 2 ? 'Ditolak' : 'Diproses'))); ?>-->
        <!--</div>-->
          <div class="replied-message" data-message-type="announcement">
            <div class="message-owner-info">
              <div class="notification-image" data-message-category="Transaction" data-message-subcategory="<?= htmlspecialchars($trx['type'] === 'deposit' ? 'Deposit' : 'Withdrawal'); ?>" data-transaction-status="<?= htmlspecialchars($trx['status'] == 1 ? 'SUC' : ($trx['status'] == 0 ? 'NEW' : ($trx['status'] == 2 ? 'REJ' : 'PRO'))); ?>">
                <img loading="lazy" src="//d2rzzcn1jnr24x.cloudfront.net/Images/announcement/<?= htmlspecialchars($trx['type'] === 'deposit' ? 'Deposit' : 'Withdrawal'); ?>.svg?v=20240813" />
              </div>
              <div>
                <div><?= htmlspecialchars($trx['type'] === 'deposit' ? 'Deposit' : 'Withdrawal'); ?></div>
                <div class="notification-title"><?= htmlspecialchars($trx['type'] === 'deposit' ? 'Deposit' : 'Withdrawal'); ?> : <?= htmlspecialchars($trx['status'] == 1 ? 'Berhasil' : ($trx['status'] == 0 ? 'Menunggu' : ($trx['status'] == 2 ? 'Ditolak' : 'Diproses'))); ?></div>
                <div><?= htmlspecialchars((new DateTime($trx['updated_at']))->setTimezone(new DateTimeZone('Asia/Jakarta'))->format('d-M-Y H:i:s T'));
                      ?></div>
              </div>
            </div>
            <div class="replied-message-content">
              <pre>Permintaan <?= htmlspecialchars($trx['type'] === 'deposit' ? 'deposit' : 'withdrawal'); ?> IDR <?= number_format($trx['Amount'], 0, ',', '.'); ?> anda telah <?= htmlspecialchars($trx['status'] == 1 ? 'Berhasil diproses' : ($trx['status'] == 0 ? 'Berhasil dikirim' : ($trx['status'] == 2 ? 'Ditolak' : ' Diproses'))); ?>. Nomor Tiket : <?= htmlspecialchars($trx['trxid']); ?></pre>
            </div>
          <?php endforeach; ?>
          </div>
    </div>
<?php endif; ?>

<?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/Message/mobile-js' defer></script>

<script>
  function markAsRead(trxid) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "read_status.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("trxid=" + encodeURIComponent(trxid));

    xhr.onload = function() {
      if (xhr.status === 200) {
        location.reload();
      }
    };
  }
</script>

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

</body>
</html>
