@extends('layouts.goberdata')

@section('title', 'Leads de demo')
@section('page_title', 'Leads de demo')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@push('styles')
<style>
:root{--ink:#0B1014;--ink-2:#131A21;--ink-3:#1B242D;--ink-4:#26323D;--paper:#F2F5F7;--muted:#8B9AA8;--muted-2:#61707E;--cian:#00D4E6;--ok:#37D399;--amber:#FFB020;--bad:#FF4D5E}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--paper);font-family:-apple-system,system-ui,sans-serif;padding:32px}
.wrap{max-width:1200px;margin:0 auto}
h1{font-size:26px;margin-bottom:6px}
.sub{color:var(--muted);font-size:14px;margin-bottom:28px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.stat{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:10px;padding:20px}
.stat .n{font-size:32px;font-weight:700}
.stat .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.bar{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:10px;padding:16px;margin-bottom:16px;display:flex;gap:12px;flex-wrap:wrap}
.bar input,.bar select{background:var(--ink);border:1px solid var(--ink-4);border-radius:6px;padding:9px 12px;color:var(--paper);font-size:13px}
.bar input{flex:1;min-width:200px}
table{width:100%;border-collapse:collapse;background:var(--ink-2);border-radius:10px;overflow:hidden}
th{text-align:left;padding:12px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);border-bottom:1px solid var(--ink-3)}
td{padding:12px 14px;font-size:13px;border-bottom:1px solid var(--ink-3)}
tr:last-child td{border-bottom:none}
.pill{display:inline-block;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600}
.p-ok{background:rgba(55,211,153,.15);color:var(--ok)}
.p-amber{background:rgba(255,176,32,.15);color:var(--amber)}
.p-mute{background:var(--ink-4);color:var(--muted)}
.p-cian{background:rgba(0,212,230,.15);color:var(--cian)}
.mono{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted)}
.ok-msg{background:rgba(55,211,153,.12);border:1px solid var(--ok);color:var(--ok);padding:12px 16px;border-radius:8px;margin-bottom:16px}
a.btn{display:inline-block;background:var(--ink-4);color:var(--paper);text-decoration:none;padding:6px 12px;border-radius:6px;font-size:12px}
a.btn:hover{background:var(--cian);color:var(--ink)}
</style>
@endpush

@section('content')
<div class="wrap">
  <h1>Leads de demo</h1>
  <p class="sub">Prospectos que solicitaron acceso a la plataforma</p>

  @if(session('ok'))<div class="ok-msg">{{ session('ok') }}</div>@endif

  <div class="stats">
    <div class="stat"><div class="n">{{ $stats['total'] }}</div><div class="l">Solicitudes</div></div>
    <div class="stat"><div class="n" style="color:var(--cian)">{{ $stats['accedieron'] }}</div><div class="l">Entraron a la demo</div></div>
    <div class="stat"><div class="n" style="color:var(--ok)">{{ $stats['vigentes'] }}</div><div class="l">Accesos vigentes</div></div>
    <div class="stat"><div class="n" style="color:var(--amber)">{{ $stats['clientes'] }}</div><div class="l">Convertidos</div></div>
  </div>

  <form class="bar" method="GET">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Buscar por nombre, correo o ciudad…">
    <select name="status" onchange="this.form.submit()">
      <option value="">Todos los estados</option>
      @foreach(['nuevo','accedió','contactado','cliente','descartado'] as $st)
        <option value="{{ $st }}" @selected(request('status')===$st)>{{ ucfirst($st) }}</option>
      @endforeach
    </select>
  </form>

  <table>
    <thead><tr>
      <th>Prospecto</th><th>Ubicación</th><th>Teléfono</th>
      <th>Accesos</th><th>Vence</th><th>Estado</th><th></th>
    </tr></thead>
    <tbody>
    @forelse($leads as $lead)
      <tr>
        <td><b>{{ $lead->name }}</b><br><span class="mono">{{ $lead->email }}</span></td>
        <td>{{ $lead->city }}<br><span class="mono">{{ $lead->department }}</span></td>
        <td class="mono">{{ $lead->phone }}</td>
        <td>@if($lead->access_count > 0)
              <span class="pill p-ok">{{ $lead->access_count }}×</span>
            @else <span class="pill p-mute">sin entrar</span>@endif</td>
        <td>@if($lead->estaVigente())
              <span class="mono">{{ $lead->diasRestantes() }} días</span>
            @else <span class="pill p-mute">vencido</span>@endif</td>
        <td>
          @php $pc = ['nuevo'=>'p-mute','accedió'=>'p-cian','contactado'=>'p-amber','cliente'=>'p-ok','descartado'=>'p-mute'][$lead->status] ?? 'p-mute'; @endphp
          <span class="pill {{ $pc }}">{{ ucfirst($lead->status) }}</span>
        </td>
        <td>
          <form method="POST" action="{{ route('admin.demo-leads.resend', $lead) }}" style="display:inline">
            @csrf
            <button class="btn" type="submit" style="border:none;cursor:pointer">Reenviar enlace</button>
          </form>
        </td>
      </tr>
    @empty
      <tr><td colspan="7" style="text-align:center;color:var(--muted);padding:40px">Aún no hay solicitudes de demo.</td></tr>
    @endforelse
    </tbody>
  </table>

  <div style="margin-top:20px">{{ $leads->links() }}</div>
</div>
@endsection