<?= canAddBrand($items) ? show_page_header('brands', ['page-options' => 'add-new', 'page-options-type' => 'ajax-modal'], 'user') : ''; ?>

<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;">Brand Key</th>
              <th class="text-secondary fw-semibold py-3" style="font-size: 13px; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0;">Brand Name</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; text-align: center;">Action</th>
            </tr>
          </thead>
          <tbody>
            <?php
            if (!empty($items)) {
              $i = 0;
              foreach ($items as $item) {
                $item_status        = show_item_status('brands', $item['id'], $item['status'], 'switch', '', 'user');
                $show_item_buttons  = show_item_button_action('brands', $item['id'], '', '', 'user');
                $i++;
            ?>
                <tr class="tr_<?= $item['id'] ?>" style="border-bottom: 1px solid #f1f5f9;">
                  <td class="text-muted fw-medium" style="font-size: 13px; width: 5%;"><?= $i ?></td>
                  
                  <td style="width: 45%;">
                    <div class="d-flex align-items-center gap-2">
                      <div class="input-group input-group-custom" style="max-width: 320px;">
                        <input readonly type="text" class="form-control text-to-cliboard bg-light border-0 px-2.5" value="<?= $item['brand_key'] ?>" style="font-size: 12px; font-family: monospace; color: #334155; height: 34px;">
                        
                        <span class="input-group-text my-copy-btn cursor-pointer bg-light border-0 text-muted px-2.5" style="border-left: 1px solid #e2e8f0 !important;"><i class="fas fa-copy" style="font-size: 13px;"></i></span>
                        
                        <span class="input-group-text cursor-pointer bg-light border-0 px-2.5" style="border-left: 1px solid #e2e8f0 !important;">
                          <a href="<?= user_url('brands/reset-key/' . $item['id']) ?>" class="ajaxDeleteItem text-muted" data-confirm_ms="reset the brand key" data-bs-toggle="tooltip" data-bs-html="true" title="Reset Brand Key"><i class="fas fa-recycle" style="font-size: 13px;"></i></a>
                        </span>
                      </div>
                      <div class="flex-shrink-0">
                        <?= show_brand_status($item['brand_key'], session('uid')) ?>
                      </div>
                    </div>
                  </td>
                  
                  <td class="fw-semibold text-dark" style="font-size: 13px; width: 25%;"><?= $item['brand_name']; ?></td>
                  <td style="width: 15%;"><?php echo $item_status; ?></td>
                  <td class="text-center" style="width: 10%;"><?php echo $show_item_buttons; ?></td>
                </tr>
            <?php
              }
            } else {
              echo '<tr><td colspan="5" class="text-center py-4 text-muted">No brands found</td></tr>';
            }
            ?>
          </tbody>
        </table>

      </div>
    </div>
  </div>
</div>

<style>
    /* সিম্পল বর্ডার গাইডলাইন (কোনো ভারী শ্যাডো নেই) */
    .custom-simple-card {
        border: 1px solid #e2e8f0 !important;
    }
    
    /* টেবিল স্টাইলিং */
    .table-custom > :not(caption) > * > * {
        padding: 12px 10px;
        box-shadow: none !important;
    }
    
    /* ইনপুট গ্রুপ মডিফিকেশন */
    .input-group-custom {
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        overflow: hidden;
        background-color: #f8fafc;
    }
    .input-group-custom .form-control:focus {
        box-shadow: none;
        background-color: #f8fafc;
    }
    .input-group-custom .my-copy-btn:hover, 
    .input-group-custom a:hover {
        color: #3b82f6 !important;
    }
</style>

<script type="text/javascript">
  $(".my-copy-btn").unbind('click').click(function() {
    let vl = $(this).prev('.text-to-cliboard').val();
    let params = {
      'type': 'text',
      'value': vl,
    };
    copyToClipBoard(params, 'toast', 'Brand Key Copied Successfully')
  });
</script>