@extends('layouts.app')

@section('title', 'Income')
@section('page-title', 'Income')

@section('content')
<div class="page-header">
    <div>
        <h1>Income</h1>
        <p class="breadcrumb mb-0">Track your business income</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('income.categories') }}" class="btn btn-outline-secondary">
            <i class="bi bi-tags me-1"></i> Categories
        </a>
        <a href="{{ route('income.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i> Add Income
        </a>
    </div>
</div>

{{-- Filter Bar --}}
<form method="GET" action="{{ route('income.index') }}" class="filter-bar mb-4">
    <label class="text-muted fw-500 small me-1">Filter:</label>
    <select name="month" class="form-select form-select-sm" style="width:160px;">
        <option value="">All Months</option>
        @foreach(range(1,12) as $m)
            <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>
                {{ \Carbon\Carbon::create(null, $m)->format('F') }}
            </option>
        @endforeach
    </select>
    <select name="year" class="form-select form-select-sm" style="width:110px;">
        <option value="">All Years</option>
        @foreach(range(now()->year - 2, now()->year + 1) as $y)
            <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
        @endforeach
    </select>
    <button type="submit" class="btn btn-primary btn-sm">Apply</button>
    @if($month || $year)
        <a href="{{ route('income.index') }}" class="btn btn-outline-secondary btn-sm">Clear</a>
    @endif
</form>

<div class="table-card">
    @if($income->count())
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Category</th>
                    <th>Amount</th>
                    <th>Date</th>
                    <th>Note</th>
                    <th width="120">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($income as $item)
                <tr>
                    <td class="text-muted">{{ $income->firstItem() + $loop->index }}</td>
                    <td>
                        <span class="badge bg-light text-dark border">{{ $item->category->name }}</span>
                    </td>
                    <td class="fw-600 text-success">৳{{ number_format($item->amount, 2) }}</td>
                    <td>{{ $item->date->format('d M Y') }}</td>
                    <td class="text-muted">{{ Str::limit($item->note, 60) ?? '—' }}</td>
                    <td>
                        <div class="action-btns">
                            <a href="{{ route('income.edit', $item->id) }}"
                               class="btn btn-sm btn-outline-primary btn-icon" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form action="{{ route('income.destroy', $item->id) }}" method="POST"
                                  onsubmit="return confirm('Delete this income record?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger btn-icon">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="px-4 py-3 d-flex justify-content-between align-items-center border-top">
        <small class="text-muted">Showing {{ $income->firstItem() }}–{{ $income->lastItem() }} of {{ $income->total() }} records</small>
        {{ $income->links() }}
    </div>
    @else
    <div class="empty-state">
        <div class="empty-icon"><i class="bi bi-arrow-up-circle"></i></div>
        <p>No income records found. <a href="{{ route('income.create') }}">Add an income entry</a>.</p>
    </div>
    @endif
</div>
@endsection