@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h4><i class="fas fa-stethoscope"></i> Fund Diagnostics - {{ $fund->name }}</h4>
                </div>
                <div class="card-body">
                    
                    <!-- Summary Cards -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <h6 class="text-white-50">Total Transactions</h6>
                                    <h2>{{ $diagnostics['total_transactions'] }}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h6 class="text-white-50">Approved</h6>
                                    <h2>{{ $diagnostics['approved_count'] }}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body text-center">
                                    <h6 class="text-white-50">Pending</h6>
                                    <h2>{{ $diagnostics['pending_count'] }}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-danger text-white">
                                <div class="card-body text-center">
                                    <h6 class="text-white-50">Rejected</h6>
                                    <h2>{{ $diagnostics['rejected_count'] }}</h2>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Financial Summary -->
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-money-bill-wave"></i> Financial Summary</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <p class="text-muted mb-1">Initial Amount</p>
                                            <h4>UGX {{ number_format($diagnostics['initial_amount'], 2) }}</h4>
                                        </div>
                                        <div class="col-md-3">
                                            <p class="text-muted mb-1">Total Expenses</p>
                                            <h4 class="text-danger">UGX {{ number_format($diagnostics['total_expenses'], 2) }}</h4>
                                        </div>
                                        <div class="col-md-3">
                                            <p class="text-muted mb-1">Total Replenishments</p>
                                            <h4 class="text-success">UGX {{ number_format($diagnostics['total_replenishments'], 2) }}</h4>
                                        </div>
                                        <div class="col-md-3">
                                            <p class="text-muted mb-1">Net Change</p>
                                            <h4 class="{{ $diagnostics['net_change'] >= 0 ? 'text-success' : 'text-danger' }}">
                                                {{ $diagnostics['net_change'] >= 0 ? '+' : '' }}UGX {{ number_format($diagnostics['net_change'], 2) }}
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Balance Status -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-calculator"></i> Balance Verification</h5>
                                </div>
                                <div class="card-body">
                                    <table class="table table-sm">
                                        <tr>
                                            <td><strong>Current Balance (System):</strong></td>
                                            <td class="text-end">UGX {{ number_format($diagnostics['current_balance'], 2) }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Calculated Balance:</strong></td>
                                            <td class="text-end">UGX {{ number_format($diagnostics['calculated_balance'], 2) }}</td>
                                        </tr>
                                        <tr class="{{ abs($diagnostics['calculated_balance'] - $diagnostics['current_balance']) < 0.01 ? 'table-success' : 'table-danger' }}">
                                            <td><strong>Difference:</strong></td>
                                            <td class="text-end">
                                                <strong>UGX {{ number_format($diagnostics['calculated_balance'] - $diagnostics['current_balance'], 2) }}</strong>
                                            </td>
                                        </tr>
                                    </table>
                                    
                                    @if(abs($diagnostics['calculated_balance'] - $diagnostics['current_balance']) >= 0.01)
                                        <div class="alert alert-warning mb-0">
                                            <i class="fas fa-exclamation-triangle"></i> 
                                            Balance mismatch detected! Use auto-reconcile to fix.
                                        </div>
                                    @else
                                        <div class="alert alert-success mb-0">
                                            <i class="fas fa-check-circle"></i> 
                                            Balance is correct!
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-chart-pie"></i> Transaction Distribution</h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="transactionChart" height="150"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Largest Transaction -->
                    @if(isset($diagnostics['largest_transaction']) && $diagnostics['largest_transaction'])
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5><i class="fas fa-crown"></i> Largest Transaction</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <p class="text-muted mb-0">Amount</p>
                                                <h4>UGX {{ number_format($diagnostics['largest_transaction']->amount, 2) }}</h4>
                                            </div>
                                            <div class="col-md-3">
                                                <p class="text-muted mb-0">Type</p>
                                                <h5>
                                                    <span class="badge bg-{{ $diagnostics['largest_transaction']->type === 'expense' ? 'danger' : 'success' }}">
                                                        {{ ucfirst($diagnostics['largest_transaction']->type) }}
                                                    </span>
                                                </h5>
                                            </div>
                                            <div class="col-md-3">
                                                <p class="text-muted mb-0">Date</p>
                                                <h5>{{ $diagnostics['largest_transaction']->transaction_date->format('M d, Y') }}</h5>
                                            </div>
                                            <div class="col-md-3">
                                                <p class="text-muted mb-0">Description</p>
                                                <h5>{{ $diagnostics['largest_transaction']->description }}</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Potential Issues -->
                    @if(isset($diagnostics['potential_duplicates']) && $diagnostics['potential_duplicates'] > 0)
                        <div class="alert alert-warning">
                            <h5><i class="fas fa-exclamation-triangle"></i> Potential Issues Detected</h5>
                            <p class="mb-0">
                                Found <strong>{{ $diagnostics['potential_duplicates'] }}</strong> potential duplicate transaction(s).
                                Review your transactions for entries with the same amount, date, and description.
                            </p>
                        </div>
                    @endif

                    <!-- Quick Actions -->
                    <div class="d-flex justify-content-between mt-4">
                        <a href="{{ route('petty-cash.show', $fund) }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Fund
                        </a>
                        
                        <div>
                            <a href="{{ route('petty-cash.verify-integrity', $fund) }}" class="btn btn-primary">
                                <i class="fas fa-check-double"></i> Run Full Integrity Check
                            </a>
                            
                            @if(abs($diagnostics['calculated_balance'] - $diagnostics['current_balance']) >= 0.01)
                                <form action="{{ route('petty-cash.auto-reconcile', $fund) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-warning" 
                                            onclick="return confirm('Fix balance automatically?')">
                                        <i class="fas fa-magic"></i> Auto-Fix Balance
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('transactionChart');
    if (ctx) {
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Approved', 'Pending', 'Rejected'],
                datasets: [{
                    data: [
                        {{ $diagnostics['approved_count'] }},
                        {{ $diagnostics['pending_count'] }},
                        {{ $diagnostics['rejected_count'] }}
                    ],
                    backgroundColor: [
                        'rgba(40, 167, 69, 0.8)',
                        'rgba(255, 193, 7, 0.8)',
                        'rgba(220, 53, 69, 0.8)'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
});
</script>
@endpush

@push('styles')
<style>
.text-white-50 {
    color: rgba(255, 255, 255, 0.5);
}
</style>
@endpush