@extends('layouts.app')

@section('title', 'Fuel Reports')

@section('content')
    @php
        $money = fn ($v) => \App\Support\Fmt::money2($v);
        $litres1 = fn ($v) => number_format((float) $v, 1);
        $litres2 = fn ($v) => number_format((float) $v, 2);

        // Click-column sorting: same key toggles direction, a new key forces desc.
        $toggle = function (string $key) {
            $current = request()->query('sort', 'date');
            $dir = request()->query('dir', 'desc') === 'asc' ? 'asc' : 'desc';

            if ($current === $key) {
                return route('transport.reports', array_merge(request()->query(), [
                    'sort' => $key,
                    'dir' => $dir === 'asc' ? 'desc' : 'asc',
                ]));
            }

            return route('transport.reports', array_merge(request()->query(), ['sort' => $key, 'dir' => 'desc']));
        };

        $arrow = function (string $key) use ($filters) {
            if ($filters['sort'] !== $key) {
                return '↕';
            }

            return $filters['dir'] === 'asc' ? '↑' : '↓';
        };
    @endphp

    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <p class="text-xs font-medium text-muted-foreground">Fuel consumption and cost summary by period and vehicle</p>
                <h1 class="text-lg font-semibold">Fuel Reports</h1>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('transport.reports.csv', request()->query()) }}"
                   class="rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium hover:bg-accent">CSV</a>
                <a href="{{ route('transport.reports.print', request()->query()) }}" target="_blank"
                   class="rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium hover:bg-accent">PDF</a>
            </div>
        </div>

        @include('partials.flashes')

        <form method="get" action="{{ route('transport.reports') }}" class="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-4">
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">From</label>
                <input type="date" name="from" value="{{ $filters['from'] }}"
                       class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">To</label>
                <input type="date" name="to" value="{{ $filters['to'] }}"
                       class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Vehicle</label>
                <select name="vehicle" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    <option value="All" @selected($filters['vehicle'] === 'All')>All Vehicles</option>
                    @foreach ($vehicles as $vehicle)
                        <option value="{{ $vehicle->id }}" @selected((string) $filters['vehicle'] === (string) $vehicle->id)>
                            {{ $vehicle->registration_no }}
                        </option>
                    @endforeach
                </select>
            </div>
            <input type="hidden" name="sort" value="{{ $filters['sort'] }}">
            <input type="hidden" name="dir" value="{{ $filters['dir'] }}">
            <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Apply</button>
            <a href="{{ route('transport.reports') }}" class="h-9 rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Clear</a>
        </form>

        <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
            @foreach ([
                ['label' => 'Total Fuel (L)', 'value' => $litres1($stats['Total Fuel (L)']).' L'],
                ['label' => 'Total Cost', 'value' => $money($stats['Total Cost'])],
                ['label' => 'Avg Cost/L', 'value' => $money($stats['Avg Cost/L'])],
                ['label' => 'Vehicles Fueled', 'value' => $stats['Vehicles Fueled']],
            ] as $stat)
                <div class="rounded-xl border border-border bg-card p-4">
                    <div class="flex flex-col">
                        <span class="text-lg font-semibold leading-tight tabular-nums">{{ $stat['value'] }}</span>
                        <span class="text-xs text-muted-foreground">{{ $stat['label'] }}</span>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="rounded-xl border border-border bg-card">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                            <th class="px-3 py-2">
                                <a href="{{ $toggle('date') }}" class="flex items-center gap-1 uppercase hover:text-foreground">Date {{ $arrow('date') }}</a>
                            </th>
                            <th class="px-3 py-2 font-medium">Vehicle</th>
                            <th class="px-3 py-2 font-medium">Station</th>
                            <th class="px-3 py-2 text-right">
                                <a href="{{ $toggle('litres') }}" class="ml-auto flex items-center gap-1 uppercase hover:text-foreground">Litres {{ $arrow('litres') }}</a>
                            </th>
                            <th class="px-3 py-2 text-right">
                                <a href="{{ $toggle('price_per_litre') }}" class="ml-auto flex items-center gap-1 uppercase hover:text-foreground">Price/L {{ $arrow('price_per_litre') }}</a>
                            </th>
                            <th class="px-3 py-2 text-right">
                                <a href="{{ $toggle('amount') }}" class="ml-auto flex items-center gap-1 uppercase hover:text-foreground">Amount {{ $arrow('amount') }}</a>
                            </th>
                            <th class="px-3 py-2 text-right font-medium">Odometer</th>
                            <th class="px-3 py-2 font-medium">Notes</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $entry)
                            <tr class="border-b last:border-0 hover:bg-accent/40">
                                <td class="px-3 py-2 font-medium">{{ \App\Support\Fmt::day($entry->isoDate()) }}</td>
                                <td class="px-3 py-2 text-muted-foreground">{{ $entry->vehicle?->registration_no ?: '—' }}</td>
                                <td class="px-3 py-2 text-muted-foreground">{{ $entry->station ?: '—' }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ $litres2($entry->litres) }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ $money($entry->price_per_litre) }}</td>
                                <td class="px-3 py-2 text-right font-medium tabular-nums">{{ $money($entry->amount) }}</td>
                                <td class="px-3 py-2 text-right tabular-nums text-muted-foreground">
                                    {{ $entry->odometer === null ? '—' : number_format((float) $entry->odometer) }}
                                </td>
                                <td class="max-w-40 truncate px-3 py-2 text-muted-foreground">{{ $entry->notes ?: '—' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="px-3 py-10 text-center text-sm text-muted-foreground">No fuel entries in the selected period.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="flex items-center justify-between border-t px-4 py-2 text-xs text-muted-foreground">
                <span>
                    {{ $summary['entries'] }} entries &middot;
                    {{ $litres1($summary['litres']) }} L &middot;
                    {{ $money($summary['cost']) }}
                </span>
                <span>{{ $rows->count() }} shown</span>
            </div>
        </div>
    </div>
@endsection