<?php include 'header.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Ads Management</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"/>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <style>
    * { font-family: 'Inter', sans-serif; }
    body { background: #f5f7fb; }
    .tab-btn.active { color: #2563eb; border-color: #2563eb; background: rgba(37,99,235,0.06); }
    .ad-card { transition: all .25s ease; }
    .ad-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }
    .action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .18s ease; border: none; text-decoration: none; white-space: nowrap; flex: 1; }
    .action-btn-view  { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
    .action-btn-view:hover  { background: #2563eb; color: #fff; }
    .action-btn-edit  { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
    .action-btn-edit:hover  { background: #16a34a; color: #fff; }
    .action-btn-delete{ background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
    .action-btn-delete:hover{ background: #dc2626; color: #fff; }
  </style>
</head>
<body class="pt-12 pb-10">

  <div class="max-w-7xl mx-auto px-0 sm:px-6 lg:px-8 space-y-6 my-4">

    <!-- ── Header ── -->
    <div class="bg-white border border-gray-200 rounded-2xl shadow-sm p-5">
      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center shrink-0">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5h2m-1-1v2m7 5v6a2 2 0 01-2 2H7a2 2 0 01-2-2v-6m14 0V9a2 2 0 00-2-2h-2.5l-1-2h-3l-1 2H7a2 2 0 00-2 2v2m14 0H5" />
            </svg>
          </div>
          <div>
            <h1 class="text-2xl font-bold text-gray-900">Ads Management</h1>
            <p class="text-gray-500 text-xs mt-0.5">Manage all your campaigns in one place</p>
          </div>
        </div>
        <div class="flex gap-2">
          <button class="flex-1 sm:flex-none px-4 py-2 text-sm rounded-xl border border-gray-300 bg-white hover:bg-gray-50 text-gray-700 font-medium transition">Export Report</button>
          <a href="add_ads.php">
            <button class="flex-1 sm:flex-none px-4 py-2 text-sm rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-semibold shadow-md shadow-blue-100 transition">+ Create Ad</button>
          </a>
        </div>
      </div>

      <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mt-5">
        <div class="bg-gray-50 rounded-xl p-4 border border-gray-100">
          <p class="text-xs font-medium text-gray-500">Total Ads</p>
          <h2 class="text-2xl font-bold text-gray-900 mt-1">24</h2>
        </div>
        <div class="bg-green-50 rounded-xl p-4 border border-green-100">
          <p class="text-xs font-medium text-green-600">Running</p>
          <h2 class="text-2xl font-bold text-green-700 mt-1">12</h2>
        </div>
        <div class="bg-yellow-50 rounded-xl p-4 border border-yellow-100">
          <p class="text-xs font-medium text-yellow-600">Paused</p>
          <h2 class="text-2xl font-bold text-yellow-700 mt-1">05</h2>
        </div>
        <div class="bg-cyan-50 rounded-xl p-4 border border-cyan-100">
          <p class="text-xs font-medium text-cyan-600">Completed</p>
          <h2 class="text-2xl font-bold text-cyan-700 mt-1">07</h2>
        </div>
      </div>
    </div>

    <!-- ── Cards ── -->
    <div class="bg-white border border-gray-200 rounded-2xl shadow-sm p-5">
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-5">
        <div class="flex items-center gap-1.5 overflow-x-auto pb-1">
          <button class="tab-btn active whitespace-nowrap px-4 py-2 rounded-lg border border-blue-600 text-xs font-semibold" data-filter="all">All Ads</button>
          <button class="tab-btn whitespace-nowrap px-4 py-2 rounded-lg border border-transparent text-gray-600 text-xs font-semibold" data-filter="running">Running</button>
          <button class="tab-btn whitespace-nowrap px-4 py-2 rounded-lg border border-transparent text-gray-600 text-xs font-semibold" data-filter="paused">Paused</button>
          <button class="tab-btn whitespace-nowrap px-4 py-2 rounded-lg border border-transparent text-gray-600 text-xs font-semibold" data-filter="completed">Completed</button>
        </div>
        <div class="relative w-full sm:w-64">
          <input type="text" id="searchInput" placeholder="Search campaign..." class="w-full pl-9 pr-3 py-2 text-sm rounded-xl border border-gray-200 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400 absolute left-3 top-7 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z"/>
          </svg>
        </div>
      </div>

      <div id="adsContainer" class="grid grid-cols-1 xl:grid-cols-2 gap-4">

        <!-- ── Card 1 ── -->
        <div class="ad-item ad-card bg-white border border-gray-200 rounded-2xl p-4 flex flex-col justify-between" data-status="running" data-name="brand awareness campaign">
          <div class="flex items-start justify-between gap-3">
            <div class="flex items-center gap-3">
              <div class="w-12 h-12 rounded-xl border border-gray-200 flex items-center justify-center bg-white shrink-0 shadow-sm">
                <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" class="w-6 h-6" alt="Facebook">
              </div>
              <div>
                <h3 class="text-base font-bold text-gray-900 leading-snug">Brand Awareness Campaign</h3>
                <p class="text-xs text-gray-500 mt-0.5">Facebook Ads</p>
              </div>
            </div>
            <span class="bg-green-100 text-green-700 text-[11px] font-bold px-2.5 py-1 rounded-full shrink-0">Running</span>
          </div>

          <div class="grid grid-cols-3 gap-2 mt-4 bg-gray-50 p-2.5 rounded-xl text-center">
            <div><p class="text-[10px] text-gray-400 font-medium">Spent</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">₹12,450</h4></div>
            <div><p class="text-[10px] text-gray-400 font-medium">Reach</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">45.2K</h4></div>
            <div><p class="text-[10px] text-gray-400 font-medium">CTR</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">6.2%</h4></div>
          </div>

          <div class="mt-3">
            <div class="flex justify-between text-xs mb-1.5"><span class="text-gray-500 font-medium">Performance</span><span class="font-bold text-gray-900">78%</span></div>
            <div class="w-full h-1.5 bg-gray-100 rounded-full overflow-hidden"><div class="h-full w-[78%] bg-blue-600 rounded-full"></div></div>
          </div>

          <!-- Action Buttons -->
          <div class="flex gap-2 mt-4 pt-3.5 border-t border-gray-100">
            <a href="view_ads_detail.php" class="action-btn action-btn-view">
              <i class="ri-eye-line text-[13px]"></i> View
            </a>
            <a class="action-btn action-btn-edit">
              <i class="ri-edit-line text-[13px]"></i> Edit
            </a>
            <button class="action-btn action-btn-delete" onclick="confirmDelete('Brand Awareness Campaign')">
              <i class="ri-delete-bin-line text-[13px]"></i> Delete
            </button>
          </div>
        </div>

        <!-- ── Card 2 ── -->
        <div class="ad-item ad-card bg-white border border-gray-200 rounded-2xl p-4 flex flex-col justify-between" data-status="running" data-name="instagram engagement">
          <div class="flex items-start justify-between gap-3">
            <div class="flex items-center gap-3">
              <div class="w-12 h-12 rounded-xl border border-gray-200 flex items-center justify-center bg-white shrink-0 shadow-sm">
                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" class="w-6 h-6" alt="Instagram">
              </div>
              <div>
                <h3 class="text-base font-bold text-gray-900 leading-snug">Instagram Engagement</h3>
                <p class="text-xs text-gray-500 mt-0.5">Instagram Ads</p>
              </div>
            </div>
            <span class="bg-green-100 text-green-700 text-[11px] font-bold px-2.5 py-1 rounded-full shrink-0">Running</span>
          </div>

          <div class="grid grid-cols-3 gap-2 mt-4 bg-gray-50 p-2.5 rounded-xl text-center">
            <div><p class="text-[10px] text-gray-400 font-medium">Spent</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">₹8,200</h4></div>
            <div><p class="text-[10px] text-gray-400 font-medium">Reach</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">32.5K</h4></div>
            <div><p class="text-[10px] text-gray-400 font-medium">CTR</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">5.1%</h4></div>
          </div>

          <div class="mt-3">
            <div class="flex justify-between text-xs mb-1.5"><span class="text-gray-500 font-medium">Performance</span><span class="font-bold text-gray-900">65%</span></div>
            <div class="w-full h-1.5 bg-gray-100 rounded-full overflow-hidden"><div class="h-full w-[65%] bg-pink-500 rounded-full"></div></div>
          </div>

          <div class="flex gap-2 mt-4 pt-3.5 border-t border-gray-100">
            <a href="view_ads_detail.php" class="action-btn action-btn-view">
              <i class="ri-eye-line text-[13px]"></i> View
            </a>
            <a class="action-btn action-btn-edit">
              <i class="ri-edit-line text-[13px]"></i> Edit
            </a>
            <button class="action-btn action-btn-delete" onclick="confirmDelete('Instagram Engagement')">
              <i class="ri-delete-bin-line text-[13px]"></i> Delete
            </button>
          </div>
        </div>

        <!-- ── Card 3 ── -->
        <div class="ad-item ad-card bg-white border border-gray-200 rounded-2xl p-4 flex flex-col justify-between" data-status="paused" data-name="lead generation campaign">
          <div class="flex items-start justify-between gap-3">
            <div class="flex items-center gap-3">
              <div class="w-12 h-12 rounded-xl border border-gray-200 flex items-center justify-center bg-white shrink-0 shadow-sm">
                <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" class="w-6 h-6" alt="Facebook">
              </div>
              <div>
                <h3 class="text-base font-bold text-gray-900 leading-snug">Lead Generation Campaign</h3>
                <p class="text-xs text-gray-500 mt-0.5">Facebook Ads</p>
              </div>
            </div>
            <span class="bg-yellow-100 text-yellow-700 text-[11px] font-bold px-2.5 py-1 rounded-full shrink-0">Paused</span>
          </div>

          <div class="grid grid-cols-3 gap-2 mt-4 bg-gray-50 p-2.5 rounded-xl text-center">
            <div><p class="text-[10px] text-gray-400 font-medium">Spent</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">₹4,780</h4></div>
            <div><p class="text-[10px] text-gray-400 font-medium">Reach</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">18.7K</h4></div>
            <div><p class="text-[10px] text-gray-400 font-medium">CTR</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">3.4%</h4></div>
          </div>

          <div class="mt-3">
            <div class="flex justify-between text-xs mb-1.5"><span class="text-gray-500 font-medium">Performance</span><span class="font-bold text-gray-900">42%</span></div>
            <div class="w-full h-1.5 bg-gray-100 rounded-full overflow-hidden"><div class="h-full w-[42%] bg-yellow-500 rounded-full"></div></div>
          </div>

          <div class="flex gap-2 mt-4 pt-3.5 border-t border-gray-100">
            <a href="view_ads_detail.php" class="action-btn action-btn-view">
              <i class="ri-eye-line text-[13px]"></i> View
            </a>
            <a class="action-btn action-btn-edit">
              <i class="ri-edit-line text-[13px]"></i> Edit
            </a>
            <button class="action-btn action-btn-delete" onclick="confirmDelete('Lead Generation Campaign')">
              <i class="ri-delete-bin-line text-[13px]"></i> Delete
            </button>
          </div>
        </div>

        <!-- ── Card 4 ── -->
        <div class="ad-item ad-card bg-white border border-gray-200 rounded-2xl p-4 flex flex-col justify-between" data-status="completed" data-name="website traffic campaign">
          <div class="flex items-start justify-between gap-3">
            <div class="flex items-center gap-3">
              <div class="w-12 h-12 rounded-xl border border-gray-200 flex items-center justify-center bg-white shrink-0 shadow-sm">
                <img src="https://upload.wikimedia.org/wikipedia/commons/c/c7/Google_Ads_logo.svg" class="w-6 h-6" alt="Google">
              </div>
              <div>
                <h3 class="text-base font-bold text-gray-900 leading-snug">Website Traffic Campaign</h3>
                <p class="text-xs text-gray-500 mt-0.5">Google Ads</p>
              </div>
            </div>
            <span class="bg-cyan-100 text-cyan-700 text-[11px] font-bold px-2.5 py-1 rounded-full shrink-0">Completed</span>
          </div>

          <div class="grid grid-cols-3 gap-2 mt-4 bg-gray-50 p-2.5 rounded-xl text-center">
            <div><p class="text-[10px] text-gray-400 font-medium">Spent</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">₹15,300</h4></div>
            <div><p class="text-[10px] text-gray-400 font-medium">Reach</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">56.9K</h4></div>
            <div><p class="text-[10px] text-gray-400 font-medium">CTR</p><h4 class="text-sm font-bold text-gray-900 mt-0.5">8.9%</h4></div>
          </div>

          <div class="mt-3">
            <div class="flex justify-between text-xs mb-1.5"><span class="text-gray-500 font-medium">Performance</span><span class="font-bold text-gray-900">92%</span></div>
            <div class="w-full h-1.5 bg-gray-100 rounded-full overflow-hidden"><div class="h-full w-[92%] bg-cyan-500 rounded-full"></div></div>
          </div>

          <div class="flex gap-2 mt-4 pt-3.5 border-t border-gray-100">
            <a href="view_ads_detail.php" class="action-btn action-btn-view">
              <i class="ri-eye-line text-[13px]"></i> View
            </a>
            <a class="action-btn action-btn-edit">
              <i class="ri-edit-line text-[13px]"></i> Edit
            </a>
            <button class="action-btn action-btn-delete" onclick="confirmDelete('Website Traffic Campaign')">
              <i class="ri-delete-bin-line text-[13px]"></i> Delete
            </button>
          </div>
        </div>

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

  <script>
    /* ── Tab Filter ── */
    const tabButtons = document.querySelectorAll(".tab-btn");
    const adItems    = document.querySelectorAll(".ad-item");

    tabButtons.forEach(button => {
      button.addEventListener("click", () => {
        tabButtons.forEach(btn => btn.classList.remove("active"));
        button.classList.add("active");
        filterCards();
      });
    });

    /* ── Search ── */
    document.getElementById('searchInput').addEventListener('input', filterCards);

    function filterCards() {
      const filter = document.querySelector('.tab-btn.active').getAttribute('data-filter');
      const query  = document.getElementById('searchInput').value.toLowerCase().trim();

      adItems.forEach(item => {
        const statusMatch = filter === 'all' || item.getAttribute('data-status') === filter;
        const nameMatch   = item.getAttribute('data-name').includes(query);
        item.style.display = (statusMatch && nameMatch) ? 'flex' : 'none';
      });
    }

    /* ── Delete Confirm ── */
    function confirmDelete(name) {
      Swal.fire({
        title: 'Delete Campaign?',
        html: `<span style="font-size:14px;color:#6b7280;">Are you sure you want to delete <strong style="color:#111;">${name}</strong>? This action cannot be undone.</span>`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, Delete',
        cancelButtonText: 'Cancel',
        confirmButtonColor: '#dc2626',
        cancelButtonColor: '#6b7280',
        customClass: {
          popup: 'rounded-2xl',
          confirmButton: 'rounded-xl text-sm font-semibold',
          cancelButton:  'rounded-xl text-sm font-semibold'
        }
      });
    }
  </script>
</body>
</html>
<?php include 'footer.php'; ?>