@extends('layouts.finance')

@section('title', 'Zakat Estimate')
@section('subtitle', '2.5% annual obligation on net zakatable wealth')

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

    $zakatableTotal = array_sum(array_values($zakatableComponents));
    $deductibleTotal = array_sum(array_values($deductibles));
    $netZakatable = $netZakatable ?? max(0.0, $zakatableTotal - $deductibleTotal);

    $componentLabels = array_keys($zakatableComponents);
    $componentValues = array_values($zakatableComponents);

    $palette = ['#6366f1','#10b981','#f59e0b','#06b6d4','#ec4899','#8b5cf6','#0d9488','#f97316'];

    $entries = $entries ?? collect();
    $categories = $categories ?? [];
    $dateFilter = $dateFilter ?? ['active' => false, 'from' => null, 'to' => null, 'label' => null];
    $dashboardRouteParams = ($dateFilter['active'] ?? false) ? ['from' => $dateFilter['from'], 'to' => $dateFilter['to']] : [];
@endphp

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

@include('dashboard.cards._date-filter', ['dateFilter' => $dateFilter, 'filterRoute' => 'dashboard.cards.zakat'])

{{-- Nisab status banner --}}
@if($isAboveNisab)
<div class="mb-4" style="background:#fffbeb;border:1px solid #fde68a;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="#d97706" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
    <div>
        <div style="font-weight:700;color:#92400e;font-size:13px">Above Nisab Threshold</div>
        <div style="font-size:12px;color:#92400e">Your net worth exceeds the nisab (~${{ number_format($nisabUsd, 0) }} USD). Zakat is obligatory if wealth has been held for one lunar year (Hawl).</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">Below Nisab Threshold</div>
        <div style="font-size:12px;color:var(--muted)">Net worth is below the nisab (~${{ number_format($nisabUsd, 0) }} USD). Zakat may not be obligatory at this time.</div>
    </div>
</div>
@endif

{{-- Hero KPIs --}}
<section class="grid kpi-grid gap-3 mb-6">
    <div class="card kpi-card" style="background:var(--yellow-soft);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="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
        <div class="kpi-label">Zakat Due</div>
        <div class="kpi-value" style="color:#92400e">{{ $fmt($zakatDue) }}</div>
        <div class="kpi-sub">2.5% annual estimate</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 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">Net Worth</div>
        <div class="kpi-value">{{ $fmt($netWorth) }}</div>
        <div class="kpi-sub">Assets minus liabilities</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">Zakatable Assets</div>
        <div class="kpi-value" style="color:#10b981">{{ $fmt($zakatableTotal) }}</div>
        <div class="kpi-sub">Total eligible wealth</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"><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">Deductible Debts</div>
        <div class="kpi-value" style="color:#ef4444">{{ $fmt($deductibleTotal) }}</div>
        <div class="kpi-sub">Liabilities deducted</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">Zakatable Asset Breakdown</h3>
            <span class="pill pill-amber">USD eq.</span>
        </div>
        @if($zakatableTotal > 0)
            <div style="height:260px;position:relative"><canvas id="zakatAssetChart"></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 zakatable assets.</div>
        @endif
    </div>

    {{-- Zakat calculation card --}}
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Zakat 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)">Total zakatable assets</span>
                <span style="font-weight:600">{{ $fmt($zakatableTotal) }}</span>
            </div>
            @foreach($zakatableComponents as $label => $val)
            <div class="flex justify-between" style="padding:8px 10px;font-size:12px">
                <span style="color:var(--muted)">+ {{ $label }}</span>
                <span>{{ $fmt($val) }}</span>
            </div>
            @endforeach
            <div style="height:1px;background:var(--border);margin:6px 0"></div>
            @foreach($deductibles as $label => $val)
            <div class="flex justify-between" style="padding:8px 10px;font-size:12px">
                <span style="color:var(--muted)">− {{ $label }} (deductible)</span>
                <span style="color:#ef4444">-{{ $fmt($val) }}</span>
            </div>
            @endforeach
            <div class="flex justify-between" style="padding:10px;border-radius:8px;background:var(--bg-2)">
                <span style="color:var(--muted)">Net zakatable wealth</span>
                <span style="font-weight:600">{{ $fmt($netZakatable) }}</span>
            </div>
            <div class="flex justify-between" style="padding:10px;border-radius:8px;background:var(--bg-2)">
                <span style="color:var(--muted)">Nisab threshold (approx.)</span>
                <span style="font-weight:600">{{ $metrics->money($nisabUsd) }}</span>
            </div>
            <div class="flex justify-between" style="padding:12px 10px;border-radius:10px;background:var(--yellow-soft);border:1px solid #fde68a">
                <span style="color:#92400e;font-weight:700">Zakat due (2.5% x net)</span>
                <span style="color:#92400e;font-weight:800;font-size:16px">{{ $fmt($zakatDue) }}</span>
            </div>
        </div>
    </div>
</section>

{{-- Zakat Calculator: add gold, silver, cash, etc. --}}
<section class="card mb-6">
    <div class="section-head">
        <h2>Zakat Calculator</h2>
        <span class="pill pill-amber">Custom entries — saved permanently</span>
    </div>
    <div class="card-pad">
        <form method="POST" action="{{ route('dashboard.cards.zakat.entries.store') }}" class="grid gap-3 mb-4" style="grid-template-columns:1.4fr 1.2fr 0.9fr 0.9fr 0.9fr 0.7fr auto" id="zakatEntryForm">
            @csrf
            <div>
                <label class="label">Label</label>
                <input type="text" name="label" class="field" placeholder="e.g. Wife's gold jewelry" required>
            </div>
            <div>
                <label class="label">Category</label>
                <select name="category" class="field" required onchange="window._zakatToggleGold && window._zakatToggleGold(this)">
                    @foreach($categories as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="zakat-gold-field" style="display:none">
                <label class="label">Grams</label>
                <input type="number" step="0.001" min="0" name="grams" class="field" placeholder="0.000">
            </div>
            <div class="zakat-gold-field" style="display:none">
                <label class="label">Price / gram</label>
                <input type="number" step="0.01" min="0" name="price_per_unit" class="field" placeholder="0.00">
            </div>
            <div class="zakat-amount-field">
                <label class="label">Amount</label>
                <input type="number" step="0.01" min="0" name="amount" class="field" placeholder="0.00">
            </div>
            <div>
                <label class="label">Currency</label>
                <select name="currency" class="field">
                    <option value="USD">USD</option>
                    <option value="PKR" selected>PKR</option>
                    <option value="AUD">AUD</option>
                </select>
            </div>
            <div style="display:flex;align-items:flex-end">
                <button type="submit" class="btn btn-primary">Add</button>
            </div>
        </form>

        @if($entries->isEmpty())
            <div class="muted" style="padding:14px 0;font-size:13px">No custom entries yet. Add gold, silver, cash, investments or deductions above.</div>
        @else
            <table>
                <thead>
                    <tr>
                        <th>Label</th>
                        <th>Category</th>
                        <th class="right">Grams</th>
                        <th class="right">Price/unit</th>
                        <th class="right">Amount</th>
                        <th>Cur.</th>
                        <th class="right">USD eq.</th>
                        <th class="right">PKR eq.</th>
                        <th class="right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($entries as $entry)
                    @php
                        $entryUsd = $metrics->usd((float) $entry->amount, $entry->currency);
                        $isDeduction = ! $entry->isAsset();
                    @endphp
                    <tr class="row-hover">
                        <td>{{ $entry->label }}</td>
                        <td>
                            <span class="pill {{ $isDeduction ? 'pill-rose' : 'pill-green' }}" style="font-size:10px">
                                {{ $categories[$entry->category] ?? $entry->category }}
                            </span>
                        </td>
                        <td class="right">{{ $entry->grams !== null ? number_format((float) $entry->grams, 3) : '—' }}</td>
                        <td class="right">{{ $entry->price_per_unit !== null ? number_format((float) $entry->price_per_unit, 2) : '—' }}</td>
                        <td class="right">{{ number_format((float) $entry->amount, 2) }}</td>
                        <td>{{ $entry->currency }}</td>
                        <td class="right" style="color:{{ $isDeduction ? '#ef4444' : 'inherit' }}">
                            {{ $isDeduction ? '-' : '' }}{{ $metrics->money($entryUsd) }}
                        </td>
                        <td class="right" style="color:{{ $isDeduction ? '#ef4444' : 'inherit' }}">
                            {{ $isDeduction ? '-' : '' }}{{ $fmt($entryUsd) }}
                        </td>
                        <td class="right">
                            <form method="POST" action="{{ route('dashboard.cards.zakat.entries.destroy', $entry) }}" style="display:inline" onsubmit="return confirm('Remove this entry?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        @endif
    </div>
</section>

{{-- Component table --}}
<section class="card mb-6">
    <div class="section-head"><h2>Zakatable Wealth Components</h2></div>
    <table>
        <thead>
            <tr>
                <th>Component</th>
                <th>Type</th>
                <th class="right">USD Value</th>
                <th class="right">PKR Equivalent</th>
                <th class="right">% of Zakatable</th>
            </tr>
        </thead>
        <tbody>
            @foreach($zakatableComponents as $label => $usdVal)
            <tr class="row-hover">
                <td>{{ $label }}</td>
                <td><span class="pill pill-green" style="font-size:10px">Asset</span></td>
                <td class="right">{{ $metrics->money($usdVal) }}</td>
                <td class="right">{{ $fmt($usdVal) }}</td>
                <td class="right">{{ $zakatableTotal > 0 ? number_format(($usdVal / $zakatableTotal) * 100, 1) : '0.0' }}%</td>
            </tr>
            @endforeach
            @foreach($deductibles as $label => $usdVal)
            <tr class="row-hover">
                <td>{{ $label }}</td>
                <td><span class="pill pill-rose" style="font-size:10px">Deduction</span></td>
                <td class="right" style="color:#ef4444">-{{ $metrics->money($usdVal) }}</td>
                <td class="right" style="color:#ef4444">-{{ $fmt($usdVal) }}</td>
                <td class="right">—</td>
            </tr>
            @endforeach
            <tr style="font-weight:700;background:var(--bg-2)">
                <td colspan="2">Net Zakatable Wealth</td>
                <td class="right">{{ $metrics->money($netZakatable) }}</td>
                <td class="right">{{ $fmt($netZakatable) }}</td>
                <td class="right">—</td>
            </tr>
        </tbody>
    </table>
</section>

{{-- Disclaimer --}}
<section class="card p-5">
    <h3 class="font-semibold mb-2">Important Notes</h3>
    <ul class="text-sm" style="color:var(--muted);line-height:1.8;padding-left:18px">
        <li>This is a <strong>rough estimate</strong> only. Consult a qualified Islamic scholar for your specific situation.</li>
        <li>Nisab used: ~${{ number_format($nisabUsd, 0) }} USD (approx. 85g gold at $60/g). This changes with gold prices.</li>
        <li>Zakat is due only if the nisab threshold is maintained for a full lunar year (Hawl).</li>
        <li>Business inventory is zakatable at cost price, not sale price.</li>
        <li>Debts owed <em>to you</em> (collectible) may be zakatable depending on your madhab.</li>
        <li>Update the nisab threshold in Settings (TODO) when gold prices change significantly.</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 palette = @json($palette);
    function sliceColors(n) { var o=[]; for(var i=0;i<n;i++) o.push(palette[i%palette.length]); return o; }

    // Toggle gold/silver-specific fields in the calculator form.
    window._zakatToggleGold = function (selectEl) {
        var form = selectEl.closest('form');
        if (!form) return;
        var isGoldSilver = selectEl.value === 'gold' || selectEl.value === 'silver';
        form.querySelectorAll('.zakat-gold-field').forEach(function (el) { el.style.display = isGoldSilver ? '' : 'none'; });
        var amountWrap = form.querySelector('.zakat-amount-field');
        if (amountWrap) amountWrap.style.display = isGoldSilver ? 'none' : '';
        // Required attributes follow visibility so the browser doesn't block submit.
        var grams = form.querySelector('input[name="grams"]');
        var price = form.querySelector('input[name="price_per_unit"]');
        var amount = form.querySelector('input[name="amount"]');
        if (grams)  grams.required  = isGoldSilver;
        if (price)  price.required  = isGoldSilver;
        if (amount) amount.required = !isGoldSilver;
    };
    // Initialise on load
    var initSelect = document.querySelector('#zakatEntryForm select[name="category"]');
    if (initSelect) window._zakatToggleGold(initSelect);

    var assetEl = document.getElementById('zakatAssetChart');
    if (assetEl && @json($zakatableTotal) > 0) {
        new Chart(assetEl, {
            type: 'doughnut',
            data: {
                labels: @json($componentLabels),
                datasets: [{ data: @json($componentValues), backgroundColor: sliceColors(@json(count($componentLabels))), 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}); } } }
                }
            }
        });
    }
}());
</script>
@endpush
@endsection