@extends('layouts.app')
@section('title', 'Detail Customer')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 lg:col-span-1">
        <div class="text-xs uppercase tracking-wide text-slate-500">{{ $customer->kode_customer }}</div>
        <h2 class="text-xl font-bold text-slate-800 mt-1">{{ $customer->nama }}</h2>
        <div class="mt-4 space-y-2 text-sm">
            <div><span class="text-slate-500">No HP:</span> <strong>{{ $customer->no_hp ?? '-' }}</strong></div>
            <div><span class="text-slate-500">Alamat:</span> {{ $customer->alamat ?? '-' }}</div>
            <div><span class="text-slate-500">Catatan:</span> {{ $customer->catatan ?? '-' }}</div>
            <div><span class="text-slate-500">Terdaftar:</span> {{ $customer->created_at->format('d/m/Y') }}</div>
        </div>
        <div class="mt-4 pt-4 border-t border-slate-200 flex gap-2">
            <a href="{{ route('customers.edit', $customer) }}" class="bg-amber-500 hover:bg-amber-600 text-white px-3 py-2 rounded-lg text-sm">Edit</a>
            <a href="{{ route('customers.history', $customer) }}" class="bg-slate-700 hover:bg-slate-800 text-white px-3 py-2 rounded-lg text-sm">Riwayat Invoice</a>
        </div>
    </div>

    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <h3 class="font-bold text-slate-800 mb-3">Invoice Terakhir</h3>
        <div class="space-y-2">
            @forelse($customer->invoices as $inv)
                <a href="{{ route('invoices.show', $inv) }}" class="flex justify-between p-3 rounded-lg border border-slate-200 hover:bg-slate-50">
                    <div>
                        <div class="font-semibold text-sm">{{ $inv->nomor_invoice }}</div>
                        <div class="text-xs text-slate-500">{{ $inv->tanggal_invoice->format('d/m/Y') }} · {{ $inv->total_qty }} pcs</div>
                    </div>
                    <div class="text-right">
                        <div class="font-semibold">Rp {{ number_format($inv->total_akhir, 0, ',', '.') }}</div>
                        <span class="text-[10px] px-1.5 py-0.5 rounded border {{ $inv->status_badge }}">{{ $inv->status }}</span>
                    </div>
                </a>
            @empty
                <div class="text-center py-6 text-slate-500 text-sm">Belum ada invoice.</div>
            @endforelse
        </div>
    </div>
</div>
@endsection