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

@section('content')
<div style="max-width:1000px;">
  <!-- Header -->
  <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;">
    <div style="display:flex;align-items:center;gap:14px;">
      <a href="{{ route('customers.index') }}" style="color:#5B6478;text-decoration:none;flex-shrink:0;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
      </a>
      <div style="width:50px;height:50px;border-radius:14px;background:hsl({{ crc32($customer->name)%360 }},50%,35%);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:white;flex-shrink:0;">
        {{ strtoupper(substr($customer->name,0,1)) }}
      </div>
      <div>
        <h2 style="font-family:'Instrument Serif',serif;font-size:26px;color:#E8EAF0;">{{ $customer->name }}</h2>
        <div style="display:flex;gap:10px;margin-top:4px;align-items:center;">
          <span style="font-size:12px;color:#5B6478;">{{ $customer->type==='company'?'🏢 Företag':'👤 Privatperson' }}</span>
          @if($customer->org_number)<span style="font-size:12px;color:#5B6478;">Org: {{ $customer->org_number }}</span>@endif
          <span class="mono" style="font-size:11px;color:#3B4257;">#{{ $customer->customer_number }}</span>
        </div>
      </div>
    </div>
    <div style="display:flex;gap:10px;">
      <a href="{{ route('invoices.create') }}?customer_id={{ $customer->id }}" class="btn btn-primary" style="font-size:13px;">+ Ny faktura</a>
      <a href="{{ route('customers.edit', $customer) }}" class="btn btn-secondary" style="font-size:13px;">Redigera</a>
    </div>
  </div>

  <div style="display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start;">
    <!-- Left: Invoice history -->
    <div>
      <!-- Stats -->
      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;">
        <div class="ff-stat-card" style="padding:16px 20px;">
          <div class="ff-stat-value">{{ $customer->invoices->count() }}</div>
          <div class="ff-stat-label">Fakturor totalt</div>
        </div>
        <div class="ff-stat-card" style="padding:16px 20px;">
          <div class="ff-stat-value" style="color:#10B981;">{{ number_format($totalRevenue,0,',', ' ') }} kr</div>
          <div class="ff-stat-label">Total intäkt (betald)</div>
        </div>
        <div class="ff-stat-card" style="padding:16px 20px;">
          <div class="ff-stat-value" style="color:{{ $outstanding>0?'#F59E0B':'#10B981' }};">{{ number_format($outstanding,0,',', ' ') }} kr</div>
          <div class="ff-stat-label">Utestående</div>
        </div>
      </div>

      <!-- Invoice history -->
      <div class="ff-card" style="padding:0;">
        <div style="padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;">
          <span style="font-size:14px;font-weight:500;color:#E8EAF0;">Fakturahistorik</span>
          <a href="{{ route('invoices.create') }}?customer_id={{ $customer->id }}" style="font-size:13px;color:#3B7DFF;text-decoration:none;">+ Ny faktura</a>
        </div>
        <table class="ff-table">
          <thead><tr><th>Faktura</th><th>Datum</th><th>Förfall</th><th class="text-right">Belopp</th><th>Status</th></tr></thead>
          <tbody>
          @forelse($customer->invoices as $inv)
          <tr onclick="window.location='{{ route('invoices.show',$inv) }}'" style="cursor:pointer;">
            <td class="mono" style="font-size:13px;color:#E8EAF0;">{{ $inv->invoice_number }}</td>
            <td style="font-size:13px;color:#8B9AB8;">{{ $inv->invoice_date->format('d.m.Y') }}</td>
            <td style="font-size:13px;color:{{ $inv->due_date->isPast()&&!in_array($inv->status,['paid','cancelled'])?'#FCA5A5':'#8B9AB8' }};">{{ $inv->due_date->format('d.m.Y') }}</td>
            <td class="text-right" style="font-size:13px;color:#E8EAF0;font-variant-numeric:tabular-nums;">{{ number_format($inv->total,0,',', ' ') }} {{ $inv->currency }}</td>
            <td><span class="badge badge-{{ $inv->status }}">{{ $inv->status_label }}</span></td>
          </tr>
          @empty
          <tr><td colspan="5" style="text-align:center;padding:40px;color:#5B6478;">Inga fakturor ännu</td></tr>
          @endforelse
          </tbody>
        </table>
      </div>
    </div>

    <!-- Right: Contact info + AI -->
    <div style="display:flex;flex-direction:column;gap:14px;">
      <div class="ff-card">
        <div style="font-size:11px;font-weight:600;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;">Kontaktuppgifter</div>
        @foreach([
          ['E-post',$customer->email,'mailto:'.$customer->email],
          ['Telefon',$customer->phone,'tel:'.$customer->phone],
          ['Adress',$customer->billing_address.', '.$customer->billing_postal_code.' '.$customer->billing_city, null],
          ['Betalningsvillkor',$customer->payment_terms.' dagar', null],
          ['Valuta',$customer->currency, null],
          ['Bankgiro',$customer->bankgiro_number, null],
          ['Referens',$customer->reference_person, null],
        ] as [$lbl,$val,$link])
        @if($val && trim($val,', '))
        <div style="padding:7px 0;border-bottom:1px solid rgba(255,255,255,.03);display:flex;justify-content:space-between;gap:10px;">
          <span style="font-size:11px;color:#5B6478;flex-shrink:0;">{{ $lbl }}</span>
          @if($link)
            <a href="{{ $link }}" style="font-size:12px;color:#3B7DFF;text-decoration:none;text-align:right;overflow:hidden;text-overflow:ellipsis;">{{ $val }}</a>
          @else
            <span style="font-size:12px;color:#E8EAF0;text-align:right;">{{ $val }}</span>
          @endif
        </div>
        @endif
        @endforeach
      </div>

      <!-- AI Risk Analysis -->
      <div class="ff-card" style="background:rgba(59,125,255,.04);border-color:rgba(59,125,255,.15);">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
          <div style="width:28px;height:28px;background:linear-gradient(135deg,#3B7DFF,#7B4FFF);border-radius:7px;display:flex;align-items:center;justify-content:center;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5z" stroke="white" stroke-width="1.8"/></svg>
          </div>
          <span style="font-size:13px;font-weight:500;color:#E8EAF0;">AI Kreditriskanalys</span>
        </div>
        <div id="risk-result" style="font-size:13px;color:#5B6478;">Klicka för att analysera kundens betalningshistorik med AI.</div>
        <button onclick="loadRisk()" id="risk-btn" style="margin-top:12px;width:100%;padding:9px;background:rgba(59,125,255,.1);border:1px solid rgba(59,125,255,.2);border-radius:9px;color:#7BA7FF;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;">
          Analysera kreditrisk
        </button>
      </div>

      @if($customer->notes)
      <div class="ff-card">
        <div style="font-size:11px;font-weight:600;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;">Anteckningar</div>
        <div style="font-size:13px;color:#8B9AB8;line-height:1.6;">{{ $customer->notes }}</div>
      </div>
      @endif

      <!-- External IDs -->
      @if($customer->external_ids)
      <div class="ff-card" style="padding:14px 16px;">
        <div style="font-size:11px;font-weight:600;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;">Externa kopplingar</div>
        @foreach($customer->external_ids as $system=>$id)
        <div style="display:flex;justify-content:space-between;padding:4px 0;">
          <span style="font-size:12px;color:#5B6478;">{{ ucfirst($system) }}</span>
          <span class="mono" style="font-size:12px;color:#8B9AB8;">{{ $id }}</span>
        </div>
        @endforeach
      </div>
      @endif
    </div>
  </div>
</div>

@push('scripts')
<script>
function loadRisk() {
  const btn = document.getElementById('risk-btn');
  const result = document.getElementById('risk-result');
  btn.textContent = 'Analyserar...'; btn.disabled = true;
  fetch('{{ route("customers.risk", $customer) }}', {
    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json'}
  })
  .then(r => r.json())
  .then(d => {
    const colors = {low:'#10B981', medium:'#F59E0B', high:'#EF4444'};
    const c = colors[d.risk_level] || '#8B9AB8';
    result.innerHTML = `
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
        <div style="font-size:24px;font-weight:700;color:${c};">${d.score}/100</div>
        <span style="font-size:12px;font-weight:600;color:${c};text-transform:uppercase;">${d.risk_level==='low'?'Låg risk':d.risk_level==='medium'?'Medel risk':'Hög risk'}</span>
      </div>
      <div style="font-size:13px;color:#8B9AB8;line-height:1.6;">${d.recommendation || ''}</div>
      ${d.payment_terms_suggestion ? `<div style="margin-top:8px;font-size:12px;color:#5B6478;">Rekommenderade villkor: <strong style="color:#E8EAF0;">${d.payment_terms_suggestion} dagar</strong></div>` : ''}
    `;
    btn.textContent = 'Uppdatera analys'; btn.disabled = false;
  })
  .catch(() => { result.textContent = 'Analys misslyckades.'; btn.disabled = false; btn.textContent = 'Försök igen'; });
}
</script>
@endpush
@endsection