@extends('layouts.app')
@section('customcss')
<style>
.text-white-50 {
    color: rgba(255, 255, 255, 0.5);
}
</style>
@endsection
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h4><i class="fas fa-chart-line"></i> Balance History - {{ $fund->name }}</h4>
                </div>
                <div class="card-body">
                    
                    <!-- Summary -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="text-muted">Initial Amount</h6>
                                    <h4>UGX {{ number_format($fund->initial_amount, 2) }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h6 class="text-white-50">Current Balance</h6>
                                    <h4>UGX {{ number_format($fund->current_balance, 2) }}</h4>
                                </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">Total Expenses</h6>
                                    <h4>UGX {{ number_format($fund->total_expenses, 2) }}</h4>
                                </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">Total Replenishments</h6>
                                    <h4>UGX {{ number_format($fund->total_replenishments, 2) }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Chart -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5><i class="fas fa-chart-area"></i> Balance Timeline</h5>
                        </div>
                        <div class="card-body">
                            <canvas id="balanceChart" height="100"></canvas>
                        </div>
                    </div>

                    <!-- Transaction Table -->
                    @if($history->count() > 0)
                        <div class="card">
                            <div class="card-header">
                                <h5><i class="fas fa-list"></i> Transaction History</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover">
                                        <thead class="table-light">
                                            <tr>
                                                <th>#</th>
                                                <th>Date</th>
                                                <th>Description</th>
                                                <th>Type</th>
                                                <th>Amount</th>
                                                <th>Balance After</th>
                                                <th>Change</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php $previousBalance = $fund->initial_amount; @endphp
                                            @foreach($history as $index => $item)
                                                <tr>
                                                    <td>{{ $index + 1 }}</td>
                                                    <td>{{ \Carbon\Carbon::parse($item['date'])->format('M d, Y') }}</td>
                                                    <td>{{ $item['description'] }}</td>
                                                    <td>
                                                        <span class="badge bg-{{ $item['type'] === 'expense' ? 'danger' : 'success' }}">
                                                            {{ ucfirst($item['type']) }}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <strong class="text-{{ $item['type'] === 'expense' ? 'danger' : 'success' }}">
                                                            {{ $item['type'] === 'expense' ? '-' : '+' }}UGX {{ number_format($item['amount'], 2) }}
                                                        </strong>
                                                    </td>
                                                    <td>
                                                        <strong>UGX {{ number_format($item['balance'], 2) }}</strong>
                                                    </td>
                                                    <td>
                                                        @php
                                                            $change = $item['balance'] - $previousBalance;
                                                            $previousBalance = $item['balance'];
                                                        @endphp
                                                        <span class="badge bg-{{ $change >= 0 ? 'success' : 'danger' }}">
                                                            {{ $change >= 0 ? '+' : '' }}{{ number_format($change, 2) }}
                                                        </span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-info text-center">
                            <i class="fas fa-info-circle fa-3x mb-3"></i>
                            <h5>No Balance History Available</h5>
                            <p class="mb-0">No approved transactions with balance_after records found.</p>
                        </div>
                    @endif

                    <!-- Back Button -->
                    <div class="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>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customjs')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const history = @json($history);
    
    // Prepare data for chart
    const labels = [];
    const balanceData = [];
    
    // Add initial balance
    labels.push('Start');
    balanceData.push({{ $fund->initial_amount }});
    
    // Add transaction data
    history.forEach(item => {
        const date = new Date(item.date);
        labels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
        balanceData.push(parseFloat(item.balance));
    });
    
    const ctx = document.getElementById('balanceChart');
    if (ctx && balanceData.length > 1) {
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Balance (UGX)',
                    data: balanceData,
                    borderColor: 'rgba(54, 162, 235, 1)',
                    backgroundColor: 'rgba(54, 162, 235, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 4,
                    pointHoverRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return 'Balance: UGX ' + context.parsed.y.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return 'UGX ' + value.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
                            }
                        }
                    }
                }
            }
        });
    }
});
</script>
@endsection