@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4>Reconcile Fund - {{ $fund->name }}</h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h5>Current System Balance</h5>
                        <h3>${{ number_format($fund->current_balance, 2) }}</h3>
                        <p>This is the balance according to the system records.</p>
                    </div>

                    <form method="POST" action="{{ route('petty-cash.store-reconciliation', $fund) }}">
                        @csrf
                        
                        <div class="form-group mb-3">
                            <label for="actual_amount">Actual Cash Amount <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">$</span>
                                </div>
                                <input type="number" step="0.01" min="0" class="form-control @error('actual_amount') is-invalid @enderror" 
                                       id="actual_amount" name="actual_amount" value="{{ old('actual_amount') }}" required>
                            </div>
                            @error('actual_amount')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Enter the actual amount of cash counted.</small>
                        </div>

                        <div class="form-group mb-3">
                            <label for="notes">Reconciliation Notes</label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" 
                                      id="notes" name="notes" rows="3" 
                                      placeholder="Add any notes about the reconciliation process...">{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div id="difference-alert" class="alert" style="display: none;"></div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Complete Reconciliation</button>
                            <a href="{{ route('petty-cash.show', $fund) }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('actual_amount').addEventListener('input', function() {
    const systemBalance = {{ $fund->current_balance }};
    const actualAmount = parseFloat(this.value) || 0;
    const difference = actualAmount - systemBalance;
    const alertDiv = document.getElementById('difference-alert');
    
    if (difference !== 0) {
        alertDiv.style.display = 'block';
        if (difference > 0) {
            alertDiv.className = 'alert alert-success';
            alertDiv.innerHTML = `<strong>Overage:</strong> $${Math.abs(difference).toFixed(2)} - This will be recorded as a replenishment.`;
        } else {
            alertDiv.className = 'alert alert-warning';
            alertDiv.innerHTML = `<strong>Shortage:</strong> $${Math.abs(difference).toFixed(2)} - This will be recorded as an expense.`;
        }
    } else {
        alertDiv.style.display = 'none';
    }
});
</script>
@endsection