@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>Petty Cash Management</h2>
                <div>
                    @can('create-petty-cash-fund')
                        <a href="{{ route('petty-cash.create') }}" class="btn btn-primary">Create New Fund</a>
                    @endcan
                    @can('approve-transaction')
                        <a href="{{ route('petty-cash.pending-approvals') }}" class="btn btn-warning">
                            Pending Approvals
                            <span class="badge badge-light">{{ \App\Models\PettyCashTransaction::pending()->count() }}</span>
                        </a>
                    @endcan
                    <a href="{{ route('petty-cash.report') }}" class="btn btn-secondary">View Reports</a>
                </div>
            </div>

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <div class="row">
                @forelse($funds as $fund)
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">{{ $fund->name }}</h5>
                                <small class="text-muted">
                                    Pending: {{ $fund->transactions()->pending()->count() }} |
                                    Approved: {{ $fund->transactions()->approved()->count() }}
                                </small>
                            </div>
                            <div class="card-body">
                                <p class="card-text">{{ $fund->description }}</p>
                                <p><strong>Custodian:</strong> {{ $fund->custodian->name }}</p>
                                <p><strong>Current Balance:</strong> UGX {{ number_format($fund->current_balance, 2) }}</p>
                                <p><strong>Initial Amount:</strong> UGX {{ number_format($fund->initial_amount, 2) }}</p>
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('petty-cash.add-transaction', $fund) }}" class="btn btn-success btn-sm">Add Transaction</a>
                                    <a href="{{ route('petty-cash.show', $fund) }}" class="btn btn-primary btn-sm">View Details</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info text-center">
                            <h4>No Petty Cash Funds Found</h4>
                            <p>Get started by creating your first petty cash fund.</p>
                            @can('create-petty-cash-fund')
                                <a href="{{ route('petty-cash.create') }}" class="btn btn-primary">Create Fund</a>
                            @endcan
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection