<?php
require_once __DIR__ . '/../includes/config.php';
require_once __DIR__ . '/auth.php';
$tiers       = readJSON(SPONSORSHIP_FILE);
$activeTiers = array_filter($tiers, fn($t) => !empty($t['active']));
$pageTitle   = 'Sponsorship 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"><i class="fas fa-box-open"></i> Packages Manager</a></li>
    <li><a href="/admin/sponsorship.php" class="active"><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;">Sponsorship Manager</h4><p style="color:var(--text-muted);font-size:0.85rem;margin:0;"><?php echo count($activeTiers); ?> active tiers</p></div>
    <button class="btn btn-gold btn-sm" onclick="adminSponsorship.openAddModal()"><i class="fas fa-plus me-2"></i>Add Tier</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($tiers); ?></div><div class="kpi-label">Total Tiers</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($activeTiers); ?></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($tiers, fn($t) => empty($t['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($tiers, fn($t) => !empty($t['highlight']))); ?></div><div class="kpi-label">Highlighted</div></div></div>
  </div>

  <div class="row g-4">
    <?php foreach ($tiers as $tier): ?>
    <div class="col-lg-6 admin-spon-card" data-id="<?php echo htmlspecialchars($tier['id']); ?>">
      <div class="glass-card" style="border-color:<?php echo !empty($tier['active']) ? 'var(--border)' : 'rgba(204,0,0,0.2)'; ?>;">
        <div class="d-flex align-items-center justify-content-between mb-2">
          <div class="d-flex align-items-center gap-2">
            <i class="fas <?php echo htmlspecialchars($tier['icon']); ?>" style="font-size:1.4rem;color:<?php echo htmlspecialchars($tier['color']); ?>"></i>
            <h5 style="font-family:var(--font-heading);margin:0;"><?php echo htmlspecialchars($tier['tier']); ?></h5>
          </div>
          <?php if (!empty($tier['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>
        <?php if (!empty($tier['badge'])): ?><span class="badge mb-2" style="background:rgba(212,175,55,0.15);color:var(--secondary);font-size:0.7rem;"><?php echo htmlspecialchars($tier['badge']); ?></span><?php endif; ?>
        <p style="color:var(--secondary);font-family:var(--font-stats);margin-bottom:4px;"><?php echo htmlspecialchars($tier['price_label']); ?></p>
        <p style="color:var(--text-muted);font-size:0.78rem;margin-bottom:10px;"><?php echo htmlspecialchars($tier['price_note']); ?></p>

        <?php if (isset($tier['slots_available']) && $tier['slots_available'] > 0): ?>
        <div class="slot-indicator mb-2">
          <span class="slot-dot"></span>
          <span><?php echo ($tier['slots_available'] - ($tier['slots_taken'] ?? 0)); ?> of <?php echo $tier['slots_available']; ?> available</span>
          <button class="btn-icon btn-icon-success slot-inc-btn" data-id="<?php echo htmlspecialchars($tier['id']); ?>" data-delta="1" style="margin-left:auto;" title="+ Taken"><i class="fas fa-plus"></i></button>
          <button class="btn-icon btn-icon-danger slot-inc-btn" data-id="<?php echo htmlspecialchars($tier['id']); ?>" data-delta="-1" title="- Taken"><i class="fas fa-minus"></i></button>
        </div>
        <?php endif; ?>

        <p style="font-size:0.78rem;color:var(--text-muted);margin-bottom:8px;"><?php echo count($tier['benefits'] ?? []); ?> benefits &middot; <?php echo count($tier['visibility_items'] ?? []); ?> visibility items</p>
        <div class="d-flex gap-2">
          <button class="btn btn-sm btn-outline-gold spon-edit-btn" data-id="<?php echo htmlspecialchars($tier['id']); ?>"><i class="fas fa-edit me-1"></i>Edit</button>
          <button class="btn btn-sm spon-toggle-btn <?php echo !empty($tier['active']) ? 'btn-outline-danger' : 'btn-outline-success'; ?>" data-id="<?php echo htmlspecialchars($tier['id']); ?>" data-active="<?php echo !empty($tier['active']) ? '1' : '0'; ?>"><?php echo !empty($tier['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 spon-delete-btn" data-id="<?php echo htmlspecialchars($tier['id']); ?>" data-name="<?php echo htmlspecialchars($tier['tier']); ?>"><i class="fas fa-trash"></i></button>
        </div>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
</div>

<!-- Add Sponsor Modal -->
<div class="modal fade" id="addSponModal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content">
  <div class="modal-header"><h5 class="modal-title">Add Sponsorship Tier</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
  <div class="modal-body">
    <form id="addSponForm">
      <div class="row g-3">
        <div class="col-md-6"><label class="form-label">Tier Name *</label><input type="text" name="tier" 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. Limited - 3 Slots"></div>
        <div class="col-md-4"><label class="form-label">Icon (FA class)</label><input type="text" name="icon" class="form-control" value="fa-star"></div>
        <div class="col-md-4"><label class="form-label">Color</label><input type="color" name="color" class="form-control" value="#CD7F32"></div>
        <div class="col-md-4"><label class="form-label">Sort Order</label><input type="number" name="sort_order" class="form-control" value="1"></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"></div>
        <div class="col-md-6"><label class="form-label">Slots Available</label><input type="number" name="slots_available" class="form-control" value="0"></div>
        <div class="col-md-6"><label class="form-label">Slots Taken</label><input type="number" name="slots_taken" class="form-control" value="0"></div>
        <div class="col-6"><div class="form-check"><input class="form-check-input" type="checkbox" name="highlight" id="addSponHighlight"><label class="form-check-label" for="addSponHighlight">Highlight</label></div></div>
        <div class="col-6"><div class="form-check"><input class="form-check-input" type="checkbox" name="active" id="addSponActive" checked><label class="form-check-label" for="addSponActive">Active</label></div></div>
      </div>
      <div class="mt-3"><label class="form-label">Benefits</label><div id="addSponBenefits"></div><button type="button" class="add-benefit-btn" onclick="adminSponsorship.addBenefitRow('addSponBenefits')"><i class="fas fa-plus me-1"></i>Add Benefit</button></div>
      <div class="mt-3"><label class="form-label">Visibility Items</label><div id="addSponVisibility"></div><button type="button" class="add-visibility-btn" onclick="adminSponsorship.addVisibilityRow('addSponVisibility')"><i class="fas fa-plus me-1"></i>Add Visibility Item</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="adminSponsorship.submitAddForm()">Save Tier</button></div>
</div></div></div>

<!-- Edit Sponsor Modal -->
<div class="modal fade" id="editSponModal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content">
  <div class="modal-header"><h5 class="modal-title">Edit Sponsorship Tier</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
  <div class="modal-body">
    <form id="editSponForm">
      <input type="hidden" name="id" id="editSponId">
      <div class="row g-3">
        <div class="col-md-6"><label class="form-label">Tier Name *</label><input type="text" name="tier" id="editSponTier" class="form-control" required></div>
        <div class="col-md-6"><label class="form-label">Badge</label><input type="text" name="badge" id="editSponBadge" class="form-control"></div>
        <div class="col-md-4"><label class="form-label">Icon (FA class)</label><input type="text" name="icon" id="editSponIcon" class="form-control"></div>
        <div class="col-md-4"><label class="form-label">Color</label><input type="color" name="color" id="editSponColor" class="form-control"></div>
        <div class="col-md-4"><label class="form-label">Sort Order</label><input type="number" name="sort_order" id="editSponSort" class="form-control"></div>
        <div class="col-md-6"><label class="form-label">Price Label</label><input type="text" name="price_label" id="editSponPriceLabel" class="form-control"></div>
        <div class="col-md-6"><label class="form-label">Price Note</label><input type="text" name="price_note" id="editSponPriceNote" class="form-control"></div>
        <div class="col-md-6"><label class="form-label">Slots Available</label><input type="number" name="slots_available" id="editSponSlotsAvail" class="form-control"></div>
        <div class="col-md-6"><label class="form-label">Slots Taken</label><input type="number" name="slots_taken" id="editSponSlotsTaken" class="form-control"></div>
        <div class="col-6"><div class="form-check"><input class="form-check-input" type="checkbox" name="highlight" id="editSponHighlight"><label class="form-check-label" for="editSponHighlight">Highlight</label></div></div>
        <div class="col-6"><div class="form-check"><input class="form-check-input" type="checkbox" name="active" id="editSponActive"><label class="form-check-label" for="editSponActive">Active</label></div></div>
      </div>
      <div class="mt-3"><label class="form-label">Benefits</label><div id="editSponBenefits"></div><button type="button" class="add-benefit-btn" onclick="adminSponsorship.addBenefitRow('editSponBenefits')"><i class="fas fa-plus me-1"></i>Add Benefit</button></div>
      <div class="mt-3"><label class="form-label">Visibility Items</label><div id="editSponVisibility"></div><button type="button" class="add-visibility-btn" onclick="adminSponsorship.addVisibilityRow('editSponVisibility')"><i class="fas fa-plus me-1"></i>Add Visibility Item</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="adminSponsorship.submitEditForm()">Update Tier</button></div>
</div></div></div>

<script id="sponData" type="application/json"><?php echo json_encode($tiers); ?></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('sponData')) adminSponsorship.init(); });</script>
</body>
</html>