@extends('layouts.app')
@section('title', __('Reports & Analytics'))

@section('content')
    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <form method="GET" class="flex flex-wrap items-end gap-2">
            <div><label class="label">{{ __('Year') }}</label>
                <select name="year" class="input" onchange="this.form.submit()">
                    @for ($y = now()->year; $y >= now()->year - 5; $y--)
                        <option value="{{ $y }}" @selected($year == $y)>{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <div><label class="label">{{ __('Month') }}</label>
                <select name="month" class="input" onchange="this.form.submit()">
                    @for ($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" @selected($month == $m)>{{ \Illuminate\Support\Carbon::create()->month($m)->translatedFormat('M') }}</option>
                    @endfor
                </select>
            </div>
            <div><label class="label">{{ __('Granularity') }}</label>
                <select name="view" class="input" onchange="this.form.submit()">
                    <option value="month" @selected($view === 'month')>{{ __('Monthly') }}</option>
                    <option value="day" @selected($view === 'day')>{{ __('Daily') }}</option>
                </select>
            </div>
        </form>
        <div class="flex gap-2">
            <a href="{{ route('reports.pdf', ['year' => $year]) }}" class="btn-secondary"><x-icon name="download" class="h-4 w-4"/>{{ __('PDF') }}</a>
            <a href="{{ route('reports.csv', ['year' => $year, 'view' => $view, 'month' => $month]) }}" class="btn-secondary"><x-icon name="download" class="h-4 w-4"/>{{ __('CSV') }}</a>
        </div>
    </div>

    {{-- Gross margin summary (#5) --}}
    <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
        <div class="card"><p class="text-xs uppercase text-slate-400">{{ __('Revenue') }} ({{ $year }})</p><p class="mt-1 text-xl font-bold">{{ money($margin['revenue']) }}</p></div>
        <div class="card"><p class="text-xs uppercase text-slate-400">{{ __('Purchases') }}</p><p class="mt-1 text-xl font-bold">{{ money($margin['purchases']) }}</p></div>
        <div class="card"><p class="text-xs uppercase text-slate-400">{{ __('COGS') }}</p><p class="mt-1 text-xl font-bold text-slate-400">{{ money($margin['cost']) }}</p></div>
        <div class="card"><p class="text-xs uppercase text-slate-400">{{ __('Gross margin') }}</p><p class="mt-1 text-xl font-bold text-brand-700">{{ money($margin['gross_margin']) }}</p></div>
        <div class="card"><p class="text-xs uppercase text-slate-400">{{ __('Margin rate') }}</p><p class="mt-1 text-xl font-bold text-brand-700">{{ $margin['margin_rate'] }}%</p></div>
    </div>

    {{-- Accounting chart (#5) --}}
    @php
        $chartRows = $view === 'day'
            ? collect($dailyAccounting)->map(fn ($r) => ['label' => $r['day'], 'revenue' => $r['revenue'], 'margin' => $r['margin']])
            : collect($accounting)->map(fn ($r) => ['label' => $r['label'], 'revenue' => $r['revenue'], 'margin' => $r['margin']]);
        $chartMax = max($chartRows->max('revenue'), 1);
    @endphp
    <div class="card mb-6">
        <div class="flex items-center justify-between">
            <h2 class="font-semibold text-slate-800">{{ $view === 'day' ? __('Daily accounting — :month :year', ['month' => \Illuminate\Support\Carbon::create()->month($month)->translatedFormat('F'), 'year' => $year]) : __('Monthly accounting — :year', ['year' => $year]) }}</h2>
            <div class="flex items-center gap-4 text-xs text-slate-500">
                <span class="flex items-center gap-1"><span class="h-2 w-2 rounded bg-brand-500"></span>{{ __('Revenue') }}</span>
                <span class="flex items-center gap-1"><span class="h-2 w-2 rounded bg-amber-400"></span>{{ __('Margin') }}</span>
            </div>
        </div>
        <div class="mt-4 flex {{ $view === 'day' ? 'h-48 gap-0.5' : 'h-48 gap-1.5' }} items-end">
            @foreach ($chartRows as $row)
                <div class="group flex flex-1 flex-col items-center gap-1">
                    <div class="relative flex w-full items-end justify-center gap-0.5" style="height: 150px;">
                        <div class="w-1/2 rounded-t bg-brand-500" style="height: {{ ($row['revenue'] / $chartMax) * 100 }}%" title="{{ __('Revenue') }}: {{ money($row['revenue']) }}"></div>
                        <div class="w-1/2 rounded-t bg-amber-400" style="height: {{ (max($row['margin'],0) / $chartMax) * 100 }}%" title="{{ __('Margin') }}: {{ money($row['margin']) }}"></div>
                    </div>
                    <span class="text-[9px] text-slate-400">{{ $row['label'] }}</span>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Monthly trend YoY --}}
    <div class="card">
        <h2 class="font-semibold text-slate-800">{{ __('Monthly sales trend') }} — {{ $year }} vs {{ $year - 1 }}</h2>
        <div class="mt-4 overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-100 text-sm">
                <thead><tr>
                    <th class="th">{{ __('Month') }}</th>
                    @foreach ($trend as $row)<th class="th text-center">{{ $row['label'] }}</th>@endforeach
                </tr></thead>
                <tbody class="divide-y divide-slate-100">
                    <tr><td class="td font-medium">{{ $year }}</td>@foreach ($trend as $row)<td class="td text-center">{{ money($row['current']) }}</td>@endforeach</tr>
                    <tr class="bg-slate-50"><td class="td font-medium text-slate-400">{{ $year - 1 }}</td>@foreach ($trend as $row)<td class="td text-center text-slate-400">{{ money($row['previous']) }}</td>@endforeach</tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Monthly accounting (#23) --}}
    <div class="card mt-6">
        <h2 class="font-semibold text-slate-800">{{ __('Monthly accounting') }} — {{ $year }}</h2>
        <div class="mt-4 overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-100 text-sm">
                <thead><tr>
                    <th class="th">{{ __('Month') }}</th><th class="th text-right">{{ __('Revenue') }}</th>
                    <th class="th text-right">{{ __('Purchases') }}</th><th class="th text-right">{{ __('COGS') }}</th>
                    <th class="th text-right">{{ __('Margin') }}</th><th class="th text-right">{{ __('Margin %') }}</th>
                </tr></thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach ($accounting as $row)
                        <tr class="hover:bg-slate-50">
                            <td class="td font-medium">{{ $row['label'] }}</td>
                            <td class="td text-right">{{ money($row['revenue']) }}</td>
                            <td class="td text-right">{{ money($row['purchases']) }}</td>
                            <td class="td text-right text-slate-400">{{ money($row['cost']) }}</td>
                            <td class="td text-right font-semibold {{ $row['margin'] >= 0 ? 'text-brand-700' : 'text-red-600' }}">{{ money($row['margin']) }}</td>
                            <td class="td text-right">{{ $row['margin_rate'] }}%</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="bg-slate-50 font-semibold">
                        <td class="td">{{ __('Total') }}</td>
                        <td class="td text-right">{{ money(collect($accounting)->sum('revenue')) }}</td>
                        <td class="td text-right">{{ money(collect($accounting)->sum('purchases')) }}</td>
                        <td class="td text-right">{{ money(collect($accounting)->sum('cost')) }}</td>
                        <td class="td text-right text-brand-700">{{ money(collect($accounting)->sum('margin')) }}</td>
                        <td class="td"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
        {{-- Top products by margin --}}
        <div class="card">
            <h2 class="font-semibold text-slate-800">{{ __('Top products by profit margin') }}</h2>
            <div class="mt-4 table-wrap">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead><tr><th class="th">{{ __('Product') }}</th><th class="th text-right">{{ __('Qty') }}</th><th class="th text-right">{{ __('Revenue') }}</th><th class="th text-right">{{ __('Profit') }}</th></tr></thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($topProducts as $product)
                            <tr>
                                <td class="td">{{ $product->name }}</td>
                                <td class="td text-right">{{ $product->qty }}</td>
                                <td class="td text-right">{{ money($product->revenue) }}</td>
                                <td class="td text-right font-semibold text-brand-700">{{ money($product->profit) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="td py-8 text-center text-slate-400">{{ __('No data.') }}</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Employee ranking --}}
        <div class="card">
            <h2 class="font-semibold text-slate-800">{{ __('Employee sales ranking') }}</h2>
            <div class="mt-4 table-wrap">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead><tr><th class="th">#</th><th class="th">{{ __('Employee') }}</th><th class="th text-right">{{ __('Sales') }}</th><th class="th text-right">{{ __('Revenue') }}</th></tr></thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($ranking as $i => $row)
                            <tr>
                                <td class="td">{{ $i + 1 }}</td>
                                <td class="td">{{ $row->name }}</td>
                                <td class="td text-right">{{ $row->sales_count }}</td>
                                <td class="td text-right font-semibold">{{ money($row->revenue) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="td py-8 text-center text-slate-400">{{ __('No data.') }}</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection