@extends('layouts.vpm-mobile-app', ['active' => 'deposits'])

@section('title', 'Deposit details')

@section('content')
<div class="vpm-deposits vpm-deposits--detail">
    <x-vpm.page-intro
        title="Deposit details"
        :description="$deposit->listSubtitle()"
    />

    <article class="vpm-deposit-detail">
        <div class="vpm-deposit-detail__header">
            <time datetime="{{ $deposit->created_at->toIso8601String() }}" class="vpm-deposit-card__date">
                <span class="vpm-deposit-card__month">{{ $deposit->created_at->format('M') }}</span>
                <span class="vpm-deposit-card__day">{{ $deposit->created_at->format('d') }}</span>
            </time>

            <div class="vpm-deposit-detail__summary">
                <p class="vpm-deposit-card__fund">{{ $deposit->fundLabel() }}</p>
                <p class="vpm-deposit-card__status {{ $deposit->listStatusClass() }}">
                    {{ $deposit->listStatusLabel() }}
                </p>
            </div>
        </div>

        <dl class="vpm-deposit-detail__meta">
            @if ($deposit->plan_name && $deposit->plan_type)
                <div>
                    <dt>Plan</dt>
                    <dd>{{ $deposit->plan_name }} ({{ $deposit->plan_type }})</dd>
                </div>
            @endif
            <div>
                <dt>Reference</dt>
                <dd>{{ $deposit->reference }}</dd>
            </div>
            <div>
                <dt>Submitted</dt>
                <dd>{{ $deposit->created_at->format('M j, Y g:i A') }}</dd>
            </div>
            <div>
                <dt>Payment method</dt>
                <dd>{{ $deposit->paymentMethod->name }}</dd>
            </div>
            <div>
                <dt>Network</dt>
                <dd>{{ $deposit->paymentMethod->network }}</dd>
            </div>
            @if ($deposit->status === 'rejected' && $deposit->rejection_reason)
                <div>
                    <dt>Reason</dt>
                    <dd>{{ $deposit->rejection_reason }}</dd>
                </div>
            @endif
        </dl>
    </article>

    <a href="{{ route('app.deposits') }}" class="vpm-deposits__back">&larr; Back to Deposits</a>
</div>
@endsection