@extends('layouts.finance')

@section('title', 'Business Total Detail')
@section('subtitle', 'Verification breakdown before net worth')

@section('content')
@php
    $currency = $verification['currency'] ?? 'PKR';
    $dateFilter = $dateFilter ?? ['active' => false, 'from' => null, 'to' => null, 'label' => null];
    $filterActive = (bool) ($dateFilter['active'] ?? false);
    $dashboardRouteParams = $filterActive ? ['from' => $dateFilter['from'], 'to' => $dateFilter['to']] : [];
    $gatewayDateParams = [
        'mode' => 'date',
        'from' => $filterActive ? $dateFilter['from'] : now()->toDateString(),
        'to' => $filterActive ? $dateFilter['to'] : now()->toDateString(),
    ];
    $settings = $metrics->settings();
    $lockedInvestment = (float) ($settings['business_investment'] ?? 36459362);
    $businessTotal = (float) ($verification['business_total'] ?? 0);
    $businessGross = (float) ($verification['business_total_before_liabilities'] ?? $businessTotal);
    // Daily business position for the tracking year: opens at Total Investment
    // on 1 Jul 2026, then 1 Jan each year after.
    $positionYear = $metrics->businessPositionYear($businessTotal);
    $latestPosition = $businessTotal;
    $latestDailyNet = (float) (collect($positionYear['daily_net'] ?? [])->last() ?? 0);
    $profitLoss = $latestPosition - $lockedInvestment;
    $profitLossPercent = $lockedInvestment > 0 ? ($profitLoss / $lockedInvestment) * 100 : 0;
    $profitColor = $profitLoss >= 0 ? '#10b981' : '#ef4444';
    $profitLabel = $profitLoss >= 0 ? 'Profit' : 'Loss';
    $profitDirection = $profitLoss >= 0 ? 'above investment' : 'below investment';

    $componentCards = [
        ['label' => 'Bank Balance', 'amount' => $verification['bank_balance_excluding_wallets'] ?? ($verification['bank_balance'] ?? 0), 'route' => route('dashboard.cards.bank', $dashboardRouteParams), 'type' => 'Asset', 'color' => '#7c3aed', 'icon' => 'bank'],
        ['label' => 'Wallets', 'amount' => $verification['wallet_balance'] ?? 0, 'route' => route('dashboard.cards.bank', $dashboardRouteParams), 'type' => 'Asset', 'color' => '#0891b2', 'icon' => 'wallet'],
        ['label' => 'Inventory Amount', 'amount' => $verification['inventory_amount'] ?? 0, 'route' => route('dashboard.cards.inventory', $dashboardRouteParams), 'type' => 'Asset', 'color' => '#06b6d4', 'icon' => 'box'],
        ['label' => 'Lent Amount', 'amount' => $verification['lent_amount'] ?? 0, 'route' => route('dashboard.cards.collectible', $dashboardRouteParams), 'type' => 'Receivable', 'color' => '#0d9488', 'icon' => 'file'],
        ['label' => 'In Transit Amount', 'amount' => $verification['transit_amount'] ?? 0, 'route' => route('dashboard.cards.transit', $dashboardRouteParams), 'type' => 'Asset', 'color' => '#d97706', 'icon' => 'clock'],
        ['label' => 'Saving Amount', 'amount' => $verification['saving_amount'] ?? 0, 'route' => route('dashboard.cards.saving', $dashboardRouteParams), 'type' => 'Asset', 'color' => '#10b981', 'icon' => 'bank'],
        ['label' => $filterActive ? 'KuickPay Filtered Net' : 'KuickPay Today Net', 'amount' => $verification['kuickpay_today_net'] ?? 0, 'route' => route('dashboard.cards.kuickpay', $gatewayDateParams), 'type' => 'Collection', 'color' => '#10b981', 'icon' => 'card'],
        ['label' => 'KuickPay Pending Balance', 'amount' => $verification['kuickpay_pending_balance'] ?? 0, 'route' => route('dashboard.cards.kuickpay-pending', $dashboardRouteParams), 'type' => 'Collection', 'color' => '#e11d48', 'icon' => 'clock'],
        ['label' => $filterActive ? 'PayFast Filtered Net' : 'PayFast Today Net', 'amount' => $verification['payfast_today_net'] ?? 0, 'route' => route('dashboard.cards.payfast', $gatewayDateParams), 'type' => 'Collection', 'color' => '#0ea5e9', 'icon' => 'card'],
        ['label' => 'PayFast Pending Balance', 'amount' => $verification['payfast_pending_balance'] ?? 0, 'route' => route('dashboard.cards.payfast-pending', $dashboardRouteParams), 'type' => 'Collection', 'color' => '#0284c7', 'icon' => 'clock'],
        ['label' => 'Credit Card Debt', 'amount' => $verification['credit_card_debt'] ?? 0, 'route' => route('dashboard.cards.debt', $dashboardRouteParams), 'type' => 'Liability', 'color' => '#ef4444', 'icon' => 'card', 'negative' => true],
        ['label' => 'Loans & Debts', 'amount' => $verification['loan_debt'] ?? 0, 'route' => route('dashboard.cards.debt', $dashboardRouteParams), 'type' => 'Liability', 'color' => '#dc2626', 'icon' => 'debt', 'negative' => true],
        ['label' => 'Store Credit', 'amount' => $verification['store_credit_amount'] ?? 0, 'route' => route('dashboard.cards.store-credit', $dashboardRouteParams), 'type' => 'Shown separately', 'color' => '#db2777', 'icon' => 'wallet', 'muted' => true],
    ];
@endphp

<div class="mb-4">
    <a href="{{ route('dashboard', $dashboardRouteParams) }}" 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="mb-5">
    <form method="GET" action="{{ route('dashboard.cards.business-total') }}" class="card" style="display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding:14px 16px">
        <div>
            <label class="label" for="business_total_from">From Date</label>
            <input class="field" id="business_total_from" type="date" name="from" value="{{ $dateFilter['from'] ?? '' }}" style="min-width:170px">
        </div>
        <div>
            <label class="label" for="business_total_to">To Date</label>
            <input class="field" id="business_total_to" type="date" name="to" value="{{ $dateFilter['to'] ?? '' }}" style="min-width:170px">
        </div>
        <button class="btn btn-primary" type="submit">Apply Filter</button>
        @if($filterActive)
            <a class="btn" href="{{ route('dashboard.cards.business-total') }}">Clear</a>
            <span class="text-xs" style="color:var(--muted)">Showing date-based components for {{ $dateFilter['label'] }}</span>
        @else
            <span class="text-xs" style="color:var(--muted)">Default view uses live balances, today collections, and current month totals.</span>
        @endif
    </form>
</section>

<section class="grid kpi-grid gap-3 mb-6">
    <div class="card kpi-card" style="background:linear-gradient(135deg,#fffbeb,#ffffff);border-color:#fde68a">
        <div class="kpi-icon ico-bg-amber"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M19 9l-5 5-4-4-3 3"/></svg></div>
        <div class="kpi-label">Total Amount in Business</div>
        <div class="kpi-value" style="color:#92400e">{{ $metrics->money($businessTotal, $currency) }}</div>
        <div class="kpi-sub" style="margin-top:4px;color:#92400e">Before liabilities {{ $metrics->money($businessGross, $currency) }}</div>
        <div class="kpi-sub">Liabilities deducted กค store credit excluded</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="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7H14a3.5 3.5 0 0 1 0 7H7"/></svg></div>
        <div class="kpi-label">Total Investment</div>
        <div class="kpi-value" style="color:#3730a3">{{ $metrics->money($lockedInvestment, $currency) }}</div>
        <div class="kpi-sub">Fixed baseline</div>
    </div>
    <div class="card kpi-card" style="{{ $profitLoss < 0 ? 'background:#fff1f2;border-color:#fecdd3' : 'background:#ecfdf5;border-color:#bbf7d0' }}">
        <div class="kpi-icon {{ $profitLoss < 0 ? 'ico-bg-red' : '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">{{ $profitLabel }}</div>
        <div class="kpi-value" style="color:{{ $profitColor }}">{{ $profitLoss < 0 ? '-' : '' }}{{ $metrics->money(abs($profitLoss), $currency) }}</div>
        <div class="kpi-sub">{{ number_format(abs($profitLossPercent), 2) }}% {{ $profitDirection }}</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-icon ico-bg-rose"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg></div>
        <div class="kpi-label">Total Liabilities</div>
        <div class="kpi-value" style="color:#ef4444">{{ $metrics->money($verification['liabilities_total'] ?? 0, $currency) }}</div>
        <div class="kpi-sub">Credit cards + loans</div>
    </div>
</section>

<section class="mb-6">
    <div class="flex items-center justify-between mb-3">
        <div>
            <h2 class="text-base font-bold" style="margin:0">Business Components</h2>
            <p class="text-xs" style="color:var(--muted);margin:2px 0 0">
                Click any card to open its detail page{{ $filterActive ? ' กค date-based values use '.$dateFilter['label'] : '' }}
            </p>
        </div>
        <span class="pill pill-amber">{{ $currency }}</span>
    </div>
    <div class="grid kpi-grid gap-3">
        @foreach($componentCards as $card)
            @php
                $isNegative = (bool) ($card['negative'] ?? false);
                $isMuted = (bool) ($card['muted'] ?? false);
                $amountColor = $isNegative ? '#ef4444' : ($isMuted ? 'var(--muted)' : ($card['color'] ?? 'var(--text)'));
                $signedPrefix = $isNegative ? '-' : '';
                $iconColor = $card['color'] ?? '#6366f1';
            @endphp
            <a href="{{ $card['route'] }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit{{ $isNegative ? ';background:#fff1f2;border-color:#fecdd3' : '' }}">
                <div class="kpi-icon" style="background:{{ $iconColor }}14;color:{{ $iconColor }}">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        @if($card['icon'] === 'bank')
                            <path d="M3 21h18M5 21V10l7-5 7 5v11"/>
                        @elseif($card['icon'] === 'box')
                            <path d="M21 16V8l-9-5-9 5v8l9 5z"/>
                        @elseif($card['icon'] === 'file')
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
                        @elseif($card['icon'] === 'clock')
                            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                        @elseif($card['icon'] === 'wallet')
                            <path d="M20 12V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"/><path d="M16 12h5v3h-5a1.5 1.5 0 0 1 0-3z"/>
                        @elseif($card['icon'] === 'debt')
                            <path d="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7H14a3.5 3.5 0 0 1 0 7H7"/>
                        @else
                            <rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/>
                        @endif
                    </svg>
                </div>
                <div class="kpi-label">{{ $card['label'] }}</div>
                <div class="kpi-value" style="color:{{ $amountColor }}">{{ $signedPrefix }}{{ $metrics->money($card['amount'], $currency) }}</div>
                <div class="kpi-sub">{{ $card['type'] }}</div>
            </a>
        @endforeach
    </div>
</section>

<section class="card p-5 mb-6">
    <div class="flex items-center justify-between mb-3">
        <div>
            <h2 class="text-base font-bold" style="margin:0">Business Position</h2>
            <p class="text-xs" style="color:var(--muted);margin:2px 0 0">
                Daily Total Amount in Business, after liabilities
                @if(!empty($positionYear['window_start']))
                    กค {{ \Illuminate\Support\Carbon::parse($positionYear['window_start'])->format('d M Y') }}
                    to {{ \Illuminate\Support\Carbon::parse($positionYear['window_end'])->format('d M Y') }}
                @endif
            </p>
        </div>
        <span class="pill {{ $profitLoss >= 0 ? 'pill-green' : 'pill-rose' }}">{{ $profitLabel }}</span>
    </div>
    <div style="height:340px;position:relative"><canvas id="investmentChart"></canvas></div>
    <div class="grid gap-3" style="grid-template-columns:repeat(4,1fr);margin-top:16px">
        <div style="background:var(--bg-2);border-radius:12px;padding:14px">
            <div class="kpi-label">Total Investment</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px">{{ $metrics->money($lockedInvestment, $currency) }}</div>
        </div>
        <div style="background:var(--bg-2);border-radius:12px;padding:14px">
            <div class="kpi-label">Current Business Total</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px">{{ $metrics->money($latestPosition, $currency) }}</div>
        </div>
        <div style="background:{{ $profitLoss >= 0 ? '#ecfdf5' : '#fff1f2' }};border:1px solid {{ $profitLoss >= 0 ? '#bbf7d0' : '#fecdd3' }};border-radius:12px;padding:14px">
            <div class="kpi-label">{{ $profitLabel }} vs Investment</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px;color:{{ $profitColor }}">{{ $profitLoss < 0 ? '-' : '' }}{{ $metrics->money(abs($profitLoss), $currency) }}</div>
            <div class="text-xs muted">{{ number_format(abs($profitLossPercent), 2) }}% {{ $profitDirection }}</div>
        </div>
        <div style="background:var(--bg-2);border-radius:12px;padding:14px">
            <div class="kpi-label">Today Net Movement</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px;color:{{ $latestDailyNet >= 0 ? '#10b981' : '#ef4444' }}">{{ $latestDailyNet < 0 ? '-' : '' }}{{ $metrics->money(abs($latestDailyNet), $currency) }}</div>
            <div class="text-xs muted">Profit minus expenses</div>
        </div>
    </div>
</section>

@push('scripts')
<script src="{{ asset('chart.umd.min.js') }}"></script>
<script>
(function () {
    'use strict';

    var labels = @json($positionYear['labels'] ?? []);
    var positions = @json($positionYear['positions'] ?? []);
    var dailyNet = @json($positionYear['daily_net'] ?? []);
    var investment = Number(@json(round($lockedInvestment, 2)) || 0);
    var currencyPrefix = 'Rs ';

    Chart.defaults.font.family = 'Inter, system-ui, sans-serif';
    Chart.defaults.font.size = 12;

    function asNumber(value) { return Number(value || 0); }

    function money(value) {
        return currencyPrefix + Math.abs(asNumber(value)).toLocaleString('en-US', { maximumFractionDigits: 2 });
    }

    var ctx = document.getElementById('investmentChart').getContext('2d');

    // Green above the opening investment, red below it, decided per segment so a
    // line that crosses the baseline changes colour at the crossing.
    function segmentColour(context) {
        var y0 = asNumber(context.p0.parsed.y);
        var y1 = asNumber(context.p1.parsed.y);
        return (y0 >= investment && y1 >= investment) ? '#22c55e' : '#ef4444';
    }

    // A whole year of daily points is far too many dots to draw; show them only
    // when the series is short enough to stay readable.
    var pointSize = positions.length > 90 ? 0 : (positions.length > 45 ? 2 : 4);

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Total Investment',
                    data: labels.map(function () { return investment; }),
                    borderColor: 'rgba(148,163,184,.85)',
                    borderDash: [6, 6],
                    borderWidth: 1.5,
                    pointRadius: 0,
                    fill: false,
                    tension: 0,
                    order: 1
                },
                {
                    label: 'Business Total',
                    data: positions,
                    borderColor: '#22c55e',
                    backgroundColor: '#22c55e',
                    pointBackgroundColor: '#22c55e',
                    pointBorderColor: '#ffffff',
                    pointBorderWidth: 2,
                    pointRadius: pointSize,
                    pointHoverRadius: 6,
                    borderWidth: 3,
                    tension: 0.35,
                    fill: false,
                    segment: { borderColor: segmentColour },
                    order: 2
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { position: 'bottom', labels: { boxWidth: 10, padding: 12, font: { size: 11 } } },
                tooltip: {
                    callbacks: {
                        label: function (item) {
                            return ' ' + item.dataset.label + ': ' + money(item.raw);
                        },
                        afterBody: function (items) {
                            if (!items.length) { return ''; }
                            var net = asNumber(dailyNet[items[0].dataIndex]);
                            return ['Net movement: ' + (net < 0 ? '-' : '+') + money(net)];
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: {
                        autoSkip: true,
                        maxTicksLimit: 12,
                        maxRotation: 0,
                        font: { size: 11 }
                    }
                },
                y: {
                    grid: { color: 'rgba(0,0,0,.05)' },
                    ticks: {
                        maxTicksLimit: 6,
                        callback: function (value) {
                            return currencyPrefix + Math.round(value).toLocaleString('en-US');
                        }
                    }
                }
            }
        }
    });
}());
</script>
@endpush
@endsection