<?php
require_once __DIR__ . '/../includes/config.php';
require_once __DIR__ . '/auth.php';
$packages     = readJSON(PACKAGES_FILE);
$activePackages = array_filter($packages, fn($p) => !empty($p['active']));
$pageTitle    = 'Packages Manager | KTE Admin';
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($pageTitle); ?></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500&family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body class="admin-body">
<div class="admin-sidebar d-none d-lg-block">
  <div class="admin-sidebar-logo"><a href="/admin/dashboard.php">KTE Admin</a><span>20th Kenya Expo</span></div>
  <ul class="admin-nav">
    <li><a href="/admin/dashboard.php"><i class="fas fa-chart-line"></i> Dashboard</a></li>
    <li><a href="/admin/leads.php"><i class="fas fa-users"></i> All Leads</a></li>
    <li><a href="/admin/packages.php" class="active"><i class="fas fa-box-open"></i> Packages Manager</a></li>
    <li><a href="/admin/sponsorship.php"><i class="fas fa-crown"></i> Sponsorship Manager</a></li>
    <li><a href="/admin/gallery.php"><i class="fas fa-images"></i> Gallery Manager</a></li>
    <li><a href="/admin/export.php"><i class="fas fa-file-csv"></i> Export CSV</a></li>
    <li><a href="/admin/logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
  </ul>
</div>
<div class="admin-main">
  <div class="admin-header">
    <div><h4 style="font-family:var(--font-heading);margin-bottom:4px;">Packages Manager</h4><p style="color:var(--text-muted);font-size:0.85rem;margin:0;"><?php echo count($activePackages); ?> active packages</p></div>
    <button class="btn btn-gold btn-sm" onclick="adminPackages.openAddModal()"><i class="fas fa-plus me-2"></i>Add Package</button>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-6 col-lg-3"><div class="kpi-card"><div class="kpi-number"><?php echo count($packages); ?></div><div class="kpi-label">Total Packages</div></div></div>
    <div class="col-6 col-lg-3"><div class="kpi-card"><div class="kpi-number" style="color:var(--success);"><?php echo count($activePackages); ?></div><div class="kpi-label">Active</div></div></div>
    <div class="col-6 col-lg-3"><div class="kpi-card"><div class="kpi-number" style="color:var(--accent);"><?php echo count(array_filter($packages, fn($p) => empty($p['active']))); ?></div><div class="kpi-label">Inactive</div></div></div>
    <div class="col-6 col-lg-3"><div class="kpi-card"><div class="kpi-number"><?php echo count(array_filter($packages, fn($p) => !empty($p['highlight']))); ?></div><div class="kpi-label">Highlighted</div></div></div>
  </div>

  <div class="row g-4">
    <?php foreach ($packages as $pkg): ?>
    <div class="col-lg-4 admin-pkg-card" data-id="<?php echo htmlspecialchars($pkg['id']); ?>">
      <div class="glass-card" style="border-color:<?php echo !empty($pkg['active']) ? 'var(--border)' : 'rgba(204,0,0,0.2)'; ?>;">
        <div class="d-flex align-items-center justify-content-between mb-2">
          <i class="fas <?php echo htmlspecialchars($pkg['icon']); ?>" style="font-size:1.5rem;color:<?php echo htmlspecialchars($pkg['color']); ?>"></i>
          <?php if (!empty($pkg['active'])): ?>
            <span class="badge" style="background:rgba(46,204,113,0.15);color:var(--success);font-size:0.65rem;">ACTIVE</span>
          <?php else: ?>
            <span class="badge" style="background:rgba(204,0,0,0.15);color:var(--accent);font-size:0.65rem;">INACTIVE</span>
          <?php endif; ?>
        </div>
        <h5 style="font-family:var(--font-heading);margin-bottom:4px;"><?php echo htmlspecialchars($pkg['name']); ?></h5>
        <p style="color:var(--secondary);font-family:var(--font-stats);font-size:1.1rem;margin-bottom:4px;"><?php echo htmlspecialchars($pkg['price_label']); ?></p>
        <p style="color:var(--text-muted);font-size:0.78rem;margin-bottom:12px;"><?php echo htmlspecialchars($pkg['price_note']); ?> &middot; <?php echo $pkg['space_sqm']; ?> sqm</p>
        <?php if (!empty($pkg['badge'])): ?>
        <span class="badge mb-2" style="background:rgba(212,175,55,0.15);color:var(--secondary);font-size:0.7rem;"><?php echo htmlspecialchars($pkg['badge']); ?></span>
        <?php endif; ?>
        <div class="d-flex gap-2 mt-3">
          <button class="btn btn-sm btn-outline-gold pkg-edit-btn" data-id="<?php echo htmlspecialchars($pkg['id']); ?>"><i class="fas fa-edit me-1"></i>Edit</button>
          <button class="btn btn-sm pkg-toggle-btn <?php echo !empty($pkg['active']) ? 'btn-outline-danger' : 'btn-outline-success'; ?>" data-id="<?php echo htmlspecialchars($pkg['id']); ?>" data-active="<?php echo !empty($pkg['active']) ? '1' : '0'; ?>">
            <?php echo !empty($pkg['active']) ? '<i class="fas fa-pause me-1"></i>Deactivate' : '<i class="fas fa-play me-1"></i>Activate'; ?>
          </button>
          <button class="btn btn-sm btn-outline-danger pkg-delete-btn" data-id="<?php echo htmlspecialchars($pkg['id']); ?>" data-name="<?php echo htmlspecialchars($pkg['name']); ?>"><i class="fas fa-trash"></i></button>
        </div>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
</div>

<!-- Add Package Modal -->
<div class="modal fade" id="addPkgModal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content">
  <div class="modal-header"><h5 class="modal-title">Add Package</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
  <div class="modal-body">
    <form id="addPkgForm">
      <div class="row g-3">
        <div class="col-md-6"><label class="form-label">Name *</label><input type="text" name="name" class="form-control" required></div>
        <div class="col-md-6"><label class="form-label">Badge</label><input type="text" name="badge" class="form-control" placeholder="e.g. Most Popular"></div>
        <div class="col-md-4"><label class="form-label">Icon (FA class)</label><input type="text" name="icon" class="form-control" value="fa-store"></div>
        <div class="col-md-4"><label class="form-label">Color</label><input type="color" name="color" class="form-control" value="#9AA5B4"></div>
        <div class="col-md-4"><label class="form-label">Space (sqm)</label><input type="number" name="space_sqm" class="form-control" value="9"></div>
        <div class="col-md-6"><label class="form-label">Price Label</label><input type="text" name="price_label" class="form-control" value="Contact for Pricing"></div>
        <div class="col-md-6"><label class="form-label">Price Note</label><input type="text" name="price_note" class="form-control" placeholder="e.g. Best value"></div>
        <div class="col-md-6"><label class="form-label">CTA Label</label><input type="text" name="cta_label" class="form-control" value="Enquire Now"></div>
        <div class="col-md-3"><label class="form-label">Sort Order</label><input type="number" name="sort_order" class="form-control" value="1"></div>
        <div class="col-md-3"><div class="form-check mt-4"><input class="form-check-input" type="checkbox" name="highlight" id="addPkgHighlight"><label class="form-check-label" for="addPkgHighlight">Highlight</label></div></div>
        <div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" name="active" id="addPkgActive" checked><label class="form-check-label" for="addPkgActive">Active</label></div></div>
      </div>
      <div class="mt-3"><label class="form-label">Features</label><div id="addPkgFeatures"></div><button type="button" class="add-feature-btn" onclick="adminPackages.addFeatureRow('addPkgFeatures')"><i class="fas fa-plus me-1"></i>Add Feature</button></div>
    </form>
  </div>
  <div class="modal-footer"><button type="button" class="btn btn-outline-gold btn-sm" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-gold btn-sm" onclick="adminPackages.submitAddForm()">Save Package</button></div>
</div></div></div>

<!-- Edit Package Modal -->
<div class="modal fade" id="editPkgModal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content">
  <div class="modal-header"><h5 class="modal-title">Edit Package</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
  <div class="modal-body">
    <form id="editPkgForm">
      <input type="hidden" name="id" id="editPkgId">
      <div class="row g-3">
        <div class="col-md-6"><label class="form-label">Name *</label><input type="text" name="name" id="editPkgName" class="form-control" required></div>
        <div class="col-md-6"><label class="form-label">Badge</label><input type="text" name="badge" id="editPkgBadge" class="form-control"></div>
        <div class="col-md-4"><label class="form-label">Icon (FA class)</label><input type="text" name="icon" id="editPkgIcon" class="form-control"></div>
        <div class="col-md-4"><label class="form-label">Color</label><input type="color" name="color" id="editPkgColor" class="form-control"></div>
        <div class="col-md-4"><label class="form-label">Space (sqm)</label><input type="number" name="space_sqm" id="editPkgSpace" class="form-control"></div>
        <div class="col-md-6"><label class="form-label">Price Label</label><input type="text" name="price_label" id="editPkgPriceLabel" class="form-control"></div>
        <div class="col-md-6"><label class="form-label">Price Note</label><input type="text" name="price_note" id="editPkgPriceNote" class="form-control"></div>
        <div class="col-md-6"><label class="form-label">CTA Label</label><input type="text" name="cta_label" id="editPkgCtaLabel" class="form-control"></div>
        <div class="col-md-3"><label class="form-label">Sort Order</label><input type="number" name="sort_order" id="editPkgSort" class="form-control"></div>
        <div class="col-md-3"><div class="form-check mt-4"><input class="form-check-input" type="checkbox" name="highlight" id="editPkgHighlight"><label class="form-check-label" for="editPkgHighlight">Highlight</label></div></div>
        <div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" name="active" id="editPkgActive"><label class="form-check-label" for="editPkgActive">Active</label></div></div>
      </div>
      <div class="mt-3"><label class="form-label">Features</label><div id="editPkgFeatures"></div><button type="button" class="add-feature-btn" onclick="adminPackages.addFeatureRow('editPkgFeatures')"><i class="fas fa-plus me-1"></i>Add Feature</button></div>
    </form>
  </div>
  <div class="modal-footer"><button type="button" class="btn btn-outline-gold btn-sm" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-gold btn-sm" onclick="adminPackages.submitEditForm()">Update Package</button></div>
</div></div></div>

<script id="pkgData" type="application/json"><?php echo json_encode($packages); ?></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/main.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => { if (document.getElementById('pkgData')) adminPackages.init(); });</script>
</body>
</html>