@extends('layouts.admin')

@section('title', 'Payment ' . $payment->payment_number)

@section('page-title', 'Payment Details')

@section('content')
<div class="max-w-3xl mx-auto space-y-6">
    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6">
        <div class="flex justify-between items-start mb-6">
            <div>
                <h2 class="text-2xl font-bold text-[#111418] text-gray-900 mb-2">{{ $payment->payment_number }}</h2>
                <p class="text-sm text-[#617589]">Payment Date: {{ $payment->payment_date->format('M d, Y') }}</p>
            </div>
            <span class="px-3 py-1 rounded-lg text-sm font-medium {{ $payment->status === 'completed' ? 'bg-green-100 text-green-800' : ($payment->status === 'refunded' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800') }}">
                {{ ucfirst($payment->status) }}
            </span>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Invoice</p>
                <a href="{{ route('admin.invoices.show', $payment->invoice) }}" class="text-primary hover:underline font-medium">
                    {{ $payment->invoice->invoice_number }}
                </a>
            </div>
            <div>
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Customer</p>
                <p class="text-sm text-[#111418] text-gray-900">{{ $payment->customer->name }}</p>
            </div>
            <div>
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Payment Method</p>
                <p class="text-sm text-[#111418] text-gray-900">{{ ucfirst(str_replace('_', ' ', $payment->payment_method)) }}</p>
            </div>
            <div>
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Amount</p>
                <p class="text-2xl font-bold text-primary">{{ $payment->currency }} {{ number_format($payment->amount, 2) }}</p>
            </div>
            @if($payment->transaction_id)
                <div>
                    <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Transaction ID</p>
                    <p class="text-sm text-[#111418] text-gray-900">{{ $payment->transaction_id }}</p>
                </div>
            @endif
            @if($payment->notes)
                <div class="md:col-span-2">
                    <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Notes</p>
                    <p class="text-sm text-[#617589] whitespace-pre-line">{{ $payment->notes }}</p>
                </div>
            @endif
        </div>

        @if($payment->status === 'completed')
            <div class="mt-6 pt-6 border-t border-[#e5e7eb]">
                <form method="POST" action="{{ route('admin.payments.refund', $payment) }}" onsubmit="return confirm('Are you sure you want to refund this payment?')">
                    @csrf
                    <button type="submit" class="px-4 py-2 bg-red-100 text-red-800 rounded-lg hover:bg-red-200 transition-colors">
                        Refund Payment
                    </button>
                </form>
            </div>
        @endif
    </div>
</div>
@endsection