@include('whatsappcenter::admin.partials.styles')
<style>
.rec-tabs { display:flex; gap:.5rem; margin-bottom:1rem; }
.rec-tab {
  flex:1; padding:.55rem .75rem; border-radius:.5rem; border:2px solid var(--wac-border);
  background:transparent; color:var(--text-secondary); font-size:.8rem; font-weight:600;
  cursor:pointer; transition:.15s; display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.rec-tab.active { border-color:var(--wac-green); background:var(--wac-green-bg); color:var(--wac-green); }
.rec-tab:hover:not(.active) { border-color:var(--wac-green); color:var(--wac-green); }
.rec-pane { display:none; }
.rec-pane.active { display:block; }
.lead-filter-row { display:flex; gap:.5rem; margin-bottom:.75rem; }
#leadsList { max-height:280px; overflow-y:auto; border:1px solid var(--wac-border); border-radius:.5rem; }
.lead-item {
  display:flex; align-items:center; gap:.6rem; padding:.45rem .75rem;
  border-bottom:1px solid var(--wac-border); font-size:.8rem; cursor:pointer;
}
.lead-item:last-child { border-bottom:none; }
.lead-item:hover { background:var(--wac-green-bg); }
.lead-item input[type=checkbox] { accent-color:var(--wac-green); width:15px; height:15px; flex-shrink:0; }
.lead-count-bar {
  display:flex; align-items:center; justify-content:space-between; padding:.4rem .75rem;
  background:var(--wac-green-bg); border-radius:.4rem; font-size:.78rem; margin-bottom:.6rem;
}
.excel-drop {
  border:2px dashed var(--wac-border); border-radius:.6rem; padding:2.5rem 1rem;
  text-align:center; cursor:pointer; transition:.15s; color:var(--text-secondary);
}
.excel-drop:hover, .excel-drop.has-file { border-color:var(--wac-green); color:var(--wac-green); }
.excel-drop.has-file { background:var(--wac-green-bg); }
</style>

<div class="wac-page container-fluid">

  <div class="wac-page-header">
    <div>
      <h4 class="wac-title">New Campaign</h4>
      <p class="wac-subtitle">Send a bulk message to multiple WhatsApp contacts</p>
    </div>
    <a href="{{ route('admin.whatsappcenter.campaigns.index') }}" class="wac-btn-secondary">
      <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
      Back
    </a>
  </div>

  @if($errors->any())
    <div class="wac-notice err">@foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach</div>
  @endif

  <form action="{{ route('admin.whatsappcenter.campaigns.store') }}" method="POST" enctype="multipart/form-data" id="campaignForm">
    @csrf
    <input type="hidden" name="recipient_mode" id="recipientMode" value="text">
    <input type="hidden" name="lead_ids" id="leadIdsInput" value="">

    <div class="row g-4">
      {{-- Left: Message --}}
      <div class="col-md-6">
        <div class="wac-panel">
          <div class="wac-panel-head">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
            Message
          </div>
          <div class="wac-panel-body">
            <div style="margin-bottom:1rem">
              <label class="wac-lbl">Campaign Name <span class="req">*</span></label>
              <input type="text" name="name" class="wac-ctrl" placeholder="Diwali Offer 2024" value="{{ old('name') }}" required>
            </div>
            <div>
              <label class="wac-lbl">Message <span class="req">*</span></label>
              <textarea name="message_body" class="wac-ctrl" rows="14" style="font-family:var(--wac-mono);font-size:.82rem"
                        placeholder="Hi! We have a special offer just for you... 🎉" required>{{ old('message_body') }}</textarea>
              <p class="wac-hint">Tip: Use *bold* and _italic_ for formatting</p>
            </div>
          </div>
        </div>
      </div>

      {{-- Right: Recipients --}}
      <div class="col-md-6">
        <div class="wac-panel">
          <div class="wac-panel-head">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
            Recipients
          </div>
          <div class="wac-panel-body">

            {{-- Mode Tabs --}}
            <div class="rec-tabs">
              <button type="button" class="rec-tab active" data-mode="text">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                Type Numbers
              </button>
              <button type="button" class="rec-tab" data-mode="excel">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                Upload Excel
              </button>
              <button type="button" class="rec-tab" data-mode="flow_leads">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
                Flow Leads
              </button>
            </div>

            {{-- Pane 1: Type Numbers --}}
            <div class="rec-pane active" id="pane-text">
              <label class="wac-lbl">Phone Numbers <span class="req">*</span></label>
              <textarea name="phones" id="phonesTextarea" class="wac-ctrl" rows="14"
                        style="font-family:var(--wac-mono);font-size:.82rem"
                        placeholder="+919876543210,Customer Name&#10;+918765432109,Another Name&#10;+917654321098">{{ old('phones') }}</textarea>
              <p class="wac-hint">One per line — format: <code style="background:var(--wac-green-bg);color:var(--wac-green);padding:1px 5px;border-radius:.3rem">+phone,Name</code> (name optional)</p>
            </div>

            {{-- Pane 2: Upload Excel --}}
            <div class="rec-pane" id="pane-excel">
              <div class="excel-drop" id="excelDrop" onclick="document.getElementById('excelFile').click()">
                <svg width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="margin-bottom:.75rem;opacity:.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="13" x2="12" y2="19"/><polyline points="9 16 12 19 15 16"/></svg>
                <div style="font-weight:600;font-size:.85rem" id="excelLabel">Click to upload Excel or CSV file</div>
                <div style="font-size:.75rem;margin-top:.35rem">Supports .xlsx, .xls, .csv</div>
              </div>
              <input type="file" id="excelFile" name="excel_file" accept=".xlsx,.xls,.csv" style="display:none">
              <div class="wac-hint" style="margin-top:.75rem">
                📋 <strong>Format:</strong> Column A = Phone number, Column B = Name (optional). First row (header) is skipped automatically.
              </div>
            </div>

            {{-- Pane 3: Flow Leads --}}
            <div class="rec-pane" id="pane-flow_leads">
              <div class="lead-filter-row">
                <select class="wac-ctrl" id="flFlowFilter" style="flex:1;font-size:.8rem">
                  <option value="">All Flows</option>
                  @foreach($flows as $fid => $fname)
                  <option value="{{ $fid }}">{{ $fname }}</option>
                  @endforeach
                </select>
                <select class="wac-ctrl" id="flStatusFilter" style="flex:1;font-size:.8rem">
                  <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>
                <button type="button" class="wac-btn-secondary" id="loadLeadsBtn" style="white-space:nowrap;padding:.45rem .9rem;font-size:.8rem">
                  Load
                </button>
              </div>
              <div class="lead-count-bar" id="leadCountBar" style="display:none">
                <span id="leadCountText">0 leads</span>
                <div>
                  <button type="button" onclick="selectAllLeads(true)" style="font-size:.75rem;background:none;border:none;color:var(--wac-green);cursor:pointer;font-weight:600;padding:0 .25rem">All</button>
                  <span style="color:var(--wac-border)">·</span>
                  <button type="button" onclick="selectAllLeads(false)" style="font-size:.75rem;background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:0 .25rem">None</button>
                </div>
              </div>
              <div id="leadsList">
                <div style="padding:2rem;text-align:center;color:var(--text-secondary);font-size:.8rem;font-style:italic">
                  Use filters above and click Load
                </div>
              </div>
              <p class="wac-hint" style="margin-top:.5rem">✓ Checked leads will be added as recipients.</p>
            </div>

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

    <div class="wac-action-bar" style="border:none;margin-top:.5rem;padding-top:0">
      <a href="{{ route('admin.whatsappcenter.campaigns.index') }}" class="wac-btn-secondary">Cancel</a>
      <button type="submit" class="wac-btn-primary">
        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/></svg>
        Create Campaign
      </button>
    </div>
  </form>
</div>

<script>
// ── Tab Switching ──────────────────────────────────────────────────────────────
const modeInput = document.getElementById('recipientMode');
const phonesTA  = document.getElementById('phonesTextarea');

document.querySelectorAll('.rec-tab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.rec-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.rec-pane').forEach(p => p.classList.remove('active'));
    tab.classList.add('active');
    document.getElementById('pane-' + tab.dataset.mode).classList.add('active');
    modeInput.value   = tab.dataset.mode;
    phonesTA.required = (tab.dataset.mode === 'text');
  });
});

// ── Excel Upload Label ────────────────────────────────────────────────────────
document.getElementById('excelFile').addEventListener('change', function() {
  const drop = document.getElementById('excelDrop');
  const lbl  = document.getElementById('excelLabel');
  if (this.files.length) {
    drop.classList.add('has-file');
    lbl.textContent = '✅ ' + this.files[0].name;
  } else {
    drop.classList.remove('has-file');
    lbl.textContent = 'Click to upload Excel or CSV file';
  }
});

// ── Flow Leads AJAX ────────────────────────────────────────────────────────────
document.getElementById('loadLeadsBtn').addEventListener('click', () => {
  const btn    = document.getElementById('loadLeadsBtn');
  const params = new URLSearchParams();
  const fv     = document.getElementById('flFlowFilter').value;
  const sv     = document.getElementById('flStatusFilter').value;
  if (fv) params.append('flow_id', fv);
  if (sv) params.append('status', sv);
  btn.textContent = '…';
  btn.disabled    = true;

  fetch('{{ route('admin.whatsappcenter.campaigns.flow-leads') }}?' + params, {
    headers: { 'X-Requested-With': 'XMLHttpRequest' }
  })
  .then(r => r.json())
  .then(leads => { renderLeads(leads); btn.textContent = 'Load'; btn.disabled = false; })
  .catch(() => { btn.textContent = 'Load'; btn.disabled = false; alert('Failed to load leads.'); });
});

function renderLeads(leads) {
  const list = document.getElementById('leadsList');
  const bar  = document.getElementById('leadCountBar');
  document.getElementById('leadCountText').textContent = leads.length + ' lead' + (leads.length !== 1 ? 's' : '') + ' loaded';
  bar.style.display = leads.length ? 'flex' : 'none';

  if (!leads.length) {
    list.innerHTML = '<div style="padding:2rem;text-align:center;color:var(--text-secondary);font-size:.8rem;font-style:italic">No leads found</div>';
    return;
  }

  const sc = { new:'#25D366', contacted:'#2196F3', converted:'#4CAF50', lost:'#ef4444' };
  list.innerHTML = leads.map(l => `
    <label class="lead-item">
      <input type="checkbox" class="lead-chk" value="${l.id}" checked>
      <div style="flex:1;min-width:0">
        <div style="font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${l.contact_name || l.phone}</div>
        <div style="font-size:.72rem;color:var(--text-secondary)">${l.phone}${l.flow_name ? ' · ' + l.flow_name : ''}</div>
      </div>
      <span style="font-size:.7rem;padding:2px 7px;border-radius:20px;white-space:nowrap;background:${(sc[l.status]||'#aaa')}20;color:${sc[l.status]||'#aaa'}">${l.status}</span>
    </label>
  `).join('');

  updateLeadIds();
  list.querySelectorAll('.lead-chk').forEach(c => c.addEventListener('change', updateLeadIds));
}

function updateLeadIds() {
  document.getElementById('leadIdsInput').value =
    [...document.querySelectorAll('.lead-chk:checked')].map(c => c.value).join(',');
}

function selectAllLeads(state) {
  document.querySelectorAll('.lead-chk').forEach(c => c.checked = state);
  updateLeadIds();
}

// ── Submit Validation ─────────────────────────────────────────────────────────
document.getElementById('campaignForm').addEventListener('submit', function(e) {
  const mode = modeInput.value;
  if (mode === 'flow_leads' && !document.getElementById('leadIdsInput').value) {
    e.preventDefault(); alert('Please load leads and select at least one recipient.');
  }
  if (mode === 'excel' && !document.getElementById('excelFile').files.length) {
    e.preventDefault(); alert('Please upload an Excel or CSV file.');
  }
});
</script>