@extends('layouts.admin')

@section('content')
<div class="mb-6 flex items-center justify-between">
    <h1 class="text-2xl font-bold text-gray-800">Detail Transaksi #{{ $transaksi->id }}</h1>
    <a href="{{ route('admin.transaksi.index') }}" class="text-[#2c7a7b] hover:text-[#246c6d]">
        <i class="fas fa-arrow-left mr-2"></i>Kembali
    </a>
</div>

@if(session('success'))
<div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
    {{ session('success') }}
</div>
@endif

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Info Pelanggan -->
    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-lg font-bold text-gray-800 mb-4 pb-2 border-b">Info Pelanggan</h2>
        <div class="space-y-3">
            <div>
                <p class="text-sm text-gray-500">Nama</p>
                <p class="font-medium">{{ $transaksi->user->nama ?? $transaksi->user->name }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Email</p>
                <p class="font-medium">{{ $transaksi->user->email }}</p>
            </div>
            @if($transaksi->user->no_telp)
            <div>
                <p class="text-sm text-gray-500">No. Telepon</p>
                <p class="font-medium">{{ $transaksi->user->no_telp }}</p>
            </div>
            @endif
        </div>
    </div>

    <!-- Info Transaksi -->
    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-lg font-bold text-gray-800 mb-4 pb-2 border-b">Info Transaksi</h2>
        <div class="space-y-3">
            <div>
                <p class="text-sm text-gray-500">ID Transaksi</p>
                <p class="font-medium">#{{ $transaksi->id }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">ID Pesanan</p>
                <p class="font-medium">#{{ $transaksi->pesanan->id }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Tanggal Transaksi</p>
                <p class="font-medium">{{ $transaksi->created_at->format('d M Y H:i') }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Metode Pembayaran</p>
                <p class="font-medium">{{ $transaksi->metode_pembayaran }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Jumlah</p>
                <p class="font-bold text-[#2c7a7b]">Rp {{ number_format($transaksi->jumlah, 0, ',', '.') }}</p>
            </div>
        </div>
    </div>

    <!-- Update Status -->
    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-lg font-bold text-gray-800 mb-4 pb-2 border-b">Update Status</h2>
        <div class="mb-4">
            <p class="text-sm text-gray-500">Status Saat Ini</p>
            <div class="mt-2">
                @if($transaksi->status == 'pending')
                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                        Menunggu Pembayaran
                    </span>
                @elseif($transaksi->status == 'paid')
                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                        Sudah Dibayar
                    </span>
                @elseif($transaksi->status == 'completed')
                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                        Selesai
                    </span>
                @elseif($transaksi->status == 'cancelled')
                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                        Dibatalkan
                    </span>
                @endif
            </div>
        </div>
        
        <form action="{{ route('admin.transaksi.status', $transaksi) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="mb-4">
                <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Ubah Status</label>
                <select name="status" id="status" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-[#2c7a7b] focus:border-[#2c7a7b]">
                    <option value="pending" {{ $transaksi->status == 'pending' ? 'selected' : '' }}>Menunggu Pembayaran</option>
                    <option value="paid" {{ $transaksi->status == 'paid' ? 'selected' : '' }}>Sudah Dibayar</option>
                    <option value="completed" {{ $transaksi->status == 'completed' ? 'selected' : '' }}>Selesai</option>
                    <option value="cancelled" {{ $transaksi->status == 'cancelled' ? 'selected' : '' }}>Dibatalkan</option>
                </select>
                <p class="mt-1 text-xs text-gray-500">
                    <i class="fas fa-info-circle mr-1"></i>
                    Perubahan status ke "Selesai" atau "Dibatalkan" juga akan mengubah status pesanan
                </p>
            </div>
            <button type="submit" class="w-full bg-[#2c7a7b] hover:bg-[#246c6d] text-white py-2 px-4 rounded">
                <i class="fas fa-save mr-2"></i>Update Status
            </button>
        </form>
    </div>
</div>

<!-- Detail Pesanan & Bukti Pembayaran -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
    <!-- Detail Pesanan -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <h2 class="text-lg font-bold text-gray-800 p-6 border-b">Detail Pesanan</h2>
        <div class="p-6">
            <div class="flex flex-col md:flex-row gap-4 mb-4">
                <div class="w-full md:w-1/4">
                    <img src="{{ asset('storage/products/' . $transaksi->pesanan->barang->gambar) }}" alt="{{ $transaksi->pesanan->barang->nama }}" 
                        class="w-full h-28 object-cover rounded">
                </div>
                <div class="w-full md:w-3/4">
                    <h3 class="text-lg font-medium text-gray-800">{{ $transaksi->pesanan->barang->nama }}</h3>
                    <div class="mt-2 text-sm text-gray-600">
                        <p>Jumlah: {{ $transaksi->pesanan->jumlah }} unit</p>
                        <p>Harga: Rp {{ number_format($transaksi->pesanan->barang->harga, 0, ',', '.') }} / unit</p>
                        <p>Total: Rp {{ number_format($transaksi->pesanan->total_harga, 0, ',', '.') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-t border-gray-200">
                <div class="flex justify-between items-center">
                    <p class="text-sm text-gray-500">Status Pesanan:</p>
                    <div>
                        @if($transaksi->pesanan->status == 'pending')
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                Menunggu
                            </span>
                        @elseif($transaksi->pesanan->status == 'processing')
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                Diproses
                            </span>
                        @elseif($transaksi->pesanan->status == 'completed')
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                Selesai
                            </span>
                        @elseif($transaksi->pesanan->status == 'cancelled')
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                Dibatalkan
                            </span>
                        @endif
                    </div>
                </div>
                <div class="mt-2">
                    <a href="{{ route('admin.pesanan.show', $transaksi->pesanan) }}" class="text-[#2c7a7b] hover:text-[#246c6d] text-sm">
                        <i class="fas fa-external-link-alt mr-1"></i>Lihat Detail Pesanan
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Bukti Pembayaran -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <h2 class="text-lg font-bold text-gray-800 p-6 border-b">Bukti Pembayaran</h2>
        <div class="p-6">
            @if($transaksi->bukti_pembayaran)
                <div class="mb-4">
                    <a href="{{ asset('storage/payments/' . $transaksi->bukti_pembayaran) }}" target="_blank" class="block">
                        <img src="{{ asset('storage/payments/' . $transaksi->bukti_pembayaran) }}" alt="Bukti Pembayaran" 
                            class="max-w-full h-64 object-contain mx-auto rounded border p-1">
                    </a>
                    <p class="text-center mt-2 text-sm text-gray-500">Klik gambar untuk melihat ukuran penuh</p>
                </div>
                <div class="text-sm text-gray-600">
                    <p class="mb-1">Tanggal Upload: {{ $transaksi->updated_at->format('d M Y H:i') }}</p>
                </div>
            @else
                <div class="py-8 text-center">
                    <i class="fas fa-receipt text-gray-300 text-5xl mb-4"></i>
                    <p class="text-gray-500">Belum ada bukti pembayaran yang diunggah</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection