@extends('layouts.app-mobile-partner')
@section('title', 'Earnings — Partner App')
@section('apptitle', 'Earnings')

@section('content')

<div class="app-section app-pad">
    <div class="earnings-hero">
        <div class="eh-eyebrow">Monthly recurring revenue</div>
        <h2 class="eh-amount">₹{{ number_format($stats['monthly']/100, 0) }}</h2>
        <p class="eh-sub">From {{ $stats['completed_visits'] }} active subscriptions</p>
        <div class="eh-stats">
            <div><strong>{{ $stats['rating'] }}★</strong><span>Rating ({{ $stats['rating_count'] }})</span></div>
            <div><strong>{{ $stats['jobs_done'] }}</strong><span>Jobs done</span></div>
            <div><strong>₹{{ number_format($stats['total']/100, 0) }}</strong><span>Total earned</span></div>
        </div>
    </div>

    <h3 class="app-detail-h3">Recent completed visits</h3>
    @if($completedVisits->count())
        <div class="earn-list">
            @foreach($completedVisits as $v)
                <div class="earn-row">
                    <div class="earn-date">
                        <strong>{{ $v->completed_at ? $v->completed_at->format('d') : $v->scheduled_date->format('d') }}</strong>
                        <span>{{ $v->completed_at ? $v->completed_at->format('M') : $v->scheduled_date->format('M') }}</span>
                    </div>
                    <div class="earn-info">
                        <strong>{{ $v->booking->service->name ?? 'Service' }}</strong>
                        <span class="muted">{{ $v->booking->area->name ?? '—' }} · {{ $v->booking->customer->name ?? '' }}</span>
                    </div>
                    <div class="earn-amt">
                        <strong>₹{{ number_format(($v->booking->total_rupees ?? 0), 0) }}</strong>
                        <span class="muted">/{{ $v->scheduled_date->format('M') }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="empty-app">
            <div class="ea-ic">💰</div>
            <h3>No completed visits yet</h3>
            <p>Complete your first visit to start earning.</p>
        </div>
    @endif

    <h3 class="app-detail-h3">How payouts work</h3>
    <div class="payout-info">
        <div class="po-step">
            <span class="po-ic">1</span>
            <div>
                <strong>Visit complete</strong>
                <p>Mark visit complete after finishing work.</p>
            </div>
        </div>
        <div class="po-step">
            <span class="po-ic">2</span>
            <div>
                <strong>Customer pays monthly</strong>
                <p>Subscription is auto-billed on the same date each month.</p>
            </div>
        </div>
        <div class="po-step">
            <span class="po-ic">3</span>
            <div>
                <strong>Weekly payout</strong>
                <p>Funds transferred to your UPI/bank every Monday.</p>
            </div>
        </div>
    </div>
</div>
@endsection