{% extends "base_sidebar.html" %}
{% block title %}LIA – Renewals Dashboard{% endblock %}

{% block alpine_data %}x-data="{
  campaignId: 'live',
  searchQuery: '',
  myCustomersOnly: false,
  currentUserId: 'lia-bot',
  selectedCustomer: null,
  statusFilter: 'all',
  monthsFilter: null,
  paymentFilter: null,
  channelFilter: null,
  advisorFilter: 'all',
  campaignFilter: 'all',
  currentView: 'overview',
  loading: true,
  error: null,
  
  async init() {
    const params = new URLSearchParams(window.location.search);
    this.currentView = params.get('view') || 'overview';
    const status = params.get('status');
    
    if (this.currentView === 'live-campaign') {
      this.statusFilter = 'all';
    } else if (this.currentView === 'all-customers') {
      this.statusFilter = 'all';
    } else if (this.currentView === 'missed-opportunities' || status === 'declined') {
      this.statusFilter = 'declined';
    } else if (this.currentView === 'no-response' || status === 'no-response') {
      this.statusFilter = 'no-response';
    } else if (this.currentView === 'declined') {
      this.statusFilter = 'declined';
    }
    
    await this.loadCustomers();
  },
  
  async loadCustomers() {
    this.loading = true;
    this.error = null;
    try {
      const response = await fetch('/api/lia/campaign-customers');
      if (!response.ok) throw new Error('Failed to load customers');
      const data = await response.json();
      this.customers = data.customers || [];
    } catch (err) {
      this.error = err.message;
      this.customers = [];
    } finally {
      this.loading = false;
    }
  },
  
  customers: [],
  
  get uniqueAdvisors() {
    const advisors = this.customers.map(c => c.assignedAdvisor).filter(a => a && a !== 'lia-bot' && a !== '');
    return [...new Set(advisors)];
  },
  
  get uniqueCampaigns() {
    const campaigns = this.customers.map(c => c.campaign).filter(c => c && c !== '');
    return [...new Set(campaigns)];
  },
  
  get hasActiveFilters() {
    return this.statusFilter !== 'all' || 
           this.monthsFilter !== null || 
           this.paymentFilter !== null || 
           this.channelFilter !== null ||
           this.advisorFilter !== 'all' ||
           this.campaignFilter !== 'all' ||
           this.searchQuery.trim() !== '' ||
           this.myCustomersOnly;
  },
  
  clearAllFilters() {
    this.statusFilter = 'all';
    this.monthsFilter = null;
    this.paymentFilter = null;
    this.channelFilter = null;
    this.advisorFilter = 'all';
    this.campaignFilter = 'all';
    this.searchQuery = '';
    this.myCustomersOnly = false;
  },
  
  formatAdvisorName(email) {
    if (!email) return 'Unknown';
    return email.split('@')[0].replace(/[._]/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
  },
  
  get filteredCustomers() {
    return this.customers.filter(c => {
      // Status filter
      let statusMatch = true;
      if (this.statusFilter !== 'all') {
        if (this.statusFilter === 'engaged') statusMatch = ['ENGAGED', 'OFFER_SENT'].includes(c.status);
        else if (this.statusFilter === 'appointment') statusMatch = c.status === 'APPOINTMENT_BOOKED';
        else if (this.statusFilter === 'sold') statusMatch = c.status === 'SOLD';
        else if (this.statusFilter === 'declined') statusMatch = c.status === 'DECLINED';
        else if (this.statusFilter === 'declined-offer') statusMatch = c.status === 'DECLINED_OFFER';
        else if (this.statusFilter === 'no-response') statusMatch = ['NOT_CONTACTED', 'CONTACT_ATTEMPTED'].includes(c.status);
      }
      
      // Search filter (handle missing fields gracefully)
      let searchMatch = true;
      if (this.searchQuery.trim() !== '') {
        const query = this.searchQuery.toLowerCase();
        searchMatch = (c.name || '').toLowerCase().includes(query) || 
                     (c.reg || '').toLowerCase().includes(query) || 
                     (c.phone || '').toLowerCase().includes(query) ||
                     (c.campaign || '').toLowerCase().includes(query) ||
                     (c.agreementNumber || '').toLowerCase().includes(query) ||
                     (c.model || '').toLowerCase().includes(query);
      }
      
      // Months remaining filter (matches milestone values from buttons: 3, 6, 9, 12)
      let monthsMatch = true;
      if (this.monthsFilter !== null) {
        monthsMatch = c.monthsRemaining <= this.monthsFilter;
      }
      
      // Payment band filter - filter by current payment ranges
      let paymentMatch = true;
      if (this.paymentFilter !== null) {
        const payment = c.currentPayment;
        if (payment === null || payment === undefined) {
          paymentMatch = false;
        } else {
          if (this.paymentFilter === 'under300') paymentMatch = payment < 300;
          else if (this.paymentFilter === '300to500') paymentMatch = payment >= 300 && payment <= 500;
          else if (this.paymentFilter === 'over500') paymentMatch = payment > 500;
        }
      }
      
      // Channel filter
      let channelMatch = true;
      if (this.channelFilter !== null) {
        channelMatch = (c.lastContactChannel || 'WhatsApp') === this.channelFilter;
      }
      
      // Advisor dropdown filter
      let advisorDropdownMatch = true;
      if (this.advisorFilter !== 'all') {
        if (this.advisorFilter === 'lia-bot') {
          advisorDropdownMatch = !c.assignedAdvisor || c.assignedAdvisor === 'lia-bot' || c.assignedAdvisor === '';
        } else {
          advisorDropdownMatch = c.assignedAdvisor === this.advisorFilter;
        }
      }
      
      // Campaign dropdown filter
      let campaignMatch = true;
      if (this.campaignFilter !== 'all') {
        campaignMatch = c.campaign === this.campaignFilter;
      }
      
      // My Customers Only filter
      let advisorMatch = true;
      if (this.myCustomersOnly) {
        advisorMatch = c.assignedAdvisor === this.currentUserId;
      }
      
      return statusMatch && searchMatch && monthsMatch && paymentMatch && channelMatch && advisorDropdownMatch && campaignMatch && advisorMatch;
    });
  },
  
  getStatusColor(status) {
    const colors = {
      'SOLD': 'bg-emerald-100 text-emerald-700 border-emerald-200',
      'APPOINTMENT_BOOKED': 'bg-blue-100 text-blue-700 border-blue-200',
      'ENGAGED': 'bg-indigo-100 text-indigo-700 border-indigo-200',
      'OFFER_SENT': 'bg-purple-100 text-purple-700 border-purple-200',
      'DECLINED': 'bg-red-100 text-red-700 border-red-200',
      'DECLINED_OFFER': 'bg-orange-100 text-orange-700 border-orange-200',
      'NOT_CONTACTED': 'bg-gray-100 text-gray-600 border-gray-200',
      'CONTACT_ATTEMPTED': 'bg-yellow-100 text-yellow-700 border-yellow-200'
    };
    return colors[status] || 'bg-gray-100 text-gray-600 border-gray-200';
  },
  
  getStatusLabel(status) {
    const labels = {
      'SOLD': 'Sold',
      'APPOINTMENT_BOOKED': 'Appointment Booked',
      'ENGAGED': 'Engaged',
      'OFFER_SENT': 'Offer Sent',
      'DECLINED': 'Declined',
      'DECLINED_OFFER': 'Declined Offer',
      'NOT_CONTACTED': 'Not Contacted',
      'CONTACT_ATTEMPTED': 'Contact Attempted'
    };
    return labels[status] || status;
  },
  
  getRowBgColor(status) {
    const colors = {
      'SOLD': 'bg-emerald-50/30',
      'APPOINTMENT_BOOKED': 'bg-blue-50/30',
      'ENGAGED': 'bg-indigo-50/20',
      'DECLINED': 'bg-red-50/20',
      'DECLINED_OFFER': 'bg-orange-50/20'
    };
    return colors[status] || 'bg-white';
  }
}"{% endblock %}

{% block topbar %}
<!-- Top Bar with Filters (Exsto-style) -->
<div class="flex items-center gap-4">
  <!-- Campaign Selector -->
  <div class="flex items-center gap-2">
    <label class="text-xs text-gray-600">Campaign:</label>
    <select 
      x-model="campaignId"
      class="text-sm border border-dp-silver rounded-lg px-3 py-1.5 bg-white hover:border-dp-blue/50 focus:border-dp-blue focus:outline-none transition"
    >
      <option value="live">Live Campaign (EOT Q1 2025)</option>
      <option value="all">All Database Customers</option>
      <option value="archive-2024">Archive - Q4 2024</option>
    </select>
  </div>

  <!-- Search Box -->
  <div class="flex-1 max-w-md">
    <div class="relative">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
      <input
        type="text"
        x-model="searchQuery"
        placeholder="Search by name, reg, or agreement..."
        class="w-full pl-10 pr-4 py-1.5 text-sm border border-dp-silver rounded-lg focus:border-dp-blue focus:outline-none transition"
      />
    </div>
  </div>

  <!-- Toggles -->
  <label class="flex items-center gap-2 text-xs text-gray-600 cursor-pointer">
    <input type="checkbox" x-model="myCustomersOnly" class="rounded border-gray-300 text-dp-blue focus:ring-dp-blue" />
    <span>My Customers Only</span>
  </label>

  <!-- Status Indicator -->
  <div class="flex items-center gap-2 text-xs text-gray-500">
    <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
    <span>Realtime</span>
  </div>
</div>
{% endblock %}

{% block content %}
<div>
  <!-- Status Filter Strip -->
  <div class="mb-6 space-y-3">
    <!-- Primary Status Pills -->
    <div class="flex items-center gap-2 flex-wrap">
      <button
        @click="statusFilter = 'all'"
        :class="statusFilter === 'all' ? 'bg-dp-blue text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
        class="px-4 py-2 rounded-lg border border-dp-silver text-xs font-medium transition shadow-sm"
      >
        All
      </button>
      <button
        @click="statusFilter = 'engaged'"
        :class="statusFilter === 'engaged' ? 'bg-dp-blue text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
        class="px-4 py-2 rounded-lg border border-dp-silver text-xs font-medium transition shadow-sm"
      >
        Engaged
      </button>
      <button
        @click="statusFilter = 'appointment'"
        :class="statusFilter === 'appointment' ? 'bg-dp-blue text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
        class="px-4 py-2 rounded-lg border border-dp-silver text-xs font-medium transition shadow-sm"
      >
        Appointment Booked
      </button>
      <button
        @click="statusFilter = 'sold'"
        :class="statusFilter === 'sold' ? 'bg-dp-blue text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
        class="px-4 py-2 rounded-lg border border-dp-silver text-xs font-medium transition shadow-sm"
      >
        Sold
      </button>
      <button
        @click="statusFilter = 'declined'"
        :class="statusFilter === 'declined' ? 'bg-dp-blue text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
        class="px-4 py-2 rounded-lg border border-dp-silver text-xs font-medium transition shadow-sm"
      >
        Declined
      </button>
      <button
        @click="statusFilter = 'declined-offer'"
        :class="statusFilter === 'declined-offer' ? 'bg-dp-blue text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
        class="px-4 py-2 rounded-lg border border-dp-silver text-xs font-medium transition shadow-sm"
      >
        Declined Offer
      </button>
      <button
        @click="statusFilter = 'no-response'"
        :class="statusFilter === 'no-response' ? 'bg-dp-blue text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
        class="px-4 py-2 rounded-lg border border-dp-silver text-xs font-medium transition shadow-sm"
      >
        No Response
      </button>
    </div>

    <!-- Secondary Filter Chips -->
    <div class="flex items-center gap-2 flex-wrap text-xs">
      <span class="text-gray-500">Stage:</span>
      <button
        @click="monthsFilter = monthsFilter === 18 ? null : 18"
        :class="monthsFilter === 18 ? 'bg-dp-blue/10 text-dp-blue border-dp-blue' : 'bg-white text-gray-600 hover:bg-gray-50 border-dp-silver'"
        class="px-3 py-1 rounded-full border transition"
      >
        18m
      </button>
      <button
        @click="monthsFilter = monthsFilter === 12 ? null : 12"
        :class="monthsFilter === 12 ? 'bg-dp-blue/10 text-dp-blue border-dp-blue' : 'bg-white text-gray-600 hover:bg-gray-50 border-dp-silver'"
        class="px-3 py-1 rounded-full border transition"
      >
        12m
      </button>
      <button
        @click="monthsFilter = monthsFilter === 9 ? null : 9"
        :class="monthsFilter === 9 ? 'bg-dp-blue/10 text-dp-blue border-dp-blue' : 'bg-white text-gray-600 hover:bg-gray-50 border-dp-silver'"
        class="px-3 py-1 rounded-full border transition"
      >
        9m
      </button>
      <button
        @click="monthsFilter = monthsFilter === 6 ? null : 6"
        :class="monthsFilter === 6 ? 'bg-dp-blue/10 text-dp-blue border-dp-blue' : 'bg-white text-gray-600 hover:bg-gray-50 border-dp-silver'"
        class="px-3 py-1 rounded-full border transition"
      >
        6m
      </button>
      <button
        @click="monthsFilter = monthsFilter === 3 ? null : 3"
        :class="monthsFilter === 3 ? 'bg-dp-blue/10 text-dp-blue border-dp-blue' : 'bg-white text-gray-600 hover:bg-gray-50 border-dp-silver'"
        class="px-3 py-1 rounded-full border transition"
      >
        3m
      </button>
      
      <span class="mx-1 text-gray-300">|</span>
      
      <span class="text-gray-500">Channel:</span>
      <button
        @click="channelFilter = channelFilter === 'WhatsApp' ? null : 'WhatsApp'"
        :class="channelFilter === 'WhatsApp' ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : 'bg-white text-gray-600 hover:bg-gray-50 border-dp-silver'"
        class="px-3 py-1 rounded-full border transition"
      >
        WhatsApp
      </button>
      <button
        @click="channelFilter = channelFilter === 'SMS' ? null : 'SMS'"
        :class="channelFilter === 'SMS' ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-white text-gray-600 hover:bg-gray-50 border-dp-silver'"
        class="px-3 py-1 rounded-full border transition"
      >
        SMS
      </button>
      <button
        @click="channelFilter = channelFilter === 'Email' ? null : 'Email'"
        :class="channelFilter === 'Email' ? 'bg-purple-50 text-purple-700 border-purple-200' : 'bg-white text-gray-600 hover:bg-gray-50 border-dp-silver'"
        class="px-3 py-1 rounded-full border transition"
      >
        Email
      </button>
      
      <span class="mx-1 text-gray-300">|</span>
      
      <span class="text-gray-500">Advisor:</span>
      <select 
        x-model="advisorFilter"
        class="px-2 py-1 rounded-full border border-dp-silver text-xs bg-white focus:border-dp-blue focus:outline-none"
      >
        <option value="all">All Advisors</option>
        <option value="lia-bot">Lia Bot</option>
        <template x-for="advisor in uniqueAdvisors" :key="advisor">
          <option :value="advisor" x-text="formatAdvisorName(advisor)"></option>
        </template>
      </select>
      
      <span class="mx-1 text-gray-300">|</span>
      
      <span class="text-gray-500">Campaign:</span>
      <select 
        x-model="campaignFilter"
        class="px-2 py-1 rounded-full border border-dp-silver text-xs bg-white focus:border-dp-blue focus:outline-none"
      >
        <option value="all">All Campaigns</option>
        <template x-for="campaign in uniqueCampaigns" :key="campaign">
          <option :value="campaign" x-text="campaign"></option>
        </template>
      </select>
    </div>
    
    <!-- Third row: Payment and Clear filters -->
    <div class="flex items-center gap-2 flex-wrap text-xs">
      <span class="text-gray-500">Payment:</span>
      <button
        @click="paymentFilter = paymentFilter === 'under300' ? null : 'under300'"
        :class="paymentFilter === 'under300' ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : 'bg-white text-gray-600 hover:bg-gray-50 border-dp-silver'"
        class="px-3 py-1 rounded-full border transition"
      >
        Under £300
      </button>
      <button
        @click="paymentFilter = paymentFilter === '300to500' ? null : '300to500'"
        :class="paymentFilter === '300to500' ? 'bg-dp-blue/10 text-dp-blue border-dp-blue' : 'bg-white text-gray-600 hover:bg-gray-50 border-dp-silver'"
        class="px-3 py-1 rounded-full border transition"
      >
        £300-£500
      </button>
      <button
        @click="paymentFilter = paymentFilter === 'over500' ? null : 'over500'"
        :class="paymentFilter === 'over500' ? 'bg-orange-50 text-orange-700 border-orange-200' : 'bg-white text-gray-600 hover:bg-gray-50 border-dp-silver'"
        class="px-3 py-1 rounded-full border transition"
      >
        Over £500
      </button>
      
      <span class="mx-1 text-gray-300">|</span>
      
      <button
        @click="clearAllFilters()"
        x-show="hasActiveFilters"
        class="px-3 py-1 rounded-full border border-red-200 bg-red-50 text-red-600 hover:bg-red-100 transition"
      >
        Clear All Filters
      </button>
      
      <span class="ml-auto text-gray-500">
        Showing <span class="font-semibold text-dp-ink" x-text="filteredCustomers.length"></span> of <span x-text="customers.length"></span> customers
      </span>
    </div>
  </div>

  <!-- Customer List (Grid-aligned rows) -->
  <div class="space-y-2">
    <template x-for="customer in filteredCustomers" :key="customer.id">
      <div
        @click="selectedCustomer = customer"
        :class="getRowBgColor(customer.status)"
        class="border border-dp-silver rounded-lg p-4 hover:shadow-md transition-all cursor-pointer"
      >
        <div class="grid grid-cols-[110px_1fr_90px_100px_140px_180px_60px] gap-4 items-start">
          <!-- Status Pill (fixed 110px) -->
          <div class="flex-shrink-0">
            <span
              :class="getStatusColor(customer.status)"
              class="inline-block px-2 py-1 rounded-full text-[9px] font-semibold uppercase tracking-wide border whitespace-nowrap"
              x-text="getStatusLabel(customer.status)"
            ></span>
          </div>

          <!-- Customer Info (flexible) -->
          <div class="min-w-0">
            <h3 class="text-sm font-semibold text-dp-ink truncate" x-text="customer.name"></h3>
            <p class="text-xs text-gray-600 mt-0.5 truncate">
              <span x-text="customer.reg"></span>
              <span class="mx-1">•</span>
              <span x-text="customer.model"></span>
              <span x-if="customer.variant" class="text-gray-500 ml-1" x-text="'(' + customer.variant + ')'"></span>
            </p>
            <div class="flex items-center gap-2 mt-1.5 flex-wrap">
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] bg-gray-100 text-gray-600 border border-gray-200">
                <span x-text="customer.fuelType"></span>
              </span>
              <template x-if="customer.hasServicePlan">
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] bg-blue-100 text-blue-700 border border-blue-200">
                  Service Plan
                </span>
              </template>
            </div>
          </div>

          <!-- Finance Summary (fixed 90px) -->
          <div class="text-right">
            <p class="text-[10px] uppercase tracking-wide text-gray-500">Current</p>
            <template x-if="customer.currentPayment != null">
              <p class="text-sm font-semibold text-dp-ink">£<span x-text="customer.currentPayment.toFixed(2)"></span></p>
            </template>
            <template x-if="customer.currentPayment == null">
              <p class="text-sm text-gray-400">-</p>
            </template>
            <template x-if="customer.proposedPayment">
              <div class="mt-1">
                <p class="text-[10px] uppercase tracking-wide text-gray-500">Proposed</p>
                <p class="text-sm font-semibold" :class="customer.paymentDelta < 0 ? 'text-emerald-600' : customer.paymentDelta > 0 ? 'text-orange-600' : 'text-dp-ink'">
                  £<span x-text="customer.proposedPayment.toFixed(2)"></span>
                </p>
              </div>
            </template>
          </div>

          <!-- Term Info (fixed 100px) -->
          <div class="text-right">
            <p class="text-[10px] uppercase tracking-wide text-gray-500">Stage</p>
            <template x-if="customer.monthsRemaining != null">
              <p class="text-sm font-semibold text-dp-ink"><span x-text="customer.monthsRemaining"></span>m</p>
            </template>
            <template x-if="customer.monthsRemaining == null">
              <p class="text-sm text-gray-400">-</p>
            </template>
            <template x-if="customer.maturityDate">
              <p class="text-[10px] text-gray-500 mt-0.5" x-text="customer.maturityDate"></p>
            </template>
          </div>

          <!-- Engagement (fixed 140px) -->
          <div class="text-right">
            <template x-if="customer.lastContactChannel">
              <div>
                <p class="text-[10px] uppercase tracking-wide text-gray-500">Last Touch</p>
                <div class="flex items-center justify-end gap-1.5 mt-0.5">
                  <template x-if="customer.lastContactChannel === 'WhatsApp'">
                    <svg class="w-3.5 h-3.5 text-emerald-600" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                    </svg>
                  </template>
                  <template x-if="customer.lastContactChannel === 'Phone'">
                    <svg class="w-3.5 h-3.5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                    </svg>
                  </template>
                  <template x-if="customer.lastContactChannel === 'Email'">
                    <svg class="w-3.5 h-3.5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                    </svg>
                  </template>
                  <span class="text-xs text-gray-600" x-text="new Date(customer.lastContactDate).toLocaleDateString('en-GB')"></span>
                </div>
                <p class="text-xs text-gray-500 mt-0.5 truncate" x-text="customer.lastContactUser"></p>
              </div>
            </template>
          </div>

          <!-- Next Action (fixed 180px) -->
          <div>
            <p class="text-[10px] uppercase tracking-wide text-gray-500">Next</p>
            <p class="text-xs font-medium text-dp-ink mt-0.5 line-clamp-2" x-text="customer.nextAction"></p>
            <p 
              class="text-[10px] mt-0.5"
              :class="new Date(customer.nextActionDueDate) < new Date() ? 'text-red-600 font-semibold' : 'text-gray-500'"
              x-text="'Due: ' + new Date(customer.nextActionDueDate).toLocaleDateString('en-GB')"
            ></p>
          </div>

          <!-- T-Card Button (fixed 60px) -->
          <div class="text-right">
            <button
              class="px-3 py-1.5 text-xs font-medium text-dp-blue hover:bg-dp-blue/10 border border-dp-blue rounded-lg transition"
            >
              T-Card
            </button>
          </div>
        </div>
      </div>
    </template>

    <!-- Empty State -->
    <template x-if="filteredCustomers.length === 0">
      <div class="text-center py-12 bg-white border border-dp-silver rounded-lg">
        <svg class="w-12 h-12 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
        </svg>
        <p class="mt-4 text-sm text-gray-600">No customers match your filters</p>
      </div>
    </template>
  </div>

  <!-- T-Card Slide-in Drawer -->
  <div
    x-show="selectedCustomer !== null"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    @click="selectedCustomer = null"
    class="fixed inset-0 bg-black/20 z-40"
    style="display: none;"
  ></div>

  <div
    x-show="selectedCustomer !== null"
    x-transition:enter="transition ease-out duration-300 transform"
    x-transition:enter-start="translate-x-full"
    x-transition:enter-end="translate-x-0"
    x-transition:leave="transition ease-in duration-200 transform"
    x-transition:leave-start="translate-x-0"
    x-transition:leave-end="translate-x-full"
    class="fixed right-0 top-0 bottom-0 w-[600px] bg-white shadow-2xl z-50 overflow-y-auto"
    style="display: none;"
    @click.stop
  >
    <template x-if="selectedCustomer">
      <div>
        <!-- Drawer Header -->
        <div class="sticky top-0 bg-white border-b border-dp-silver px-6 py-4 flex items-center justify-between z-10">
          <div class="flex-1 min-w-0">
            <h2 class="text-lg font-semibold text-dp-ink" x-text="selectedCustomer.name"></h2>
            <p class="text-sm text-gray-600">
              <span x-text="selectedCustomer.reg"></span>
              <span class="mx-1">•</span>
              <span x-text="selectedCustomer.model"></span>
            </p>
          </div>
          <span
            :class="getStatusColor(selectedCustomer.status)"
            class="inline-block px-3 py-1 rounded-full text-[10px] font-semibold uppercase tracking-wide border"
            x-text="getStatusLabel(selectedCustomer.status)"
          ></span>
          <button
            @click="selectedCustomer = null"
            class="ml-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>

        <!-- Summary Cards -->
        <div class="p-6 grid grid-cols-2 gap-4">
          <!-- Customer Card -->
          <div class="bg-dp-cloud border border-dp-silver rounded-lg p-4">
            <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-3">Customer & Contact</h3>
            <dl class="space-y-2 text-sm">
              <div>
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Name</dt>
                <dd class="text-dp-ink font-medium" x-text="selectedCustomer.name"></dd>
              </div>
              <div>
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Town</dt>
                <dd class="text-dp-ink" x-text="selectedCustomer.town"></dd>
              </div>
              <div x-show="selectedCustomer.lastContactChannel">
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Preferred Channel</dt>
                <dd class="text-dp-ink" x-text="selectedCustomer.lastContactChannel"></dd>
              </div>
            </dl>
          </div>

          <!-- Vehicle & Agreement Card -->
          <div class="bg-dp-cloud border border-dp-silver rounded-lg p-4">
            <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-3">Vehicle & Agreement</h3>
            <dl class="space-y-2 text-sm">
              <div>
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Model</dt>
                <dd class="text-dp-ink font-medium" x-text="selectedCustomer.model"></dd>
              </div>
              <div>
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Registration</dt>
                <dd class="text-dp-ink" x-text="selectedCustomer.reg"></dd>
              </div>
              <div>
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Agreement</dt>
                <dd class="text-dp-ink font-mono text-xs" x-text="selectedCustomer.agreementNumber"></dd>
              </div>
            </dl>
          </div>

          <!-- Finance Card -->
          <div class="bg-dp-cloud border border-dp-silver rounded-lg p-4">
            <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-3">Finance</h3>
            <dl class="space-y-2 text-sm">
              <div>
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Current Payment</dt>
                <dd class="text-dp-ink font-semibold">£<span x-text="selectedCustomer.currentPayment.toFixed(2)"></span></dd>
              </div>
              <div x-show="selectedCustomer.proposedPayment">
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Proposed Payment</dt>
                <dd 
                  class="font-semibold"
                  :class="selectedCustomer.paymentDelta < 0 ? 'text-emerald-600' : selectedCustomer.paymentDelta > 0 ? 'text-orange-600' : 'text-dp-ink'"
                >
                  £<span x-text="selectedCustomer.proposedPayment.toFixed(2)"></span>
                </dd>
              </div>
              <div>
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Maturity Date</dt>
                <dd class="text-dp-ink" x-text="new Date(selectedCustomer.maturityDate).toLocaleDateString('en-GB')"></dd>
              </div>
              <div>
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Months Remaining</dt>
                <dd class="text-dp-ink" x-text="selectedCustomer.monthsRemaining"></dd>
              </div>
            </dl>
          </div>

          <!-- Engagement Card -->
          <div class="bg-dp-cloud border border-dp-silver rounded-lg p-4">
            <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-3">Engagement</h3>
            <dl class="space-y-2 text-sm">
              <div x-show="selectedCustomer.lastContactChannel">
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Last Contact</dt>
                <dd class="text-dp-ink">
                  <span x-text="selectedCustomer.lastContactChannel"></span>
                  <span class="text-gray-500 mx-1">•</span>
                  <span x-text="new Date(selectedCustomer.lastContactDate).toLocaleDateString('en-GB')"></span>
                </dd>
              </div>
              <div x-show="selectedCustomer.lastContactUser">
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Contact By</dt>
                <dd class="text-dp-ink" x-text="selectedCustomer.lastContactUser"></dd>
              </div>
              <div>
                <dt class="text-[10px] uppercase tracking-wide text-gray-500">Next Action</dt>
                <dd class="text-dp-ink font-medium" x-text="selectedCustomer.nextAction"></dd>
              </div>
            </dl>
          </div>
        </div>

        <!-- Tabs -->
        <div x-data="{ drawerTab: 'summary' }" class="border-t border-dp-silver">
          <div class="flex gap-1 px-6 border-b border-dp-silver bg-gray-50">
            <button
              @click="drawerTab = 'summary'"
              :class="drawerTab === 'summary' ? 'bg-white border-t-2 border-t-dp-blue text-dp-ink' : 'text-gray-500 hover:text-dp-ink'"
              class="px-4 py-3 text-xs font-medium transition"
            >
              Summary
            </button>
            <button
              @click="drawerTab = 'offers'"
              :class="drawerTab === 'offers' ? 'bg-white border-t-2 border-t-dp-blue text-dp-ink' : 'text-gray-500 hover:text-dp-ink'"
              class="px-4 py-3 text-xs font-medium transition"
            >
              Offers
            </button>
            <button
              @click="drawerTab = 'notes'"
              :class="drawerTab === 'notes' ? 'bg-white border-t-2 border-t-dp-blue text-dp-ink' : 'text-gray-500 hover:text-dp-ink'"
              class="px-4 py-3 text-xs font-medium transition"
            >
              Notes
            </button>
            <button
              @click="drawerTab = 'documents'"
              :class="drawerTab === 'documents' ? 'bg-white border-t-2 border-t-dp-blue text-dp-ink' : 'text-gray-500 hover:text-dp-ink'"
              class="px-4 py-3 text-xs font-medium transition"
            >
              Documents
            </button>
            <button
              @click="drawerTab = 'audit'"
              :class="drawerTab === 'audit' ? 'bg-white border-t-2 border-t-dp-blue text-dp-ink' : 'text-gray-500 hover:text-dp-ink'"
              class="px-4 py-3 text-xs font-medium transition"
            >
              Audit
            </button>
          </div>

          <!-- Tab Content -->
          <div class="p-6">
            <!-- Summary Tab -->
            <div x-show="drawerTab === 'summary'" class="space-y-4">
              <div>
                <h4 class="text-sm font-semibold text-dp-ink mb-3">Engagement Timeline</h4>
                <div class="space-y-3">
                  <div class="flex gap-3">
                    <div class="w-2 h-2 rounded-full bg-emerald-500 mt-1.5 flex-shrink-0"></div>
                    <div class="flex-1">
                      <p class="text-sm text-dp-ink">WhatsApp message sent</p>
                      <p class="text-xs text-gray-500">18 Nov 2025 • Lia Bot</p>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <div class="w-2 h-2 rounded-full bg-blue-500 mt-1.5 flex-shrink-0"></div>
                    <div class="flex-1">
                      <p class="text-sm text-dp-ink">Customer replied</p>
                      <p class="text-xs text-gray-500">18 Nov 2025</p>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <div class="w-2 h-2 rounded-full bg-purple-500 mt-1.5 flex-shrink-0"></div>
                    <div class="flex-1">
                      <p class="text-sm text-dp-ink">Offer generated</p>
                      <p class="text-xs text-gray-500">15 Nov 2025 • System</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="pt-4 border-t border-dp-silver">
                <label class="block text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Change Status</label>
                <select class="w-full px-3 py-2 text-sm border border-dp-silver rounded-lg focus:border-dp-blue focus:outline-none">
                  <option>Engaged</option>
                  <option>Appointment Booked</option>
                  <option>Sold</option>
                  <option>Declined</option>
                  <option>Declined Offer</option>
                </select>
              </div>
            </div>

            <!-- Other tabs (placeholder) -->
            <div x-show="drawerTab !== 'summary'" class="text-center py-12 text-gray-500">
              <p>This tab is coming soon</p>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</div>
{% endblock %}