@extends('layouts.app')
@section('title','Detail Penjualan')
@section('page-title','Detail Penjualan')

@section('content')
<div class="max-w-3xl space-y-4">

<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
    <div class="flex items-start justify-between mb-4">
        <div>
            <h2 class="text-lg font-bold text-gray-800">{{ $sale->invoice_number }}</h2>
            <p class="text-gray-500 text-sm">{{ $sale->created_at->format('d F Y, H:i') }}</p>
        </div>
        <span class="text-xs bg-green-100 text-green-700 font-medium px-3 py-1 rounded-full">Selesai</span>
    </div>
    <div class="grid grid-cols-2 gap-4 text-sm">
        <div><span class="text-gray-400">Pelanggan</span><p class="font-medium text-gray-700 mt-0.5">{{ $sale->customer?->name ?? 'Pelanggan Umum' }}</p></div>
        <div><span class="text-gray-400">Metode Bayar</span><p class="font-medium text-gray-700 mt-0.5">{{ $sale->payment_method_label }}</p></div>
        @if($sale->notes)<div class="col-span-2"><span class="text-gray-400">Catatan</span><p class="text-gray-700 mt-0.5">{{ $sale->notes }}</p></div>@endif
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-gray-100">
            <tr>
                <th class="text-left px-4 py-2 text-gray-500 font-medium">Produk</th>
                <th class="text-right px-4 py-2 text-gray-500 font-medium">Qty</th>
                <th class="text-right px-4 py-2 text-gray-500 font-medium">Harga</th>
                <th class="text-right px-4 py-2 text-gray-500 font-medium">Subtotal</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @foreach($sale->items as $item)
            <tr>
                <td class="px-4 py-2 text-gray-800">{{ $item->product?->name }}</td>
                <td class="px-4 py-2 text-right text-gray-600">{{ $item->quantity }}</td>
                <td class="px-4 py-2 text-right text-gray-600">Rp {{ number_format($item->unit_price,0,',','.') }}</td>
                <td class="px-4 py-2 text-right font-medium text-gray-800">Rp {{ number_format($item->subtotal,0,',','.') }}</td>
            </tr>
            @endforeach
        </tbody>
        <tfoot class="bg-gray-50 border-t border-gray-200 text-sm">
            @if($sale->discount > 0)<tr><td colspan="3" class="px-4 py-1.5 text-right text-gray-500">Diskon</td><td class="px-4 py-1.5 text-right text-red-600">- Rp {{ number_format($sale->discount,0,',','.') }}</td></tr>@endif
            @if($sale->tax > 0)<tr><td colspan="3" class="px-4 py-1.5 text-right text-gray-500">Pajak</td><td class="px-4 py-1.5 text-right text-gray-700">Rp {{ number_format($sale->tax,0,',','.') }}</td></tr>@endif
            <tr class="font-bold"><td colspan="3" class="px-4 py-2.5 text-right text-gray-700">Total</td><td class="px-4 py-2.5 text-right text-gray-900 text-base">Rp {{ number_format($sale->total,0,',','.') }}</td></tr>
        </tfoot>
    </table>
</div>

<div class="flex gap-3">
    <a href="{{ route('sales.index') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-4 py-2 rounded-lg transition">← Kembali</a>
    <a href="{{ route('sales.print', $sale) }}" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition">🖨 Cetak Invoice</a>
</div>
</div>
@endsection