@extends('layouts.app')
@section('title','Kunder')
@section('content')
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;">
  <div><h2 style="font-family:'Instrument Serif',serif;font-size:26px;color:#E8EAF0;">Kunder</h2><p style="font-size:13px;color:#5B6478;margin-top:2px;">{{ $customers->total() }} kunder totalt</p></div>
  <a href="{{ route('customers.create') }}" class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Ny kund</a>
</div>

<div class="ff-card" style="padding:14px 20px;margin-bottom:16px;">
  <form method="GET" style="display:flex;gap:12px;align-items:center;">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Sök namn, e-post eller org.nr..." style="flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:9px 14px;color:#E8EAF0;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;">
    <select name="type" style="padding:9px 28px 9px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:9px;color:#E8EAF0;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;appearance:none;cursor:pointer;">
      <option value="">Alla typer</option>
      <option value="company" {{ request('type')==='company'?'selected':'' }}>Företag</option>
      <option value="individual" {{ request('type')==='individual'?'selected':'' }}>Privatperson</option>
    </select>
    <button type="submit" class="btn btn-secondary" style="padding:9px 18px;font-size:13px;">Sök</button>
    @if(request()->hasAny(['search','type']))<a href="{{ route('customers.index') }}" style="font-size:13px;color:#5B6478;text-decoration:none;">Rensa</a>@endif
  </form>
</div>

<div class="ff-card" style="padding:0;">
  <table class="ff-table">
    <thead><tr>
      <th>Kund</th><th>Kontakt</th><th>Org.nr</th><th class="text-right">Fakturor</th><th class="text-right">Total</th><th>Åtgärder</th>
    </tr></thead>
    <tbody>
    @forelse($customers as $c)
    <tr onclick="window.location='{{ route('customers.show',$c) }}'" style="cursor:pointer;">
      <td>
        <div style="display:flex;align-items:center;gap:10px;">
          <div style="width:34px;height:34px;border-radius:9px;background:hsl({{ crc32($c->name)%360 }},50%,35%);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:white;flex-shrink:0;">{{ strtoupper(substr($c->name,0,1)) }}</div>
          <div>
            <div style="font-size:13px;font-weight:500;color:#E8EAF0;">{{ $c->name }}</div>
            <div style="font-size:11px;color:#5B6478;">{{ $c->type==='company'?'Företag':'Privatperson' }} · #{{ $c->customer_number }}</div>
          </div>
        </div>
      </td>
      <td><div style="font-size:13px;color:#8B9AB8;">{{ $c->email }}</div><div style="font-size:11px;color:#5B6478;">{{ $c->phone }}</div></td>
      <td><span class="mono" style="font-size:12px;color:#8B9AB8;">{{ $c->org_number ?? '—' }}</span></td>
      <td class="text-right"><span style="font-size:13px;color:#E8EAF0;">{{ $c->invoices_count }}</span></td>
      <td class="text-right"><span style="font-size:13px;color:#E8EAF0;font-variant-numeric:tabular-nums;">{{ number_format($c->invoices_sum_total??0, 0, ',', ' ') }} kr</span></td>
      <td onclick="event.stopPropagation()">
        <div style="display:flex;gap:6px;">
          <a href="{{ route('customers.show',$c) }}" class="btn btn-ghost btn-sm">Visa</a>
          <a href="{{ route('customers.edit',$c) }}" class="btn btn-ghost btn-sm">Redigera</a>
          <a href="{{ route('invoices.create') }}?customer_id={{ $c->id }}" class="btn btn-ghost btn-sm" style="color:#3B7DFF;">+ Faktura</a>
        </div>
      </td>
    </tr>
    @empty
    <tr><td colspan="6" style="text-align:center;padding:60px;color:#5B6478;">Inga kunder ännu.<br><a href="{{ route('customers.create') }}" style="color:#3B7DFF;">Lägg till din första kund →</a></td></tr>
    @endforelse
    </tbody>
  </table>
  <div style="padding:14px 20px;border-top:1px solid rgba(255,255,255,.04);">{{ $customers->appends(request()->query())->links() }}</div>
</div>
@endsection