<style>
/* Zero-Cost Plan Styling (ফ্রি প্ল্যানের জন্য স্পেশাল ডিজাইন) */
.zero-cost-plan {
    position: relative;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: 2px solid #4facfe !important;
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.25);
    transition: all 0.3s ease;
}

.zero-cost-plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(79, 172, 254, 0.35);
}

.zero-cost-plan .card-body {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    margin: 8px;
}

.zero-cost-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(45deg, #28a745, #20c997);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
    z-index: 10;
}

.plan-price-zero {
    color: #4facfe !important;
    font-weight: bold;
}

.used-plan {
    opacity: 0.7;
    filter: grayscale(30%);
}
</style>

<div class="card overflow-hidden">
  <!-- Pricing Plans -->
  <div class="pb-sm-5 pb-2 rounded-top">
    <div class="container py-5">

      <div class="row mx-0 gy-3 px-lg-2">
        <?php if (!empty($items)) :
          foreach ($items as $item) :
            
            // ১. লজিক: চেক করা হচ্ছে এটি ফ্রি প্ল্যান কি না
            $is_zero_cost = (isset($item['final_price']) && $item['final_price'] == 0);
            $has_used_zero_plan = false;
            
            // ২. লজিক: ইউজার যদি লগইন থাকে, তবে সে এই ফ্রি প্ল্যানটি আগে নিয়েছে কি না তা চেক করা
            if ($is_zero_cost && session('uid')) {
                try {
                    $user_model = new \User\Models\UserModel();
                    $existing_plan = $user_model->get('*', 'user_plans', ['uid' => session('uid'), 'plan_id' => $item['id']]);
                    $has_used_zero_plan = !empty($existing_plan);
                } catch (Exception $e) {
                    $has_used_zero_plan = false;
                }
            }

            // ৩. লজিক: কার্ডের ক্লাস নির্ধারণ (Active, Free, বা Normal)
            $card_class = '';
            $active_plan = get_active_plan();
            
            if ($active_plan && $active_plan->plan_id == $item['id']) {
                $card_class = 'border-success border-4 shadow-primary active-plan';
            } elseif ($is_zero_cost && !$has_used_zero_plan) {
                $card_class = 'zero-cost-plan'; // নতুন ফ্রি প্ল্যান হলে স্পেশাল ডিজাইন
            } elseif ($is_zero_cost && $has_used_zero_plan) {
                $card_class = 'border shadow-none used-plan'; // আগে ব্যবহার করা হয়ে গেলে হালকা ঝাপসা
            } else {
                $card_class = 'border shadow-none';
            }
        ?>
            <div class="col-md-4 mb-md-0 mb-4">
              <div class="card <?= $card_class ?>">
                
                <!-- ৪. লজিক: ফ্রি বা ইউজড ব্যাজ দেখানো -->
                <?php if ($is_zero_cost && !$has_used_zero_plan): ?>
                  <div class="zero-cost-badge">🎁 FREE</div>
                <?php elseif ($is_zero_cost && $has_used_zero_plan): ?>
                  <div class="zero-cost-badge" style="background: linear-gradient(45deg, #95a5a6, #7f8c8d);">✓ USED</div>
                <?php endif; ?>

                <div class="card-body position-relative">
                  <h3 class="card-title text-center text-capitalize mb-1"><?= $item['name'] ?></h3>
                  <p class="text-center"><?= $item['description'] ?></p>
                  
                  <div class="text-center">
                    <div class="d-flex justify-content-center">
                      <sup class="h6 pricing-currency mt-3 mb-0 me-1 <?= $is_zero_cost ? 'plan-price-zero' : '' ?>">
                          <?= get_option('currency_symbol') ?>
                      </sup>
                      <h1 class="price-toggle price-yearly display-4 mb-0 <?= $is_zero_cost ? 'plan-price-zero' : '' ?>">
                          <?= currency_format($item['final_price']) ?>
                      </h1>
                      <sub class="h6 text-muted pricing-duration mt-auto mb-2 fw-normal">/<?= duration_type($item['name'], $item['duration_type'], $item['duration']) ?></sub>
                    </div>
                    
                    <!-- ৫. লজিক: ফ্রি প্ল্যানের ক্ষেত্রে ওয়ার্নিং বা অফার টেক্সট -->
                    <?php if ($is_zero_cost): ?>
                      <div class="text-center mt-2">
                        <small class="<?= $has_used_zero_plan ? 'text-danger' : 'text-muted' ?>">
                          <?= $has_used_zero_plan ? '⚠️ Already used - One time only' : '🎁 Limited time offer - Get it now' ?>
                        </small>
                      </div>
                    <?php endif; ?>
                  </div>

                  <ul class="my-4 list-unstyled">
                    <li class="mb-2"><span class="badge badge-center w-px-20 h-px-20 rounded-pill bg-label-primary me-2"><i class="bx bx-check bx-xs"></i></span>
                      <?= plan_message('brand', $item['brand']) ?>
                    </li>
                    <li class="mb-2"><span class="badge badge-center w-px-20 h-px-20 rounded-pill bg-label-primary me-2"><i class="bx bx-check bx-xs"></i></span>
                      <?= plan_message('device', $item['device']) ?>
                    </li>
                    <li class="mb-2"><span class="badge badge-center w-px-20 h-px-20 rounded-pill bg-label-primary me-2"><i class="bx bx-check bx-xs"></i></span>
                      <?= plan_message('transaction', $item['transaction']) ?>
                    </li>
                  </ul>
                  
                  <?= plan_button($item['id']); ?>
                </div>
              </div>
            </div>
        <?php
          endforeach;
        endif;
        ?>
      </div>
    </div>
  </div>
  <!--/ Pricing Plans -->
</div>

<script>
  // কাউন্টডাউন ফাংশন আগের মতোই রাখা হয়েছে
  function updateCountdown(targetTime, countdownElement) {
    const currentTime = new Date();
    const timeDifference = targetTime - currentTime;
    if (timeDifference <= 0) {
      countdownElement.text("Expired");
    } else {
      const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
      const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
      countdownElement.text(`${days}d ${hours}h ${minutes}m ${seconds}s`);
    }
  }

  function updateCountdowns() {
    $(".countdown").each(function(index) {
      const targetTimeStr = $(this).siblings(".getExpire").text();
      const targetTime = new Date(targetTimeStr);
      updateCountdown(targetTime, $(this));
    });
  }
  setInterval(updateCountdowns, 1000);
  updateCountdowns();
</script>