@include('whatsappcenter::admin.partials.styles')
<div class="wac-page container-fluid">

  <div class="wac-page-header">
    <div>
      <h4 class="wac-title">Flow Leads</h4>
      <p class="wac-subtitle">Leads collected through WhatsApp bot conversation flows</p>
    </div>
    <a href="{{ route('admin.whatsappcenter.leads.export', request()->query()) }}" class="wac-btn-secondary" style="padding:.5rem 1.1rem;font-size:.82rem">
      <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
      Export CSV
    </a>
  </div>

  {{-- Filters --}}
  <div class="wac-card">
    <div class="wac-card-body" style="padding:.875rem 1.25rem">
      <div class="row g-2 align-items-end">
        <div class="col-md-3">
          <label class="wac-lbl">Filter by Flow</label>
          <select class="wac-ctrl" id="flow_id" name="flow_id">
            <option value="">All Flows</option>
            @foreach($flows as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-3">
          <label class="wac-lbl">Filter by Status</label>
          <select class="wac-ctrl" id="status" name="status">
            <option value="">All Status</option>
            <option value="new">🟢 New</option>
            <option value="contacted">🔵 Contacted</option>
            <option value="converted">✅ Converted</option>
            <option value="lost">❌ Lost</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <script>
  window.dtRenders = window.dtRenders || {};
  window.dtRenders.wacLeadRow = function(val, row) {
    var ctx    = row.context_data || {};
    var keys   = Object.keys(ctx).filter(k=>!k.startsWith('_')).slice(0,3);
    var details= keys.map(k=>'<span style="font-size:.7rem;color:var(--text-secondary)">'+k+': <strong style="color:var(--text-primary)">'+ctx[k]+'</strong></span>').join(' <span style="opacity:.3">·</span> ');
    var sc={ new:'#25D366', contacted:'#2196F3', converted:'#4CAF50', lost:'#ef4444' };
    var bg=(sc[row.status]||'#aaa')+'20', bdr=sc[row.status]||'#aaa';
    return '<div style="font-weight:700;font-size:.875rem">'+(row.contact_name||'—')+'</div>'
         + '<div style="font-size:.75rem;color:var(--text-secondary)">'+row.phone+'</div>'
         + (row.email?'<div style="font-size:.72rem;color:var(--text-secondary)">'+row.email+'</div>':'');
  };
  window.dtRenders.wacLeadContext = function(val, row) {
    var ctx  = (typeof val==='string'?JSON.parse(val||'{}'):val)||{};
    var keys = Object.keys(ctx).filter(k=>!k.startsWith('_')).slice(0,3);
    if(!keys.length) return '<span style="font-size:.75rem;color:var(--text-secondary);font-style:italic">—</span>';
    return keys.map(k=>'<div style="font-size:.72rem"><span style="color:var(--text-secondary)">'+k+':</span> <strong>'+ctx[k]+'</strong></div>').join('');
  };
  window.dtRenders.wacLeadStatus = function(val, row) {
    var sc={new:'#25D366',contacted:'#2196F3',converted:'#4CAF50',lost:'#ef4444'};
    var bg=(sc[val]||'#aaa');
    return '<select class="wac-ctrl" style="font-size:.72rem;padding:.25rem .5rem;width:auto;border-radius:20px;background:'+bg+'20;border-color:'+bg+'" onchange="updateLeadStatus('+row.id+',this.value)">'
         + ['new','contacted','converted','lost'].map(s=>'<option value="'+s+'" '+(val===s?'selected':'')+'>'+{new:'🟢 New',contacted:'🔵 Contacted',converted:'✅ Converted',lost:'❌ Lost'}[s]+'</option>').join('')
         + '</select>';
  };
  window.dtRenders.wacLeadActions = function(val, row) {
    return '<div class="wac-actions-cell"><a href="/admin/whatsappcenter/leads/'+row.id+'" class="wac-btn-view"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg> View</a></div>';
  };
  </script>

  <div class="wac-card" style="margin-bottom:0">
    <div class="wac-card-body p-0">
      <table class="dt-table dt-search dt-export dt-perpage dt-checkbox"
             id="leadsTable"
             data-route="{{ route('admin.whatsappcenter.leads.data') }}"
             data-bulk-route="{{ route('admin.whatsappcenter.leads.bulk-action') }}"
             data-extra-params="flow_id,status">
        <thead>
          <tr>
            <th data-col="id"           style="width:55px" class="dt-sort">#</th>
            <th data-col="contact_name" class="dt-sort" data-render="wacLeadRow">Contact</th>
            <th data-col="flow_name"    class="dt-sort">Flow</th>
            <th data-col="context_data"                data-render="wacLeadContext">Key Details</th>
            <th data-col="status"       class="dt-sort" data-render="wacLeadStatus">Status</th>
            <th data-col="created_at"   class="dt-sort">Submitted</th>
            <th data-col="id"           style="width:90px" data-render="wacLeadActions">Action</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
  @include('components.datatable')

</div>
<script>
function updateLeadStatus(id, status) {
  fetch('/admin/whatsappcenter/leads/'+id+'/status', {
    method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Content-Type':'application/json'},
    body: JSON.stringify({status})
  });
}
// Wire up filter selects
document.getElementById('flow_id').addEventListener('change',()=>window.dtReload&&window.dtReload());
document.getElementById('status').addEventListener('change',()=>window.dtReload&&window.dtReload());
</script>