@extends('layouts.app')

@section('title', 'Vote Book')

@section('content')
    @php
        $money = fn ($v) => \App\Support\Fmt::money($v);
        $sel = 'h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50';
        $totals = [
            'amount' => $all->sum('amount'),
            'committed' => $all->sum('committed'),
            'spent' => $all->sum('spent'),
            'available' => $all->sum(fn ($v) => $v->available()),
        ];
    @endphp
    <div class="flex flex-col gap-6">
        <div class="flex flex-wrap items-end justify-between gap-3">
            <div>
                <p class="text-xs font-medium text-muted-foreground">Departmental votes, what is committed against them and what remains</p>
                <h1 class="text-lg font-semibold">Vote Book</h1>
            </div>
            <a href="{{ route('kitchen.vote-book.csv', array_filter($filters, fn ($v) => $v !== 'all' && $v !== '')) }}"
               class="flex h-9 items-center rounded-lg border border-border px-3 text-sm hover:bg-accent">CSV</a>
        </div>

        @include('partials.flashes')

        <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
            @foreach ([
                ['label' => 'Allocated', 'value' => $money($totals['amount'])],
                ['label' => 'Committed on approved PRs', 'value' => $money($totals['committed'])],
                ['label' => 'Spent', 'value' => $money($totals['spent'])],
                ['label' => 'Available', 'value' => $money($totals['available'])],
            ] as $card)
                <div class="rounded-xl border border-border bg-card p-4">
                    <span class="block text-lg font-semibold tabular-nums">{{ $card['value'] }}</span>
                    <span class="block text-xs text-muted-foreground">{{ $card['label'] }}</span>
                </div>
            @endforeach
        </div>

        <div class="rounded-xl border border-border bg-card">
            <form method="get" action="{{ route('kitchen.vote-book') }}" class="flex flex-wrap items-end gap-3 border-b border-border p-4">
                <div class="min-w-48 flex-1">
                    <x-field label="Search"><x-input name="q" value="{{ $filters['q'] }}" placeholder="Vote, department, period" /></x-field>
                </div>
                <div class="min-w-36">
                    <x-field label="Status">
                        <select name="status" class="{{ $sel }}">
                            <option value="all">All statuses</option>
                            @foreach ($statuses as $s)
                                <option value="{{ $s }}" @selected($filters['status'] === $s)>{{ $s }}</option>
                            @endforeach
                        </select>
                    </x-field>
                </div>
                <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground">Filter</button>
                <a href="{{ route('kitchen.vote-book') }}"
                   class="flex h-9 items-center rounded-lg border border-border px-3 text-sm hover:bg-accent">Reset</a>
            </form>

            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-border text-left text-xs text-muted-foreground">
                            <th class="px-4 py-2 font-medium">Vote</th>
                            <th class="px-4 py-2 font-medium">Department</th>
                            <th class="px-4 py-2 font-medium">Period</th>
                            <th class="px-4 py-2 text-right font-medium">Amount</th>
                            <th class="px-4 py-2 text-right font-medium">Committed</th>
                            <th class="px-4 py-2 text-right font-medium">Spent</th>
                            <th class="px-4 py-2 text-right font-medium">Available</th>
                            <th class="px-4 py-2 font-medium">Utilisation</th>
                            <th class="px-4 py-2 font-medium">Status</th>
                            <th class="px-4 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $v)
                            <tr class="border-b border-border/60 align-top last:border-0">
                                <td class="px-4 py-2 font-medium">{{ $v->name }}</td>
                                <td class="px-4 py-2">{{ $v->department }}</td>
                                <td class="px-4 py-2 text-xs">{{ $v->period }}</td>
                                <td class="px-4 py-2 text-right tabular-nums">{{ $money($v->amount) }}</td>
                                <td class="px-4 py-2 text-right tabular-nums">{{ $money($v->committed) }}</td>
                                <td class="px-4 py-2 text-right tabular-nums">{{ $money($v->spent) }}</td>
                                <td class="px-4 py-2 text-right font-semibold tabular-nums">{{ $money($v->available()) }}</td>
                                <td class="px-4 py-2 text-xs tabular-nums">{{ \App\Support\Fmt::plain($v->utilisationPct(), 1) }}%</td>
                                <td class="px-4 py-2">@include('kitchen.partials.badge', ['status' => $v->status])</td>
                                <td class="px-4 py-2 text-right">
                                    <form method="post" action="{{ route('kitchen.vote-book.toggle', $v) }}">
                                        @csrf
                                        <button class="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-accent">
                                            {{ $v->isClosed() ? 'Reopen' : 'Close' }}
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @if ($v->purchaseRequisitions->isNotEmpty())
                                <tr class="border-b border-border/60 bg-muted/20 last:border-0">
                                    <td colspan="10" class="px-4 py-2">
                                        <details class="rounded-lg border border-border p-2">
                                            <summary class="cursor-pointer text-[11px] font-semibold text-muted-foreground">
                                                {{ $v->purchaseRequisitions->count() }} requisition(s) drawn on this vote
                                            </summary>
                                            <table class="mt-2 w-full text-xs">
                                                <thead>
                                                    <tr class="border-b border-border text-left text-muted-foreground">
                                                        <th class="py-1 font-medium">PR</th>
                                                        <th class="py-1 font-medium">Raised by</th>
                                                        <th class="py-1 text-right font-medium">Estimate</th>
                                                        <th class="py-1 font-medium">Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($v->purchaseRequisitions as $pr)
                                                        <tr class="border-b border-border/40 last:border-0">
                                                            <td class="py-1 font-mono">
                                                                <a href="{{ route('kitchen.purchase-requisition', ['q' => $pr->pr_no]) }}" class="text-primary hover:underline">{{ $pr->pr_no }}</a>
                                                            </td>
                                                            <td class="py-1">{{ $pr->raised_by }}</td>
                                                            <td class="py-1 text-right tabular-nums">{{ $money($pr->estimate) }}</td>
                                                            <td class="py-1">@include('kitchen.partials.badge', ['status' => $pr->status])</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </details>
                                    </td>
                                </tr>
                            @endif
                        @empty
                            <tr><td colspan="10" class="px-4 py-8 text-center text-muted-foreground">No votes match these filters.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <div class="border-b border-border px-4 py-3">
                <h2 class="text-sm font-semibold">New vote</h2>
            </div>
            <form method="post" action="{{ route('kitchen.vote-book.store') }}" class="grid gap-3 p-4 md:grid-cols-5">
                @csrf
                <div class="md:col-span-2">
                    <x-field label="Vote name *" required><x-input name="name" placeholder="e.g. Kitchen consumables" required /></x-field>
                </div>
                <x-field label="Department *" required><x-input name="department" placeholder="e.g. Kitchen" required /></x-field>
                <x-field label="Period *" required><x-input name="period" placeholder="e.g. Term 1" required /></x-field>
                <x-field label="Amount *" required><x-input type="number" step="0.01" min="0" name="amount" required /></x-field>
                <div class="flex items-end">
                    <button class="h-9 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground">Create vote</button>
                </div>
            </form>
        </div>
    </div>
@endsection