<link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<div class="card border-0 shadow-none bg-transparent overflow-hidden" style="font-family: 'Plus Jakarta Sans', sans-serif;">
  <div class="pb-sm-5 pb-3 rounded-top">
    <div class="container py-4">

      <div class="row mx-0 g-4 justify-content-center">
        <?php if (!empty($items)) :
          foreach ($items as $item) :
            // একটি চেক ভেরিয়েবল এক্টিভ প্ল্যানের জন্য
            $isActive = (get_active_plan() && get_active_plan()->plan_id == $item['id']);
        ?>
            <div class="col-12 col-md-6 col-xl-4">
              <div class="card h-100 pricing-card position-relative <?= $isActive ? 'active-plan' : '' ?>">
                
                <?php if ($isActive) : ?>
                  <span class="position-absolute top-0 start-50 translate-middle badge rounded-pill bg-success px-3 py-2 fw-bold tracking-wider shadow-sm text-uppercase" style="font-size: 11px; letter-spacing: 1px; z-index: 10;">
                    Current Active Plan
                  </span>
                <?php endif; ?>

                <div class="card-body p-4 p-sm-5 d-flex flex-column justify-content-between position-relative z-1">
                  
                  <div class="text-center">
                    <h3 class="pricing-title text-capitalize fw-extrabold mb-2"><?= $item['name'] ?></h3>
                    <p class="text-muted text-center px-2 mb-4" style="font-size: 14px; line-height: 1.6; min-height: 44px;"><?= $item['description'] ?></p>
                    
                    <div class="price-container py-3 rounded-4 mb-4">
                      <div class="d-flex justify-content-center align-items-baseline">
                        <sup class="pricing-currency fw-bold text-primary me-1"><?= get_option('currency_symbol') ?></sup>
                        <h1 class="price-toggle price-yearly fw-extrabold display-5 mb-0 tracking-tight text-dark"><?= currency_format($item['final_price']) ?></h1>
                        <sub class="text-muted pricing-duration ms-1 fw-medium" style="font-size: 14px;">/<?= duration_type($item['name'], $item['duration_type'], $item['duration']) ?></sub>
                      </div>
                    </div>
                  </div>

                  <ul class="my-4 list-unstyled flex-grow-1">
                    <li class="d-flex align-items-start mb-3">
                      <span class="feature-icon-wrapper rounded-circle bg-primary bg-opacity-10 text-primary me-3 flex-shrink-0">
                        <i class="bx bx-check-circle fs-5"></i>
                      </span>
                      <div class="text-dark fw-medium mt-1" style="font-size: 14px;"><?= plan_message('brand', $item['brand']) ?></div>
                    </li>
                    <li class="d-flex align-items-start mb-3">
                      <span class="feature-icon-wrapper rounded-circle bg-primary bg-opacity-10 text-primary me-3 flex-shrink-0">
                        <i class="bx bx-check-circle fs-5"></i>
                      </span>
                      <div class="text-dark fw-medium mt-1" style="font-size: 14px;"><?= plan_message('device', $item['device']) ?></div>
                    </li>
                    <li class="d-flex align-items-start mb-3">
                      <span class="feature-icon-wrapper rounded-circle bg-primary bg-opacity-10 text-primary me-3 flex-shrink-0">
                        <i class="bx bx-check-circle fs-5"></i>
                      </span>
                      <div class="text-dark fw-medium mt-1" style="font-size: 14px;"><?= plan_message('transaction', $item['transaction']) ?></div>
                    </li>
                  </ul>

                  <div class="pt-2 pricing-btn-container">
                    <?= plan_button($item['id']); ?>
                  </div>
                  
                </div>
              </div>
            </div>
        <?php
          endforeach;
        endif;
        ?>
      </div>
    </div>
  </div>
</div>

<style>
  /* বেসিক কার্ড রিসেট এবং মডার্ন বর্ডার */
  .pricing-card {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pricing-title {
    color: #0f172a;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
  }

  .fw-extrabold {
    font-weight: 800 !important;
  }

  /* প্রাইস ডিসপ্লে ব্যাকগ্রাউন্ড */
  .price-container {
    background-color: #f8fafc;
    border: 1px solid #f1f5f9;
  }

  .pricing-currency {
    font-size: 20px;
    top: -0.5em;
  }

  /* আইকন র‍্যাপার */
  .feature-icon-wrapper {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* হোভার অ্যানিমেশন */
  .pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02) !important;
    border-color: #cbd5e1 !important;
  }

  /* একটিভ প্ল্যানের জন্য এক্সক্লুসিভ গ্লোয়িং স্টাইল */
  .pricing-card.active-plan {
    border: 2px solid #10b981 !important;
    box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.15) !important;
    background: linear-gradient(#fff, #fff) padding-box, 
                linear-gradient(135deg, #34d399, #059669) border-box;
  }
  
  .pricing-card.active-plan:hover {
    box-shadow: 0 20px 35px -5px rgba(16, 185, 129, 0.25) !important;
  }

  /* বাটনগুলোকে সুন্দর এবং ফুল-উইডথ করার জন্য ফিক্স */
  .pricing-btn-container > * {
    width: 100% !important;
    display: block;
    border-radius: 14px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease;
  }
</style>

<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>