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

    <!-- Page Header -->
    <div class="page-header">
        <h1>💰 ROI Analysis & Financial Modeling</h1>
        <p>Comprehensive return on investment analysis for blackberry farm expansion scenarios</p>
        <p class="subtitle">Strategic financial planning and investment decision support</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/growth-projections" class="touch-btn touch-btn-success">📈 Growth Projections</a>
        <a href="/analytics/yield-forecasting" class="touch-btn touch-btn-warning">🫐 Yield Forecasting</a>
        <a href="/analytics/weather-correlation" class="touch-btn touch-btn-primary">🌡️ Weather Analysis</a>
    </div>

    <!-- Scenario Selection -->
    <div class="mobile-card">
        <h3>📊 ROI Scenario Analysis</h3>
        <form method="GET" action="/analytics/roi-analysis" style="margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
                <div>
                    <label for="scenario" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🎯 Analysis Scenario
                    </label>
                    <select name="scenario" id="scenario" class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="current" {{ $scenario == 'current' ? 'selected' : '' }}>Current Operations</option>
                        <option value="expansion_1000" {{ $scenario == 'expansion_1000' ? 'selected' : '' }}>1,000 Plant Expansion</option>
                        <option value="expansion_10000" {{ $scenario == 'expansion_10000' ? 'selected' : '' }}>10,000 Plant Expansion</option>
                    </select>
                </div>
                <div style="align-self: end;">
                    <button type="submit" class="touch-btn touch-btn-success" style="width: 100%;">
                        🔄 Analyze Scenario
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Current Scenario Overview -->
    <div class="stats-grid">
        @php $currentScenario = $roiData['scenarios'][$scenario] @endphp
        <div class="stat-card today">
            <div class="stat-number">{{ number_format($currentScenario['plants']) }}</div>
            <div class="stat-label">Total Plants</div>
            <div class="stat-trend">{{ ucwords(str_replace('_', ' ', $scenario)) }}</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">${{ number_format($currentScenario['annual_revenue']) }}</div>
            <div class="stat-label">Annual Revenue</div>
            <div class="stat-trend">${{ number_format($currentScenario['annual_revenue'] / $currentScenario['plants'], 2) }}/plant</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">${{ number_format($currentScenario['annual_costs']) }}</div>
            <div class="stat-label">Annual Costs</div>
            <div class="stat-trend">${{ number_format($currentScenario['annual_costs'] / $currentScenario['plants'], 2) }}/plant</div>
        </div>
        <div class="stat-card week">
            <div class="stat-number">{{ $currentScenario['roi'] }}%</div>
            <div class="stat-label">ROI Percentage</div>
            <div class="stat-trend">${{ number_format($currentScenario['profit']) }} profit</div>
        </div>
    </div>

    <!-- ROI Comparison Charts -->
    <div class="mobile-card">
        <h3>📈 ROI Scenario Comparison</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin: 30px 0;">
            
            <!-- Revenue vs Costs Comparison -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">💰 Revenue vs Costs by Scenario</h4>
                <canvas id="revenueVsCostsChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- ROI Comparison -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">📊 ROI Comparison</h4>
                <canvas id="roiComparisonChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Profit Scaling -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">📈 Profit Scaling</h4>
                <canvas id="profitScalingChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Investment vs Returns -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">🎯 Investment vs Returns</h4>
                <canvas id="investmentReturnsChart" style="max-height: 300px;"></canvas>
            </div>
        </div>
    </div>

    <!-- Detailed Scenario Comparison -->
    <div class="mobile-card">
        <h3>📋 Detailed Scenario Analysis</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;">Scenario</th>
                        <th style="padding: 15px; text-align: left;">Plant Count</th>
                        <th style="padding: 15px; text-align: left;">Annual Revenue</th>
                        <th style="padding: 15px; text-align: left;">Annual Costs</th>
                        <th style="padding: 15px; text-align: left;">Annual Profit</th>
                        <th style="padding: 15px; text-align: left;">ROI %</th>
                        <th style="padding: 15px; text-align: left;">Revenue Multiple</th>
                        <th style="padding: 15px; text-align: left;">Profit/Plant</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($roiData['scenarios'] as $scenarioName => $data)
                    <tr style="border-bottom: 1px solid #E0E0E0; {{ $scenarioName == $scenario ? 'background: rgba(106, 27, 154, 0.05);' : '' }}">
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: var(--blackberry-purple);">
                                {{ ucwords(str_replace('_', ' ', $scenarioName)) }}
                            </div>
                            @if($scenarioName == $scenario)
                                <div style="font-size: 0.85em; color: var(--leaf-green);">← Current Analysis</div>
                            @endif
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; font-size: 1.1em;">{{ number_format($data['plants']) }}</div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: var(--leaf-green); font-size: 1.1em;">${{ number_format($data['annual_revenue']) }}</div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: var(--berry-red);">${{ number_format($data['annual_costs']) }}</div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: {{ $data['profit'] > 0 ? 'var(--leaf-green)' : 'var(--berry-red)' }}; font-size: 1.1em;">
                                ${{ number_format($data['profit']) }}
                            </div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: {{ $data['roi'] > 0 ? 'var(--leaf-green)' : 'var(--berry-red)' }}; font-size: 1.2em;">
                                {{ $data['roi'] }}%
                            </div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: var(--blackberry-purple);">
                                @if($scenarioName == 'current')
                                    1.0x
                                @elseif($scenarioName == 'expansion_1000')
                                    {{ $roiData['comparison']['revenue_multiplier_1000'] }}x
                                @else
                                    {{ $roiData['comparison']['revenue_multiplier_10000'] }}x
                                @endif
                            </div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: var(--leaf-green);">
                                ${{ number_format($data['profit'] / $data['plants'], 2) }}
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Investment Requirements Analysis -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 30px 0;">
        
        <!-- Investment Requirements -->
        <div class="mobile-card">
            <h3>💵 Investment Requirements</h3>
            <div style="margin: 20px 0;">
                @if($scenario != 'current')
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(198, 40, 40, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Initial Investment Required</span>
                    <span style="font-weight: bold; color: var(--berry-red); font-size: 1.2em;">
                        @if($scenario == 'expansion_1000')
                            ${{ number_format($roiData['comparison']['investment_required_1000']) }}
                        @else
                            ${{ number_format($roiData['comparison']['investment_required_10000']) }}
                        @endif
                    </span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(255, 143, 0, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Payback Period</span>
                    <span style="font-weight: bold; color: #FF8F00; font-size: 1.2em;">
                        @if($scenario == 'expansion_1000')
                            {{ $roiData['comparison']['payback_period_1000'] }} years
                        @else
                            {{ $roiData['comparison']['payback_period_10000'] }} years
                        @endif
                    </span>
                </div>
                @endif
                
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(56, 142, 60, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Annual Profit</span>
                    <span style="font-weight: bold; color: var(--leaf-green); font-size: 1.2em;">${{ number_format($currentScenario['profit']) }}</span>
                </div>
                
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(106, 27, 154, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Revenue per Plant</span>
                    <span style="font-weight: bold; color: var(--blackberry-purple); font-size: 1.2em;">
                        ${{ number_format($currentScenario['annual_revenue'] / $currentScenario['plants'], 2) }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Risk Assessment -->
        <div class="mobile-card">
            <h3>⚠️ Risk Assessment</h3>
            <div style="margin: 20px 0;">
                @php
                    $riskLevel = $scenario == 'current' ? 'Low' : ($scenario == 'expansion_1000' ? 'Medium' : 'High');
                    $riskColor = $scenario == 'current' ? 'var(--leaf-green)' : ($scenario == 'expansion_1000' ? '#FF8F00' : 'var(--berry-red)');
                @endphp
                
                <div style="text-align: center; padding: 20px; background: rgba(106, 27, 154, 0.05); border-radius: 8px; margin-bottom: 20px;">
                    <div style="font-size: 2em; color: {{ $riskColor }}; font-weight: bold;">{{ $riskLevel }}</div>
                    <div style="font-size: 1.1em; color: var(--soil-brown); margin-top: 5px;">Investment Risk Level</div>
                </div>
                
                <div style="margin: 15px 0;">
                    <h5 style="color: var(--soil-brown); margin-bottom: 10px;">Key Risk Factors:</h5>
                    <ul style="margin: 0; padding-left: 20px; color: var(--soil-brown);">
                        @if($scenario == 'current')
                            <li style="margin-bottom: 5px;">Weather variability</li>
                            <li style="margin-bottom: 5px;">Market price fluctuations</li>
                            <li style="margin-bottom: 5px;">Pest/disease pressure</li>
                            <li style="margin-bottom: 5px;">Labor availability</li>
                        @elseif($scenario == 'expansion_1000')
                            <li style="margin-bottom: 5px;">High initial capital requirement</li>
                            <li style="margin-bottom: 5px;">Market saturation risk</li>
                            <li style="margin-bottom: 5px;">Operational complexity increase</li>
                            <li style="margin-bottom: 5px;">Labor scaling challenges</li>
                            <li style="margin-bottom: 5px;">Equipment investment needs</li>
                        @else
                            <li style="margin-bottom: 5px;">Very high capital investment</li>
                            <li style="margin-bottom: 5px;">Market demand uncertainty</li>
                            <li style="margin-bottom: 5px;">Complex operations management</li>
                            <li style="margin-bottom: 5px;">Significant labor force required</li>
                            <li style="margin-bottom: 5px;">Infrastructure development needs</li>
                            <li style="margin-bottom: 5px;">Regulatory compliance complexity</li>
                        @endif
                    </ul>
                </div>
                
                <div style="margin: 15px 0;">
                    <h5 style="color: var(--soil-brown); margin-bottom: 10px;">Mitigation Strategies:</h5>
                    <ul style="margin: 0; padding-left: 20px; color: var(--soil-brown);">
                        <li style="margin-bottom: 5px;">Diversify variety portfolio</li>
                        <li style="margin-bottom: 5px;">Implement IPM practices</li>
                        <li style="margin-bottom: 5px;">Secure long-term contracts</li>
                        <li style="margin-bottom: 5px;">Phase expansion gradually</li>
                        @if($scenario != 'current')
                            <li style="margin-bottom: 5px;">Secure adequate financing</li>
                            <li style="margin-bottom: 5px;">Invest in automation</li>
                            <li style="margin-bottom: 5px;">Develop distribution channels</li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>

        <!-- Financial Projections -->
        <div class="mobile-card">
            <h3>📊 5-Year Financial Projections</h3>
            <div style="margin: 20px 0;">
                @php
                    $multiplier = $scenario == 'current' ? 1 : ($scenario == 'expansion_1000' ? 25 : 250);
                    $years = [];
                    for($i = 1; $i <= 5; $i++) {
                        $yearRevenue = $currentScenario['annual_revenue'] * (1 + ($i * 0.03)); // 3% annual growth
                        $yearCosts = $currentScenario['annual_costs'] * (1 + ($i * 0.02)); // 2% annual cost increase
                        $years[] = [
                            'year' => $i,
                            'revenue' => $yearRevenue,
                            'costs' => $yearCosts,
                            'profit' => $yearRevenue - $yearCosts
                        ];
                    }
                @endphp
                
                @foreach($years as $year)
                <div style="border-bottom: 1px solid #E0E0E0; padding: 15px 0;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
                        <span style="font-weight: 600; color: var(--blackberry-purple);">Year {{ $year['year'] }}</span>
                        <span style="font-weight: bold; color: var(--leaf-green);">${{ number_format($year['profit']) }}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; font-size: 0.9em; color: #6c757d;">
                        <span>Revenue: ${{ number_format($year['revenue']) }}</span>
                        <span>Costs: ${{ number_format($year['costs']) }}</span>
                    </div>
                </div>
                @endforeach
                
                <div style="background: rgba(56, 142, 60, 0.05); padding: 15px; border-radius: 8px; margin-top: 15px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="font-weight: 600; color: var(--soil-brown);">5-Year Total Profit</span>
                        <span style="font-weight: bold; color: var(--leaf-green); font-size: 1.2em;">
                            ${{ number_format(array_sum(array_column($years, 'profit'))) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ROI Calculation Methodology -->
    <div class="mobile-card" style="background: rgba(56, 142, 60, 0.05); border-left: 4px solid var(--leaf-green);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
            <h3 style="color: var(--leaf-green); margin: 0;">🧮 ROI Calculation Methodology</h3>
            <a href="/config/projections" class="touch-btn touch-btn-info" style="font-size: 0.9em; padding: 8px 16px;">
                ⚙️ Configure Parameters
            </a>
        </div>
        <div style="margin: 15px 0;">
            <h5 style="color: var(--soil-brown); margin-bottom: 10px;">Revenue Assumptions:</h5>
            <ul style="margin: 15px 0; padding-left: 20px; color: var(--soil-brown);">
                <li style="margin-bottom: 8px;"><strong>Yield per Plant:</strong> {{ $config['revenue']['yield_per_plant_lbs'] }} lbs average (varies by variety and age)</li>
                <li style="margin-bottom: 8px;"><strong>Market Price:</strong> ${{ number_format($config['revenue']['market_price_per_lb'], 2) }} per pound (farm gate/wholesale pricing)</li>
                <li style="margin-bottom: 8px;"><strong>Plant Maturity:</strong> Full production by year {{ $config['maturity']['full_production_year'] ?? 3 }}</li>
                <li style="margin-bottom: 8px;"><strong>Harvest Season:</strong> {{ $config['revenue']['harvest_season_weeks'] }} weeks depending on variety</li>
            </ul>
            
            <h5 style="color: var(--soil-brown); margin: 20px 0 10px;">Cost Assumptions:</h5>
            <ul style="margin: 15px 0; padding-left: 20px; color: var(--soil-brown);">
                <li style="margin-bottom: 8px;"><strong>Annual Operating Costs:</strong> ${{ number_format($config['operating_costs']['current_scale_per_plant']) }} per plant (current scale), ${{ number_format($config['operating_costs']['large_scale_per_plant']) }} per plant ({{ number_format($config['operating_costs']['large_scale_threshold']) }}+ scale)</li>
                <li style="margin-bottom: 8px;"><strong>Labor:</strong> {{ $config['labor']['hours_per_plant_per_year'] }} hours per plant per year at ${{ number_format($config['labor']['hourly_rate']) }}/hour</li>
                <li style="margin-bottom: 8px;"><strong>Materials:</strong> Fertilizer, pesticides, irrigation, maintenance</li>
                <li style="margin-bottom: 8px;"><strong>Equipment:</strong> Depreciation and maintenance</li>
                <li style="margin-bottom: 8px;"><strong>Setup Costs:</strong> ${{ number_format($config['setup_costs']['small_expansion_per_plant']) }} per plant (small expansion), ${{ number_format($config['setup_costs']['large_expansion_per_plant']) }} per plant (large expansion)</li>
            </ul>
            
            <h5 style="color: var(--soil-brown); margin: 20px 0 10px;">ROI Formula:</h5>
            <div style="background: rgba(106, 27, 154, 0.1); padding: 15px; border-radius: 8px; font-family: monospace; color: var(--blackberry-purple);">
                ROI % = ((Annual Revenue - Annual Costs) / Annual Costs) × 100
            </div>
        </div>
        
        <div style="background: rgba(255, 143, 0, 0.1); padding: 15px; border-radius: 8px; margin-top: 20px;">
            <p style="font-style: italic; color: var(--soil-brown); margin: 0;">
                <strong>Important:</strong> These ROI calculations are based on current market conditions and historical performance. 
                Actual returns may vary significantly due to weather events, market fluctuations, pest/disease pressure, 
                and changes in operating costs. Consider these projections as planning guidelines rather than guaranteed outcomes.
            </p>
        </div>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart.js Configuration for ROI Analysis
const chartColors = {
    purple: '#6A1B9A',
    green: '#388E3C',
    orange: '#FF8F00',
    red: '#C62828',
    blue: '#1976D2'
};

// ROI Data from PHP
const roiData = @json($roiData);
const scenarios = Object.keys(roiData.scenarios);
const scenarioLabels = scenarios.map(s => s.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()));
const revenues = scenarios.map(s => roiData.scenarios[s].annual_revenue);
const costs = scenarios.map(s => roiData.scenarios[s].annual_costs);
const profits = scenarios.map(s => roiData.scenarios[s].profit);
const rois = scenarios.map(s => roiData.scenarios[s].roi);

// Revenue vs Costs Chart
const revenueVsCostsCtx = document.getElementById('revenueVsCostsChart').getContext('2d');
new Chart(revenueVsCostsCtx, {
    type: 'bar',
    data: {
        labels: scenarioLabels,
        datasets: [{
            label: 'Annual Revenue',
            data: revenues,
            backgroundColor: 'rgba(56, 142, 60, 0.7)',
            borderColor: chartColors.green,
            borderWidth: 2
        }, {
            label: 'Annual Costs',
            data: costs,
            backgroundColor: 'rgba(198, 40, 40, 0.7)',
            borderColor: chartColors.red,
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Amount ($)'
                }
            }
        },
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// ROI Comparison Chart
const roiComparisonCtx = document.getElementById('roiComparisonChart').getContext('2d');
new Chart(roiComparisonCtx, {
    type: 'line',
    data: {
        labels: scenarioLabels,
        datasets: [{
            label: 'ROI Percentage',
            data: rois,
            backgroundColor: 'rgba(106, 27, 154, 0.1)',
            borderColor: chartColors.purple,
            borderWidth: 3,
            fill: true,
            tension: 0.4,
            pointBackgroundColor: chartColors.purple,
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 8
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'ROI (%)'
                }
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

// Profit Scaling Chart
const profitScalingCtx = document.getElementById('profitScalingChart').getContext('2d');
new Chart(profitScalingCtx, {
    type: 'bar',
    data: {
        labels: scenarioLabels,
        datasets: [{
            label: 'Annual Profit',
            data: profits,
            backgroundColor: profits.map(p => p > 0 ? 'rgba(56, 142, 60, 0.7)' : 'rgba(198, 40, 40, 0.7)'),
            borderColor: profits.map(p => p > 0 ? chartColors.green : chartColors.red),
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Profit ($)'
                }
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

// Investment vs Returns Chart
const plantCounts = scenarios.map(s => roiData.scenarios[s].plants);
const investmentReturnsCtx = document.getElementById('investmentReturnsChart').getContext('2d');
new Chart(investmentReturnsCtx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'ROI vs Plant Count',
            data: plantCounts.map((plants, index) => ({
                x: plants,
                y: rois[index]
            })),
            backgroundColor: chartColors.purple,
            borderColor: chartColors.purple,
            pointRadius: 8,
            pointHoverRadius: 12
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            x: {
                type: 'logarithmic',
                title: {
                    display: true,
                    text: 'Plant Count (Log Scale)'
                }
            },
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'ROI (%)'
                }
            }
        },
        plugins: {
            legend: {
                display: false
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const scenarioIndex = context.dataIndex;
                        const scenarioName = scenarioLabels[scenarioIndex];
                        return `${scenarioName}: ${context.parsed.x} plants, ${context.parsed.y}% ROI`;
                    }
                }
            }
        }
    }
});
</script>
@endpush