@extends('layouts.main')
@section('title', 'Expenses')
@section('content')
<div class="flex justify-between items-center mb-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white"><i class="fas fa-receipt mr-2 text-indigo-600 dark:text-indigo-400"></i>Expenses</h2>
    <a href="{{ route('expenses.create') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition"><i class="fas fa-plus mr-2"></i>Add Expense</a>
</div>
@if(session('success'))
    <div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 px-4 py-3 rounded mb-4">{{ session('success') }}</div>
@endif
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
    <table class="w-full">
        <thead><tr class="text-left text-gray-500 dark:text-gray-400 text-sm border-b dark:border-gray-700"><th class="pb-3"><i class="fas fa-calendar mr-1"></i>Date</th><th class="pb-3"><i class="fas fa-box mr-1"></i>Product</th><th class="pb-3"><i class="fas fa-tags mr-1"></i>Category</th><th class="pb-3"><i class="fas fa-align-left mr-1"></i>Description</th><th class="pb-3"><i class="fas fa-dollar-sign mr-1"></i>Amount</th><th class="pb-3"><i class="fas fa-flag mr-1"></i>Status</th><th class="pb-3"><i class="fas fa-cogs mr-1"></i>Actions</th></tr></thead>
        <tbody>
            @forelse($expenses as $expense)
            <tr class="border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
                <td class="py-3 text-gray-800 dark:text-white">{{ \Carbon\Carbon::parse($expense->expense_date)->format('Y-m-d') }}</td>
                <td class="py-3 text-gray-600 dark:text-gray-400">{{ $expense->product->name ?? '-' }}</td>
                <td class="py-3 text-gray-800 dark:text-white">{{ $expense->category }}</td>
                <td class="py-3 text-gray-600 dark:text-gray-400">{{ $expense->description ?? '-' }}</td>
                <td class="py-3 text-gray-800 dark:text-white">${{ number_format($expense->amount, 2) }}</td>
                <td class="py-3">
                    @if($expense->status === 'paid')
                        <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded text-xs">Paid</span>
                    @else
                        <span class="bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 px-2 py-1 rounded text-xs">Unpaid</span>
                    @endif
                </td>
                <td class="py-3">
                    <a href="{{ route('expenses.edit', $expense) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 mr-3"><i class="fas fa-edit"></i> Edit</a>
                    <form action="{{ route('expenses.destroy', $expense) }}" method="POST" class="inline">@csrf @method('DELETE')<button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300" onclick="return confirm('Are you sure?')"><i class="fas fa-trash"></i> Delete</button></form>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" class="py-3 text-center text-gray-500 dark:text-gray-400">No expenses found</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection