@extends('layouts.app')
@section('title', 'VAT Report')

@section('content')
<div class="space-y-6" x-data x-init="setTimeout(() => window.renderCharts(), 30)">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">VAT Report</h1>
            <p class="text-sm text-ink-muted">Taxable, zero-rated and exempt sales across restaurant and bar.</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <x-period-filter :period="$period" :from="$from" :to="$to" />
            <x-export-menu route="tax.vat-report.export" :params="['period' => $period, 'from' => $from->format('Y-m-d'), 'to' => $to->format('Y-m-d')]" />
        </div>
    </div>

    <div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
        <x-stat-card label="VAT collected" value="{{ number_format($vatCollected, 0) }}" icon="percent" tone="primary" />
        <x-stat-card label="Taxable sales" value="{{ number_format($byTaxType['VAT Applicable'] ?? 0, 0) }}" icon="check-circle-2" tone="emerald" />
        <x-stat-card label="Exempt/zero-rated" value="{{ number_format(($byTaxType['Exempt'] ?? 0) + ($byTaxType['Zero-Rated'] ?? 0), 0) }}" icon="ban" tone="amber" />
    </div>

    <div class="grid lg:grid-cols-2 gap-4">
        @if ($byTaxType->isNotEmpty())
            <div class="card card-pad">
                <p class="text-sm font-semibold mb-3">Sales by tax type</p>
                <div class="h-64">
                    <canvas data-chart='{
                        "type":"pie","legend":true,
                        "labels": {!! $byTaxType->keys()->toJson() !!},
                        "datasets": [{"data": {!! $byTaxType->values()->toJson() !!}, "backgroundColor": ["#0F6E5E","#C98A2C","#B3402F"]}]
                    }'></canvas>
                </div>
            </div>
        @endif
        <div class="card card-pad">
            <p class="text-sm font-semibold mb-3">Sales by tax type</p>
            <table class="data-table">
                <thead><tr><th>Tax type</th><th class="text-right">Sales value</th></tr></thead>
                <tbody>
                    @forelse ($byTaxType as $type => $amount)
                        <tr><td>{{ $type }}</td><td class="text-right font-semibold">{{ number_format($amount, 2) }}</td></tr>
                    @empty
                        <tr><td colspan="2" class="text-center text-ink-muted py-8">No sales in this range.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="card card-pad">
        <div class="flex items-center justify-between mb-3">
            <p class="text-sm font-semibold">eTIMS transactions in this range</p>
            <a href="{{ route('tax.etims.index') }}" class="btn-ghost btn-sm">Full eTIMS log</a>
        </div>
        <table class="data-table">
            <thead><tr><th>Status</th><th class="text-right">Invoices</th><th class="text-right">Total value</th></tr></thead>
            <tbody>
                @forelse ($invoiceSummary as $row)
                    <tr>
                        <td><x-badge color="{{ ['submitted' => 'emerald', 'failed' => 'rose', 'pending' => 'amber'][$row->etims_status] ?? 'slate' }}">{{ ucfirst($row->etims_status) }}</x-badge></td>
                        <td class="text-right">{{ $row->count }}</td>
                        <td class="text-right font-semibold">{{ number_format($row->total, 2) }}</td>
                    </tr>
                @empty
                    <tr><td colspan="3" class="text-center text-ink-muted py-8">No tax invoices generated in this range yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection