@extends('layouts.finance')

@section('title', 'Charity Set-Aside')
@section('subtitle', '2% voluntary contribution from monthly net profit')

@section('content')
@php
    $displayCurrency = 'PKR';
    $fmt = fn($usd) => $metrics->moneyIn($usd, 'USD', $displayCurrency);

    $hasProfit = $profitUsd > 0;
    $palette = ['#ec4899','#10b981','#6366f1','#f59e0b','#06b6d4'];
@endphp

{{-- Back link --}}
<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>

{{-- Status banner --}}
@if($hasProfit)
<div class="mb-4" style="background:var(--pink-soft);border:1px solid #fbcfe8;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#db2777" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
    <div>
        <div style="font-weight:700;color:#9d174d;font-size:13px">Profitable this month</div>
        <div style="font-size:12px;color:#9d174d">Set aside {{ number_format($charityRate * 100, 1) }}% of net profit for charitable giving.</div>
    </div>
</div>
@else
<div class="mb-4" style="background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
    <div>
        <div style="font-weight:700;color:var(--muted);font-size:13px">No profit this month</div>
        <div style="font-size:12px;color:var(--muted)">Charity set-aside is calculated on positive monthly net profit. Currently nothing to set aside.</div>
    </div>
</div>
@endif

{{-- Hero KPIs --}}
<section class="grid kpi-grid gap-3 mb-6">
    <div class="card kpi-card" style="background:var(--pink-soft);border-color:#fbcfe8">
        <div class="kpi-icon ico-bg-pink"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
        <div class="kpi-label">Charity Due</div>
        <div class="kpi-value" style="color:#db2777">{{ $fmt($charityDue) }}</div>
        <div class="kpi-sub">{{ number_format($charityRate * 100, 1) }}% of monthly net profit</div>
    </div>
    <div class="card kpi-card">
        <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"/></svg></div>
        <div class="kpi-label">Net Profit (Mo.)</div>
        <div class="kpi-value" style="color:{{ $profitUsd >= 0 ? '#10b981' : '#ef4444' }}">{{ $fmt($profitUsd) }}</div>
        <div class="kpi-sub">Revenue − Expenses − COGS</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"><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">Revenue (Mo.)</div>
        <div class="kpi-value">{{ $fmt($revenueUsd) }}</div>
        <div class="kpi-sub">Current month</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-icon ico-bg-red"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/></svg></div>
        <div class="kpi-label">Expenses (Mo.)</div>
        <div class="kpi-value" style="color:#ef4444">{{ $fmt($expensesUsd) }}</div>
        <div class="kpi-sub">All running costs</div>
    </div>
</section>

{{-- Charts + calculation --}}
<section class="grid gap-4 mb-6" style="grid-template-columns:1fr 1fr">
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Charity Trend</h3>
            <span class="pill pill-amber">6 months</span>
        </div>
        <div style="height:260px;position:relative"><canvas id="charityTrendChart"></canvas></div>
    </div>

    {{-- Calculation card --}}
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Charity Calculation</h3>
            <span class="pill">Step by step</span>
        </div>
        <div class="text-sm space-y-2">
            <div class="flex justify-between" style="padding:10px;border-radius:8px;background:var(--bg-2)">
                <span style="color:var(--muted)">Monthly Revenue</span>
                <span style="font-weight:600">{{ $fmt($revenueUsd) }}</span>
            </div>
            <div class="flex justify-between" style="padding:8px 10px;font-size:12px">
                <span style="color:var(--muted)">− Monthly Expenses</span>
                <span style="color:#ef4444">-{{ $fmt($expensesUsd) }}</span>
            </div>
            <div class="flex justify-between" style="padding:8px 10px;font-size:12px">
                <span style="color:var(--muted)">− COGS</span>
                <span style="color:#ef4444">-{{ $fmt($cogsUsd) }}</span>
            </div>
            <div style="height:1px;background:var(--border);margin:6px 0"></div>
            <div class="flex justify-between" style="padding:10px;border-radius:8px;background:var(--bg-2)">
                <span style="color:var(--muted)">Net Profit</span>
                <span style="font-weight:600;color:{{ $profitUsd >= 0 ? '#10b981' : '#ef4444' }}">{{ $fmt($profitUsd) }}</span>
            </div>
            <div class="flex justify-between" style="padding:8px 10px;font-size:12px">
                <span style="color:var(--muted)">× Charity rate</span>
                <span>{{ number_format($charityRate * 100, 1) }}%</span>
            </div>
            <div class="flex justify-between" style="padding:12px 10px;border-radius:10px;background:var(--pink-soft);border:1px solid #fbcfe8">
                <span style="color:#9d174d;font-weight:700">Charity set-aside</span>
                <span style="color:#9d174d;font-weight:800;font-size:16px">{{ $fmt($charityDue) }}</span>
            </div>
        </div>
    </div>
</section>

{{-- Monthly breakdown table --}}
<section class="card mb-6">
    <div class="section-head"><h2>Monthly Charity Breakdown (last 6 months)</h2></div>
    <table>
        <thead>
            <tr>
                <th>Month</th>
                <th class="right">Revenue (USD)</th>
                <th class="right">Expenses (USD)</th>
                <th class="right">Net Profit (USD)</th>
                <th class="right">Charity 2% (USD)</th>
                <th class="right">Charity 2% (PKR)</th>
            </tr>
        </thead>
        <tbody>
            @foreach($trend['labels'] as $i => $label)
                @php
                    $rev = $trend['revenue'][$i] ?? 0;
                    $exp = $trend['expenses'][$i] ?? 0;
                    $prof = $profitTrend[$i] ?? 0;
                    $char = $charityTrend[$i] ?? 0;
                @endphp
                <tr class="row-hover">
                    <td>{{ $label }}</td>
                    <td class="right">{{ $metrics->money($rev) }}</td>
                    <td class="right" style="color:#ef4444">{{ $metrics->money($exp) }}</td>
                    <td class="right" style="color:{{ $prof >= 0 ? '#10b981' : '#ef4444' }}">{{ $metrics->money($prof) }}</td>
                    <td class="right" style="color:#db2777">{{ $metrics->money($char) }}</td>
                    <td class="right" style="color:#db2777">{{ $fmt($char) }}</td>
                </tr>
            @endforeach
            <tr style="font-weight:700;background:var(--bg-2)">
                <td>6-month total</td>
                <td class="right">{{ $metrics->money(array_sum($trend['revenue'])) }}</td>
                <td class="right">{{ $metrics->money(array_sum($trend['expenses'])) }}</td>
                <td class="right">{{ $metrics->money(array_sum($profitTrend)) }}</td>
                <td class="right">{{ $metrics->money(array_sum($charityTrend)) }}</td>
                <td class="right">{{ $fmt(array_sum($charityTrend)) }}</td>
            </tr>
        </tbody>
    </table>
</section>

{{-- Notes --}}
<section class="card p-5">
    <h3 class="font-semibold mb-2">Notes</h3>
    <ul class="text-sm" style="color:var(--muted);line-height:1.8;padding-left:18px">
        <li>This is a <strong>voluntary set-aside</strong> equal to {{ number_format($charityRate * 100, 1) }}% of positive monthly net profit.</li>
        <li>Months with no profit (or a loss) contribute zero to charity.</li>
        <li>Net profit is calculated as Revenue − Expenses − COGS for the current month.</li>
        <li>Separate from Zakat — both can be active simultaneously.</li>
    </ul>
</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 el = document.getElementById('charityTrendChart');
    if (el) {
        new Chart(el, {
            type: 'bar',
            data: {
                labels: @json($trend['labels']),
                datasets: [{
                    label: 'Charity 2% (USD)',
                    data: @json($charityTrend),
                    backgroundColor: '#ec4899',
                    borderRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: { callbacks: { label: function(c) { return ' $' + Number(c.raw).toLocaleString('en-US',{maximumFractionDigits:2}); } } }
                },
                scales: {
                    y: { beginAtZero: true, ticks: { callback: function(v) { return '$' + Number(v).toLocaleString('en-US'); } } }
                }
            }
        });
    }
}());
</script>
@endpush
@endsection