<?php

// Example of available packs
$packs = [
    [
        'id' => 1,
        'titre' => 'Basic Pack',
        'description' => 'Highlight your listing for 1 day on the main page.',
        'duree' => '3 days',
        'prix' => 10
    ],
    [
        'id' => 2,
        'titre' => 'Silver Pack',
        'description' => 'Listing pinned at the top of its category + “Premium Listing” badge for 7 days.',
        'duree' => '7 days',
        'prix' => 25
    ],
    [
        'id' => 3,
        'titre' => 'Gold Pack',
        'description' => 'Maximum visibility: homepage, category, and search results for 15 days.',
        'duree' => '15 days',
        'prix' => 50
    ]
];
?>

<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card shadow-sm p-4">
        <h3 class="text-center mb-4">🚀 Boost your listing</h3>
        <p class="text-muted text-center">
          Choose an advertising pack to increase the visibility of your listing <strong><?= $ref ?></strong>.
        </p>

        <form action="index.php?p=do_booster_annonce" method="POST">
          <input type="hidden" name="ref" value="<?= $ref ?>">

          <div class="row">
            <?php foreach ($packs as $pack): ?>
              <div class="col-md-4 mb-3">
                <label class="w-100">
                  <input type="radio" name="pack_id" value="<?= $pack['id'] ?>" class="form-check-input me-2" required>
                  <div class="card shadow-sm p-3 text-center pack-option" style="cursor:pointer;">
                    <h5 class="text-primary"><?= htmlspecialchars($pack['titre']) ?></h5>
                    <p class="small text-muted"><?= htmlspecialchars($pack['description']) ?></p>
                    <p class="fw-bold mb-1"><?= htmlspecialchars($pack['duree']) ?></p>
                    <p class="fw-bold text-success"><?= htmlspecialchars($pack['prix']) ?> <?= htmlspecialchars($_SESSION['devise'] ?? 'USD') ?></p>
                  </div>
                </label>
              </div>
            <?php endforeach; ?>
          </div>

          <div class="mb-3">
            <label class="form-label fw-bold">Payment method:</label>
            <select name="paiement" class="form-select" required>

              <option value="solde">
                💰 From my balance (<?= $_SESSION['user']['solde']; ?>)
              </option>

              <option value="card">💳 Credit card</option>
              <option value="bank">🏦 Bank transfer</option>
            </select>
          </div>

          <div class="text-center mt-3">
            <button type="submit" class="btn btn-success px-4">✅ Confirm boost</button>
            <a href="index.php?p=dashboard" class="btn btn-secondary px-4">Cancel</a>
          </div>

        </form>

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

<style>
.pack-option {
  transition: transform 0.2s, box-shadow 0.2s;
}
.pack-option:hover {
  transform: scale(1.03);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
input[type="radio"]:checked + .pack-option {
  border: 2px solid #198754;
  box-shadow: 0 3px 10px rgba(25, 135, 84, 0.3);
}
</style>
