@extends('layout.layout')

@section('content')
<div class="container my-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h5 class="fw-bold text-primary">💰 Expense Management</h5>
        <a href="{{ route('expenses.create') }}" class="btn btn-success btn-lg shadow-sm">
            <i class="fas fa-plus-circle me-2"></i> Add New Expense
        </a>
    </div>

    {{-- Alert Messages (Keep the existing auto-close logic) --}}
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show auto-close-alert" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif
    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show auto-close-alert" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    {{-- Search/Filter Form ENHANCED --}}
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <form action="{{ route('expenses.index') }}" method="GET" class="row g-3 align-items-center">

                <div class="col-md-6">
                    <label for="search" class="form-label visually-hidden">Search</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" name="search" id="search" class="form-control"
                            placeholder="Search by vendor, payment number, or amount..."
                            value="{{ request('search') }}">
                    </div>
                </div>

                <div class="col-md-3">
                    <label for="status" class="form-label visually-hidden">Status</label>
                    <select name="status" id="status" class="form-select">
                        <option value="">Filter by Status</option>
                        <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Paid</option>
                        <option value="open" {{ request('status') == 'open' ? 'selected' : '' }}>Open</option>
                        <option value="pending_approval" {{ request('status') == 'pending_approval' ? 'selected' : '' }}>Pending Approval</option>
                    </select>
                </div>

                <div class="col-md-3">
                    <label for="recurring" class="form-label visually-hidden">Recurring</label>
                    <select name="recurring" id="recurring" class="form-select">
                        <option value="">Filter by Recurring</option>
                        <option value="yes" {{ request('recurring') == 'yes' ? 'selected' : '' }}>Yes</option>
                        <option value="no" {{ request('recurring') == 'no' ? 'selected' : '' }}>No</option>
                    </select>
                </div>

                <hr class="mt-3 mb-3">

                {{-- Row 2: Date Filters & Actions --}}
                <div class="col-md-3">
                    <label for="start_date" class="form-label fw-semibold text-muted">Date From</label>
                    <input type="date" name="start_date" id="start_date" class="form-control"
                        value="{{ request('start_date') }}">
                </div>

                <div class="col-md-3">
                    <label for="end_date" class="form-label fw-semibold text-muted">Date To</label>
                    <input type="date" name="end_date" id="end_date" class="form-control"
                        value="{{ request('end_date') }}">
                </div>

                {{-- Action Buttons --}}
                <div class="col-md-6 d-grid gap-2 d-md-flex justify-content-md-end pt-3">
                    <button class="btn btn-primary" type="submit"><i class="fas fa-filter"></i> Apply Filters</button>
                    @if(request()->has('search') || request()->has('status') || request()->has('recurring') || request()->has('start_date') || request()->has('end_date'))
                    <a href="{{ route('expenses.index') }}" class="btn btn-outline-danger">Clear Filters</a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    {{-- Expenses Table Card (rest of the table remains the same) --}}
    <div class="card shadow">
        {{-- ... (Table content remains the same) ... --}}
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="fas fa-list-alt me-2"></i> All Recorded Expenses</h5>
        </div>
        <div class="card-body p-0">
            <div style="overFlow:auto !important">
                <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                    <thead class="table-primary">
                        <tr>
                            <th>#ID</th>
                            <th>Payment Number</th>
                            <th>Amount</th>    
                            <th>Item</th>
                            <th>Payment Date</th>
                            <th>Mode</th>
                            <th>Status</th>
                            <th>Recurring</th>
                            <th>Vendors</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($expenses as $expense)
                        <tr>
                            <td>{{ $expense->id }}</td>
                            <td class="fw-bold">{{ $expense->payment_number }}</td>
                            <td><span class="text-success fw-bold">${{ number_format($expense->amount, 2) }}</span></td>
                            <td class="fw-bold">{{ $expense->item_name }}</td>
                            <td>{{ $expense->payment_date->format('M d, Y') }}</td>
                            <td>{{ ucfirst(str_replace('_', ' ', $expense->payment_mode)) }}</td>
                            <td>
                                {{-- Status Badge --}}
                                @php
                                $statusClass = match($expense->status) {
                                'paid' => 'success',
                                'pending_approval' => 'warning',
                                'open' => 'danger',
                                default => 'secondary',
                                };
                                @endphp
                                <span class="badge bg-{{ $statusClass }}">{{ ucfirst(str_replace('_', ' ', $expense->status)) }}</span>
                            </td>
                            <td>
                                {{-- Recurring Badge --}}
                                @php
                                $recurringClass = ($expense->recurring === 'yes') ? 'info' : 'secondary';
                                @endphp
                                <span class="badge bg-{{ $recurringClass }}">{{ ucfirst($expense->recurring) }}</span>
                            </td>
                            <td>
                                @foreach(array_map('trim', explode(',', $expense->vendors)) as $vendor)
                                <span class="badge bg-primary me-1">{{ $vendor }}</span>
                                @endforeach
                            </td>
                            <td class="text-center">
                                <a href="{{ route('expenses.show', $expense->id) }}" class="btn btn-sm btn-outline-info" title="View Details">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('expenses.edit', $expense->id) }}" class="btn btn-sm btn-outline-warning mx-1" title="Edit Expense">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('expenses.destroy', $expense->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete expense ID: {{ $expense->id }}? This action cannot be undone.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete Expense">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="9" class="text-center py-4 text-muted">
                                <i class="fas fa-exclamation-circle me-2"></i> No expenses found. Click 'Add New Expense' to get started.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer text-muted">
            Displaying {{ $expenses->count() }} expenses.
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const autoCloseAlerts = document.querySelectorAll('.auto-close-alert');
        autoCloseAlerts.forEach(function(alertElement) {
            setTimeout(function() {
                if (typeof bootstrap !== 'undefined' && bootstrap.Alert) {
                    const alert = new bootstrap.Alert(alertElement);
                    alert.close();
                } else {
                    alertElement.style.display = 'none';
                }
            }, 10000);
        });
    });
</script>
@endsection