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

    <!-- Page Header -->
    <div class="page-header">
        <h1>📈 Growth Projections Calculator</h1>
        <p>Strategic planning for blackberry farm expansion from 40 to 10,000+ plants</p>
        <p class="subtitle">Financial modeling and scalability analysis</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/yield-forecasting" class="touch-btn touch-btn-warning">🫐 Yield Forecasting</a>
        <a href="/analytics/roi-analysis" class="touch-btn touch-btn-success">💰 ROI Analysis</a>
        <a href="/analytics/weather-correlation" class="touch-btn touch-btn-primary">🌡️ Weather Analysis</a>
    </div>

    <!-- Current Status -->
    <div class="stats-grid" style="margin-bottom: 30px;">
        <div class="stat-card today">
            <div class="stat-number">{{ $projections['current_plants'] ?? 'N/A' }}</div>
            <div class="stat-label">Current Plants</div>
            <div class="stat-trend">Active in database</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ $projections['target_plants'] ?? 'N/A' }}</div>
            <div class="stat-label">Target Plants</div>
            <div class="stat-trend">{{ $timeframe === '5_years' ? '5' : ($timeframe === '10_years' ? '10' : '3') }} year goal</div>
        </div>
        <div class="stat-card blue">
            <div class="stat-number">{{ isset($projections['annual_growth_rate']) ? round($projections['annual_growth_rate'], 1) : 'N/A' }}%</div>
            <div class="stat-label">Annual Growth Rate</div>
            <div class="stat-trend">Average increase</div>
        </div>
        <div class="stat-card purple">
            <div class="stat-number">{{ isset($projections['summary']['total_investment']) ? '$' . number_format($projections['summary']['total_investment']) : 'N/A' }}</div>
            <div class="stat-label">Total Investment</div>
            <div class="stat-trend">Projected cost</div>
        </div>
    </div>

    <!-- Projection Configuration -->
    <div class="mobile-card">
        <h3>⚙️ Projection Parameters</h3>
        <form method="GET" action="/analytics/growth-projections" style="margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                <div>
                    <label for="years" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📅 Projection Years
                    </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="3_years" {{ $timeframe == '3_years' ? 'selected' : '' }}>3 Years</option>
                        <option value="5_years" {{ $timeframe == '5_years' ? 'selected' : '' }}>5 Years</option>
                        <option value="10_years" {{ $timeframe == '10_years' ? 'selected' : '' }}>10 Years</option>
                    </select>
                </div>
                
                <div>
                    <label for="layering_rate" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🌱 Air Layering Success Rate (%)
                    </label>
                    <input type="number" name="layering_rate" id="layering_rate" value="15" 
                           min="5" max="50" step="1" class="form-control" 
                           style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                </div>
                
                <div>
                    <label for="mortality_rate" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        ⚰️ Mortality Rate (%)
                    </label>
                    <input type="number" name="mortality_rate" id="mortality_rate" value="5" 
                           min="1" max="20" step="1" class="form-control" 
                           style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                </div>
                <div style="align-self: end;">
                    <button type="submit" class="touch-btn touch-btn-success" style="width: 100%;">
                        🔄 Recalculate Projections
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Projection Results Overview -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">{{ end($projections['projections'])['plant_count'] ?? 0 }}</div>
            <div class="stat-label">Final Plant Count</div>
            <div class="stat-trend">Year {{ $timeframe === '5_years' ? 5 : ($timeframe === '10_years' ? 10 : 3) }}</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">${{ number_format(end($projections['projections'])['estimated_revenue'] ?? 0) }}</div>
            <div class="stat-label">Final Revenue</div>
            <div class="stat-trend">Year {{ $timeframe === '5_years' ? 5 : ($timeframe === '10_years' ? 10 : 3) }} projection</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ ceil((end($projections['projections'])['plant_count'] ?? 0) / 50) }}</div>
            <div class="stat-label">Acres Needed</div>
            <div class="stat-trend">At maximum capacity</div>
        </div>
        <div class="stat-card week">
            <div class="stat-number">{{ number_format(array_sum(array_column($projections['projections'] ?? [], 'estimated_yield'))) }}lbs</div>
            <div class="stat-label">Total Yield</div>
            <div class="stat-trend">{{ $timeframe === '5_years' ? 5 : ($timeframe === '10_years' ? 10 : 3) }}-year cumulative</div>
        </div>
    </div>

    <!-- Projection Visualization -->
    <div class="mobile-card">
        <h3>📊 Growth Projection Visualization</h3>
        
        <!-- Plant Growth Chart -->
        <div style="margin: 30px 0;">
            <h4>Plant Count Growth Over Time</h4>
            <div style="position: relative; height: 400px;">
                <canvas id="plantGrowthChart"></canvas>
            </div>
        </div>
        
        <!-- Chart Grid -->
        <div style="display: grid; grid-template-columns: 1fr; gap: 30px; margin: 30px 0;">
            <!-- Revenue Projection Chart -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">💰 Revenue Projections</h4>
                <canvas id="revenueProjectionChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Profit Analysis Chart -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">📈 Profit Analysis</h4>
                <canvas id="profitAnalysisChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Labor Requirements Chart -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">👥 Labor Requirements</h4>
                <canvas id="laborRequirementsChart" style="max-height: 300px;"></canvas>
            </div>
        </div>
    </div>
    
    <!-- Expansion Scenarios Comparison -->
    @if(isset($scenarios) && !empty($scenarios))
    <div class="mobile-card">
        <h3>🎯 Expansion Scenarios</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
            @foreach($scenarios as $key => $scenario)
            <div class="stat-card {{ $key === 'conservative' ? 'blue' : ($key === 'moderate' ? 'green' : 'orange') }}">
                <h4>{{ $scenario['name'] }}</h4>
                <p style="font-size: 0.9em; margin: 10px 0;">{{ $scenario['description'] }}</p>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px;">
                    <div>
                        <div class="stat-number" style="font-size: 1.2em;">{{ end($scenario['projections'])['total_plants'] }}</div>
                        <div class="stat-label" style="font-size: 0.8em;">Final Plants</div>
                    </div>
                    <div>
                        <div class="stat-number" style="font-size: 1.2em;">${{ number_format(end($scenario['projections'])['estimated_revenue']) }}</div>
                        <div class="stat-label" style="font-size: 0.8em;">Final Revenue</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <!-- Scenario Comparison Chart -->
        <div style="margin: 30px 0;">
            <h4>Scenario Comparison</h4>
            <div style="position: relative; height: 400px;">
                <canvas id="scenarioChart"></canvas>
            </div>
        </div>
    </div>
    @endif
    
    <!-- Milestones Timeline -->
    @if(isset($milestones) && !empty($milestones))
    <div class="mobile-card">
        <h3>🏁 Expansion Milestones</h3>
        <div style="margin: 20px 0;">
            @foreach($milestones as $milestone)
            <div style="border-left: 4px solid var(--blackberry-purple); padding: 20px; margin: 20px 0; background: rgba(106, 27, 154, 0.05); border-radius: 8px;">
                <h4 style="color: var(--blackberry-purple); margin-bottom: 10px;">{{ $milestone['title'] }}</h4>
                <p style="margin-bottom: 10px;"><strong>Target Year:</strong> {{ $milestone['year'] }}</p>
                <p style="margin-bottom: 15px;">{{ $milestone['description'] }}</p>
                <div style="margin-top: 15px;">
                    <strong>Requirements:</strong>
                    <ul style="margin: 10px 0 0 20px;">
                        @foreach($milestone['requirements'] as $requirement)
                        <li>{{ $requirement }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Year-by-Year Breakdown -->
    <div class="mobile-card">
        <h3>📋 Year-by-Year Projection 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;">Year</th>
                        <th style="padding: 15px; text-align: left;">Plant Count</th>
                        <th style="padding: 15px; text-align: left;">Estimated Yield</th>
                        <th style="padding: 15px; text-align: left;">Revenue</th>
                        <th style="padding: 15px; text-align: left;">Costs</th>
                        <th style="padding: 15px; text-align: left;">Profit</th>
                        <th style="padding: 15px; text-align: left;">Labor Hours</th>
                        <th style="padding: 15px; text-align: left;">ROI</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($projections['projections'] as $projection)
                    <tr style="border-bottom: 1px solid #E0E0E0;">
                        <td style="padding: 15px; font-weight: bold; color: var(--blackberry-purple);">{{ $projection['year'] }}</td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; font-size: 1.1em;">{{ number_format($projection['plant_count']) }}</div>
                            <div style="font-size: 0.85em; color: #6c757d;">plants</div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: var(--leaf-green);">{{ number_format($projection['estimated_yield']) }}lbs</div>
                            <div style="font-size: 0.85em; color: #6c757d;">{{ number_format($projection['estimated_yield'] / $projection['plant_count'], 1) }} lbs/plant</div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: var(--leaf-green); font-size: 1.1em;">${{ number_format($projection['estimated_revenue']) }}</div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: var(--berry-red);">${{ number_format($projection['estimated_costs']) }}</div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: {{ $projection['projected_profit'] > 0 ? 'var(--leaf-green)' : 'var(--berry-red)' }}; font-size: 1.1em;">
                                ${{ number_format($projection['projected_profit']) }}
                            </div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600;">{{ number_format($projection['required_labor_hours']) }}h</div>
                            <div style="font-size: 0.85em; color: #6c757d;">{{ number_format($projection['required_labor_hours'] / 2080, 1) }} FTE</div>
                        </td>
                        <td style="padding: 15px;">
                            <div style="font-weight: 600; color: {{ ($projection['estimated_revenue'] - $projection['estimated_costs']) / $projection['estimated_costs'] * 100 > 0 ? 'var(--leaf-green)' : 'var(--berry-red)' }};">
                                {{ number_format(($projection['estimated_revenue'] - $projection['estimated_costs']) / $projection['estimated_costs'] * 100, 1) }}%
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot style="background: rgba(106, 27, 154, 0.05); font-weight: bold;">
                    <tr>
                        <td style="padding: 15px; color: var(--blackberry-purple);">TOTALS</td>
                        <td style="padding: 15px; color: var(--blackberry-purple);">{{ number_format(end($projections['projections'])['plant_count']) }} final</td>
                        <td style="padding: 15px; color: var(--leaf-green);">{{ number_format(array_sum(array_column($projections['projections'], 'estimated_yield'))) }}lbs</td>
                        <td style="padding: 15px; color: var(--leaf-green); font-size: 1.1em;">${{ number_format($projections['summary']['total_revenue']) }}</td>
                        <td style="padding: 15px; color: var(--berry-red);">${{ number_format($projections['summary']['total_investment']) }}</td>
                        <td style="padding: 15px; color: var(--leaf-green); font-size: 1.1em;">${{ number_format($projections['summary']['total_profit']) }}</td>
                        <td style="padding: 15px;">{{ number_format(array_sum(array_column($projections['projections'], 'required_labor_hours'))) }}h</td>
                        <td style="padding: 15px; color: var(--leaf-green); font-weight: bold;">{{ $projections['summary']['roi_percentage'] }}%</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <!-- Investment Summary -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 30px 0;">
        
        <!-- Financial Summary -->
        <div class="mobile-card">
            <h3>💰 Financial Summary</h3>
            <div style="margin: 20px 0;">
                <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;">Total Investment Required</span>
                    <span style="font-weight: bold; color: var(--berry-red); font-size: 1.2em;">${{ number_format($projections['summary']['total_investment']) }}</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;">Total Revenue Projected</span>
                    <span style="font-weight: bold; color: var(--leaf-green); font-size: 1.2em;">${{ number_format($projections['summary']['total_revenue']) }}</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;">Net Profit Projected</span>
                    <span style="font-weight: bold; color: var(--leaf-green); font-size: 1.3em;">${{ number_format($projections['summary']['total_profit']) }}</span>
                </div>
                <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;">Overall ROI</span>
                    <span style="font-weight: bold; color: var(--blackberry-purple); font-size: 1.3em;">{{ $projections['summary']['roi_percentage'] }}%</span>
                </div>
            </div>
        </div>

        <!-- Key Milestones -->
        <div class="mobile-card">
            <h3>🎯 Key Milestones</h3>
            <div style="margin: 20px 0;">
                @php
                    $milestones = [
                        ['plants' => 100, 'description' => 'Small commercial operation'],
                        ['plants' => 500, 'description' => 'Regional supplier capability'],
                        ['plants' => 1000, 'description' => 'Major commercial operation'],
                        ['plants' => 5000, 'description' => 'Industrial scale production'],
                        ['plants' => 10000, 'description' => 'Large-scale agricultural business']
                    ];
                @endphp
                
                @foreach($milestones as $milestone)
                    @if($milestone['plants'] <= (end($projections['projections'])['plant_count'] ?? 0))
                        @php
                            $milestoneYear = null;
                            foreach($projections['projections'] as $proj) {
                                if($proj['plant_count'] >= $milestone['plants']) {
                                    $milestoneYear = $proj['year'];
                                    break;
                                }
                            }
                        @endphp
                        
                        <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;">
                            <div>
                                <div style="font-weight: 600; color: var(--blackberry-purple);">{{ number_format($milestone['plants']) }} Plants</div>
                                <div style="font-size: 0.9em; color: var(--soil-brown);">{{ $milestone['description'] }}</div>
                            </div>
                            <div style="text-align: right;">
                                <div style="font-weight: bold; color: var(--leaf-green);">{{ $milestoneYear ? 'Year ' . ($milestoneYear - date('Y')) : 'Beyond timeframe' }}</div>
                                <div style="font-size: 0.85em; color: #6c757d;">{{ $milestoneYear ?? 'N/A' }}</div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    <!-- Assumptions and Notes -->
    <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);">💡 Projection Assumptions</h3>
        <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 (wholesale/retail mix)</li>
            <li style="margin-bottom: 8px;"><strong>Annual Costs:</strong> ${{ number_format($config['operating_costs']['current_scale_per_plant']) }} per plant (fertilizer, labor, equipment, etc.)</li>
            <li style="margin-bottom: 8px;"><strong>Labor Requirements:</strong> {{ $config['labor']['hours_per_plant_per_year'] }} hours per plant per year</li>
            <li style="margin-bottom: 8px;"><strong>Plant Establishment:</strong> ${{ number_format($config['setup_costs']['small_expansion_per_plant']) }} per plant setup cost</li>
            <li style="margin-bottom: 8px;"><strong>Maturity:</strong> Plants reach full production by year {{ $config['maturity']['full_production_year'] ?? 3 }}</li>
            <li style="margin-bottom: 8px;"><strong>Air Layering Rate:</strong> {{ $config['growth']['air_layering_success_rate'] }}% success rate</li>
            <li style="margin-bottom: 8px;"><strong>Plant Mortality:</strong> {{ $config['growth']['plant_mortality_rate'] }}% annual loss rate</li>
            <li style="margin-bottom: 8px;"><strong>Weather Impact:</strong> Normal growing conditions assumed</li>
            <li style="margin-bottom: 8px;"><strong>Market Demand:</strong> Consistent demand at projected price points</li>
        </ul>
        <p style="font-style: italic; color: var(--soil-brown); margin-top: 15px;">
            <strong>Note:</strong> These projections are estimates based on industry averages and current farm performance. 
            Actual results may vary due to weather, market conditions, pest/disease pressure, and other factors.
        </p>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart.js data from backend
const projectionData = @json($projections['projections'] ?? []);
const chartData = {
    years: projectionData.map(p => p.year),
    plant_counts: projectionData.map(p => p.plant_count),
    new_plants: projectionData.map((p, i) => i > 0 ? p.plant_count - projectionData[i-1].plant_count : 0),
    yields: projectionData.map(p => p.estimated_yield),
    revenues: projectionData.map(p => p.estimated_revenue)
};

// Chart.js Configuration for Growth Projections
const chartColors = {
    purple: '#6A1B9A',
    green: '#388E3C',
    orange: '#FF8F00',
    red: '#C62828',
    blue: '#1976D2'
};

// Projection data from PHP
const years = projectionData.map(p => p.year);
const plantCounts = projectionData.map(p => p.plant_count);
const revenues = projectionData.map(p => p.estimated_revenue);
const costs = projectionData.map(p => p.estimated_costs);
const profits = projectionData.map(p => p.projected_profit);
const laborHours = projectionData.map(p => p.required_labor_hours);

// Plant Growth Chart
const plantGrowthCtx = document.getElementById('plantGrowthChart').getContext('2d');
new Chart(plantGrowthCtx, {
    type: 'line',
    data: {
        labels: chartData.years,
        datasets: [{
            label: 'Total Plants',
            data: chartData.plant_counts,
            borderColor: '#6A1B9A',
            backgroundColor: 'rgba(106, 27, 154, 0.1)',
            borderWidth: 3,
            fill: true,
            tension: 0.4,
            pointBackgroundColor: '#6A1B9A',
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 6
        }, {
            label: 'New from Air Layering',
            data: chartData.new_plants,
            borderColor: '#388E3C',
            backgroundColor: 'rgba(56, 142, 60, 0.1)',
            borderWidth: 2,
            fill: false,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'Plant Count Growth Projection',
                font: { size: 16, weight: 'bold' }
            },
            legend: {
                position: 'top'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Number of Plants'
                },
                grid: {
                    color: 'rgba(0,0,0,0.1)'
                }
            },
            x: {
                title: {
                    display: true,
                    text: 'Year'
                },
                grid: {
                    color: 'rgba(0,0,0,0.1)'
                }
            }
        },
        interaction: {
            intersect: false,
            mode: 'index'
        }
    }
});

// Revenue Projection Chart
const revenueCtx = document.getElementById('revenueProjectionChart').getContext('2d');
new Chart(revenueCtx, {
    type: 'bar',
    data: {
        labels: years,
        datasets: [{
            label: 'Revenue',
            data: revenues,
            backgroundColor: 'rgba(56, 142, 60, 0.7)',
            borderColor: chartColors.green,
            borderWidth: 2
        }, {
            label: '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'
            }
        }
    }
});

// Profit Analysis Chart
const profitCtx = document.getElementById('profitAnalysisChart').getContext('2d');
new Chart(profitCtx, {
    type: 'line',
    data: {
        labels: years,
        datasets: [{
            label: 'Annual Profit',
            data: profits,
            backgroundColor: 'rgba(56, 142, 60, 0.1)',
            borderColor: chartColors.green,
            borderWidth: 3,
            fill: true,
            tension: 0.4,
            pointBackgroundColor: chartColors.green,
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Profit ($)'
                }
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

// Labor Requirements Chart
const laborCtx = document.getElementById('laborRequirementsChart').getContext('2d');
new Chart(laborCtx, {
    type: 'bar',
    data: {
        labels: years,
        datasets: [{
            label: 'Labor Hours',
            data: laborHours,
            backgroundColor: 'rgba(255, 143, 0, 0.7)',
            borderColor: chartColors.orange,
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Hours Required'
                }
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

// Revenue Chart
const revenueProjectionCtx = document.getElementById('revenueChart');
if (revenueProjectionCtx) {
    new Chart(revenueProjectionCtx, {
        type: 'bar',
        data: {
            labels: chartData.years,
            datasets: [{
                label: 'Projected Yield (lbs)',
                data: chartData.yields,
                backgroundColor: 'rgba(255, 193, 7, 0.7)',
                borderColor: '#FFC107',
                borderWidth: 2,
                yAxisID: 'y'
            }, {
                label: 'Estimated Revenue ($)',
                data: chartData.revenues,
                type: 'line',
                borderColor: '#28A745',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                borderWidth: 3,
                fill: false,
                tension: 0.4,
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: 'Yield and Revenue Projections',
                    font: { size: 16, weight: 'bold' }
                },
                legend: {
                    position: 'top'
                }
            },
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    title: {
                        display: true,
                        text: 'Yield (lbs)'
                    },
                    grid: {
                        color: 'rgba(0,0,0,0.1)'
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    title: {
                        display: true,
                        text: 'Revenue ($)'
                    },
                    grid: {
                        drawOnChartArea: false
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Year'
                    }
                }
            }
        }
    });
}

// Scenario Comparison Chart - Only render if scenarios exist
if (document.getElementById('scenarioChart')) {
    const scenarioCtx = document.getElementById('scenarioChart').getContext('2d');
    new Chart(scenarioCtx, {
        type: 'line',
        data: {
            labels: chartData.years,
            datasets: [{
                label: 'Projected Growth',
                data: chartData.plant_counts,
                borderColor: '#6A1B9A',
                backgroundColor: 'rgba(106, 27, 154, 0.1)',
                borderWidth: 3,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: 'Growth Projection',
                    font: { size: 16, weight: 'bold' }
                },
                legend: {
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Plants'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Year'
                    }
                }
            }
        }
    });
}
</script>
@endpush