@extends('layouts.app')
@section('title', $lead->name)
@section('page-title', $lead->name)

@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'];
@endphp

@section('content')
<div class="page-hd">
  <div>
    <div style="display:flex;align-items:center;gap:12px">
      <div style="width:48px;height:48px;border-radius:50%;background:{{ $col }}22;color:{{ $col }};display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800">{{ $lead->initials }}</div>
      <div>
        <h2>{{ $lead->name }}</h2>
        <p>{{ $lead->company ?? '--' }} &middot; <span class="badge {{ \App\Models\Lead::stageBadge($lead->stage) }}">{{ $lead->stage }}</span> &middot; <strong>{{ $lead->budget_formatted }}</strong></p>
      </div>
    </div>
  </div>
  <div class="page-hd-right">
    <a href="{{ route('leads.index') }}" class="btn btn-out btn-sm">← Back</a>
    <a href="{{ route('leads.edit', $lead) }}" class="btn btn-pri btn-sm">Edit Lead</a>
  </div>
</div>

<div style="display:grid;grid-template-columns:1.2fr 1fr;gap:16px">

  <!-- Left: Overview + Notes -->
  <div>
    <!-- Info Grid -->
    <div class="form-card" style="margin-bottom:14px">
      <h3>Lead Details</h3>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
        @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') ?? '--'],
          ['Assigned To', $lead->employee->name ?? 'Unassigned'],
          ['Created', $lead->created_at->format('d M Y')],
        ] as [$lbl, $val])
        <div style="background:#fafbff;border:1.5px solid #edf0f7;border-radius:10px;padding:11px 13px">
          <div style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9aa5b4;margin-bottom:4px">{{ $lbl }}</div>
          <div style="font-size:13px;font-weight:600;color:#1a2340">{{ $val }}</div>
        </div>
        @endforeach
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="form-card" style="margin-bottom:14px">
      <h3>Quick Actions</h3>
      <div style="display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px">
        @foreach(['WhatsApp','Phone Call','Email','Meeting'] as $via)
        <form method="POST" action="{{ route('notes.store', $lead) }}">
          @csrf
          <input type="hidden" name="via" value="{{ $via }}">
          <input type="hidden" name="note" value="{{ $via }} initiated with {{ $lead->name }}.">
          <button type="submit" class="btn btn-out btn-sm">
            @if($via=='WhatsApp')📱@elseif($via=='Phone Call')📞@elseif($via=='Email')📧@else📅@endif {{ $via }}
          </button>
        </form>
        @endforeach
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
        <div>
          <label style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9aa5b4;display:block;margin-bottom:5px">Change Status</label>
          <form method="POST" action="{{ route('leads.stage', $lead) }}" id="stage-form">
            @csrf
            <select name="stage" class="ssel {{ \App\Models\Lead::stageSelectClass($lead->stage) }}" onchange="document.getElementById('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>
          <label style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9aa5b4;display:block;margin-bottom:5px">Assign To</label>
          <form method="POST" action="{{ route('leads.assign', $lead) }}" id="assign-form">
            @csrf
            <select name="assigned_to" class="asel" onchange="document.getElementById('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;margin-top:12px;flex-wrap:wrap">
        <form method="POST" action="{{ route('leads.stage', $lead) }}">
          @csrf<input type="hidden" name="stage" value="Won">
          <button type="submit" class="btn btn-grn btn-sm">✓ Mark Won</button>
        </form>
        <form method="POST" action="{{ route('leads.stage', $lead) }}">
          @csrf<input type="hidden" name="stage" value="Lost">
          <button type="submit" class="btn btn-red btn-sm">✕ 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="btn btn-red btn-sm">🗑 Delete</button>
        </form>
      </div>
    </div>

    <!-- Notes -->
    <div class="form-card">
      <h3>Notes & Activity</h3>
      @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

      <!-- Add Note -->
      <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>
  </div>

  <!-- Right: Timeline -->
  <div>
    <div class="form-card">
      <h3>Timeline</h3>
      @php
      $tlColors = ['Phone Call'=>'#1e40af','WhatsApp'=>'#10b981','Email'=>'#5b21b6','Meeting'=>'#059669','Note'=>'#687182','Walk-in'=>'#f59e0b'];
      @endphp
      <div class="tl-wrap">
        {{-- Lead created item --}}
        <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>

</div>
@endsection
