{% extends "base_sidebar.html" %}
{% block title %}Campaign Builder – Dealer Pulse{% endblock %}

{% block topbar %}
<div class="flex items-center gap-4">
  <h1 class="text-lg font-semibold text-dp-ink">Campaign Builder</h1>
  <button class="ml-auto px-4 py-2 bg-dp-blue text-white text-sm font-medium rounded-lg hover:bg-dp-blue/90 transition">
    + New Campaign
  </button>
</div>
{% endblock %}

{% block content %}
<div x-data="campaignData()">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <template x-for="campaign in campaigns" :key="campaign.id">
      <div class="bg-white rounded-xl border border-dp-silver p-6 shadow-card hover:shadow-lg transition">
        <div class="flex items-start justify-between mb-4">
          <div>
            <h3 class="text-sm font-semibold text-dp-ink" x-text="campaign.name"></h3>
            <p class="text-xs text-gray-500 mt-1" x-text="campaign.description"></p>
          </div>
          <span 
            class="px-2 py-1 rounded-full text-[10px] font-semibold uppercase"
            :class="campaign.status === 'active' ? 'bg-emerald-100 text-emerald-700' : campaign.status === 'paused' ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-600'"
            x-text="campaign.status"
          ></span>
        </div>
        
        <div class="space-y-3 mb-4">
          <div class="flex items-center justify-between text-sm">
            <span class="text-gray-500">Customers</span>
            <span class="font-medium text-dp-ink" x-text="campaign.customers"></span>
          </div>
          <div class="flex items-center justify-between text-sm">
            <span class="text-gray-500">Stage Range</span>
            <span class="font-medium text-dp-ink" x-text="campaign.stageRange"></span>
          </div>
          <div class="flex items-center justify-between text-sm">
            <span class="text-gray-500">Start Date</span>
            <span class="font-medium text-dp-ink" x-text="campaign.startDate"></span>
          </div>
        </div>
        
        <div class="flex items-center gap-2 pt-4 border-t border-dp-silver/50">
          <button class="flex-1 px-3 py-2 text-xs font-medium text-dp-blue hover:bg-dp-blue/10 border border-dp-blue rounded-lg transition">
            View Details
          </button>
          <button 
            class="px-3 py-2 text-xs font-medium rounded-lg transition"
            :class="campaign.status === 'active' ? 'text-yellow-700 hover:bg-yellow-50 border border-yellow-300' : 'text-emerald-700 hover:bg-emerald-50 border border-emerald-300'"
            x-text="campaign.status === 'active' ? 'Pause' : 'Resume'"
          ></button>
        </div>
      </div>
    </template>
  </div>

  <div class="bg-white rounded-xl border border-dp-silver p-6 shadow-card">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-sm font-semibold text-dp-ink">Campaign Templates</h3>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="border border-dp-silver rounded-lg p-4 hover:border-dp-blue hover:bg-dp-blue/5 transition cursor-pointer">
        <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center mb-3">
          <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <h4 class="text-sm font-medium text-dp-ink mb-1">End of Term</h4>
        <p class="text-xs text-gray-500">5-stage renewal journey for customers 18-3 months from maturity</p>
      </div>
      
      <div class="border border-dp-silver rounded-lg p-4 hover:border-dp-blue hover:bg-dp-blue/5 transition cursor-pointer">
        <div class="w-10 h-10 rounded-lg bg-emerald-100 flex items-center justify-center mb-3">
          <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <h4 class="text-sm font-medium text-dp-ink mb-1">Service Reminder</h4>
        <p class="text-xs text-gray-500">Automated service booking reminders based on mileage/date</p>
      </div>
      
      <div class="border border-dp-silver rounded-lg p-4 hover:border-dp-blue hover:bg-dp-blue/5 transition cursor-pointer">
        <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center mb-3">
          <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <h4 class="text-sm font-medium text-dp-ink mb-1">Equity Alert</h4>
        <p class="text-xs text-gray-500">Reach out when customer has positive equity on their agreement</p>
      </div>
      
      <div class="border border-dp-silver rounded-lg p-4 hover:border-dp-blue hover:bg-dp-blue/5 transition cursor-pointer">
        <div class="w-10 h-10 rounded-lg bg-orange-100 flex items-center justify-center mb-3">
          <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path>
          </svg>
        </div>
        <h4 class="text-sm font-medium text-dp-ink mb-1">Re-engagement</h4>
        <p class="text-xs text-gray-500">Win back customers who declined or went cold 60+ days ago</p>
      </div>
    </div>
  </div>
</div>

<script>
  function campaignData() {
    return {
      campaigns: [
        {
          id: 1,
          name: 'EOT Q1 2025',
          description: 'End of Term renewal campaign for Q1 maturities',
          status: 'active',
          customers: 156,
          stageRange: '18-3 months',
          startDate: '01/10/2024'
        },
        {
          id: 2,
          name: 'Service Due January',
          description: 'Service booking reminders for January services',
          status: 'active',
          customers: 89,
          stageRange: 'N/A',
          startDate: '15/12/2024'
        },
        {
          id: 3,
          name: 'Positive Equity Alert',
          description: 'Customers with positive equity opportunities',
          status: 'paused',
          customers: 42,
          stageRange: '12+ months',
          startDate: '01/11/2024'
        }
      ]
    };
  }
</script>
{% endblock %}