@extends('layouts.authenticated')
@section('title', 'Detail Transaksi')
@section('page-title', 'Detail Transaksi')

@section('page-content')
<div class="max-w-3xl mx-auto space-y-6">
    <div>
        <a href="{{ route('transactions.index') }}" class="inline-flex items-center gap-2 text-sm text-blue-600 hover:text-blue-500 dark:text-blue-400">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            Kembali
        </a>
    </div>

    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div class="p-6 border-b border-gray-200 dark:border-slate-700">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div>
                    <h1 class="text-xl font-semibold text-slate-900 dark:text-white">{{ $transaction->invoice_number }}</h1>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">{{ $transaction->created_at->format('d/m/Y H:i') }}</p>
                </div>
                <span class="inline-flex items-center px-3 py-1.5 rounded text-sm font-medium
                    @if($transaction->status === 'completed') bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400
                    @else bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 @endif">
                    {{ ucfirst($transaction->status) }}
                </span>
            </div>
        </div>

        <div class="p-6 space-y-4">
            <div class="grid grid-cols-2 gap-4 text-sm">
                <div><p class="text-slate-500 dark:text-slate-400">Kasir</p><p class="font-medium text-slate-900 dark:text-white mt-1">{{ $transaction->user->name }}</p></div>
                <div><p class="text-slate-500 dark:text-slate-400">Pembayaran</p><p class="font-medium text-slate-900 dark:text-white mt-1">{{ ucfirst($transaction->payment_method) }}</p></div>
                @if($transaction->customer_name)<div><p class="text-slate-500 dark:text-slate-400">Pelanggan</p><p class="font-medium text-slate-900 dark:text-white mt-1">{{ $transaction->customer_name }}</p></div>@endif
            </div>

            <div class="border-t border-b border-gray-200 dark:border-slate-700 py-4">
                <table class="w-full text-sm">
                    <thead><tr class="text-slate-500 dark:text-slate-400"><th class="pb-2 text-left font-medium">Item</th><th class="pb-2 text-center font-medium">Qty</th><th class="pb-2 text-right font-medium">Subtotal</th></tr></thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-slate-700">
                        @foreach($transaction->details as $d)
                        <tr>
                            <td class="py-2 text-slate-900 dark:text-white">{{ $d->product_name }}</td>
                            <td class="text-center text-slate-600 dark:text-slate-400">{{ $d->quantity }}</td>
                            <td class="text-right font-medium text-slate-900 dark:text-white">Rp {{ number_format($d->total, 0, ',', '.') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">Subtotal</span><span class="text-slate-900 dark:text-white">Rp {{ number_format($transaction->subtotal, 0, ',', '.') }}</span></div>
                @if($transaction->discount > 0)<div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">Diskon</span><span class="text-slate-900 dark:text-white">- Rp {{ number_format($transaction->discount, 0, ',', '.') }}</span></div>@endif
                @if($transaction->tax > 0)<div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">Pajak</span><span class="text-slate-900 dark:text-white">Rp {{ number_format($transaction->tax, 0, ',', '.') }}</span></div>@endif
                <div class="flex justify-between text-base font-semibold pt-2 border-t border-gray-200 dark:border-slate-700"><span>Total Bayar</span><span class="text-blue-600 dark:text-blue-400">Rp {{ number_format($transaction->total, 0, ',', '.') }}</span></div>
            </div>
        </div>

        <div class="p-6 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <a href="{{ route('transactions.print', $transaction) }}" target="_blank" class="block text-center bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors">Cetak Struk</a>
                @if($transaction->status === 'completed')
                <form action="{{ route('transactions.cancel', $transaction) }}" method="POST" onsubmit="return confirm('Batal transaksi ini? Stok akan dikembalikan.')">
                    @csrf
                    <button type="submit" class="w-full text-center bg-red-600 hover:bg-red-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors">Batal Transaksi</button>
                </form>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection