<div class="row g-3">
  <div class="col-12">
    <div class="card border-0 custom-simple-card" style="border-radius: 12px; background-color: #ffffff;">
      <div class="card-body table-responsive p-3">

        <table id="zero-conf" class="display table table-custom align-middle" style="width:100%; margin-bottom: 0;">
          <thead>
            <tr>
              <th class="text-secondary fw-semibold py-3" style="font-size: 13px; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0;">#</th>
              <th class="text-secondary fw-semibold py-3" style="font-size: 13px; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0;">Customer Email</th>
              <th class="text-secondary fw-semibold py-3" style="font-size: 13px; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0;">Amount</th>
              <th class="text-secondary fw-semibold py-3" style="font-size: 13px; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0;">Status</th>
              <th class="text-secondary fw-semibold py-3" style="font-size: 13px; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0;">Date</th>
              <th class="text-secondary fw-semibold py-3" style="font-size: 13px; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0; text-align: center;">Action</th>
            </tr>
          </thead>
          <tbody>
            <?php
            if (!empty($items)) {
              $i = 0;
              foreach ($items as $item) {
                $item_status        = show_item_status($controller_name, $item['ids'], $item['status'], 'switch', '', 'user');
                $show_item_buttons  = show_item_button_action($controller_name, $item['ids'], '', '', 'user');
                $i++;
                
                // ব্যাজ কালার কন্ডিশন (পেমেন্ট স্ট্যাটাস অনুযায়ী সফট কালার)
                $badge_class = 'bg-secondary bg-opacity-10 text-secondary';
                $status_text = 'Unpaid';
                if ($item['pay_status'] == 1) {
                    $badge_class = 'bg-warning bg-opacity-15 text-warning';
                    $status_text = 'Pending';
                } elseif ($item['pay_status'] == 2) {
                    $badge_class = 'bg-success bg-opacity-15 text-success';
                    $status_text = 'Paid';
                }
            ?>
                <tr class="tr_<?= $item['ids'] ?>" style="border-bottom: 1px solid #f1f5f9;">
                  <td class="text-muted fw-medium" style="font-size: 13px;">
                    <div class="d-flex align-items-center gap-2">
                      <span><?= $i ?></span>
                      <span class="group-text cursor-pointer text-muted custom-copy-link" data-value="<?= base_url('invoice/' . $item['ids']) ?>" data-bs-toggle="tooltip" title="Copy Invoice Link">
                        <i class="fas fa-copy" style="font-size: 11px;"></i>
                      </span>
                    </div>
                  </td>
                  
                  <td class="text-dark" style="font-size: 13px;"><?= $item['customer_email'] ?></td>
                  
                  <td style="font-size: 13px;">
                    <span class="fw-semibold text-dark">৳<?= $item['customer_amount'] ?></span>
                    <span class="badge rounded-pill ms-1 fw-medium <?= $badge_class ?>" style="font-size: 11px; padding: 3px 8px;">
                      <?= $status_text ?>
                    </span>
                    <?php if (!empty($item['transaction_id'])) { ?>
                      <div class="small text-muted mt-0.5" style="font-size: 11px; font-family: monospace;">ID: <?= $item['transaction_id'] ?></div>
                    <?php } ?>
                  </td>
                  
                  <td><?= $item_status ?></td>
                  <td class="text-muted" style="font-size: 13px;"><?= show_item_datetime($item['created_at'], 'short'); ?></td>
                  <td class="text-center"><?= $show_item_buttons ?></td>
                </tr>
            <?php
              }
            } else {
              echo '<tr><td colspan="6" class="text-center py-4 text-muted">No records found</td></tr>';
            }
            ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<?= link_asset("js/dataTables/datatables.min.css") ?>
<?= script_asset('js/dataTables/datatables.min.js') ?>
<?= script_asset('js/datatables.js') ?>

<style>
    /* সিম্পল বর্ডার গাইডলাইন */
    .custom-simple-card {
        border: 1px solid #e2e8f0 !important;
    }
    
    /* টেবিল প্যাডিং অপ্টিমাইজেশন */
    .table-custom > :not(caption) > * > * {
        padding: 12px 10px;
        box-shadow: none !important;
    }
    
    /* কপি বাটন স্টাইল */
    .custom-copy-link {
        transition: color 0.15s ease;
    }
    .custom-copy-link:hover {
        color: #3b82f6 !important;
    }
    
    /* বুটস্ট্র্যাপের কড়া ওয়ার্নিং/সাকসেস অপাসিটি ফিক্স */
    .bg-opacity-15 {
        --bs-bg-opacity: 0.15;
    }
    .bg-opacity-10 {
        --bs-bg-opacity: 0.1;
    }
    .cursor-pointer {
        cursor: pointer;
    }
</style>

<script type="text/javascript">
  $(".group-text").unbind('click').click(function() {
    let v = $(this).data("value");
    var params = {
      'type': 'text',
      'value': v,
    };
    copyToClipBoard(params, 'toast', 'Invoice Link Copied Successfully');
  });
</script>
