@extends('layouts.app')
@section('title','Expenses')
@section('page_title','Expenses')
@section('content')
@php $canManage = in_array(auth()->user()->role,['owner','manager'],true); @endphp
<div class="page-heading"><div class="mobile-page-title"><h2>{{ auth()->user()->isCashier() ? 'My Expenses' : 'All Expenses' }}</h2><small>{{ number_format($expenses->total()) }} records</small></div><div class="heading-actions">@if($canManage)<x-export-choice route-name="expenses.export.print" :current="request()->except(['page','scope'])" />@endif<a class="btn" href="{{ route('expenses.create') }}">+ Add Expense</a></div></div>
@if(session('status'))<div class="status-box">{{ session('status') }}</div>@endif
@if($errors->any())<div class="error-box">{{ $errors->first() }}</div>@endif

<div class="card filter-card expense-filter-card mobile-collapsible-filter"><button class="mobile-filter-toggle" type="button" data-mobile-filter-toggle aria-controls="expenseFilterForm" aria-expanded="false"><span><strong>Filters</strong><small>Search, category and date range</small></span><b aria-hidden="true">+</b></button><form class="filter-grid expense-filter has-search" id="expenseFilterForm" method="GET" data-live-filter data-live-filter-key="expenses">
    <input class="expense-filter-search" name="search" value="{{ $search }}" placeholder="Expense name, note or staff..." data-live-search autocomplete="off">
    @if($canManage)<select class="expense-filter-archive" name="archive" data-live-select><option value="active" @selected($archive==='active')>Active Records</option><option value="archived" @selected($archive==='archived')>Archived</option></select>@endif
    <select class="expense-filter-category" name="category_id" data-live-select><option value="all">All Categories</option>@foreach($categories as $expenseCategory)<option value="{{ $expenseCategory->id }}" @selected((string)$categoryId === (string)$expenseCategory->id)>{{ $expenseCategory->displayName() }}</option>@endforeach</select>
    <div class="date-range expense-filter-dates"><input type="date" name="date_from" value="{{ $dateFrom }}" aria-label="From date"><span>to</span><input type="date" name="date_to" value="{{ $dateTo }}" aria-label="To date"></div>
    <div class="filter-actions expense-filter-actions"><button class="btn" type="submit">Apply Filters</button><button class="btn-tertiary" type="button" data-filter-clear>Clear</button></div>
</form></div>

<div data-live-results>
    <div class="dashboard-top three expense-summary-cards"><x-stat-card label="Total Expense (Month)" :value="'TZS '.tzs_amount($summary['month_total'])" tone="red" icon="expense" /><x-stat-card label="Today's Expense" :value="'TZS '.tzs_amount($summary['today_total'])" tone="orange" icon="daily" /><x-stat-card label="Average Daily Expense" :value="'TZS '.tzs_amount($summary['average_daily'])" tone="purple" icon="report" /></div>
    <div class="card table-card">
        <div class="table-scroll desktop-record-table"><table class="data-table"><thead><tr><th>Expense Name</th><th>Category</th><th>Amount</th><th>Payment Method</th><th>Date</th><th>Added By</th><th>Actions</th></tr></thead><tbody>
        @forelse($expenses as $expense)<tr><td><strong>{{ $expense->name }}</strong>@if($expense->note)<small>{{ $expense->note }}</small>@endif</td><td>{{ $expense->categoryLabel() }}</td><td><strong>TZS {{ tzs_amount($expense->amount) }}</strong></td><td>{{ $expense->paymentMethodLabel() }}</td><td>{{ $expense->expense_date->format('d M Y') }}</td><td>{{ $expense->user?->displayName() ?? '-' }}</td><td>@if($canManage)<div class="row-actions-primary">@if(!$expense->isArchived())<a class="btn btn-secondary btn-small" href="{{ route('expenses.edit',$expense) }}">Edit</a><details class="row-overflow"><summary title="More actions">•••</summary><div><form method="POST" action="{{ route('archive.store',['type'=>'expense','id'=>$expense->id]) }}" data-reason-prompt="Why are you archiving this expense?" data-dialog-title="Archive expense" data-dialog-danger="1">@csrf<input type="hidden" name="reason"><button type="submit">Archive Expense</button></form></div></details>@else<form method="POST" action="{{ route('archive.restore',['type'=>'expense','id'=>$expense->id]) }}">@csrf @method('DELETE')<button class="btn btn-secondary btn-small" type="submit">Restore</button></form>@endif</div>@else<span class="muted-small">Recorded</span>@endif</td></tr>
        @empty<tr><td colspan="7" class="empty-cell">No expenses match the selected filters.</td></tr>@endforelse
        </tbody></table></div>
        <div class="mobile-record-list">@forelse($expenses as $expense)<article class="mobile-record-card mobile-data-card"><div class="mobile-data-visual mobile-data-visual--expense">{{ strtoupper(substr($expense->categoryLabel(),0,1)) }}</div><div class="mobile-record-head mobile-data-head"><div><h3>{{ $expense->name }}</h3><small>{{ $expense->expense_date->format('d M Y') }} · {{ $expense->categoryLabel() }}</small></div>@if($expense->isArchived())<span class="status-pill status-inactive">Archived</span>@endif</div><div class="mobile-data-body"><div class="mobile-data-keyline"><strong>TZS {{ tzs_amount($expense->amount) }}</strong></div><div class="mobile-data-support"><span>{{ $expense->paymentMethodLabel() }}</span><span>By {{ $expense->user?->displayName() ?? '-' }}</span>@if($expense->note)<span class="mobile-data-truncate">{{ $expense->note }}</span>@endif</div></div><div class="mobile-data-actions">@if($canManage && !$expense->isArchived())<a class="btn btn-small mobile-primary-action" href="{{ route('expenses.edit',$expense) }}">Edit</a>@elseif(!$canManage)<span class="mobile-record-state">Recorded</span>@endif @if($canManage)<details class="mobile-more-menu"><summary title="More expense actions" aria-label="More actions for {{ $expense->name }}">•••</summary><div>@if(!$expense->isArchived())<form method="POST" action="{{ route('archive.store',['type'=>'expense','id'=>$expense->id]) }}" data-reason-prompt="Why are you archiving this expense?" data-dialog-title="Archive expense" data-dialog-danger="1">@csrf<input type="hidden" name="reason"><button type="submit">Archive Expense</button></form>@else<form method="POST" action="{{ route('archive.restore',['type'=>'expense','id'=>$expense->id]) }}">@csrf @method('DELETE')<button type="submit">Restore Expense</button></form>@endif</div></details>@endif</div></article>@empty<div class="empty-state-professional"><div class="empty-icon">E</div><h3>No expenses found</h3><p>Try another date range or record the first expense.</p><a class="btn" href="{{ route('expenses.create') }}">Add Expense</a></div>@endforelse</div>
        <div class="table-footer"><span>Showing {{ $expenses->firstItem() ?? 0 }} to {{ $expenses->lastItem() ?? 0 }} of {{ $expenses->total() }} expenses</span>{{ $expenses->links() }}</div>
    </div>
</div>
<script src="{{ asset('js/live-filter.js') }}?v=10037" defer></script>
@endsection