@extends('layouts.admin')
@section('title', 'Outgoing & expenses')
@section('content')
@php
  $query = request()->only(['period', 'from', 'to']);
  $canEdit = (bool) auth()->user()?->hasPermission('accounting.edit');
  $maxCategory = max([1, ...array_values($totals['expenses_by_category'])]);
@endphp
<x-admin.page title="Outgoing & expenses" subtitle="Money going out: order costs come from each order's COGS panel. Add business expenses like ads, rent, wages, and software here.">
    @include('admin.accounts.partials.period')

    <div class="acct-kpis acct-kpis-3 mb-6">
        <div class="acct-kpi"><span class="acct-kpi-label">Order costs</span><span class="acct-kpi-value">{{ $accounts->money($totals['order_costs_cents']) }}</span><span class="acct-kpi-meta">Production, shipping, packaging, fees</span></div>
        <div class="acct-kpi"><span class="acct-kpi-label">Expenses</span><span class="acct-kpi-value">{{ $accounts->money($totals['expenses_cents']) }}</span><span class="acct-kpi-meta">Running the business</span></div>
        <div class="acct-kpi acct-kpi-profit is-danger"><span class="acct-kpi-label">Total outgoing</span><span class="acct-kpi-value">{{ $accounts->money($totals['outgoing_cents']) }}</span><span class="acct-kpi-meta">{{ $period['label'] }}</span></div>
    </div>

    @if($canEdit)
        <details class="order-ops-panel acct-add mb-6" @if($errors->any() || request('add')) open @endif>
            <summary><i data-lucide="plus-circle" class="h-4 w-4"></i> Add expense</summary>
            <div class="px-5 pb-5">@include('admin.accounts.partials.entry-form', ['type' => 'expense'])</div>
        </details>
    @endif

    <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
        <div>
            <div class="mb-3 flex flex-wrap items-center gap-2">
                @foreach(['all' => 'Everything', 'expenses' => 'Expenses', 'order_costs' => 'Order costs'] as $key => $label)
                    <a href="{{ route('admin.accounts.outgoing', [...$query, 'source' => $key === 'all' ? null : $key]) }}" class="order-ops-chip {{ $source === $key && $category === '' ? 'is-active' : '' }}">{{ $label }}</a>
                @endforeach
                @if($category !== '')
                    <span class="order-ops-chip is-active">{{ $category }}</span>
                    <a href="{{ route('admin.accounts.outgoing', $query) }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Clear</a>
                @endif
            </div>
            @include('admin.accounts.partials.rows', ['sign' => '-', 'empty' => 'Nothing spent in this period yet.'])
        </div>

        <aside class="order-ops-panel self-start">
            <div class="order-ops-panel-head"><h2 class="order-ops-panel-title">Expenses by category</h2></div>
            <div class="space-y-3 p-5">
                @forelse($totals['expenses_by_category'] as $name => $cents)
                    <a href="{{ route('admin.accounts.outgoing', [...$query, 'source' => 'expenses', 'category' => $name]) }}" class="block">
                        <div class="flex justify-between gap-2 text-sm"><span class="text-[#202223]">{{ $name }}</span><span class="font-semibold tabular-nums">{{ $accounts->money($cents) }}</span></div>
                        <div class="acct-meter mt-1.5"><span style="width: {{ round($cents / $maxCategory * 100) }}%"></span></div>
                    </a>
                @empty
                    <p class="text-sm text-[#6d7175]">No expenses recorded in this period.</p>
                @endforelse
            </div>
        </aside>
    </div>
</x-admin.page>
@endsection