<?= view('customer/menu', ['func' => $func, 'db' => $db]) ?>

<main class="wrap">
  <div class="ppob-page">
    <?php if (($data->data->name ?? null) == null) { ?>

      <div class="ppob-card">
        <div class="ppob-head">
          <?php if ($errorPesan !== null) { ?>
            <div class="ppob-title">Gagal Memeriksa Nomor Pelanggan</div>
            <div class="ppob-subtitle"><?= htmlspecialchars($errorPesan, ENT_QUOTES, 'UTF-8') ?></div>
          <?php } else { ?>
            <div class="ppob-title">Token Tidak Terdaftar</div>
            <div class="ppob-subtitle">ID pelanggan / no meter tidak ditemukan. Periksa kembali nomornya.</div>
          <?php } ?>
        </div>
        <div class="nominal-action" style="padding:6px">
          <a href="javascript:history.back()" class="btn-pilih" style="text-decoration:none;display:inline-flex;align-items:center;">Cek Lagi</a>
        </div>
      </div>

    <?php } else { ?>

      <style>
        .pln-card{
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 16px;
          border: 1px solid rgba(15, 23, 42, .08);
          border-radius: 16px;
          background: rgba(248, 250, 252, .55);
        }
        .pln-avatar{
          flex: 0 0 auto;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: rgba(22, 163, 74, .12);
          color: #16a34a;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
        }
        .pln-name{
          margin: 0 0 4px;
          font-size: 17px;
          font-weight: 800;
        }
        .pln-segment{
          margin: 0;
          font-size: 13px;
          color: rgba(15, 23, 42, .6);
        }
        .pln-detail-grid{
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
          margin-top: 14px;
        }
        .pln-detail-item{
          padding: 10px 12px;
          border-radius: 12px;
          background: rgba(15, 23, 42, .03);
        }
        .pln-detail-label{
          margin: 0 0 2px;
          font-size: 11.5px;
          text-transform: uppercase;
          letter-spacing: .03em;
          color: rgba(15, 23, 42, .5);
        }
        .pln-detail-value{
          margin: 0;
          font-size: 14px;
          font-weight: 700;
          word-break: break-word;
        }
        @media (max-width: 480px){
          .pln-detail-grid{ grid-template-columns: 1fr; }
        }
        html[data-theme="dark"] .pln-card{
          border-color: rgba(255,255,255,.08);
          background: rgba(255,255,255,.03);
        }
        html[data-theme="dark"] .pln-segment{ color: rgba(255,255,255,.6); }
        html[data-theme="dark"] .pln-detail-item{ background: rgba(255,255,255,.04); }
        html[data-theme="dark"] .pln-detail-label{ color: rgba(255,255,255,.5); }
      </style>

      <div class="ppob-card">
        <div class="ppob-head">
          <div class="ppob-title">Token PLN</div>
          <div class="ppob-subtitle">Data pelanggan ditemukan. Pilih nominal token di bawah.</div>
        </div>

        <div class="pln-card">
          <div class="pln-avatar">👤</div>
          <div>
            <p class="pln-name"><?= htmlspecialchars(trim($data->data->name), ENT_QUOTES, 'UTF-8') ?></p>
            <p class="pln-segment"><?= htmlspecialchars(trim(preg_replace('/\s+/', ' ', $data->data->segment_power)), ENT_QUOTES, 'UTF-8') ?></p>
          </div>
        </div>

        <div class="pln-detail-grid">
          <div class="pln-detail-item">
            <p class="pln-detail-label">ID Pelanggan</p>
            <p class="pln-detail-value"><?= htmlspecialchars($data->data->customer_no, ENT_QUOTES, 'UTF-8') ?></p>
          </div>
          <div class="pln-detail-item">
            <p class="pln-detail-label">No Meter</p>
            <p class="pln-detail-value"><?= htmlspecialchars($data->data->meter_no, ENT_QUOTES, 'UTF-8') ?></p>
          </div>
        </div>
      </div>

      <div class="ppob-card ppob-card-soft">
        <div class="ppob-title-sm">Pilihan Nominal</div>
        <div class="nominal-wrap">
          <?php
          $csrfname      = csrf_token();
          $csrfhash      = csrf_hash();
          $customerNoEsc = htmlspecialchars($data->data->customer_no, ENT_QUOTES, 'UTF-8');

          if (! function_exists('renderItemTokenPln')) {
          function renderItemTokenPln($func, $r, $csrfname, $csrfhash, $customerNoEsc)
          {
              if ($r->buyer_product_status === 1) {
                  $status = "<span class='status-pill status-on'>ON</span>";
                  $tombol = "<button type='submit' class='btn-pilih'>Pilih</button>";
              } else {
                  $status = "<span class='status-pill status-off'>OFF</span>";
                  $tombol = '';
              }
              $skuEsc  = htmlspecialchars($r->buyer_sku_code, ENT_QUOTES, 'UTF-8');
              $descEsc = htmlspecialchars($r->desc, ENT_QUOTES, 'UTF-8');

              return "
                <div class='nominal-item'>
                  <div class='nominal-info'>
                    <p class='nominal-k'>Kode: {$skuEsc}</p>
                    <p class='nominal-harga'>Harga: Rp " . $func->formUang($r->harga) . "</p>
                    <p class='nominal-k'>Keterangan: {$descEsc}</p>
                    <p class='nominal-k'>Status: {$status}</p>
                  </div>
                  <div class='nominal-action'>
                    <form action='" . site_url('ppob/tambahkeranjangppob') . "' method='POST'>
                      <input type='hidden' name='{$csrfname}' value='{$csrfhash}' style='display: none'>
                      <input type='hidden' name='idproduk' value='3'>
                      <input type='hidden' name='pasca_code' value=''>
                      <input type='hidden' name='h2h' value='0'>
                      <input type='hidden' name='hargabeli' value='{$r->harga}'>
                      <input type='hidden' name='hargadata' value='{$r->harga}'>
                      <input type='hidden' name='keterangan' value='{$descEsc}'>
                      <input type='hidden' name='idpo' value='{$skuEsc}'>
                      <input type='hidden' name='nohp' value='{$customerNoEsc}'>
                      {$tombol}
                    </form>
                  </div>
                </div>
                ";
          }
          }

          if (count($grup) === 0) {
              echo "<div class='ppob-empty'>Nominal token belum tersedia.</div>";
          } elseif (count($grup) === 1) {
              foreach (reset($grup) as $item) {
                  echo renderItemTokenPln($func, $item, $csrfname, $csrfhash, $customerNoEsc);
              }
          } else {
              echo "<div class='nominal-tabs-wrap'>";
              echo "<div class='nominal-tabs'>";
              $i = 0;
              foreach ($grup as $label => $items) {
                  $active = ($i === 0) ? 'active' : '';
                  echo "<button type='button' class='nominal-tab {$active}' data-target='nomtab-{$i}'>" . htmlspecialchars($label, ENT_QUOTES, 'UTF-8') . '</button>';
                  $i++;
              }
              echo '</div>';
              $i = 0;
              foreach ($grup as $label => $items) {
                  $active = ($i === 0) ? 'active' : '';
                  echo "<div class='nominal-panel {$active}' id='nomtab-{$i}'>";
                  foreach ($items as $item) {
                      echo renderItemTokenPln($func, $item, $csrfname, $csrfhash, $customerNoEsc);
                  }
                  echo '</div>';
                  $i++;
              }
              echo '</div>';
          }
          ?>
        </div>
      </div>

    <?php } ?>
  </div>
</main>
