@extends('layouts.app')
@section('title', __('Expenses'))
@section('content')
<div class="row g-3">
    <div class="col-lg-4">
        <div class="card"><div class="card-body p-4">
            <h6>{{ __('Record Expense') }}</h6>
            <form method="POST" action="{{ route('expenses.store') }}">
                @csrf
                <label class="form-label mt-2">{{ __('Category') }}</label>
                <input name="category" class="form-control" placeholder="Transport, rent, salary..." required>
                <label class="form-label mt-3">{{ __('Amount') }}</label>
                <input name="amount" type="number" min="0.01" step="0.01" class="form-control" required>
                <label class="form-label mt-3">{{ __('Currency') }}</label>
                <select name="currency_code" class="form-select">@foreach($currencies as $currency)<option value="{{ $currency->code }}" @selected($currency->is_default)>{{ $currency->code }}</option>@endforeach</select>
                <label class="form-label mt-3">{{ __('Date') }}</label>
                <input name="expense_date" type="date" class="form-control" value="{{ now()->toDateString() }}">
                <select name="method" class="form-select mt-3"><option value="cash">{{ __('Cash') }}</option><option value="bank">{{ __('Bank') }}</option><option value="mobile">{{ __('Mobile Money') }}</option><option value="other">{{ __('Other') }}</option></select>
                <textarea name="notes" class="form-control mt-3" rows="2" placeholder="{{ __('Notes') }}"></textarea>
                <button class="btn btn-success w-100 mt-3">{{ __('Save Expense') }}</button>
            </form>
        </div></div>
    </div>
    <div class="col-lg-8">
        <div class="card"><div class="card-body">
            <table class="table align-middle">
                <thead><tr><th>{{ __('Date') }}</th><th>{{ __('Category') }}</th><th>{{ __('Amount') }}</th><th>{{ __('Method') }}</th><th class="text-end">{{ __('Actions') }}</th></tr></thead>
                <tbody>
                @forelse($expenses as $expense)
                    <tr>
                        <td>{{ $expense->expense_date->format('d M Y') }}</td>
                        <td>{{ $expense->category }}<small class="d-block text-muted">{{ $expense->notes }}</small></td>
                        <td>{{ number_format($expense->amount,2) }} {{ $expense->currency_code }}</td>
                        <td>{{ ucfirst($expense->method) }}</td>
                        <td class="text-end">
                            <button type="button" class="btn btn-light btn-sm" data-mdb-toggle="modal" data-mdb-target="#expenseView{{ $expense->id }}" title="{{ __('View') }}"><i class="fa-solid fa-eye"></i></button>
                            <button type="button" class="btn btn-light btn-sm" data-mdb-toggle="modal" data-mdb-target="#expenseEdit{{ $expense->id }}" title="{{ __('Edit') }}"><i class="fa-solid fa-pen"></i></button>
                            <form class="d-inline" method="POST" action="{{ route('expenses.destroy',$expense) }}" onsubmit="return confirm('{{ __('Delete this expense?') }}')">@csrf @method('DELETE')<button class="btn btn-light btn-sm text-danger" title="{{ __('Delete') }}"><i class="fa-solid fa-trash"></i></button></form>
                        </td>
                    </tr>
                    <div class="modal fade" id="expenseView{{ $expense->id }}" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">{{ __('Expense Details') }}</h5><button type="button" class="btn-close" data-mdb-dismiss="modal"></button></div><div class="modal-body"><dl class="row mb-0"><dt class="col-4">{{ __('Date') }}</dt><dd class="col-8">{{ $expense->expense_date->format('d M Y') }}</dd><dt class="col-4">{{ __('Category') }}</dt><dd class="col-8">{{ $expense->category }}</dd><dt class="col-4">{{ __('Amount') }}</dt><dd class="col-8">{{ number_format($expense->amount,2) }} {{ $expense->currency_code }}</dd><dt class="col-4">{{ __('Method') }}</dt><dd class="col-8">{{ ucfirst($expense->method) }}</dd><dt class="col-4">{{ __('Notes') }}</dt><dd class="col-8">{{ $expense->notes ?: '-' }}</dd></dl></div></div></div></div>
                    <div class="modal fade" id="expenseEdit{{ $expense->id }}" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form method="POST" action="{{ route('expenses.update',$expense) }}">@csrf @method('PUT')<div class="modal-header"><h5 class="modal-title">{{ __('Edit Expense') }}</h5><button type="button" class="btn-close" data-mdb-dismiss="modal"></button></div><div class="modal-body"><input name="category" class="form-control mb-2" value="{{ $expense->category }}" required><input name="amount" type="number" min="0.01" step="0.01" class="form-control mb-2" value="{{ $expense->amount }}" required><select name="currency_code" class="form-select mb-2">@foreach($currencies as $currency)<option value="{{ $currency->code }}" @selected($expense->currency_code === $currency->code)>{{ $currency->code }}</option>@endforeach</select><input name="expense_date" type="date" class="form-control mb-2" value="{{ $expense->expense_date->toDateString() }}"><select name="method" class="form-select mb-2">@foreach(['cash','bank','mobile','other'] as $method)<option value="{{ $method }}" @selected($expense->method === $method)>{{ __(ucfirst($method)) }}</option>@endforeach</select><textarea name="notes" class="form-control" rows="2">{{ $expense->notes }}</textarea></div><div class="modal-footer"><button type="button" class="btn btn-light" data-mdb-dismiss="modal">{{ __('Cancel') }}</button><button class="btn btn-success">{{ __('Save Changes') }}</button></div></form></div></div></div>
                @empty
                    <tr><td colspan="5" class="text-center text-muted py-5">{{ __('No expenses yet.') }}</td></tr>
                @endforelse
                </tbody>
            </table>
            {{ $expenses->links('pagination::bootstrap-5') }}
        </div></div>
    </div>
</div>
@endsection