@extends('layouts.admin')
@section('title', 'Customers')

@section('content')

<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem">
  <div>
    <h1 style="font-size:1.25rem;font-weight:800;color:var(--foreground);letter-spacing:-.025em;margin:0 0 .25rem">Customers</h1>
    <p style="font-size:.8125rem;color:var(--muted-foreground);margin:0">{{ $customers->total() }} registered customers</p>
  </div>
</div>

<div class="card" style="padding:.875rem 1.25rem;margin-bottom:1rem">
  <form method="GET" style="display:flex;gap:.625rem;align-items:center">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by name or email..."
      class="input" style="width:280px">
    <button type="submit" class="btn btn-primary btn-sm">Search</button>
    @if(request('search'))
    <a href="{{ route('admin.customers.index') }}" class="btn btn-ghost btn-sm">Clear</a>
    @endif
  </form>
</div>

<div class="card">
  <table style="width:100%;border-collapse:collapse">
    <thead>
      <tr style="border-bottom:1px solid var(--border)">
        <th class="th">Customer</th>
        <th class="th">Company</th>
        <th class="th" style="text-align:center">Licenses</th>
        <th class="th" style="text-align:center">Orders</th>
        <th class="th">Status</th>
        <th class="th">Joined</th>
        <th class="th"></th>
      </tr>
    </thead>
    <tbody>
      @forelse($customers as $customer)
      <tr class="trow">
        <td class="td">
          <div style="display:flex;align-items:center;gap:.625rem">
            <div class="avatar" style="width:32px;height:32px;font-size:.75rem;border-radius:.5rem">
              {{ strtoupper(substr($customer->name,0,1)) }}
            </div>
            <div>
              <div style="font-size:.8125rem;font-weight:700;color:var(--foreground)">{{ $customer->name }}</div>
              <div style="font-size:.7rem;color:var(--muted-foreground)">{{ $customer->email }}</div>
            </div>
          </div>
        </td>
        <td class="td" style="color:var(--foreground);font-size:.78rem">{{ $customer->company??'-' }}</td>
        <td class="td" style="text-align:center;font-weight:700;color:var(--foreground)">{{ $customer->licenses_count }}</td>
        <td class="td" style="text-align:center;font-weight:700;color:var(--foreground)">{{ $customer->orders_count }}</td>
        <td class="td">
          <span class="badge {{ $customer->is_active?'b-green':'b-red' }}">
            {{ $customer->is_active?'Active':'Suspended' }}
          </span>
        </td>
        <td class="td" style="font-size:.75rem;color:var(--muted-foreground)">{{ $customer->created_at->format('M d, Y') }}</td>
        <td class="td">
          <a href="{{ route('admin.customers.show',$customer) }}" class="btn btn-secondary btn-xs">View <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>
        </td>
      </tr>
      @empty
      <tr><td colspan="7" style="padding:3rem;text-align:center;color:var(--muted-foreground);font-size:.8rem">No customers found.</td></tr>
      @endforelse
    </tbody>
  </table>
  <div style="padding:.875rem 1.25rem;border-top:1px solid var(--border)">{{ $customers->links() }}</div>
</div>

@endsection
