{{--
  ───────────────────────────────────────────────────────────
  Lead detail — DRAWER content only (no @extends, no layout).
  Loaded via AJAX into #drawer-body on leads/index.blade.php.
  Mirrors leads/show.blade.php but trimmed to fit the drawer
  classes already defined in app.blade.php: .dr-hd / .dr-tabs /
  .dr-body / .ig / .qa-row / .upd-grid / .note-item / .tl-wrap
  ───────────────────────────────────────────────────────────
--}}
@php
$avColors = ['#1a73e8','#8b5cf6','#10b981','#f59e0b','#ef4444','#0ea5e9','#f97316','#ec4899'];
$col = $avColors[$lead->id % count($avColors)];
$allStages = ['New','Contacted','Positive','Follow Up','Negotiation','Won','Lost'];
$tlColors = ['Phone Call'=>'#1e40af','WhatsApp'=>'#10b981','Email'=>'#5b21b6','Meeting'=>'#059669','Note'=>'#687182','Walk-in'=>'#f59e0b'];
@endphp

<div class="dr-hd">
  <div class="dr-av" style="background:{{ $col }}22;color:{{ $col }}">{{ $lead->initials }}</div>
  <div>
    <div class="dr-name">{{ $lead->name }}</div>
    <div class="dr-sub">
      {{ $lead->company ?? '--' }} &middot;
      <span class="badge {{ \App\Models\Lead::stageBadge($lead->stage) }}">{{ $lead->stage }}</span> &middot;
      <strong>{{ $lead->budget_formatted }}</strong>
    </div>
  </div>
  <button class="dr-close" onclick="closeDrawer()">
    <svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  </button>
</div>

<div class="dr-tabs">
  <button class="dtab active" onclick="drawerTab(this,'tab-overview')">Overview</button>
  <button class="dtab" onclick="drawerTab(this,'tab-notes')">Notes &amp; Activity</button>
  <button class="dtab" onclick="drawerTab(this,'tab-timeline')">Timeline</button>
</div>

<div class="dr-body">

  {{-- ── OVERVIEW TAB ── --}}
  <div id="tab-overview">
    <div class="ig">
      @foreach([
        ['Phone', $lead->phone],
        ['Email', $lead->email ?? '--'],
        ['Company', $lead->company ?? '--'],
        ['Source', $lead->source],
        ['Service', $lead->service ?? '--'],
        ['Budget', $lead->budget_formatted],
        ['Priority', $lead->priority],
        ['Last Contact', optional($lead->last_contact)->format('d M Y') ?? '--'],
      ] as [$lbl, $val])
      <div class="ig-cell">
        <div class="lbl">{{ $lbl }}</div>
        <div class="val">{{ $val }}</div>
      </div>
      @endforeach
    </div>

    <div class="qa-row">
      @foreach(['WhatsApp','Phone Call','Email','Meeting'] as $via)
      <form method="POST" action="{{ route('notes.store', $lead) }}" style="display:contents">
        @csrf
        <input type="hidden" name="via" value="{{ $via }}">
        <input type="hidden" name="note" value="{{ $via }} initiated with {{ $lead->name }}.">
        <button type="submit" class="qa {{ $via=='WhatsApp'?'qa-wa':'' }}">
          {{ $via=='WhatsApp'?'📱':($via=='Phone Call'?'📞':($via=='Email'?'📧':'📅')) }} {{ $via }}
        </button>
      </form>
      @endforeach
      <a href="{{ route('leads.edit', $lead) }}" class="qa qa-pri">✏ Edit Lead</a>
    </div>

    <div class="upd-grid">
      <div class="fld">
        <label>Change Status</label>
        <form method="POST" action="{{ route('leads.stage', $lead) }}" id="drawer-stage-form">
          @csrf
          <select name="stage" class="ssel {{ \App\Models\Lead::stageSelectClass($lead->stage) }}" onchange="document.getElementById('drawer-stage-form').submit()" style="width:100%;max-width:100%">
            @foreach($allStages as $s)
            <option {{ $lead->stage===$s?'selected':'' }}>{{ $s }}</option>
            @endforeach
          </select>
        </form>
      </div>
      <div class="fld">
        <label>Assign To</label>
        <form method="POST" action="{{ route('leads.assign', $lead) }}" id="drawer-assign-form">
          @csrf
          <select name="assigned_to" class="asel" onchange="document.getElementById('drawer-assign-form').submit()" style="width:100%;max-width:100%">
            @foreach($employees as $e)
            <option value="{{ $e->id }}" {{ $lead->assigned_to===$e->id?'selected':'' }}>{{ $e->name }}</option>
            @endforeach
          </select>
        </form>
      </div>
    </div>

    <div style="display:flex;gap:7px;flex-wrap:wrap">
      <form method="POST" action="{{ route('leads.stage', $lead) }}">
        @csrf<input type="hidden" name="stage" value="Won">
        <button type="submit" class="qa qa-won">✓ Mark Won</button>
      </form>
      <form method="POST" action="{{ route('leads.stage', $lead) }}">
        @csrf<input type="hidden" name="stage" value="Lost">
        <button type="submit" class="qa qa-lost">✕ Mark Lost</button>
      </form>
      <form method="POST" action="{{ route('leads.destroy', $lead) }}" onsubmit="return confirm('Delete this lead?')" style="margin-left:auto">
        @csrf @method('DELETE')
        <button type="submit" class="qa qa-del">🗑 Delete</button>
      </form>
    </div>
  </div>

  {{-- ── NOTES TAB ── --}}
  <div id="tab-notes" style="display:none">
    @forelse($lead->notes as $note)
    <div class="note-item">
      <div class="note-hd">
        <div class="note-av" style="background:{{ $note->avatar_color }}">{{ $note->initials }}</div>
        <span class="note-by">{{ $note->added_by }}</span>
        <span class="badge {{ \App\Models\LeadNote::viaBadge($note->via) }}" style="margin-left:4px;font-size:9.5px">{{ $note->via }}</span>
        <span class="note-time">{{ $note->created_at->format('d M Y, g:i A') }}</span>
      </div>
      <div class="note-text">{{ $note->note }}</div>
    </div>
    @empty
    <div style="color:#9aa5b4;font-size:13px;padding:8px 0 12px">No notes yet. Add the first one below.</div>
    @endforelse

    <div class="note-add">
      <h5>Add New Note</h5>
      <form method="POST" action="{{ route('notes.store', $lead) }}">
        @csrf
        <select name="via">
          @foreach(['Phone Call','WhatsApp','Email','Meeting','Walk-in','Note'] as $v)
          <option>{{ $v }}</option>
          @endforeach
        </select>
        <textarea name="note" placeholder="What happened? What was discussed? What is the next step?"></textarea>
        <button type="submit" class="btn btn-pri btn-sm">
          <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Add Note
        </button>
      </form>
    </div>
  </div>

  {{-- ── TIMELINE TAB ── --}}
  <div id="tab-timeline" style="display:none">
    <div class="tl-wrap">
      <div class="tl-item">
        <div class="tl-dot" style="background:#1a73e8;box-shadow:0 0 0 1.5px #1a73e8"></div>
        <div class="tl-card">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:3px">
            <span class="tl-title">Lead Created</span>
            <span class="tl-time">{{ $lead->created_at->format('d M Y, g:i A') }}</span>
          </div>
          <div class="tl-desc">{{ $lead->source }} enquiry assigned to {{ $lead->employee->name ?? '--' }}</div>
        </div>
      </div>
      @foreach($lead->notes as $note)
      @php $tlCol = $tlColors[$note->via] ?? '#687182'; @endphp
      <div class="tl-item">
        <div class="tl-dot" style="background:{{ $tlCol }};box-shadow:0 0 0 1.5px {{ $tlCol }}"></div>
        <div class="tl-card">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:3px">
            <span class="tl-title">{{ $note->via }} – {{ $note->added_by }}</span>
            <span class="tl-time">{{ $note->created_at->format('d M Y, g:i A') }}</span>
          </div>
          <div class="tl-desc">{{ $note->note }}</div>
        </div>
      </div>
      @endforeach
    </div>
  </div>

</div>