@extends('layouts.app')

@section('title', 'Expenses')

@section('content')
    @php
        $groups = [
            'Utilities' => ['Electricity & Water', 'Internet & Communications'],
            'Supplies' => ['Teaching Materials', 'Kitchen Supplies'],
            'Maintenance' => ['Repairs & Maintenance'],
            'Transport' => ['Transport Costs'],
            'Staff Costs' => ['Teaching Staff Salaries', 'Non-Teaching Staff Salaries', 'Staff Benefits'],
        ];
    @endphp
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Expenses</h1>
            <p class="text-xs text-muted-foreground">Record and manage school expenses with printable vouchers</p>
        </div>

        <div class="grid grid-cols-3 gap-3">
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Total Valid</p>
                <p class="text-lg font-semibold tabular-nums">KES {{ number_format($summary['total'], 2) }}</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Vouchers</p>
                <p class="text-lg font-semibold tabular-nums">{{ $summary['count'] }}</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Voided</p>
                <p class="text-lg font-semibold tabular-nums text-destructive">KES {{ number_format($summary['voided'], 2) }}</p>
            </div>
        </div>

        <details class="rounded-xl border border-border bg-card p-4">
            <summary class="cursor-pointer text-sm font-semibold text-muted-foreground hover:text-foreground">+ Record Expense</summary>
            <form method="post" action="{{ route('finance.expenses.store') }}" class="mt-4 grid gap-3 md:grid-cols-2">
                @csrf
                <label class="text-xs text-muted-foreground">Group
                    <select name="group" id="exp-group" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                        @foreach (array_keys($groups) as $g)
                            <option value="{{ $g }}">{{ $g }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="text-xs text-muted-foreground">Ledger
                    <select name="ledger" id="exp-ledger" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                        @foreach ($groups['Utilities'] as $l)
                            <option value="{{ $l }}">{{ $l }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="text-xs text-muted-foreground">Payee
                    <input type="text" name="payee" required placeholder="e.g. Kenya Power" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                </label>
                <label class="text-xs text-muted-foreground">Amount
                    <input type="number" name="amount" min="1" required class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                </label>
                <label class="text-xs text-muted-foreground">Date
                    <input type="date" name="date" value="{{ now()->toDateString() }}" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                </label>
                <label class="text-xs text-muted-foreground">Mode of Payment
                    <select name="mode_of_payment" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                        @foreach (['Cash', 'Cheque', 'M-Pesa', 'Bank Transfer'] as $m)
                            <option value="{{ $m }}">{{ $m }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="text-xs text-muted-foreground md:col-span-2">Description
                    <input type="text" name="description" placeholder="What was this for?" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                </label>
                <div class="md:col-span-2">
                    <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Record Expense</button>
                </div>
            </form>
        </details>

        <div class="flex flex-wrap items-center gap-3 rounded-xl border border-border bg-card p-3 text-sm">
            <form method="get" class="min-w-52 flex-1">
                <input name="q" value="{{ $q }}" placeholder="Search payee..." class="h-8 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
            </form>
            <form method="get" class="flex items-center gap-2 text-xs text-muted-foreground">
                <select name="mode" onchange="this.form.submit()" class="h-8 rounded-md border border-input bg-transparent px-2 text-sm">
                    <option value="" @selected($mode === '')>All modes</option>
                    @foreach (['Cash', 'Cheque', 'M-Pesa', 'Bank Transfer'] as $m)
                        <option value="{{ $m }}" @selected($mode === $m)>{{ $m }}</option>
                    @endforeach
                </select>
                <select name="status" onchange="this.form.submit()" class="h-8 rounded-md border border-input bg-transparent px-2 text-sm">
                    <option value="" @selected($status === '')>All statuses</option>
                    @foreach (['Valid', 'Voided'] as $s)
                        <option value="{{ $s }}" @selected($status === $s)>{{ $s }}</option>
                    @endforeach
                </select>
            </form>
        </div>

        <section class="rounded-xl border border-border bg-card p-4">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b text-xs uppercase text-muted-foreground">
                        <th class="px-3 py-2 text-left font-medium">Voucher</th>
                        <th class="px-3 py-2 text-left font-medium">Payee</th>
                        <th class="px-3 py-2 text-left font-medium">Ledger</th>
                        <th class="px-3 py-2 text-left font-medium">Date</th>
                        <th class="px-3 py-2 text-left font-medium">Mode</th>
                        <th class="px-3 py-2 text-right font-medium">Amount</th>
                        <th class="px-3 py-2 text-left font-medium">Status</th>
                        <th class="px-3 py-2 text-right font-medium">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($expenses as $e)
                        <tr class="border-b">
                            <td class="px-3 py-2 font-mono text-xs">{{ $e->voucher_no }}</td>
                            <td class="px-3 py-2 font-medium">{{ $e->payee }}</td>
                            <td class="px-3 py-2 text-xs">{{ $e->ledger }}</td>
                            <td class="px-3 py-2">{{ $e->date }}</td>
                            <td class="px-3 py-2">{{ $e->mode_of_payment }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">KES {{ number_format($e->amount, 2) }}</td>
                            <td class="px-3 py-2">
                                <span class="{{ $e->status === 'Voided' ? 'text-destructive' : 'text-primary' }} text-xs font-medium">{{ $e->status }}</span>
                                @if ($e->void_reason)
                                    <span class="block text-[11px] text-muted-foreground" title="{{ $e->void_reason }}">{{ $e->void_reason }}</span>
                                @endif
                            </td>
                            <td class="px-3 py-2">
                                <div class="flex justify-end gap-2 text-xs">
                                    <a href="{{ route('finance.print', ['kind' => 'expense', 'id' => $e->id]) }}" target="_blank" class="rounded-lg border border-border px-2 py-1 hover:bg-accent">PDF</a>
                                    @if ($e->status !== 'Voided')
                                        <details class="relative">
                                            <summary class="cursor-pointer rounded-lg border border-border px-2 py-1 hover:bg-accent">Edit</summary>
                                            <form method="post" action="{{ route('finance.expenses.update', $e->id) }}" class="absolute right-0 top-8 z-10 w-72 rounded-lg border border-border bg-card p-3 shadow-lg">
                                                @csrf @method('PUT')
                                                <input name="payee" value="{{ $e->payee }}" class="h-8 w-full rounded-lg border border-input bg-transparent px-2 text-sm outline-none">
                                                <input name="amount" type="number" value="{{ $e->amount }}" class="mt-2 h-8 w-full rounded-lg border border-input bg-transparent px-2 text-sm outline-none">
                                                <input name="description" value="{{ $e->description }}" class="mt-2 h-8 w-full rounded-lg border border-input bg-transparent px-2 text-sm outline-none">
                                                <button class="mt-2 w-full rounded-lg bg-primary px-2 py-1 text-sm text-primary-foreground">Save</button>
                                            </form>
                                        </details>
                                        <form method="post" action="{{ route('finance.expenses.void', $e->id) }}" onsubmit="return confirm('Void this expense?')">
                                            @csrf
                                            <input type="hidden" name="reason" value="Voided manually">
                                            <button class="rounded-lg border border-destructive/40 px-2 py-1 text-destructive hover:bg-destructive/10">Void</button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-3">{{ $expenses->links() }}</div>
        </section>

        <section class="rounded-xl border border-border bg-card p-4">
            <h2 class="text-sm font-semibold">Spending by Ledger</h2>
            <table class="mt-3 w-full text-sm">
                <thead>
                    <tr class="border-b text-xs uppercase text-muted-foreground">
                        <th class="px-3 py-2 text-left font-medium">Group</th>
                        <th class="px-3 py-2 text-left font-medium">Ledger</th>
                        <th class="px-3 py-2 text-right font-medium">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($ledgerGroups as $g)
                        <tr class="border-b">
                            <td class="px-3 py-2">{{ $g->group }}</td>
                            <td class="px-3 py-2">{{ $g->ledger }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">KES {{ number_format($g->total, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </section>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const groups = @json($groups);
        const g = document.getElementById('exp-group');
        const l = document.getElementById('exp-ledger');
        if (g && l) {
            const render = () => { l.innerHTML = groups[g.value].map((lg) => `<option value="${lg}">${lg}</option>`).join(''); };
            g.addEventListener('change', render);
        }
    });
</script>
@endpush