@extends('customer.layouts.app')

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

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

@section('breadcrumbs')
    <a href="{{ route('customer.payments.index') }}" class="hover:text-primary">Payments</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">{{ $payment->payment_number }}</span>
@endsection

@section('content')
<div class="max-w-5xl mx-auto flex flex-col gap-6">
    <!-- Payment Header -->
    <div class="bg-white dark:bg-[#1e2630] rounded-xl shadow-sm border border-[#e5e7eb] dark:border-gray-700 p-6">
        <div class="flex justify-between items-start mb-6">
            <div>
                <h2 class="text-2xl font-bold text-[#111418] dark:text-white mb-2">{{ $payment->payment_number }}</h2>
                <div class="flex items-center gap-4 text-sm text-[#617589]">
                    <span>Payment Date: {{ $payment->payment_date->format('M d, Y') }}</span>
                </div>
            </div>
            <div class="text-right">
                @php
                    $statusColors = [
                        'pending' => 'bg-yellow-100 text-yellow-800',
                        'completed' => 'bg-green-100 text-green-800',
                        'failed' => 'bg-red-100 text-red-800',
                        'refunded' => 'bg-gray-100 text-gray-800',
                    ];
                @endphp
                <span class="px-3 py-1 rounded-lg text-sm font-medium {{ $statusColors[$payment->status] ?? 'bg-gray-100 text-gray-800' }}">
                    {{ ucfirst($payment->status) }}
                </span>
            </div>
        </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">Payment Details</p>
                <div class="text-sm space-y-2 text-[#111418] dark:text-white">
                    <div>
                        <span class="text-[#617589]">Amount:</span>
                        <span class="font-semibold ml-2">{{ $payment->currency }} {{ number_format($payment->amount, 2) }}</span>
                    </div>
                    <div>
                        <span class="text-[#617589]">Payment Method:</span>
                        <span class="font-semibold ml-2">{{ ucfirst(str_replace('_', ' ', $payment->payment_method)) }}</span>
                    </div>
                    @if($payment->transaction_id)
                        <div>
                            <span class="text-[#617589]">Transaction ID:</span>
                            <span class="font-semibold ml-2">{{ $payment->transaction_id }}</span>
                        </div>
                    @endif
                    @if($payment->reference)
                        <div>
                            <span class="text-[#617589]">Reference:</span>
                            <span class="font-semibold ml-2">{{ $payment->reference }}</span>
                        </div>
                    @endif
                </div>
            </div>
            <div>
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Related Invoice</p>
                <div class="text-sm text-[#111418] dark:text-white">
                    <a href="{{ route('customer.invoices.show', $payment->invoice_id) }}" class="text-primary hover:underline font-semibold">
                        {{ $payment->invoice->invoice_number }}
                    </a>
                    <p class="text-[#617589] mt-1">Invoice Date: {{ $payment->invoice->issue_date->format('M d, Y') }}</p>
                    <p class="text-[#617589]">Invoice Total: {{ $payment->invoice->currency }} {{ number_format($payment->invoice->total, 2) }}</p>
                </div>
            </div>
        </div>

        @if($payment->notes)
            <div class="mt-6 pt-6 border-t border-[#e5e7eb]">
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Notes</p>
                <p class="text-sm text-[#111418] dark:text-white">{{ $payment->notes }}</p>
            </div>
        @endif
    </div>
</div>
@endsection