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

@push('styles')
<style>
.expenses-filter-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) minmax(130px, .7fr) minmax(150px, .85fr) minmax(145px, .75fr) minmax(145px, .75fr) auto;
    align-items: center;
    gap: 8px;
}

.expenses-filter-row .mf-input,
.expenses-filter-row .mf-select {
    width: 100%;
    min-width: 0;
}

.expenses-filter-row .mf-btn {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .expenses-filter-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .expenses-filter-row {
        grid-template-columns: 1fr;
    }

    .expenses-filter-row .mf-btn {
        width: 100%;
    }
}
</style>
@endpush

@section('content')
<x-ui.page-toolbar title="Expense Management" description="Approval-controlled operating expenses with account and ledger posting." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Expenses']]">
    <x-slot:actions>
        @if(auth()->user()->can('expenses.recurring.manage'))<a class="mf-btn" href="{{ route('recurring-expenses.index') }}">Recurring</a>@endif
        @if(auth()->user()->can('expenses.categories.manage'))<a class="mf-btn" href="{{ route('expense-categories.index') }}">Categories</a>@endif
        @if(auth()->user()->can('expenses.create'))<a class="mf-btn mf-btn-primary" href="{{ route('expenses.create') }}">New Expense</a>@endif
    </x-slot:actions>
</x-ui.page-toolbar>

<div class="grid gap-3 md:grid-cols-3 mb-4">
    <div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Pending approval</div><div class="mt-1 text-xl font-semibold">{{ number_format((float)$summary['pending'],2) }}</div></div>
    <div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Approved / posted</div><div class="mt-1 text-xl font-semibold">{{ number_format((float)$summary['approved'],2) }}</div></div>
    <div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Rejected</div><div class="mt-1 text-xl font-semibold">{{ number_format((float)$summary['rejected'],2) }}</div></div>
</div>

<form method="GET" class="mf-card mf-card-body mb-4">
    <div class="expenses-filter-row">
        <input class="mf-input" name="search" value="{{ request('search') }}" placeholder="Expense number, supplier or description">
        <select class="mf-select" name="status"><option value="">All statuses</option>@foreach(['pending'=>'Pending','approved'=>'Approved','rejected'=>'Rejected'] as $value=>$label)<option value="{{ $value }}" @selected(request('status')===$value)>{{ $label }}</option>@endforeach</select>
        <select class="mf-select" name="category_id"><option value="">All categories</option>@foreach($categories as $category)<option value="{{ $category->id }}" @selected((string)request('category_id')===(string)$category->id)>{{ $category->name }}</option>@endforeach</select>
        <input class="mf-input" type="date" name="from" value="{{ request('from') }}">
        <input class="mf-input" type="date" name="to" value="{{ request('to') }}">
        <button class="mf-btn mf-btn-primary">Apply filters</button>
    </div>
</form>

<div class="mf-card">
    <div class="mf-table-frame border-0"><table class="mf-table" data-standard-table>
        <thead><tr><th>Expense</th><th>Date</th><th>Category</th><th>Description / Supplier</th><th>Paid-from account</th><th>Amount</th><th>Status</th><th>Entered by</th><th></th></tr></thead>
        <tbody>
        @forelse($expenses as $expense)
            <tr>
                <td class="font-medium">{{ $expense->expense_number }}</td>
                <td>{{ $expense->expense_date->format('d M Y') }}</td>
                <td>{{ $expense->category->name }}</td>
                <td>{{ $expense->description }}<div class="text-xs text-muted-foreground">{{ $expense->supplier ?: 'No supplier' }}</div></td>
                <td>{{ $expense->financialAccount->name }}<div class="text-xs text-muted-foreground">{{ $expense->branch->name }}</div></td>
                <td class="font-semibold">{{ number_format((float)$expense->amount,2) }}</td>
                <td><span class="mf-badge {{ $expense->status==='approved'?'mf-badge-success':($expense->status==='rejected'?'mf-badge-danger':'mf-badge-warning') }}">{{ ucfirst($expense->status) }}</span></td>
                <td>{{ $expense->enteredBy?->name ?? '—' }}</td>
                <td class="text-right"><a class="mf-btn" href="{{ route('expenses.show',$expense) }}">Open</a></td>
            </tr>
        @empty<tr><td colspan="9" class="text-center text-muted-foreground">No expenses match the selected filters.</td></tr>@endforelse
        </tbody>
    </table></div>
</div>
<div class="mt-4">{{ $expenses->links() }}</div>
@endsection