@extends('layouts.app')

@section('content')
<div class="container-wrapper">
    <nav aria-label="breadcrumb" class="mb-2">
        <ol class="breadcrumb mb-0 small text-uppercase fw-bold letter-spacing-1">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none text-muted">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-muted">Accountant</a></li>
            <li class="breadcrumb-item active text-primary" aria-current="page">Budgets</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-4 px-3">
        <div>
            <h2 class="h3 font-weight-bold text-dark mb-1">Budget Management</h2>
            <p class="text-muted small mb-0">Plan and track your business goals.</p>
        </div>
        <a href="{{ route('accountant.budgets.create') }}" class="btn btn-primary shadow-sm rounded-3 px-4 fw-bold">
            <i class="fas fa-plus me-2"></i> New Budget
        </a>
    </div>

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden mx-3">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light bg-opacity-50">
                    <tr>
                        <th class="ps-4 border-0 small fw-bold text-muted text-uppercase">Budget Name</th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Period</th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Start / End Date</th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Status</th>
                        <th class="text-end pe-4 border-0"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($budgets as $budget)
                    <tr>
                        <td class="ps-4">
                            <div class="fw-bold text-dark">{{ $budget->name }}</div>
                        </td>
                        <td>
                            <span class="badge bg-light text-primary border border-primary px-3 rounded-pill">{{ ucfirst($budget->period) }}</span>
                        </td>
                        <td>
                            <div class="small fw-bold text-dark">{{ date('M d, Y', strtotime($budget->start_date)) }}</div>
                            <div class="text-muted xx-small">to {{ date('M d, Y', strtotime($budget->end_date)) }}</div>
                        </td>
                        <td>
                            @php $now = date('Y-m-d'); @endphp
                            @if($now >= $budget->start_date && $now <= $budget->end_date)
                                <span class="badge bg-success bg-opacity-10 text-success border border-success px-3 rounded-pill">Active</span>
                            @elseif($now < $budget->start_date)
                                <span class="badge bg-info bg-opacity-10 text-info border border-info px-3 rounded-pill">Upcoming</span>
                            @else
                                <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary px-3 rounded-pill">Completed</span>
                            @endif
                        </td>
                        <td class="text-end pe-4">
                            <a href="{{ route('accountant.budgets.show', $budget) }}" class="btn btn-sm btn-outline-primary fw-bold px-3 rounded-3">
                                <i class="fas fa-chart-pie me-2"></i> View Report
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-5">
                            <div class="mb-3 opacity-25"><i class="fas fa-file-invoice-dollar fa-4x text-muted"></i></div>
                            <h5 class="text-muted">No budgets created yet.</h5>
                            <p class="text-muted small">Start planning your business financials today.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection