@extends('layouts.portal')

@section('title', 'Payment History')
@section('portal_title', 'Payment History')
@section('portal_subtitle', 'Track your submitted investment payment requests.')

@section('portal_content')
<section class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
    <h2 class="text-xl font-extrabold text-primary-700">Payment History</h2>
    <p class="mt-2 text-sm font-semibold text-slate-500">Your payment records will appear here after you select a plan and submit payment.</p>

    <div class="mt-5 overflow-hidden rounded-lg border border-slate-200">
        <div class="grid grid-cols-4 bg-slate-50 px-4 py-3 text-xs font-extrabold uppercase text-slate-500">
            <span>Date</span>
            <span>Plan</span>
            <span>Status</span>
            <span class="text-right">Amount</span>
        </div>
        @if ($subscribedPlan)
            @php
                $status = $subscribedPlan['status'] ?? 'Pending Payment Review';
                $statusClass = match ($status) {
                    'Payment Completed' => 'bg-emerald-50 text-emerald-700',
                    'Deposit Approved' => 'bg-emerald-50 text-emerald-700',
                    'Deposit Rejected' => 'bg-red-50 text-red-700',
                    default => 'bg-amber-50 text-amber-700',
                };
            @endphp
            <a href="{{ url('/portal/my-plan') }}" class="grid grid-cols-4 px-4 py-4 text-sm font-semibold text-slate-600 transition hover:bg-slate-50">
                <span>{{ $subscribedPlan['submitted_at'] }}</span>
                <span>{{ $subscribedPlan['name'] }}</span>
                <span><span class="rounded-full px-3 py-1 text-xs font-extrabold {{ $statusClass }}">{{ $status }}</span></span>
                <span class="text-right">{{ is_numeric($subscribedPlan['amount']) ? '$' . number_format((float) $subscribedPlan['amount'], 2) : $subscribedPlan['amount'] }}</span>
            </a>
        @else
            <div class="grid grid-cols-4 px-4 py-4 text-sm font-semibold text-slate-600">
                <span>-</span>
                <span>No payment yet</span>
                <span>Pending</span>
                <span class="text-right">$0.00</span>
            </div>
        @endif
    </div>
</section>

<section class="mt-6 rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
    <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h2 class="text-xl font-extrabold text-primary-700">Wallet Deposits</h2>
            <p class="mt-2 text-sm font-semibold text-slate-500">Deposits submitted directly to your wallet balance.</p>
        </div>
        <a href="{{ url('/portal/wallet') }}" class="inline-flex rounded-lg bg-primary-600 px-4 py-2 text-sm font-extrabold text-white transition hover:bg-primary-700">Deposit Funds</a>
    </div>

    <div class="mt-5 overflow-hidden rounded-lg border border-slate-200">
        <div class="grid grid-cols-4 bg-slate-50 px-4 py-3 text-xs font-extrabold uppercase text-slate-500">
            <span>Date</span>
            <span>Method</span>
            <span>Status</span>
            <span class="text-right">Amount</span>
        </div>
        @forelse (($wallet['deposits'] ?? []) as $deposit)
            @php
                $walletStatus = $deposit['status'] ?? 'Pending Payment Review';
                $walletStatusClass = match ($walletStatus) {
                    'Payment Completed' => 'bg-emerald-50 text-emerald-700',
                    'Deposit Approved' => 'bg-emerald-50 text-emerald-700',
                    'Deposit Rejected' => 'bg-red-50 text-red-700',
                    default => 'bg-amber-50 text-amber-700',
                };
            @endphp
            <div class="grid grid-cols-4 gap-3 border-t border-slate-100 px-4 py-4 text-sm font-semibold text-slate-600">
                <span>{{ $deposit['submitted_at'] ?? '-' }}</span>
                <span>{{ $deposit['payment_method'] ?? 'Not selected' }}</span>
                <span><span class="rounded-full px-3 py-1 text-xs font-extrabold {{ $walletStatusClass }}">{{ $walletStatus }}</span></span>
                <span class="text-right">${{ number_format((float) ($deposit['amount'] ?? 0), 2) }}</span>
            </div>
        @empty
            <div class="grid grid-cols-4 px-4 py-4 text-sm font-semibold text-slate-600">
                <span>-</span>
                <span>No wallet deposit yet</span>
                <span>Pending</span>
                <span class="text-right">$0.00</span>
            </div>
        @endforelse
    </div>
</section>
@endsection