@extends('layouts.app')
@section('title', 'Cash Flow Analysis - Blackberry Farm Analytics')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>💰 Seasonal Cash Flow Analysis</h1>
        <p>Detailed monthly cash flow projections with seasonal patterns and timing optimization</p>
        <p class="subtitle">Strategic financial planning for optimal cash management</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-4" style="margin-bottom: 30px;">
        <a href="/analytics" class="touch-btn touch-btn-primary">← Analytics Dashboard</a>
        <a href="/analytics/scenario-comparison" class="touch-btn touch-btn-info">🎯 Scenario Comparison</a>
        <a href="/analytics/break-even" class="touch-btn touch-btn-success">⚖️ Break-Even Analysis</a>
        <a href="/analytics/monte-carlo" class="touch-btn touch-btn-purple">🎲 Monte Carlo</a>
    </div>

    <!-- Analysis Parameters -->
    <div class="mobile-card">
        <h3>⚙️ Cash Flow Parameters</h3>
        <form method="GET" action="/analytics/cash-flow" style="margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                <div>
                    <label for="plant_count" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🌱 Plant Count
                    </label>
                    <input type="number" name="plant_count" id="plant_count" 
                           value="{{ $plantCount }}" 
                           min="100" max="50000" step="100"
                           class="form-control" 
                           style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                </div>
                
                <div>
                    <label for="years" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📅 Analysis Period
                    </label>
                    <select name="years" id="years" class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="1" {{ $years == 1 ? 'selected' : '' }}>1 Year</option>
                        <option value="3" {{ $years == 3 ? 'selected' : '' }}>3 Years</option>
                        <option value="5" {{ $years == 5 ? 'selected' : '' }}>5 Years</option>
                    </select>
                </div>
                
                <div style="align-self: end;">
                    <button type="submit" class="touch-btn touch-btn-success" style="width: 100%;">
                        🔄 Update Analysis
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Cash Flow Summary -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">${{ number_format($cashFlowData['summary']['total_revenue']) }}</div>
            <div class="stat-label">Total Revenue</div>
            <div class="stat-trend">{{ $years }} year projection</div>
        </div>
        <div class="stat-card blue">
            <div class="stat-number">${{ number_format($cashFlowData['summary']['total_costs']) }}</div>
            <div class="stat-label">Total Costs</div>
            <div class="stat-trend">All expenses included</div>
        </div>
        <div class="stat-card {{ $cashFlowData['summary']['net_cash_flow'] >= 0 ? 'green' : 'purple' }}">
            <div class="stat-number">${{ number_format($cashFlowData['summary']['net_cash_flow']) }}</div>
            <div class="stat-label">Net Cash Flow</div>
            <div class="stat-trend">{{ $cashFlowData['summary']['net_cash_flow'] >= 0 ? 'Positive' : 'Negative' }} flow</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">${{ number_format($cashFlowData['summary']['peak_cash_need']) }}</div>
            <div class="stat-label">Peak Cash Need</div>
            <div class="stat-trend">Maximum outflow</div>
        </div>
    </div>

    <!-- Monthly Cash Flow Chart -->
    <div class="mobile-card">
        <h3>📊 Monthly Cash Flow Projection</h3>
        <div style="margin: 30px 0;">
            <div style="position: relative; height: 400px;">
                <canvas id="cashFlowChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Seasonal Patterns -->
    <div class="mobile-card">
        <h3>🍂 Seasonal Cash Flow Patterns</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
            
            @foreach(['Spring', 'Summer', 'Fall', 'Winter'] as $season)
            @php
                $seasonData = $cashFlowData['seasonal_breakdown'][$season];
                $seasonColor = $season === 'Spring' ? 'green' : ($season === 'Summer' ? 'orange' : ($season === 'Fall' ? 'blue' : 'purple'));
            @endphp
            <div class="stat-card {{ $seasonColor }}">
                <h4>{{ $season === 'Spring' ? '🌸' : ($season === 'Summer' ? '☀️' : ($season === 'Fall' ? '🍂' : '❄️')) }} {{ $season }}</h4>
                <div style="margin: 15px 0;">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                        <div>
                            <div class="stat-number" style="font-size: 1.1em;">${{ number_format($seasonData['revenue']) }}</div>
                            <div class="stat-label" style="font-size: 0.8em;">Revenue</div>
                        </div>
                        <div>
                            <div class="stat-number" style="font-size: 1.1em;">${{ number_format($seasonData['costs']) }}</div>
                            <div class="stat-label" style="font-size: 0.8em;">Costs</div>
                        </div>
                        <div style="grid-column: 1 / -1;">
                            <div class="stat-number" style="font-size: 1.2em; color: {{ $seasonData['net_flow'] >= 0 ? 'var(--leaf-green)' : 'var(--berry-red)' }};">
                                ${{ number_format($seasonData['net_flow']) }}
                            </div>
                            <div class="stat-label" style="font-size: 0.8em;">Net Flow</div>
                        </div>
                    </div>
                    <div style="margin-top: 15px; padding: 10px; background: rgba(255,255,255,0.5); border-radius: 6px;">
                        <small>
                            <strong>Key Activities:</strong><br>
                            {{ $seasonData['activities'] }}
                        </small>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Cumulative Cash Flow -->
    <div class="mobile-card">
        <h3>📈 Cumulative Cash Flow Analysis</h3>
        <div style="margin: 30px 0;">
            <div style="position: relative; height: 400px;">
                <canvas id="cumulativeCashFlowChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Monthly Breakdown Table -->
    <div class="mobile-card">
        <h3>📋 Detailed Monthly Breakdown</h3>
        <div style="overflow-x: auto; margin: 20px 0;">
            <table style="width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden;">
                <thead style="background: var(--blackberry-purple); color: white;">
                    <tr>
                        <th style="padding: 15px; text-align: left;">Month</th>
                        <th style="padding: 15px; text-align: left;">Revenue</th>
                        <th style="padding: 15px; text-align: left;">Operating Costs</th>
                        <th style="padding: 15px; text-align: left;">Labor Costs</th>
                        <th style="padding: 15px; text-align: left;">Setup Costs</th>
                        <th style="padding: 15px; text-align: left;">Net Flow</th>
                        <th style="padding: 15px; text-align: left;">Cumulative</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($cashFlowData['monthly_breakdown'] as $month => $data)
                    <tr style="border-bottom: 1px solid #E0E0E0;">
                        <td style="padding: 15px; font-weight: bold; color: var(--blackberry-purple);">{{ $month }}</td>
                        <td style="padding: 15px; color: var(--leaf-green);">${{ number_format($data['revenue']) }}</td>
                        <td style="padding: 15px; color: var(--berry-red);">${{ number_format($data['operating_costs']) }}</td>
                        <td style="padding: 15px; color: var(--warning);">${{ number_format($data['labor_costs']) }}</td>
                        <td style="padding: 15px; color: var(--soil-brown);">${{ number_format($data['setup_costs']) }}</td>
                        <td style="padding: 15px; font-weight: bold; color: {{ $data['net_flow'] >= 0 ? 'var(--leaf-green)' : 'var(--berry-red)' }};">
                            ${{ number_format($data['net_flow']) }}
                        </td>
                        <td style="padding: 15px; font-weight: bold; color: {{ $data['cumulative'] >= 0 ? 'var(--leaf-green)' : 'var(--berry-red)' }};">
                            ${{ number_format($data['cumulative']) }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Cash Flow Insights -->
    <div class="mobile-card" style="background: rgba(56, 142, 60, 0.05); border-left: 4px solid var(--leaf-green);">
        <h3 style="color: var(--leaf-green);">💡 Cash Flow Insights</h3>
        <div style="margin: 15px 0;">
            @php
                $insights = [];
                
                // Peak cash requirement insight
                $peakCash = $cashFlowData['summary']['peak_cash_need'];
                if ($peakCash > 0) {
                    $insights[] = "Peak cash requirement of $" . number_format($peakCash) . " will be needed for optimal operations.";
                }
                
                // Seasonal concentration
                $harvestMonths = ['July', 'August', 'September'];
                $harvestRevenue = 0;
                foreach ($harvestMonths as $month) {
                    if (isset($cashFlowData['monthly_breakdown'][$month])) {
                        $harvestRevenue += $cashFlowData['monthly_breakdown'][$month]['revenue'];
                    }
                }
                $harvestPercent = $cashFlowData['summary']['total_revenue'] > 0 ? 
                    ($harvestRevenue / $cashFlowData['summary']['total_revenue']) * 100 : 0;
                
                if ($harvestPercent > 70) {
                    $insights[] = number_format($harvestPercent, 1) . "% of revenue is concentrated in harvest months (July-September).";
                }
                
                // Negative cash flow periods
                $negativePeriods = 0;
                foreach ($cashFlowData['monthly_breakdown'] as $month => $data) {
                    if ($data['cumulative'] < 0) $negativePeriods++;
                }
                
                if ($negativePeriods > 0) {
                    $insights[] = "You may experience negative cash flow for $negativePeriods months - consider financing options.";
                } else {
                    $insights[] = "Positive cash flow maintained throughout the year - excellent financial health.";
                }
                
                // ROI insight
                $annualROI = $cashFlowData['summary']['total_costs'] > 0 ? 
                    (($cashFlowData['summary']['net_cash_flow'] / $cashFlowData['summary']['total_costs']) * 100) / $years : 0;
                
                if ($annualROI > 15) {
                    $insights[] = "Strong ROI of " . number_format($annualROI, 1) . "% annually indicates excellent investment potential.";
                } elseif ($annualROI > 5) {
                    $insights[] = "Moderate ROI of " . number_format($annualROI, 1) . "% annually - consider optimization strategies.";
                } else {
                    $insights[] = "Low ROI of " . number_format($annualROI, 1) . "% annually - review pricing and cost structure.";
                }
            @endphp
            
            <div style="display: grid; gap: 15px;">
                @foreach($insights as $insight)
                <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; border-left: 3px solid var(--leaf-green);">
                    <p style="margin: 0; font-size: 0.95em;">💡 {{ $insight }}</p>
                </div>
                @endforeach
            </div>
            
            <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin-top: 20px;">
                <h5 style="color: var(--soil-brown); margin-bottom: 10px;">📋 Recommendations:</h5>
                <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                    <li>Maintain cash reserves of ${{ number_format($cashFlowData['summary']['peak_cash_need'] * 1.2) }} for safety</li>
                    <li>Consider diversifying revenue streams to reduce seasonal concentration</li>
                    <li>Plan major investments during positive cash flow periods</li>
                    @if($negativePeriods > 0)
                    <li>Arrange line of credit for {{ $negativePeriods }} months of potential shortfalls</li>
                    @endif
                </ul>
            </div>
        </div>
    </div>

    <!-- Current Configuration -->
    <div class="mobile-card" style="background: rgba(106, 27, 154, 0.05); border-left: 4px solid var(--blackberry-purple);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
            <h3 style="color: var(--blackberry-purple); margin: 0;">⚙️ Analysis Configuration</h3>
            <a href="/config/projections" class="touch-btn touch-btn-info" style="font-size: 0.9em; padding: 8px 16px;">
                🔧 Modify Parameters
            </a>
        </div>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
            <div>
                <h5 style="color: var(--soil-brown);">Analysis Parameters:</h5>
                <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                    <li>{{ number_format($plantCount) }} plants analyzed</li>
                    <li>{{ $years }} year{{ $years > 1 ? 's' : '' }} projection</li>
                    <li>Monthly cash flow modeling</li>
                </ul>
            </div>
            <div>
                <h5 style="color: var(--soil-brown);">Revenue Assumptions:</h5>
                <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                    <li>Yield: {{ $config['revenue']['yield_per_plant_lbs'] }} lbs/plant</li>
                    <li>Price: ${{ number_format($config['revenue']['market_price_per_lb'], 2) }}/lb</li>
                    <li>Harvest: {{ $config['revenue']['harvest_season_weeks'] }} weeks</li>
                </ul>
            </div>
            <div>
                <h5 style="color: var(--soil-brown);">Cost Structure:</h5>
                <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                    <li>Operating: ${{ number_format($config['operating_costs']['current_scale_per_plant']) }}/plant</li>
                    <li>Labor: {{ $config['labor']['hours_per_plant_per_year'] }}h @ ${{ number_format($config['labor']['hourly_rate']) }}/h</li>
                    <li>Setup: ${{ number_format($config['setup_costs']['small_expansion_per_plant']) }}/plant</li>
                </ul>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart.js Configuration
const chartColors = {
    revenue: '#4CAF50',
    costs: '#F44336',
    netFlow: '#2196F3',
    cumulative: '#9C27B0'
};

// Data from backend
const cashFlowData = @json($cashFlowData);

// Prepare monthly data
const months = Object.keys(cashFlowData.monthly_breakdown);
const revenues = months.map(month => cashFlowData.monthly_breakdown[month].revenue);
const totalCosts = months.map(month => 
    cashFlowData.monthly_breakdown[month].operating_costs + 
    cashFlowData.monthly_breakdown[month].labor_costs + 
    cashFlowData.monthly_breakdown[month].setup_costs
);
const netFlows = months.map(month => cashFlowData.monthly_breakdown[month].net_flow);
const cumulativeFlows = months.map(month => cashFlowData.monthly_breakdown[month].cumulative);

// Monthly Cash Flow Chart
const cashFlowCtx = document.getElementById('cashFlowChart').getContext('2d');
new Chart(cashFlowCtx, {
    type: 'bar',
    data: {
        labels: months,
        datasets: [{
            label: 'Revenue',
            data: revenues,
            backgroundColor: 'rgba(76, 175, 80, 0.7)',
            borderColor: chartColors.revenue,
            borderWidth: 2,
            yAxisID: 'y'
        }, {
            label: 'Total Costs',
            data: totalCosts,
            backgroundColor: 'rgba(244, 67, 54, 0.7)',
            borderColor: chartColors.costs,
            borderWidth: 2,
            yAxisID: 'y'
        }, {
            label: 'Net Cash Flow',
            data: netFlows,
            type: 'line',
            backgroundColor: 'rgba(33, 150, 243, 0.1)',
            borderColor: chartColors.netFlow,
            borderWidth: 3,
            fill: false,
            tension: 0.4,
            yAxisID: 'y',
            pointBackgroundColor: chartColors.netFlow,
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: {
            mode: 'index',
            intersect: false,
        },
        plugins: {
            title: {
                display: true,
                text: 'Monthly Cash Flow Analysis',
                font: { size: 16, weight: 'bold' }
            },
            legend: {
                position: 'top'
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Month'
                }
            },
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                title: {
                    display: true,
                    text: 'Amount ($)'
                },
                ticks: {
                    callback: function(value) {
                        return '$' + value.toLocaleString();
                    }
                }
            }
        }
    }
});

// Cumulative Cash Flow Chart
const cumulativeCtx = document.getElementById('cumulativeCashFlowChart').getContext('2d');
new Chart(cumulativeCtx, {
    type: 'line',
    data: {
        labels: months,
        datasets: [{
            label: 'Cumulative Cash Flow',
            data: cumulativeFlows,
            borderColor: chartColors.cumulative,
            backgroundColor: 'rgba(156, 39, 176, 0.1)',
            borderWidth: 3,
            fill: true,
            tension: 0.4,
            pointBackgroundColor: chartColors.cumulative,
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 6
        }, {
            label: 'Break-Even Line',
            data: Array(months.length).fill(0),
            borderColor: '#666',
            borderDash: [5, 5],
            borderWidth: 2,
            fill: false,
            pointRadius: 0
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'Cumulative Cash Flow Over Time',
                font: { size: 16, weight: 'bold' }
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Month'
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'Cumulative Amount ($)'
                },
                ticks: {
                    callback: function(value) {
                        return '$' + value.toLocaleString();
                    }
                }
            }
        }
    }
});
</script>
@endpush