@extends('layouts.portal')

@section('title', 'My Plan')
@section('portal_title', 'My Subscribed Plan')
@section('portal_subtitle', 'View the investment plan you selected and your payment review status.')

@section('portal_content')
@if ($subscribedPlan)
    @php
        $status = $subscribedPlan['status'] ?? 'Pending Payment Review';
        $isActiveInvestment = in_array($status, ['Deposit Approved', 'Payment Completed'], true);
        $investmentAmount = is_numeric($subscribedPlan['amount'] ?? null) ? '$' . number_format((float) $subscribedPlan['amount'], 2) : ($subscribedPlan['amount'] ?? 'Not entered');
        $dailyReturnAmount = $subscribedPlan['daily_return_amount'] ?? null;
        $dailyReturn = $isActiveInvestment && $dailyReturnAmount !== null
            ? '$' . number_format((float) $dailyReturnAmount, 2)
            : ($isActiveInvestment ? '$' . number_format(portalDailyReturnAmount($subscribedPlan), 2) : 'Starts after approval');
        $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
    <section class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div>
                <p class="text-sm font-bold uppercase tracking-wide text-primary-600">Subscribed Plan</p>
                <h2 class="mt-2 text-3xl font-extrabold text-slate-900">{{ $subscribedPlan['name'] }}</h2>
                <p class="mt-3 max-w-3xl text-sm font-semibold leading-6 text-slate-500">
                    Your selected investment plan is saved here so you can review your subscription details anytime from the portal.
                </p>
            </div>
            <span class="inline-flex rounded-lg px-4 py-2 text-sm font-extrabold {{ $statusClass }}">
                {{ $status }}
            </span>
        </div>

        <div class="mt-6 overflow-x-auto rounded-lg border border-slate-200">
            <table class="min-w-[1120px] w-full border-collapse bg-white">
                <thead>
                    <tr class="bg-slate-50 text-left text-xs font-extrabold uppercase text-slate-500">
                        <th class="px-4 py-4">Investment Name</th>
                        <th class="px-4 py-4">Investment Amount</th>
                        <th class="px-4 py-4">Daily Profit</th>
                        <th class="px-4 py-4">Daily Return</th>
                        <th class="px-4 py-4">Duration</th>
                        <th class="px-4 py-4">Payment Method</th>
                        <th class="px-4 py-4">Status</th>
                        <th class="px-4 py-4">Total Profit Earned</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="px-4 py-5 align-top text-sm font-extrabold text-slate-900">{{ $subscribedPlan['name'] ?? 'Selected Plan' }}</td>
                        <td class="px-4 py-5 align-top text-sm font-extrabold text-slate-900">{{ $investmentAmount }}</td>
                        <td class="px-4 py-5 align-top text-sm font-extrabold text-primary-700">{{ $subscribedPlan['profit'] ?? '-' }}</td>
                        <td class="px-4 py-5 align-top text-sm font-extrabold text-slate-900">{{ $dailyReturn }}</td>
                        <td class="px-4 py-5 align-top text-sm font-extrabold text-slate-900">{{ $subscribedPlan['period'] ?? '-' }}</td>
                        <td class="px-4 py-5 align-top text-sm font-extrabold text-slate-900">{{ $subscribedPlan['payment_method'] ?? 'Not selected' }}</td>
                        <td class="px-4 py-5 align-top">
                            <span class="inline-flex rounded-lg px-3 py-1 text-xs font-extrabold {{ $statusClass }}">{{ $status }}</span>
                        </td>
                        <td class="px-4 py-5 align-top text-sm font-extrabold text-slate-900">${{ number_format((float) ($subscribedPlan['total_profit_earned'] ?? 0), 2) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="mt-6 grid gap-4 lg:grid-cols-2">
            <div class="rounded-lg border border-slate-200 p-5">
                <h3 class="text-lg font-extrabold text-primary-700">Plan Range</h3>
                <dl class="mt-4 space-y-3">
                    <div class="flex items-center justify-between gap-4">
                        <dt class="text-sm font-bold text-slate-500">Minimum Investment</dt>
                        <dd class="text-sm font-extrabold text-slate-900">{{ $subscribedPlan['minimum'] }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4">
                        <dt class="text-sm font-bold text-slate-500">Maximum Investment</dt>
                        <dd class="text-sm font-extrabold text-slate-900">{{ $subscribedPlan['maximum'] }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4">
                        <dt class="text-sm font-bold text-slate-500">Submitted On</dt>
                        <dd class="text-sm font-extrabold text-slate-900">{{ $subscribedPlan['submitted_at'] ?? '-' }}</dd>
                    </div>
                    @if (! empty($subscribedPlan['reviewed_at']))
                        <div class="flex items-center justify-between gap-4">
                            <dt class="text-sm font-bold text-slate-500">Reviewed On</dt>
                            <dd class="text-sm font-extrabold text-slate-900">{{ $subscribedPlan['reviewed_at'] }}</dd>
                        </div>
                    @endif
                </dl>
            </div>

            <div class="rounded-lg border border-slate-200 p-5">
                <h3 class="text-lg font-extrabold text-primary-700">Payment Note</h3>
                <p class="mt-4 min-h-24 rounded-lg bg-slate-50 p-4 text-sm font-semibold leading-6 text-slate-600">
                    {{ $subscribedPlan['note'] ?: 'No payment note was added.' }}
                </p>
                @if (! empty($subscribedPlan['admin_note']))
                    <h3 class="mt-5 text-lg font-extrabold text-primary-700">Admin Review Note</h3>
                    <p class="mt-4 rounded-lg bg-primary-50 p-4 text-sm font-semibold leading-6 text-primary-700">
                        {{ $subscribedPlan['admin_note'] }}
                    </p>
                @endif
            </div>
        </div>

        <div class="mt-6 flex flex-wrap gap-3">
            <a href="{{ url('/portal/payment-history') }}" class="rounded-lg border border-slate-200 bg-white px-5 py-3 text-sm font-extrabold text-slate-700 transition hover:border-primary-200 hover:text-primary-700">View Payment History</a>
            <a href="{{ url('/portal/investment-plans') }}" class="rounded-lg bg-primary-600 px-5 py-3 text-sm font-extrabold text-white transition hover:bg-primary-700">Change Plan</a>
        </div>
    </section>
@else
    <section class="rounded-lg border border-slate-200 bg-white p-8 text-center shadow-sm">
        <p class="text-sm font-bold uppercase tracking-wide text-primary-600">No Active Plan</p>
        <h2 class="mt-2 text-3xl font-extrabold text-slate-900">You have not subscribed to any plan yet.</h2>
        <p class="mx-auto mt-3 max-w-2xl text-sm font-semibold leading-6 text-slate-500">
            Select an investment plan first, then submit your payment request. Your subscribed plan will appear here after submission.
        </p>
        <a href="{{ url('/portal/investment-plans') }}" class="mt-6 inline-flex rounded-lg bg-primary-600 px-5 py-3 text-sm font-extrabold text-white transition hover:bg-primary-700">Choose Investment Plan</a>
    </section>
@endif
@endsection