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

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

{{-- Header --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
    <div class="flex items-start justify-between">
        <div>
            <h2 class="text-lg font-bold text-gray-800">{{ $purchase->purchase_number }}</h2>
            <p class="text-gray-500 text-sm">{{ $purchase->date->format('d F Y') }} &mdash; {{ $purchase->supplier?->name }}</p>
        </div>
        @php $sc=['draft'=>'yellow','diterima'=>'green','dibatalkan'=>'red'][$purchase->status]??'gray' @endphp
        <span class="text-sm font-medium px-3 py-1 rounded-full bg-{{ $sc }}-100 text-{{ $sc }}-700">{{ $purchase->status_label }}</span>
    </div>

    @if($purchase->status === 'draft')
    <div class="flex gap-3 mt-4 pt-4 border-t border-gray-100">
        <form method="POST" action="{{ route('purchases.receive',$purchase) }}" onsubmit="return confirm('Terima pembelian ini? Stok akan diperbarui.')">
            @csrf
            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition">✓ Terima & Perbarui Stok</button>
        </form>
        <form method="POST" action="{{ route('purchases.cancel',$purchase) }}" onsubmit="return confirm('Batalkan pembelian ini?')">
            @csrf
            <button type="submit" class="bg-red-50 hover:bg-red-100 text-red-600 text-sm font-medium px-4 py-2 rounded-lg transition">Batalkan</button>
        </form>
    </div>
    @endif
</div>

{{-- Items --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-5 py-3 border-b border-gray-100"><h3 class="font-semibold text-gray-700 text-sm">Item Pembelian</h3></div>
    <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 Beli</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($purchase->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 }} {{ $item->product?->unit }}</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">
            <tr><td colspan="3" class="px-4 py-2 text-right text-gray-500">Subtotal</td><td class="px-4 py-2 text-right text-gray-700">Rp {{ number_format($purchase->subtotal,0,',','.') }}</td></tr>
            @if($purchase->discount > 0)<tr><td colspan="3" class="px-4 py-1 text-right text-gray-500">Diskon</td><td class="px-4 py-1 text-right text-red-600">- Rp {{ number_format($purchase->discount,0,',','.') }}</td></tr>@endif
            @if($purchase->tax > 0)<tr><td colspan="3" class="px-4 py-1 text-right text-gray-500">Pajak</td><td class="px-4 py-1 text-right text-gray-700">Rp {{ number_format($purchase->tax,0,',','.') }}</td></tr>@endif
            <tr class="font-bold"><td colspan="3" class="px-4 py-2 text-right text-gray-700">Total</td><td class="px-4 py-2 text-right text-gray-900">Rp {{ number_format($purchase->total,0,',','.') }}</td></tr>
        </tfoot>
    </table>
</div>

<div class="flex gap-3">
    <a href="{{ route('purchases.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>
</div>
</div>
@endsection