<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Reward Points</title>
  <?= $this->include("admin/layout/partials/styles") ?>
  <style>
    .content-card { background: #fff; border: 1px solid #e9ecef; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
    .balance-pill { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; padding: 16px; font-size: 16px; }
    .balance-pill .value { font-weight: 700; font-size: 22px; }
    .side-card { border: 1px solid #e9ecef; border-radius: 10px; background: #fff; overflow: hidden; }
    .side-head { padding: 12px 14px; font-weight: 700; border-bottom: 1px solid #e9ecef; }
    .side-menu .item { display: block; padding: 12px 14px; border-bottom: 1px solid #f1f3f5; color: #002f34; text-decoration: none; }
    .side-menu .item:hover { background: rgba(0,47,52,.06); }
    .side-menu .item.active { background: #007bff; color: #fff; }
  </style>
</head>
<body class="hold-transition layout-top-nav">
<div class="wrapper">
  <?= $this->include('frontend/partials/top_navbar') ?>
  <div class="content-wrapper rm-mobile-pad">
    <section class="content">
      <div class="container py-3">
        <h1 class="h4 mb-3">My Reward Points</h1>
        <div class="row">
          <div class="col-md-3 mb-3">
            <?= $this->include('frontend/user/partials/side_menu') ?>
          </div>
          <div class="col-md-9">
            <div class="balance-pill mb-3">
              <div>Reward Points Balance</div>
              <div class="value"><?php echo esc($totalRewardPoint ?? 0) ?></div>
            </div>
            <div class="content-card p-3">
              <h2 class="h6 mb-3">Points Ledger</h2>
              <div class="table-responsive">
                <table id="example1" class="table table-bordered table-striped mb-0">
                  <thead>
                    <tr>
                      <th width="90">Points</th>
                      <th>Description</th>
                      <th width="120">Bill</th>
                      <th width="170">Created</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php foreach ($ledger as $l): ?>
                      <tr>
                        <td><?php echo esc($l->points_delta) ?></td>
                        <td><?php echo esc($l->description) ?></td>
                        <td>
                          <?php if (!empty($l->payment_id)): ?>
                            <a href="<?php echo url('user/orders/receipt/' . (int) $l->payment_id) ?>">#<?php echo (int) $l->payment_id ?></a>
                          <?php else: ?>
                            -
                          <?php endif ?>
                        </td>
                        <td><?php echo esc($l->created_at) ?></td>
                      </tr>
                    <?php endforeach ?>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="content-card p-3 mt-3">
              <h2 class="h6 mb-3">Spin Logs</h2>
              <?php if (!empty($spinLogsColumns)): ?>
                <div class="table-responsive">
                  <table id="spinLogsTable" class="table table-bordered table-striped mb-0">
                    <thead>
                      <tr>
                        <?php $spinLogLabels = ['reward_value' => 'Reward Win', 'spin_cost' => 'Spin Cost (Deduct)', 'created_at' => 'Spin Time', 'created_on' => 'Spin Time', 'date' => 'Spin Time']; ?>
                        <?php foreach (($spinLogsColumns ?? []) as $c): ?>
                          <th><?php echo esc($spinLogLabels[$c] ?? $c) ?></th>
                        <?php endforeach ?>
                      </tr>
                    </thead>
                    <tbody>
                      <?php foreach (($spinLogs ?? []) as $row): ?>
                        <tr>
                          <?php foreach (($spinLogsColumns ?? []) as $c): ?>
                            <td><?php echo esc($row->{$c} ?? '') ?></td>
                          <?php endforeach ?>
                        </tr>
                      <?php endforeach ?>
                    </tbody>
                  </table>
                </div>
              <?php else: ?>
                <div class="text-muted">No spin logs available.</div>
              <?php endif ?>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
<?= $this->include('frontend/partials/rm_bottom_nav') ?>
<?= $this->include("admin/layout/partials/scripts") ?>
<script>
  $(function () {
    if ($("#spinLogsTable").length) {
      $("#spinLogsTable").DataTable({
        "responsive": true,
        "autoWidth": false,
        <?php if (isset($spinLogsOrderIndex) && $spinLogsOrderIndex !== null): ?>
          "order": [[<?php echo (int) $spinLogsOrderIndex ?>, "desc"]],
        <?php endif ?>
      });
    }
  });
</script>
</body>
</html>
