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

@section('title', 'Mining')

@section('content')
<div class="vpm-mobile-page">
<div class="vpm-action-page vpm-action-page--full vpm-list-page">
    <x-vpm.action-hero
        title="Purchase a mining bundle"
        text="Browse available plans and buy one bundle at a time."
    >
        <x-slot:action>
            @if ($miningEnabled)
                <x-vpm.button variant="primary" href="{{ route('app.mining.plans') }}">Browse bundles</x-vpm.button>
            @else
                <span class="vpm-badge vpm-badge--pending">Purchases paused</span>
            @endif
        </x-slot:action>
    </x-vpm.action-hero>

    <div class="vpm-mining-header">
        <div class="vpm-card vpm-card--metric">
            <p class="vpm-card__label">Today's mining yield</p>
            <p class="vpm-card__value vpm-positive">+{{ number_format($todayYield, 2) }} {{ $currency }}</p>
        </div>
        <div class="vpm-card vpm-card--metric">
            <p class="vpm-card__label">Total earned (all plans)</p>
            <p class="vpm-card__value">{{ number_format($totalEarned, 2) }} {{ $currency }}</p>
        </div>
        <div class="vpm-card vpm-card--metric">
            <p class="vpm-card__label">Available balance</p>
            <p class="vpm-card__value">{{ number_format($balance, 2) }} {{ $currency }}</p>
        </div>
    </div>

    @if ($activeSubscriptions->isNotEmpty())
        <section class="vpm-panel">
            <div class="vpm-panel__head">
                <h2 class="vpm-panel__title">Active plans</h2>
            </div>
            <div class="vpm-panel__body">
                <div class="vpm-plan-cards">
                    @foreach ($activeSubscriptions as $subscription)
                        <article class="vpm-plan-card">
                            <div class="vpm-plan-card__head">
                                <h3 class="vpm-plan-card__title">{{ $subscription->plan_name }}</h3>
                                <x-vpm.chip variant="active">Active</x-vpm.chip>
                            </div>
                            <p class="vpm-num vpm-plan-card__price">{{ number_format($subscription->dailyYield(), 2) }} {{ $currency }}/day</p>
                            <p class="vpm-plan-card__meta">
                                {{ $subscription->daysRemaining() }} days remaining
                            </p>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <x-vpm.read-section title="Purchase history" :open="$subscriptions->isNotEmpty()">
        @if ($subscriptions->isEmpty())
            <p class="vpm-empty-hint">No purchases yet. Browse bundles to start earning.</p>
        @else
            <div class="vpm-table-wrap">
                <table class="vpm-table vpm-table--terminal">
                    <colgroup>
                        <col class="vpm-col-date"><col><col class="vpm-col-num"><col class="vpm-col-num"><col class="vpm-col-status">
                    </colgroup>
                    <thead>
                        <tr>
                            <th scope="col">Started</th>
                            <th scope="col">Plan</th>
                            <th scope="col" class="num">Price</th>
                            <th scope="col" class="num">Earned</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($subscriptions as $subscription)
                            <tr>
                                <td>{{ $subscription->started_at->format('M j, Y') }}</td>
                                <td>{{ $subscription->plan_name }}</td>
                                <td class="vpm-num num">{{ number_format($subscription->price_paid, 2) }}</td>
                                <td class="vpm-num num vpm-positive">{{ number_format($subscription->earnedSoFar(), 2) }}</td>
                                <td>
                                    <x-vpm.chip variant="{{ $subscription->isActive() ? 'active' : 'pending' }}">
                                        {{ $subscription->isActive() ? 'Active' : 'Ended' }}
                                    </x-vpm.chip>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </x-vpm.read-section>
</div>
</div>
@endsection