@extends('layouts.finance')

@section('title', 'In Transit Detail')
@section('subtitle', 'Supplier invoices currently marked as transit')

@section('content')
@php
    $displayCurrency = 'PKR';
    $fmt = fn($usd) => $metrics->moneyIn($usd, 'USD', $displayCurrency);
    $breakdownLabels = array_keys($breakdown);
    $breakdownValues = array_values($breakdown);
    $largestSupplier = $breakdownLabels[0] ?? 'No supplier';
    $largestAmount = count($breakdownValues) ? max($breakdownValues) : 0;
    $paidCurrencyRates = $effectiveRatesByPaidCurrency ?? [];
    $selectedPaidCurrency = $selectedPaidCurrency ?? null;
    $paidCurrencyCards = $paidCurrencyCards ?? [];
@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">
    <a href="{{ route('dashboard.cards.transit') }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit;background:{{ $selectedPaidCurrency ? 'var(--card)' : 'var(--yellow-soft)' }};border-color:{{ $selectedPaidCurrency ? 'var(--border)' : '#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"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
        <div class="kpi-label">Total In Transit</div>
        <div class="kpi-value" style="color:#92400e">{{ $fmt($total) }}</div>
        <div class="kpi-sub">{{ $transitInvoices->count() }} transit invoice{{ $transitInvoices->count() === 1 ? '' : 's' }}</div>
    </a>
    @foreach(['USD' => 'ico-bg-green', 'AUD' => 'ico-bg-teal'] as $currency => $iconClass)
        @php
            $card = $paidCurrencyCards[$currency] ?? ['count' => 0, 'paid_amount' => 0, 'pkr_amount' => 0, 'rate' => null];
            $isActiveCurrency = $selectedPaidCurrency === $currency;
        @endphp
        <a href="{{ route('dashboard.cards.transit', ['paid_currency' => $currency]) }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit;background:{{ $isActiveCurrency ? 'var(--green-soft)' : 'var(--card)' }};border-color:{{ $isActiveCurrency ? '#a7f3d0' : 'var(--border)' }}">
            <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 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
            <div class="kpi-label">{{ $currency }} Transit</div>
            <div class="kpi-value">{{ $metrics->money($card['paid_amount'], $currency) }}</div>
            <div class="kpi-sub">{{ number_format($card['count']) }} invoice{{ $card['count'] === 1 ? '' : 's' }}{{ $card['rate'] ? ' - '.$currency.'->PKR '.number_format($card['rate'], 4) : '' }}</div>
        </a>
    @endforeach
    <div class="card kpi-card">
        <div class="kpi-icon ico-bg-cyan"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16"/><polyline points="14 2 14 8 20 8"/></svg></div>
        <div class="kpi-label">{{ $selectedPaidCurrency ? $selectedPaidCurrency.' Invoice Count' : 'Invoice Count' }}</div>
        <div class="kpi-value">{{ number_format($transitInvoices->count()) }}</div>
        <div class="kpi-sub">Status: transit</div>
    </div>
</section>

<section class="grid gap-4 mb-6" style="grid-template-columns:1fr 2fr">
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Breakdown</h3>
            <span class="pill pill-amber">By supplier</span>
        </div>
        @if($total > 0)
            <div style="height:260px;position:relative"><canvas id="breakChart"></canvas></div>
        @else
            <div style="height:260px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg-2);border-radius:12px;font-size:13px">No transit invoices.</div>
        @endif
    </div>
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Revenue vs. Expenses Trend</h3>
            <span class="pill">6 months</span>
        </div>
        <div style="height:260px;position:relative"><canvas id="trendChart"></canvas></div>
    </div>
</section>

<section class="card mb-6">
    <div class="section-head"><h2>{{ $selectedPaidCurrency ? $selectedPaidCurrency.' Transit Invoices' : 'Transit Invoices' }}</h2></div>
    <table>
        <thead>
            <tr>
                <th>Invoice</th>
                <th>Supplier</th>
                <th>Bank</th>
                <th class="right">Amount</th>
                <th class="right">Paid Rate</th>
                <th class="right">Effective Rate</th>
                <th class="right">PKR Equivalent</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            @forelse($transitInvoices as $invoice)
                @php
                    $invoiceTotal = $metrics->invoiceTotal($invoice);
                    $invoicePkrEquivalent = $metrics->invoicePkrEquivalent($invoice);
                    $rate = $metrics->invoiceAppliedRate($invoice);
                    $paidCurrency = $metrics->invoicePaidCurrency($invoice);
                    $paidCurrencyRate = $metrics->invoicePaidCurrencyRate($invoice);
                @endphp
                <tr class="row-hover">
                    <td><a href="{{ route('finance.invoices.show', $invoice) }}" class="btn btn-sm">{{ $invoice->invoice_number }}</a></td>
                    <td>{{ $invoice->supplier_name ?: $invoice->client_name }}</td>
                    <td>{{ $invoice->bankAccount ? trim($invoice->bankAccount->name.' - '.$invoice->bankAccount->bank_name) : '-' }}</td>
                    <td class="right">{{ $metrics->money($invoiceTotal, $invoice->currency) }}</td>
                    <td class="right">{{ $paidCurrency && $paidCurrencyRate ? $paidCurrency.'->PKR '.number_format($paidCurrencyRate, 4) : '-' }}</td>
                    <td class="right">{{ $rate ? number_format($rate, 4) : '-' }}</td>
                    <td class="right">{{ $invoicePkrEquivalent !== null ? $metrics->money($invoicePkrEquivalent, 'PKR') : 'Missing paid rate' }}</td>
                    <td><span class="pill pill-cyan">In Transit</span></td>
                </tr>
            @empty
                <tr>
                <td colspan="8" class="muted text-center" style="padding:28px">No transit invoices.</td>
                </tr>
            @endforelse
            <tr style="font-weight:700;background:var(--bg-2)">
                <td>Total In Transit</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="right">{{ $fmt($total) }}</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</section>

<section class="card p-5">
    <h3 class="font-semibold mb-3">Insights</h3>
    <div class="grid gap-3" style="grid-template-columns:repeat(3,1fr)">
        <div style="background:var(--bg-2);border-radius:12px;padding:14px">
            <div class="kpi-label">Paid FX Rate</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px">{{ ! $selectedPaidCurrency && count($paidCurrencyRates) > 1 ? 'Mixed' : ($effectiveRate !== null ? number_format($effectiveRate, 4) : '-') }}</div>
            <div class="text-xs muted">
                @if($selectedPaidCurrency)
                    {{ $selectedPaidCurrency }}->PKR weighted rate
                @elseif(count($paidCurrencyRates) > 1)
                    @foreach($paidCurrencyRates as $currency => $currencyRate)
                        {{ $currency }}->PKR {{ number_format($currencyRate, 4) }}{{ ! $loop->last ? ' · ' : '' }}
                    @endforeach
                @else
                    Weighted from paid invoice currency
                @endif
            </div>
        </div>
        <div style="background:var(--bg-2);border-radius:12px;padding:14px">
            <div class="kpi-label">Largest Share</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px">
                {{ $total > 0 && $largestAmount > 0 ? number_format(($largestAmount / $total) * 100, 1) : '0.0' }}%
            </div>
            <div class="text-xs muted">Largest supplier share</div>
        </div>
        <div style="background:var(--bg-2);border-radius:12px;padding:14px">
            <div class="kpi-label">Transit Records</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px">{{ number_format($transitInvoices->count()) }}</div>
            <div class="text-xs muted">Invoices awaiting stock upload</div>
        </div>
    </div>
    <p class="text-xs muted mt-3" style="padding-top:12px;border-top:1px solid var(--border)">
        Transit amounts come from supplier invoices whose database status is transit.
    </p>
</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;

    var breakEl = document.getElementById('breakChart');
    if (breakEl && {{ $total > 0 ? 'true' : 'false' }}) {
        new Chart(breakEl, {
            type: 'doughnut',
            data: {
                labels: @json($breakdownLabels),
                datasets: [{ data: @json($breakdownValues), backgroundColor: ['#f59e0b','#06b6d4','#6366f1','#10b981'], borderWidth: 2, borderColor: '#fff' }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { boxWidth: 10, padding: 10, font: { size: 11 } } },
                    tooltip: { callbacks: { label: function(c) { return ' $' + c.raw.toLocaleString('en-US', { maximumFractionDigits: 0 }); } } }
                }
            }
        });
    }

    new Chart(document.getElementById('trendChart'), {
        type: 'bar',
        data: {
            labels: @json($trend['labels']),
            datasets: [
                { label: 'Revenue', data: @json($trend['revenue']), backgroundColor: 'rgba(16,185,129,.8)', borderRadius: 5 },
                { label: 'Expenses', data: @json($trend['expenses']), backgroundColor: 'rgba(239,68,68,.8)', borderRadius: 5 }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { position: 'bottom', labels: { boxWidth: 10, padding: 10, font: { size: 11 } } },
                tooltip: { callbacks: { label: function(c) { return ' ' + c.dataset.label + ': $' + 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