@extends('layouts.finance')

@section('title', 'Revenue Detail')
@section('subtitle', 'Paid Examism voucher order revenue for the current month')

@section('content')
@php
    $displayCurrency = 'PKR';
    $fmt = fn($usd) => $metrics->moneyIn($usd, 'USD', $displayCurrency);
    $profitDetails = $profitDetails ?? ['summary' => [], 'products' => collect(), 'recent_orders' => collect()];
    $profitSummary = $profitDetails['summary'] ?? [];
    $productRows = collect($profitDetails['products'] ?? []);
    $recentOrders = collect($profitDetails['recent_orders'] ?? []);
    $productOptions = collect($productOptions ?? $productRows);
    $pointCards = $pointCards ?? [];
    $filters = $filters ?? ['mode' => 'month', 'month' => now()->format('Y-m'), 'from' => now()->startOfMonth()->toDateString(), 'to' => now()->endOfMonth()->toDateString(), 'product_id' => null];
    $dashboardRevenueUsd = (float) $kpis['revenue'];
    $sourceCurrency = $profitSummary['currency'] ?? 'PKR';
    $summaryRevenueUsd = $metrics->usd((float) ($profitSummary['revenue'] ?? 0), $sourceCurrency);
    $revenueUsd = $summaryRevenueUsd;
    $detailRevenueUsd = $metrics->usd($productRows->sum('revenue'), $sourceCurrency);
    $recentRevenueUsd = $metrics->usd($recentOrders->sum('revenue'), $sourceCurrency);
    $isDashboardScope = $filters['mode'] === 'month' && $filters['month'] === now()->format('Y-m') && empty($filters['product_id']);
    $reconciliationDelta = $dashboardRevenueUsd - $summaryRevenueUsd;
    $isExact = $isDashboardScope && $reconciliationDelta == 0.0;
@endphp

<div class="mb-4">
    <a href="{{ route('dashboard') }}" class="btn btn-ghost" style="font-size:13px">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        Back to Dashboard
    </a>
</div>

<section class="card mb-6">
    <div class="section-head">
        <h2>Filters</h2>
        <span class="pill">{{ $filters['mode'] === 'date' ? 'Date wise' : 'Monthly' }}</span>
    </div>
    <div class="card-pad">
        <form method="GET" action="{{ route('dashboard.cards.revenue') }}" class="grid gap-3" style="grid-template-columns:0.8fr 1fr 1fr 1fr 1.5fr auto auto;align-items:end">
            <div>
                <label class="label">View</label>
                <select class="field" name="mode">
                    <option value="month" @selected($filters['mode'] === 'month')>Monthly</option>
                    <option value="date" @selected($filters['mode'] === 'date')>Date wise</option>
                </select>
            </div>
            <div>
                <label class="label">Month</label>
                <input class="field" type="month" name="month" value="{{ $filters['month'] }}">
            </div>
            <div>
                <label class="label">From</label>
                <input class="field" type="date" name="from" value="{{ $filters['from'] }}">
            </div>
            <div>
                <label class="label">To</label>
                <input class="field" type="date" name="to" value="{{ $filters['to'] }}">
            </div>
            <div>
                <label class="label">Product</label>
                <select class="field" name="product_id">
                    <option value="">All products</option>
                    @foreach($productOptions as $product)
                        <option value="{{ $product['item_id'] }}" @selected((string) $filters['product_id'] === (string) $product['item_id'])>{{ $product['title'] }}</option>
                    @endforeach
                </select>
            </div>
            <button class="btn btn-primary">Apply</button>
            <a href="{{ route('dashboard.cards.revenue') }}" class="btn">Reset</a>
        </form>
    </div>
</section>

<section class="grid kpi-grid gap-3 mb-6">
    <div class="card kpi-card" style="background:var(--green-soft);border-color:#a7f3d0">
        <div class="kpi-icon ico-bg-green"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg></div>
        <div class="kpi-label">Filtered Revenue</div>
        <div class="kpi-value" style="color:#065f46">{{ $fmt($revenueUsd) }}</div>
        <div class="kpi-sub">{{ \Illuminate\Support\Carbon::parse($filters['from'])->format('M d, Y') }} - {{ \Illuminate\Support\Carbon::parse($filters['to'])->format('M d, Y') }}</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-icon ico-bg-indigo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8l-9-5-9 5v8l9 5z"/></svg></div>
        <div class="kpi-label">Products Sold</div>
        <div class="kpi-value">{{ number_format($productRows->sum('sold_qty')) }}</div>
        <div class="kpi-sub">Voucher keys delivered</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-icon ico-bg-purple"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h18v18H3z"/><path d="M7 7h10M7 12h10M7 17h6"/></svg></div>
        <div class="kpi-label">Paid Orders</div>
        <div class="kpi-value">{{ number_format($productRows->sum('orders_count')) }}</div>
        <div class="kpi-sub">payment_status = paid</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-icon {{ $isExact ? 'ico-bg-green' : 'ico-bg-red' }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/></svg></div>
        <div class="kpi-label">{{ $isDashboardScope ? 'Dashboard Check' : 'Dashboard (Mo.)' }}</div>
        <div class="kpi-value" style="color:{{ $isExact ? '#10b981' : '#1f2937' }}">{{ $isDashboardScope ? ($isExact ? 'Exact' : $metrics->money($reconciliationDelta)) : $fmt($dashboardRevenueUsd) }}</div>
        <div class="kpi-sub">{{ $isDashboardScope ? 'No rounded tolerance used' : 'Current month total' }}</div>
    </div>
</section>

<section class="grid gap-3 mb-6" style="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))">
    @foreach(['quarterly_awarded' => 'ico-bg-indigo', 'yearly_awarded' => 'ico-bg-purple', 'redeemed' => 'ico-bg-amber'] as $type => $iconClass)
        @php $card = $pointCards[$type] ?? null; @endphp
        <a href="{{ $card['route'] ?? route('dashboard.cards.agent-points', ['type' => $type]) }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
            <div class="kpi-icon {{ $iconClass }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-6"/></svg></div>
            <div class="kpi-label">{{ $card['label'] ?? ucfirst(str_replace('_', ' ', $type)) }}</div>
            <div class="kpi-value">{{ number_format((float) ($card['value'] ?? 0), 2) }}</div>
            <div class="kpi-sub">{{ $filters['from'] }} to {{ $filters['to'] }}</div>
        </a>
    @endforeach
</section>

<section class="grid gap-4 mb-6" style="grid-template-columns:1.2fr 1fr">
    <div class="card mb-0">
        <div class="section-head">
            <h2>Revenue Source</h2>
            <span class="pill">{{ $profitSummary['source'] ?? 'examism_v3' }}</span>
        </div>
        <div class="card-pad text-sm" style="line-height:1.9">
            <div class="flex justify-between"><span class="muted">Paid order revenue</span><strong>{{ $fmt($summaryRevenueUsd) }}</strong></div>
            <div class="flex justify-between"><span class="muted">Product detail total</span><strong>{{ $fmt($detailRevenueUsd) }}</strong></div>
            <div class="flex justify-between"><span class="muted">Dashboard KPI total</span><strong>{{ $fmt($dashboardRevenueUsd) }}</strong></div>
            <div class="flex justify-between"><span class="muted">Selected range</span><strong>{{ $filters['from'] }} to {{ $filters['to'] }}</strong></div>
        </div>
    </div>
    <div class="card mb-0">
        <div class="section-head"><h2>Recent Orders</h2></div>
        <div class="card-pad text-sm" style="line-height:1.9">
            <div class="flex justify-between"><span class="muted">Latest rows shown</span><strong>{{ number_format($recentOrders->count()) }}</strong></div>
            <div class="flex justify-between"><span class="muted">Latest 20 revenue</span><strong>{{ $fmt($recentRevenueUsd) }}</strong></div>
            <div class="flex justify-between"><span class="muted">Revenue currency</span><strong>{{ $sourceCurrency }}</strong></div>
            <div class="flex justify-between"><span class="muted">USD to PKR</span><strong>{{ number_format((float) $settings['usd_to_pkr'], 4) }}</strong></div>
        </div>
    </div>
</section>

<section class="card mb-6">
    <div class="section-head">
        <h2>Revenue by Product</h2>
        <span class="pill">Current month</span>
    </div>
    <table>
        <thead><tr><th>Product</th><th class="right">Qty</th><th class="right">Orders</th><th class="right">Revenue</th><th class="right">Share</th></tr></thead>
        <tbody>
            @forelse($productRows as $row)
                @php $rowRevenueUsd = $metrics->usd($row['revenue'], 'PKR'); @endphp
                <tr class="row-hover">
                    <td>{{ $row['title'] }}</td>
                    <td class="right">{{ number_format($row['sold_qty']) }}</td>
                    <td class="right">{{ number_format($row['orders_count']) }}</td>
                    <td class="right" style="color:#10b981;font-weight:700">{{ $fmt($rowRevenueUsd) }}</td>
                    <td class="right">{{ $revenueUsd > 0 ? number_format(($rowRevenueUsd / $revenueUsd) * 100, 2) : '0.00' }}%</td>
                </tr>
            @empty
                <tr><td colspan="5" class="muted">No paid voucher revenue found for this month.</td></tr>
            @endforelse
        </tbody>
    </table>
</section>

<section class="card mb-6">
    <div class="section-head">
        <h2>Recent Paid Orders</h2>
        <span class="pill">Latest 20</span>
    </div>
    <table>
        <thead><tr><th>Order</th><th>Date</th><th class="right">Qty</th><th class="right">Revenue</th></tr></thead>
        <tbody>
            @forelse($recentOrders as $order)
                <tr class="row-hover">
                    <td>#{{ $order['id'] }}</td>
                    <td>{{ $order['date'] ?: '-' }}</td>
                    <td class="right">{{ number_format($order['qty']) }}</td>
                    <td class="right" style="color:#10b981;font-weight:700">{{ $fmt($metrics->usd($order['revenue'], 'PKR')) }}</td>
                </tr>
            @empty
                <tr><td colspan="4" class="muted">No recent paid orders found for this month.</td></tr>
            @endforelse
        </tbody>
    </table>
</section>

<section class="card p-5 mb-6">
    <div class="flex items-center justify-between mb-3">
        <h3 class="font-semibold">Revenue Trend - 6 Months</h3>
        <span class="pill">USD</span>
    </div>
    <div style="height:240px;position:relative"><canvas id="revenueTrendChart"></canvas></div>
</section>

@push('scripts')
<script src="{{ asset('chart.umd.min.js') }}"></script>
<script>
(function () {
    'use strict';
    Chart.defaults.font.family = 'Inter, system-ui, sans-serif';
    Chart.defaults.font.size = 12;

    new Chart(document.getElementById('revenueTrendChart'), {
        type: 'bar',
        data: {
            labels: @json($trend['labels']),
            datasets: [{
                label: 'Revenue',
                data: @json($trend['revenue']),
                backgroundColor: 'rgba(16,185,129,.8)',
                borderRadius: 5
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: { callbacks: { label: function(c) { return ' $' + c.raw.toLocaleString('en-US', { maximumFractionDigits: 0 }); } } }
            },
            scales: {
                x: { grid: { display: false } },
                y: { grid: { color: 'rgba(0,0,0,.05)' }, ticks: { callback: function(v) { return '$' + (v >= 1000 ? (v / 1000).toFixed(0) + 'k' : v); } } }
            }
        }
    });
}());
</script>
@endpush
@endsection