@extends('layouts.app')

@section('title', 'Expenses')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="h4 mb-0">Expenses</h2>
    <a href="{{ route('expenses.create') }}" class="btn btn-primary d-flex align-items-center">
        <i class="fas fa-plus me-2"></i> Record New Expense
    </a>
</div>

<div class="card stat-card border-0 shadow-sm">
    <div class="card-body p-4">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Filters -->
        <form action="{{ route('expenses.index') }}" method="GET" class="row g-3 mb-4 align-items-end">
            <div class="col-md-3">
                <label class="form-label small text-muted fw-bold text-uppercase">Status</label>
                <select name="status" class="form-select">
                    <option value="">All Statuses</option>
                    <option value="unbilled" {{ request('status') == 'unbilled' ? 'selected' : '' }}>Unbilled</option>
                    <option value="invoiced" {{ request('status') == 'invoiced' ? 'selected' : '' }}>Invoiced</option>
                    <option value="reimbursed" {{ request('status') == 'reimbursed' ? 'selected' : '' }}>Reimbursed</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small text-muted fw-bold text-uppercase">Category</label>
                <select name="category_id" class="form-select">
                    <option value="">All Categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-light w-100 border">Filter</button>
            </div>
            @if(request()->anyFilled(['status', 'category_id']))
                <div class="col-md-1">
                    <a href="{{ route('expenses.index') }}" class="btn btn-link px-0">Clear</a>
                </div>
            @endif
        </form>

        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light text-muted small text-uppercase">
                    <tr>
                        <th>Date</th>
                        <th>Category</th>
                        <th>Vendor</th>
                        <th>Amount</th>
                        <th>Payment Mode</th>
                        <th>Status</th>
                        <th class="text-center">Receipt</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($expenses as $expense)
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($expense->date)->format('d M Y') }}</td>
                            <td><span class="fw-bold">{{ $expense->category->name }}</span></td>
                            <td>{{ $expense->vendor ? $expense->vendor->name : 'N/A' }}</td>
                            <td class="fw-bold text-dark">{{ formatCurrency($expense->amount) }}</td>
                            <td>
                                <span class="badge bg-light text-dark border px-2 py-1">
                                    {{ $expense->payment_mode }}
                                </span>
                            </td>
                            <td>
                                @php
                                    $badgeClass = [
                                        'unbilled' => 'bg-light-warning text-warning',
                                        'invoiced' => 'bg-light-success text-success',
                                        'reimbursed' => 'bg-light-info text-info'
                                    ][$expense->status] ?? 'bg-light-secondary text-secondary';
                                @endphp
                                <span class="badge {{ $badgeClass }} px-2 py-1 text-uppercase" style="font-size: 0.7rem;">
                                    {{ $expense->status }}
                                </span>
                            </td>
                            <td class="text-center">
                                @if($expense->receipts->count() > 0)
                                    <a href="{{ Storage::url($expense->receipts->first()->file_path) }}" target="_blank" class="text-primary">
                                        <i class="fas fa-paperclip"></i>
                                    </a>
                                @else
                                    <span class="text-muted small">-</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <div class="dropdown">
                                    <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                        Actions
                                    </button>
                                    <ul class="dropdown-menu shadow-sm">
                                        <li><a class="dropdown-item small" href="{{ route('expenses.show', $expense) }}"><i class="fas fa-eye me-2 text-info"></i> View</a></li>
                                        <li><a class="dropdown-item small" href="{{ route('expenses.edit', $expense) }}"><i class="fas fa-edit me-2 text-warning"></i> Edit</a></li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item small text-danger" href="#" onclick="if(confirm('Delete this expense?')) { document.getElementById('delete-exp-{{ $expense->id }}').submit(); } return false;">
                                                <i class="fas fa-trash-alt me-2"></i> Delete
                                            </a>
                                            <form id="delete-exp-{{ $expense->id }}" action="{{ route('expenses.destroy', $expense) }}" method="POST" style="display: none;">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted small">
                                No expenses found. <a href="{{ route('expenses.create') }}">Record your first expense</a>.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            {{ $expenses->appends(request()->query())->links() }}
        </div>
    </div>
</div>
@endsection