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

  <div class="wac-page-header">
    <div>
      <h4 class="wac-title">Lead Details</h4>
      <p class="wac-subtitle">{{ $lead->flow_name }} — {{ $lead->phone }}</p>
    </div>
    <a href="{{ route('admin.whatsappcenter.leads.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>

  <div class="row g-4">

    {{-- Contact sidebar ──────────────────────────────────────────────────── --}}
    <div class="col-lg-4">
      <div class="wac-panel" style="position:sticky;top:1rem">
        <div class="wac-panel-head">
          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
          Contact Info
        </div>
        <div class="wac-panel-body">
          <div style="text-align:center;padding:1rem 0 1.25rem">
            <div class="wac-avatar" style="width:60px;height:60px;font-size:1.4rem;font-weight:800;margin:0 auto .75rem">
              {{ strtoupper(substr($lead->contact_name ?? '?', 0, 1)) }}
            </div>
            <div style="font-weight:700;font-size:1.05rem">{{ $lead->contact_name ?? 'Unknown' }}</div>
            <div style="font-size:.82rem;color:var(--text-secondary)">{{ $lead->phone }}</div>
            @if($lead->email)
              <div style="font-size:.8rem;color:var(--text-secondary)">{{ $lead->email }}</div>
            @endif
          </div>

          <div class="wac-divider" style="margin:.5rem 0 1.25rem"></div>

          <div style="margin-bottom:1rem">
            <label class="wac-lbl">Status</label>
            <select class="wac-ctrl" id="statusSelect">
              <option value="new"       {{ $lead->status==='new'       ?'selected':'' }}>🟢 New</option>
              <option value="contacted" {{ $lead->status==='contacted' ?'selected':'' }}>🔵 Contacted</option>
              <option value="converted" {{ $lead->status==='converted' ?'selected':'' }}>✅ Converted</option>
              <option value="lost"      {{ $lead->status==='lost'      ?'selected':'' }}>❌ Lost</option>
            </select>
          </div>

          <div style="margin-bottom:1.25rem">
            <label class="wac-lbl">Notes</label>
            <textarea class="wac-ctrl" id="notesField" rows="3" placeholder="Add notes...">{{ $lead->notes }}</textarea>
          </div>

          <button class="wac-btn-primary" style="width:100%;justify-content:center" onclick="saveStatus()">
            <svg width="13" height="13" 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"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            Save
          </button>

          <div class="wac-divider"></div>

          <div style="font-size:.78rem;color:var(--text-secondary);display:flex;flex-direction:column;gap:.3rem">
            <div>📅 {{ $lead->created_at->format('d M Y, h:i A') }}</div>
            <div>🤖 {{ $lead->flow_name }}</div>
          </div>
          <a href="{{ route('admin.whatsappcenter.conversations.show', $lead->phone) }}"
             class="wac-btn-secondary" style="width:100%;justify-content:center;margin-top:.875rem">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="#25D366"><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>
            View WhatsApp Chat
          </a>
        </div>
      </div>
    </div>

    {{-- Flow answers ─────────────────────────────────────────────────────── --}}
    <div class="col-lg-8">
      <div class="wac-card">
        <div class="wac-card-head">
          <strong>
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color:var(--wac-green)"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
            Flow Answers
          </strong>
          @php
            $ctx     = $lead->context_data ?? [];
            $steps   = $flow?->steps ?? collect();
            $answers = collect();
            foreach($steps as $step) {
              if(!$step->save_as) continue;
              $label = preg_replace('/^Step \d+\s*[-–—:]+\s*/i', '', $step->label);
              $value = $ctx[$step->save_as] ?? null;
              $answers->push(['label'=>$label,'save_as'=>$step->save_as,'value'=>$value,'answered'=>$value!==null]);
            }
            $covered = $answers->pluck('save_as')->toArray();
            $extra   = collect($ctx)->filter(fn($v,$k)=>!str_starts_with($k,'_')&&!in_array($k,$covered));
            $total   = $answers->count();
            $done    = $answers->where('answered',true)->count();
            $pct     = $total>0?round(($done/$total)*100):0;
          @endphp
          @if($total > 0)
            <span class="wac-badge wac-badge-{{ $pct===100 ? 'teal' : 'grey' }}">{{ $done }}/{{ $total }} answered</span>
          @endif
        </div>
        <div class="wac-card-body">

          @if($answers->isEmpty() && $extra->isEmpty())
            <div class="wac-empty"><div class="wac-empty-icon">📋</div><p>No data collected yet.</p></div>
          @else
            <table class="wac-table">
              <thead>
                <tr>
                  <th style="width:36px">#</th>
                  <th style="width:220px">Question</th>
                  <th>Answer</th>
                </tr>
              </thead>
              <tbody>
                @foreach($answers as $i => $ans)
                <tr style="{{ !$ans['answered'] ? 'opacity:.45' : '' }}">
                  <td style="color:var(--text-secondary);font-size:.78rem;font-family:var(--wac-mono)">{{ $i+1 }}</td>
                  <td>
                    <div style="font-weight:600;font-size:.875rem">{{ $ans['label'] }}</div>
                    <code style="font-size:.68rem;color:var(--wac-green);background:var(--wac-green-bg);padding:1px 5px;border-radius:.3rem">{{ $ans['save_as'] }}</code>
                  </td>
                  <td>
                    @if($ans['answered'])
                      <span style="font-size:.875rem;color:var(--text-primary)">{{ $ans['value'] }}</span>
                    @else
                      <span style="font-size:.8rem;color:var(--text-secondary);font-style:italic">Not answered</span>
                    @endif
                  </td>
                </tr>
                @endforeach
                @foreach($extra as $key => $value)
                <tr>
                  <td style="color:var(--text-secondary);font-size:.78rem">—</td>
                  <td>
                    <div style="font-weight:600;font-size:.875rem">{{ ucwords(str_replace('_',' ',$key)) }}</div>
                    <code style="font-size:.68rem;color:var(--wac-green);background:var(--wac-green-bg);padding:1px 5px;border-radius:.3rem">{{ $key }}</code>
                  </td>
                  <td style="font-size:.875rem">{{ $value }}</td>
                </tr>
                @endforeach
              </tbody>
            </table>

            @if($total > 0)
              <div style="margin-top:1.25rem">
                <div style="display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-secondary);margin-bottom:.4rem">
                  <span>Flow completion</span>
                  <span style="font-weight:600;color:{{ $pct===100 ? 'var(--wac-green-light)' : 'var(--text-secondary)' }}">{{ $pct }}%</span>
                </div>
                <div class="wac-progress">
                  <div class="wac-progress-bar" style="width:{{ $pct }}%;background:{{ $pct===100 ? 'var(--wac-green-light)' : 'var(--wac-green)' }}"></div>
                </div>
              </div>
            @endif
          @endif
        </div>
      </div>
    </div>

  </div>
</div>
<script>
function saveStatus() {
  fetch('{{ route("admin.whatsappcenter.leads.status", $lead->id) }}', {
    method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Content-Type':'application/json'},
    body:JSON.stringify({status:document.getElementById('statusSelect').value,notes:document.getElementById('notesField').value})
  }).then(r=>r.json()).then(d=>{
    if(d.success){ const b=document.querySelector('button[onclick="saveStatus()"]'); b.innerHTML='✅ Saved!'; setTimeout(()=>b.innerHTML='<svg width="13" height="13" 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"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg> Save',1500); }
  });
}
</script>