@extends('layouts.admin')

@section('admin-content')
<div class="flex justify-between items-center mb-8">
    <h2 class="text-2xl font-bold">Payment Details</h2>
    <a href="{{ route('admin.payments.index') }}" class="royal-btn px-4 py-2 text-sm">Back to Payments</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="royal-card p-6">
        <h4 class="font-semibold mb-4">Payment Info</h4>
        <div class="space-y-3 text-sm">
            <div class="flex justify-between"><span class="text-gray-500">Transaction ID:</span><span class="font-mono text-xs">{{ $payment->transaction_id }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Gateway:</span><span class="capitalize">{{ $payment->payment_gateway }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Method:</span><span class="capitalize">{{ $payment->payment_method }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Amount:</span><span class="font-bold">${{ number_format($payment->amount, 2) }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Status:</span>
                <span class="px-2 py-1 rounded-full text-xs font-semibold
                    @if($payment->status === 'completed') bg-green-100 text-green-800
                    @elseif($payment->status === 'pending') bg-yellow-100 text-yellow-800
                    @else bg-red-100 text-red-800 @endif">{{ ucfirst($payment->status) }}</span>
            </div>
            <div class="flex justify-between"><span class="text-gray-500">Date:</span><span>{{ $payment->created_at->format('M d, Y H:i') }}</span></div>
            @if($payment->paid_at) <div class="flex justify-between"><span class="text-gray-500">Paid At:</span><span>{{ $payment->paid_at->format('M d, Y H:i') }}</span></div> @endif
        </div>
    </div>

    <div class="royal-card p-6">
        <h4 class="font-semibold mb-4">Order Info</h4>
        @if($payment->order)
            <div class="space-y-3 text-sm">
                <div class="flex justify-between"><span class="text-gray-500">Order #:</span><a href="{{ route('admin.orders.show', $payment->order) }}" class="text-purple-600 hover:underline">{{ $payment->order->order_number }}</a></div>
                <div class="flex justify-between"><span class="text-gray-500">Customer:</span><span>{{ $payment->order->customer->name }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Order Status:</span><span class="capitalize">{{ $payment->order->status }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Order Total:</span><span class="font-semibold">${{ number_format($payment->order->total, 2) }}</span></div>
            </div>
        @endif
    </div>

    <div class="royal-card p-6">
        <h4 class="font-semibold mb-4">Customer</h4>
        @if($payment->customer)
            <div class="space-y-3 text-sm">
                <p class="font-semibold">{{ $payment->customer->name }}</p>
                <p>{{ $payment->customer->email }}</p>
                <p>{{ $payment->customer->phone ?: 'N/A' }}</p>
            </div>
        @endif
    </div>
</div>

@if($payment->gateway_response)
    <div class="royal-card p-6 mt-6">
        <h4 class="font-semibold mb-4">Gateway Response</h4>
        <pre class="bg-gray-50 p-4 rounded-lg text-xs overflow-x-auto">{{ json_encode(json_decode($payment->gateway_response), JSON_PRETTY_PRINT) }}</pre>
    </div>
@endif
@endsection