@extends('layouts.app')

@section('title', 'Müşteriler')
@section('eyebrow', 'CRM')
@section('heading', 'Müşteriler')

@section('top-actions')
    <a class="primary-button" href="{{ route('appointments.index', ['open' => 'new']) }}"><i data-lucide="user-plus"></i> Randevu ile Müşteri Ekle</a>
@endsection

@section('content')
<section class="panel list-panel">
    <header class="list-toolbar">
        <div><span class="section-kicker">MÜŞTERİ HAFIZASI</span><h2>{{ $customers->total() }} müşteri</h2><p>İletişim, araç ve hizmet geçmişini görüntüleyin.</p></div>
        <form class="filter-form" method="GET"><label class="search-input"><i data-lucide="search"></i><input name="q" value="{{ request('q') }}" placeholder="Ad, telefon veya e-posta"></label><button class="secondary-button" type="submit">Ara</button></form>
    </header>
    <div class="card-list-grid">
        @forelse($customers as $customer)
        <article class="entity-card">
            <span class="entity-avatar">{{ str($customer->name)->explode(' ')->map(fn($p) => mb_substr($p,0,1))->take(2)->join('') }}</span>
            <div class="entity-main"><strong>{{ $customer->name }}</strong><a href="tel:{{ $customer->phone }}">{{ $customer->phone }}</a><small>{{ $customer->email ?: collect([$customer->district,$customer->city])->filter()->join(' / ') ?: 'Konum bilgisi yok' }}</small></div>
            <div class="entity-stats"><span><strong>{{ $customer->vehicles_count }}</strong><small>Araç</small></span><span><strong>{{ $customer->appointments_count }}</strong><small>Randevu</small></span></div>
        </article>
        @empty<div class="empty-state span-full"><i data-lucide="users"></i><strong>Henüz müşteri yok</strong></div>@endforelse
    </div>
    <x-pagination :paginator="$customers" />
</section>
@endsection