@extends('layouts.app')
@section('title', 'Expenses')

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Expenses</h1>
            <p class="text-sm text-ink-muted">Electricity, salaries, supplies and more — routed through manager approval.</p>
        </div>
        @can('expenses.create')
        <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-new-expense')"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Record expense</button>
        @endcan
    </div>

    <div class="flex gap-2 overflow-x-auto">
        @foreach (['' => 'All', 'pending' => 'Pending', 'approved' => 'Approved', 'rejected' => 'Rejected'] as $val => $lbl)
            <a href="{{ request()->fullUrlWithQuery(['status' => $val ?: null]) }}" class="btn-sm {{ request('status', '') === $val ? 'btn-primary' : 'btn-secondary' }}">{{ $lbl }}</a>
        @endforeach
    </div>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Date</th><th>Category</th><th>Payee</th><th class="text-right">Amount</th><th>Method</th><th>Status</th><th>Logged by</th><th></th></tr></thead>
            <tbody>
                @forelse ($expenses as $expense)
                    <tr>
                        <td>{{ $expense->expense_date->format('d M Y') }}</td>
                        <td>{{ $expense->category->name }}</td>
                        <td>{{ $expense->payee ?? '—' }}</td>
                        <td class="text-right font-semibold">{{ number_format($expense->amount, 2) }}</td>
                        <td>{{ $expense->paymentMethod->name ?? ucfirst($expense->payment_method) }}</td>
                        <td><x-badge :color="$expense->status->badgeColor()">{{ ucfirst($expense->status->value) }}</x-badge></td>
                        <td>{{ $expense->user->name }}</td>
                        <td class="text-right">
                            @if ($expense->status->value === 'pending' && auth()->user()->can('expenses.approve'))
                                <div class="flex justify-end gap-1.5">
                                    <form method="POST" action="{{ route('expenses.approve', $expense) }}">@csrf<button class="btn-ghost btn-sm text-success">Approve</button></form>
                                    <form method="POST" action="{{ route('expenses.reject', $expense) }}">@csrf<button class="btn-ghost btn-sm text-danger">Reject</button></form>
                                </div>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="text-center text-ink-muted py-8">No expenses recorded.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $expenses->links() }}

    <x-modal id="new-expense" title="Record expense">
        <form method="POST" action="{{ route('expenses.store') }}" enctype="multipart/form-data" id="new-expense-form" class="space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="field-label">Category</label>
                    <select name="expense_category_id" class="input" required>
                        @foreach ($categories as $cat)
                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="field-label">Date</label>
                    <input type="date" name="expense_date" value="{{ date('Y-m-d') }}" class="input" required>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="field-label">Amount</label>
                    <input type="number" step="0.01" name="amount" class="input" required>
                </div>
                <div>
                    <label class="field-label">Payment method</label>
                    <select name="payment_method_id" class="input">
                        @foreach ($paymentMethods as $method)
                            <option value="{{ $method->id }}">{{ $method->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div><label class="field-label">Payee / Supplier</label><input type="text" name="payee" class="input"></div>
            <div><label class="field-label">Description</label><textarea name="description" class="input" rows="2"></textarea></div>
            <div><label class="field-label">Attachment (receipt)</label><input type="file" name="attachment" class="input"></div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="new-expense-form" class="btn-primary">Save expense</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection