@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">
                <div>
                    <h2>{{ $fund->name }}</h2>
                    <p class="text-muted mb-0">{{ $fund->description }}</p>
                    <small class="text-muted">Custodian: {{ $fund->custodian->name }}</small>
                </div>
                <div>
                    <a href="{{ route('petty-cash.add-transaction', $fund) }}" class="btn btn-success">
                        <i class="fas fa-plus"></i> Add Transaction
                    </a>
                    @can('edit-petty-cash-fund')
                        <a href="{{ route('petty-cash.edit', $fund) }}" class="btn btn-primary">
                            <i class="fas fa-edit"></i> Edit Fund
                        </a>
                    @endcan
                    @can('reconcile-petty-cash')
                        <a href="{{ route('petty-cash.reconcile', $fund) }}" class="btn btn-warning">
                            <i class="fas fa-balance-scale"></i> Reconcile
                        </a>
                    @endcan
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-tools"></i> Tools
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('petty-cash.diagnostics', $fund) }}">Diagnostics</a></li>
                            <li><a class="dropdown-item" href="{{ route('petty-cash.verify-integrity', $fund) }}">Verify Integrity</a></li>
                            <li><a class="dropdown-item" href="{{ route('petty-cash.balance-history', $fund) }}">Balance History</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="{{ route('petty-cash.auto-reconcile', $fund) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="dropdown-item" 
                                            onclick="return confirm('This will automatically fix the balance based on approved transactions. Continue?')">
                                        Auto-Fix Balance
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </div>
                    <a href="{{ route('petty-cash.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back
                    </a>
                </div>
            </div>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show">
                    <i class="fas fa-check-circle"></i> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif
            
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show">
                    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- Fund Summary Cards -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <h6 class="text-white-50 mb-0">Current Balance</h6>
                            <h2 class="mb-0">UGX {{ number_format($fund->current_balance, 2) }}</h2>
                            @if($fund->needsReconciliation())
                                <small><i class="fas fa-exclamation-triangle"></i> Needs reconciliation</small>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-secondary text-white">
                        <div class="card-body">
                            <h6 class="text-white-50 mb-0">Initial Amount</h6>
                            <h2 class="mb-0">UGX {{ number_format($fund->initial_amount, 2) }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-danger text-white">
                        <div class="card-body">
                            <h6 class="text-white-50 mb-0">Total Expenses</h6>
                            <h2 class="mb-0">UGX {{ number_format($fund->total_expenses, 2) }}</h2>
                            <small>{{ $fund->expenses()->count() }} transactions</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <h6 class="text-white-50 mb-0">Replenishments</h6>
                            <h2 class="mb-0">UGX {{ number_format($fund->total_replenishments, 2) }}</h2>
                            <small>{{ $fund->replenishments()->count() }} transactions</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Stats -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <strong>Net Change:</strong> 
                                    <span class="badge bg-{{ $fund->net_change >= 0 ? 'success' : 'danger' }}">
                                        {{ $fund->net_change >= 0 ? '+' : '' }}UGX {{ number_format($fund->net_change, 2) }}
                                    </span>
                                </div>
                                <div class="col-md-3">
                                    <strong>Pending Approvals:</strong> 
                                    <span class="badge bg-warning">{{ $fund->pending_count }}</span>
                                </div>
                                <div class="col-md-3">
                                    <strong>Approved:</strong> 
                                    <span class="badge bg-success">{{ $fund->approved_count }}</span>
                                </div>
                                <div class="col-md-3">
                                    <strong>Utilization:</strong> 
                                    <span class="badge bg-info">{{ number_format($fund->utilization_percentage, 1) }}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Transactions Table -->
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-list"></i> Transactions
                        </h5>
                        <div>
                            <span class="badge bg-secondary">Total: {{ $transactions->total() }}</span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if($transactions->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Date</th>
                                        <th>Type</th>
                                        <th>Description</th>
                                        <th>Expense Item</th>
                                        <th>Supplier</th>
                                        <th>Amount</th>
                                        <th>Balance After</th>
                                        <th>Status</th>
                                        <th>Created By</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($transactions as $transaction)
                                        <tr class="{{ $transaction->isOverdue() ? 'table-warning' : '' }}">
                                            <td>
                                                @if($transaction->approval_sequence)
                                                    <span class="badge bg-secondary">#{{ $transaction->approval_sequence }}</span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                {{ $transaction->transaction_date->format('M d, Y') }}
                                                @if($transaction->isOverdue())
                                                    <br><small class="text-warning">
                                                        <i class="fas fa-clock"></i> {{ $transaction->getDaysPending() }} days
                                                    </small>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="badge bg-{{ $transaction->type_badge }}">
                                                    {{ ucfirst($transaction->type) }}
                                                </span>
                                            </td>
                                            <td>
                                                {{ Str::limit($transaction->description, 40) }}
                                                @if($transaction->receipt_image)
                                                    <a href="{{ $transaction->receipt_url }}" target="_blank" title="View Receipt">
                                                        <i class="fas fa-paperclip"></i>
                                                    </a>
                                                @endif
                                            </td>
                                            <td>{{ $transaction->expenseItem->name ?? '-' }}</td>
                                            <td>{{ $transaction->supplier->name ?? '-' }}</td>
                                            <td>
                                                <strong>UGX {{ $transaction->formatted_amount }}</strong>
                                            </td>
                                            <td>
                                                @if($transaction->balance_after)
                                                    <small class="text-muted">UGX {{ $transaction->formatted_balance_after }}</small>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="badge bg-{{ $transaction->status_badge }}">
                                                    {{ ucfirst($transaction->status) }}
                                                </span>
                                                @if($transaction->approval_notes)
                                                    <i class="fas fa-comment" title="{{ $transaction->approval_notes }}"></i>
                                                @endif
                                            </td>
                                            <td>
                                                {{ $transaction->creator->name }}
                                                @if($transaction->approved_by)
                                                    <br><small class="text-muted">
                                                        by {{ $transaction->approver->name }}
                                                    </small>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm" role="group">
                                                    @if($transaction->canBeEdited())
                                                        <a href="{{ route('petty-cash.edit-transaction', $transaction) }}" 
                                                           class="btn btn-outline-primary" title="Edit">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                    @endif
                                                    
                                                    @if($transaction->canBeApproved())
                                                        <form method="POST" action="{{ route('petty-cash.approve-transaction', $transaction) }}" class="d-inline">
                                                            @csrf
                                                            @method('PATCH')
                                                            <button type="submit" class="btn btn-outline-success" title="Approve"
                                                                    onclick="return confirm('Approve this transaction?')">
                                                                <i class="fas fa-check"></i>
                                                            </button>
                                                        </form>
                                                    @endif

                                                    @if($transaction->canBeDeleted())
                                                        <form method="POST" action="{{ route('petty-cash.destroy-transaction', $transaction) }}" 
                                                              class="d-inline" onsubmit="return confirm('Delete this transaction?')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-outline-danger" title="Delete">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        </form>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="mt-3">
                            {{ $transactions->links() }}
                        </div>
                    @else
                        <div class="alert alert-info text-center">
                            <i class="fas fa-info-circle fa-3x mb-3"></i>
                            <h5>No transactions found</h5>
                            <p>Start by adding your first transaction to this fund.</p>
                            <a href="{{ route('petty-cash.add-transaction', $fund) }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Add Transaction
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.table-warning {
    background-color: #fff3cd !important;
}
</style>
@endpush