@extends('layouts.finance')

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

@section('content')
@php
    $currency = $verification['currency'] ?? 'PKR';
    $settings = $metrics->settings();
    $lockedInvestment = (float) ($settings['business_investment'] ?? 40063400.59);
    $businessTotal = (float) ($verification['business_total'] ?? 0);
    $businessGross = (float) ($verification['business_total_before_liabilities'] ?? $businessTotal);
    $investmentTrend = $metrics->businessInvestmentTrend(14, $businessTotal);
    $latestPosition = $businessTotal;
    $latestDailyNet = (float) (collect($investmentTrend['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'] ?? 0, 'route' => route('dashboard.cards.bank'), 'type' => 'Asset', 'color' => '#7c3aed', 'icon' => 'bank'],
        ['label' => 'Inventory Amount', 'amount' => $verification['inventory_amount'] ?? 0, 'route' => route('dashboard.cards.inventory'), 'type' => 'Asset', 'color' => '#06b6d4', 'icon' => 'box'],
        ['label' => 'Lent Amount', 'amount' => $verification['lent_amount'] ?? 0, 'route' => route('dashboard.cards.collectible'), 'type' => 'Receivable', 'color' => '#0d9488', 'icon' => 'file'],
        ['label' => 'In Transit Amount', 'amount' => $verification['transit_amount'] ?? 0, 'route' => route('dashboard.cards.transit'), 'type' => 'Asset', 'color' => '#d97706', 'icon' => 'clock'],
        ['label' => 'KuickPay Today Net', 'amount' => $verification['kuickpay_today_net'] ?? 0, 'route' => route('dashboard.cards.kuickpay', ['mode' => 'date', 'from' => now()->toDateString(), 'to' => now()->toDateString()]), 'type' => 'Collection', 'color' => '#10b981', 'icon' => 'card'],
        ['label' => 'KuickPay Pending Balance', 'amount' => $verification['kuickpay_pending_balance'] ?? 0, 'route' => route('dashboard.cards.kuickpay-pending'), 'type' => 'Collection', 'color' => '#e11d48', 'icon' => 'clock'],
        ['label' => 'Credit Card Debt', 'amount' => $verification['credit_card_debt'] ?? 0, 'route' => route('dashboard.cards.debt'), 'type' => 'Liability', 'color' => '#ef4444', 'icon' => 'card', 'negative' => true],
        ['label' => 'Loans & Debts', 'amount' => $verification['loan_debt'] ?? 0, 'route' => route('dashboard.cards.debt'), 'type' => 'Liability', 'color' => '#dc2626', 'icon' => 'debt', 'negative' => true],
        ['label' => 'Store Credit', 'amount' => $verification['store_credit_amount'] ?? 0, 'route' => route('dashboard.cards.store-credit'), 'type' => 'Shown separately', 'color' => '#db2777', 'icon' => 'wallet', 'muted' => true],
    ];
@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="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</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">Investment Position</h2>
            <p class="text-xs" style="color:var(--muted);margin:2px 0 0">Day-wise movement: profit adds, expenses subtract, investment stays fixed</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($investmentTrend['labels'] ?? []);
    var positions = @json($investmentTrend['positions'] ?? []);
    var investmentLine = @json($investmentTrend['investment_line'] ?? []);
    var dailyProfit = @json($investmentTrend['daily_profit'] ?? []);
    var dailyExpenses = @json($investmentTrend['daily_expenses'] ?? []);
    var dailyNet = @json($investmentTrend['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) {
        value = asNumber(value);
        return currencyPrefix + Math.abs(value).toLocaleString('en-US', { maximumFractionDigits: 2 });
    }

    var aboveInvestment = positions.map(function(value) {
    value = asNumber(value);
    return value >= investment ? value : null;
});

var belowInvestment = positions.map(function(value) {
    value = asNumber(value);
    return value < investment ? value : null;
});

/*
|--------------------------------------------------------------------------
| Fix starting gap from investment line
|--------------------------------------------------------------------------
| The first visible red point is below the investment line.
| We force the first visible loss point to start from investment amount.
*/
var firstLossIndex = belowInvestment.findIndex(function(value) {
    return value !== null && value !== undefined;
});

if (firstLossIndex !== -1) {
    belowInvestment[firstLossIndex] = investment;
}

var pointColors = positions.map(function(value) {
    return asNumber(value) >= investment ? '#10b981' : '#ef4444';
});
    var allValues = positions.concat(investmentLine).map(asNumber).filter(function(value) { return value > 0; });
    var minValue = allValues.length ? Math.min.apply(null, allValues) : investment;
    var maxValue = allValues.length ? Math.max.apply(null, allValues) : investment;
    // Anchor the top of the axis exactly at the highest value (the investment line) so the chart
    // starts right on that line with no empty band above it. Keep a small pad below so the lowest
    // position isn't flush against the bottom edge.
    var dataSpan = Math.max(maxValue - minValue, investment * 0.01, 1000);
    var axisMin = Math.max(0, minValue - dataSpan * 0.08);
    var axisMax = maxValue;

    var ctx = document.getElementById('investmentChart').getContext('2d');
    var greenFill = ctx.createLinearGradient(0, 0, 0, 340);
    greenFill.addColorStop(0, 'rgba(16,185,129,.20)');
    greenFill.addColorStop(1, 'rgba(16,185,129,0)');
    var redFill = ctx.createLinearGradient(0, 0, 0, 340);
    redFill.addColorStop(0, 'rgba(239,68,68,.16)');
    redFill.addColorStop(1, 'rgba(239,68,68,0)');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Total Investment',
                    data: investmentLine,
                    borderColor: 'rgba(99,102,241,.82)',
                    backgroundColor: 'rgba(99,102,241,.08)',
                    borderDash: [8, 6],
                    pointRadius: 0,
                    borderWidth: 2,
                    tension: 0.25,
                    order: 1
                },
                {
                    label: 'Profit Zone',
                    data: aboveInvestment,
                    borderColor: '#10b981',
                    backgroundColor: greenFill,
                    fill: false,
                    pointRadius: 0,
                    borderWidth: 3,
                    tension: 0.35,
                    spanGaps: false,
                    order: 2
                },
               {
    label: 'Loss Zone',
    data: belowInvestment,
    borderColor: '#ef4444',
    backgroundColor: redFill,
    fill: false,
    pointRadius: 0,
    borderWidth: 3,
    tension: 0.35,
    spanGaps: false,
    order: 2
},
{
    label: 'Actual Loss Start',
    data: positions.map(function(value, index) {
        if (index === firstLossIndex) {
            return asNumber(value);
        }
        return null;
    }),
    borderColor: '#ef4444',
    backgroundColor: '#ef4444',
    pointRadius: 4,
    pointHoverRadius: 7,
    showLine: false,
    order: 4
},
                {
                    label: 'Running Position',
                    data: positions,
                    borderColor: 'rgba(15,23,42,0)',
                    backgroundColor: pointColors,
                    pointBackgroundColor: pointColors,
                    pointBorderColor: '#ffffff',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 7,
                    showLine: false,
                    order: 3
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { position: 'bottom', labels: { boxWidth: 10, padding: 12, font: { size: 11 } } },
                tooltip: {
                    filter: function(item) {
                        return item.dataset.label === 'Running Position' || item.dataset.label === 'Total Investment';
                    },
                    callbacks: {
                        label: function(ctx) {
                            var value = asNumber(ctx.raw);
                            return ' ' + ctx.dataset.label + ': ' + money(value);
                        },
                        afterBody: function(items) {
                            if (!items.length) return '';
                            var i = items[0].dataIndex;
                            var net = asNumber(dailyNet[i]);
                            var profit = asNumber(dailyProfit[i]);
                            var expense = asNumber(dailyExpenses[i]);
                            return [
                                'Profit: ' + money(profit),
                                'Expenses: ' + money(expense),
                                'Net movement: ' + (net < 0 ? '-' : '') + money(net)
                            ];
                        }
                    }
                }
            },
            scales: {
               x: {
    offset: false,
    grid: { display: false }
},
                y: {
                    min: axisMin,
                    max: axisMax,
                    grid: { color: 'rgba(0,0,0,.05)' },
                    ticks: {
                        callback: function(value) {
                            return currencyPrefix + Math.round(value).toLocaleString('en-US');
                        }
                    }
                }
            }
        }
    });
}());
</script>
@endpush
@endsection