@extends('dashboard')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <!-- Header -->
            <div class="border-b border-gray-200 p-6">
                <div class="flex justify-between items-center">
                    <h1 class="text-2xl font-bold text-gray-900">Detail Transaksi</h1>
                    <span class="px-4 py-2 rounded-full text-sm font-semibold
                        {{ $transaksi->status === 'menunggu_pembayaran' ? 'bg-yellow-100 text-yellow-800' :
                           ($transaksi->status === 'menunggu_konfirmasi' ? 'bg-blue-100 text-blue-800' :
                           ($transaksi->status === 'dibayar' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800')) }}">
                        {{ ucfirst(str_replace('_', ' ', $transaksi->status)) }}
                    </span>
                </div>
            </div>

            <!-- Informasi Transaksi -->
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Detail Pesanan -->
                    <div>
                        <h2 class="text-lg font-semibold mb-4">Detail Pesanan</h2>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="mb-4">
                                <img src="{{ Storage::url($transaksi->pesanan->barang->gambar) }}"
                                    alt="{{ $transaksi->pesanan->barang->nama }}"
                                    class="w-full h-48 object-cover rounded-lg">
                            </div>
                            <h3 class="font-medium text-lg mb-2">{{ $transaksi->pesanan->barang->nama }}</h3>
                            <div class="space-y-2">
                                <p class="text-sm text-gray-600">
                                    Jumlah: <span class="font-medium">{{ $transaksi->pesanan->jumlah }} unit</span>
                                </p>
                                <p class="text-sm text-gray-600">
                                    Harga Satuan: <span class="font-medium">Rp {{ number_format($transaksi->pesanan->barang->harga, 0, ',', '.') }}</span>
                                </p>
                                @if($transaksi->pesanan->catatan)
                                <p class="text-sm text-gray-600">
                                    Catatan: <span class="font-medium">{{ $transaksi->pesanan->catatan }}</span>
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Detail Pembayaran -->
                    <div>
                        <h2 class="text-lg font-semibold mb-4">Detail Pembayaran</h2>
                        <div class="bg-gray-50 rounded-lg p-4 space-y-4">
                            <div>
                                <p class="text-sm text-gray-600">Total Pembayaran</p>
                                <p class="text-xl font-bold text-blue-600">
                                    Rp {{ number_format($transaksi->total_pembayaran, 0, ',', '.') }}
                                </p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Metode Pembayaran</p>
                                <p class="font-medium">{{ $transaksi->metode_pembayaran === 'transfer' ? 'Transfer Bank' : 'Cash on Delivery (COD)' }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Tanggal Transaksi</p>
                                <p class="font-medium">{{ $transaksi->created_at->format('d M Y H:i') }}</p>
                            </div>
                        </div>

                        @if($transaksi->metode_pembayaran === 'transfer' && $transaksi->status === 'menunggu_pembayaran')
                        <!-- Form Upload Bukti Pembayaran -->
                        <div class="mt-6">
                            <h3 class="text-lg font-semibold mb-4">Upload Bukti Pembayaran</h3>
                            <form action="{{ route('transaksi.upload-bukti', $transaksi) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="space-y-4">
                                    <div>
                                        <label for="bukti_pembayaran" class="block text-sm font-medium text-gray-700 mb-2">
                                            Pilih File
                                        </label>
                                        <input type="file" name="bukti_pembayaran" id="bukti_pembayaran" accept="image/*"
                                            class="w-full border border-gray-300 rounded-lg p-2"
                                            required>
                                    </div>
                                    <button type="submit"
                                        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg">
                                        Upload Bukti Pembayaran
                                    </button>
                                </div>
                            </form>
                        </div>
                        @endif

                        @if($transaksi->bukti_pembayaran)
                        <!-- Bukti Pembayaran -->
                        <div class="mt-6">
                            <h3 class="text-lg font-semibold mb-4">Bukti Pembayaran</h3>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <img src="{{ Storage::url($transaksi->bukti_pembayaran) }}"
                                    alt="Bukti Pembayaran"
                                    class="w-full rounded-lg">
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Tombol Aksi -->
                <div class="mt-8 flex justify-between items-center">
                    <a href="{{ route('transaksi.index') }}"
                        class="inline-flex items-center px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg">
                        <svg class="w-5 h-5 mr-2" 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" />
                        </svg>
                        Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection