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

    <!-- Page Header -->
    <div class="page-header">
        <h1>⚖️ Break-Even Analysis</h1>
        <p>Determine minimum requirements for profitability and optimal ROI targets</p>
        <p class="subtitle">Strategic planning for sustainable business growth</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/sensitivity" class="touch-btn touch-btn-warning">📊 Sensitivity Analysis</a>
        <a href="/analytics/monte-carlo" class="touch-btn touch-btn-purple">🎲 Monte Carlo</a>
    </div>

    <!-- Analysis Parameters -->
    <div class="mobile-card">
        <h3>🎯 Analysis Parameters</h3>
        <form method="GET" action="/analytics/break-even" 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="target_roi" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🎯 Target ROI (%)
                    </label>
                    <input type="number" name="target_roi" id="target_roi" 
                           value="{{ $targetROI }}" 
                           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 style="align-self: end;">
                    <button type="submit" class="touch-btn touch-btn-success" style="width: 100%;">
                        🔄 Recalculate Break-Even
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Current Performance vs Target -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">{{ number_format($plantCount) }}</div>
            <div class="stat-label">Plant Count</div>
            <div class="stat-trend">Analysis scenario</div>
        </div>
        <div class="stat-card {{ $targetROI <= 15 ? 'green' : ($targetROI <= 25 ? 'orange' : 'purple') }}">
            <div class="stat-number">{{ $targetROI }}%</div>
            <div class="stat-label">Target ROI</div>
            <div class="stat-trend">{{ $targetROI <= 15 ? 'Conservative' : ($targetROI <= 25 ? 'Moderate' : 'Aggressive') }} goal</div>
        </div>
        <div class="stat-card blue">
            <div class="stat-number">${{ number_format($config['revenue']['market_price_per_lb'], 2) }}</div>
            <div class="stat-label">Current Price/lb</div>
            <div class="stat-trend">Market assumption</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ $config['revenue']['yield_per_plant_lbs'] }}</div>
            <div class="stat-label">Current Yield/Plant</div>
            <div class="stat-trend">lbs per plant</div>
        </div>
    </div>

    <!-- Break-Even Scenarios -->
    <div class="mobile-card">
        <h3>🎯 Break-Even Scenarios to Achieve {{ $targetROI }}% ROI</h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 20px 0;">
            
            <!-- Yield-Based Break-Even -->
            <div class="stat-card green">
                <h4>🫐 Yield Optimization</h4>
                <p style="margin: 15px 0; font-size: 0.9em;">Keep price constant, increase yield per plant</p>
                <div style="margin: 15px 0;">
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Current Yield:</span>
                        <strong>{{ number_format($breakEvenData['break_even_yield']['current'], 1) }} lbs</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Required Yield:</span>
                        <strong style="color: var(--leaf-green);">{{ number_format($breakEvenData['break_even_yield']['required'], 1) }} lbs</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Increase Needed:</span>
                        <strong style="color: {{ $breakEvenData['break_even_yield']['change_percent'] > 0 ? 'var(--berry-red)' : 'var(--leaf-green)' }};">
                            {{ number_format(abs($breakEvenData['break_even_yield']['change_percent']), 1) }}%
                        </strong>
                    </div>
                </div>
                <div style="background: rgba(255,255,255,0.5); padding: 10px; border-radius: 6px; margin-top: 15px;">
                    <small><strong>Strategy:</strong> Improve plant care, fertilization, irrigation, or select higher-yielding varieties</small>
                </div>
            </div>

            <!-- Price-Based Break-Even -->
            <div class="stat-card blue">
                <h4>💰 Price Optimization</h4>
                <p style="margin: 15px 0; font-size: 0.9em;">Keep yield constant, increase market price</p>
                <div style="margin: 15px 0;">
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Current Price:</span>
                        <strong>${{ number_format($breakEvenData['break_even_price']['current'], 2) }}/lb</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Required Price:</span>
                        <strong style="color: var(--leaf-green);">${{ number_format($breakEvenData['break_even_price']['required'], 2) }}/lb</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Increase Needed:</span>
                        <strong style="color: {{ $breakEvenData['break_even_price']['change_percent'] > 0 ? 'var(--berry-red)' : 'var(--leaf-green)' }};">
                            {{ number_format(abs($breakEvenData['break_even_price']['change_percent']), 1) }}%
                        </strong>
                    </div>
                </div>
                <div style="background: rgba(255,255,255,0.5); padding: 10px; border-radius: 6px; margin-top: 15px;">
                    <small><strong>Strategy:</strong> Direct sales, farmers markets, organic certification, value-added products</small>
                </div>
            </div>

            <!-- Cost-Based Break-Even -->
            <div class="stat-card orange">
                <h4>✂️ Cost Reduction</h4>
                <p style="margin: 15px 0; font-size: 0.9em;">Keep revenue constant, reduce operating costs</p>
                <div style="margin: 15px 0;">
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Current Costs:</span>
                        <strong>${{ number_format($breakEvenData['break_even_costs']['current']) }}</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Maximum Costs:</span>
                        <strong style="color: var(--leaf-green);">${{ number_format($breakEvenData['break_even_costs']['maximum']) }}</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Reduction Needed:</span>
                        <strong style="color: var(--berry-red);">
                            ${{ number_format($breakEvenData['break_even_costs']['reduction_needed']) }}
                            ({{ number_format($breakEvenData['break_even_costs']['reduction_percent'], 1) }}%)
                        </strong>
                    </div>
                </div>
                <div style="background: rgba(255,255,255,0.5); padding: 10px; border-radius: 6px; margin-top: 15px;">
                    <small><strong>Strategy:</strong> Automation, bulk purchasing, efficient irrigation, integrated pest management</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Break-Even Visualization -->
    <div class="mobile-card">
        <h3>📊 Break-Even Analysis Charts</h3>
        
        <div style="display: grid; grid-template-columns: 1fr; gap: 30px; margin: 30px 0;">
            <!-- Yield vs Profitability -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">🫐 Yield Impact on Profitability</h4>
                <canvas id="yieldBreakEvenChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Price vs Profitability -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">💰 Price Impact on Profitability</h4>
                <canvas id="priceBreakEvenChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Cost vs Profitability -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">✂️ Cost Impact on Profitability</h4>
                <canvas id="costBreakEvenChart" style="max-height: 300px;"></canvas>
            </div>
        </div>
    </div>

    <!-- Scenarios Summary Table -->
    <div class="mobile-card">
        <h3>📋 Break-Even Summary</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;">Strategy</th>
                        <th style="padding: 15px; text-align: left;">Current Value</th>
                        <th style="padding: 15px; text-align: left;">Break-Even Value</th>
                        <th style="padding: 15px; text-align: left;">Change Required</th>
                        <th style="padding: 15px; text-align: left;">Difficulty</th>
                        <th style="padding: 15px; text-align: left;">Implementation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="border-bottom: 1px solid #E0E0E0;">
                        <td style="padding: 15px; font-weight: bold; color: var(--leaf-green);">Increase Yield</td>
                        <td style="padding: 15px;">{{ number_format($breakEvenData['break_even_yield']['current'], 1) }} lbs/plant</td>
                        <td style="padding: 15px;">{{ number_format($breakEvenData['break_even_yield']['required'], 1) }} lbs/plant</td>
                        <td style="padding: 15px;">
                            <span style="color: {{ $breakEvenData['break_even_yield']['change_percent'] > 0 ? 'var(--berry-red)' : 'var(--leaf-green)' }};">
                                +{{ number_format(abs($breakEvenData['break_even_yield']['change_percent']), 1) }}%
                            </span>
                        </td>
                        <td style="padding: 15px;">
                            <span class="difficulty-badge {{ $breakEvenData['break_even_yield']['change_percent'] <= 20 ? 'easy' : ($breakEvenData['break_even_yield']['change_percent'] <= 50 ? 'medium' : 'hard') }}">
                                {{ $breakEvenData['break_even_yield']['change_percent'] <= 20 ? 'Easy' : ($breakEvenData['break_even_yield']['change_percent'] <= 50 ? 'Medium' : 'Hard') }}
                            </span>
                        </td>
                        <td style="padding: 15px; font-size: 0.9em;">Better fertilization, irrigation, variety selection</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #E0E0E0;">
                        <td style="padding: 15px; font-weight: bold; color: var(--sky-blue);">Increase Price</td>
                        <td style="padding: 15px;">${{ number_format($breakEvenData['break_even_price']['current'], 2) }}/lb</td>
                        <td style="padding: 15px;">${{ number_format($breakEvenData['break_even_price']['required'], 2) }}/lb</td>
                        <td style="padding: 15px;">
                            <span style="color: {{ $breakEvenData['break_even_price']['change_percent'] > 0 ? 'var(--berry-red)' : 'var(--leaf-green)' }};">
                                +{{ number_format(abs($breakEvenData['break_even_price']['change_percent']), 1) }}%
                            </span>
                        </td>
                        <td style="padding: 15px;">
                            <span class="difficulty-badge {{ $breakEvenData['break_even_price']['change_percent'] <= 15 ? 'easy' : ($breakEvenData['break_even_price']['change_percent'] <= 35 ? 'medium' : 'hard') }}">
                                {{ $breakEvenData['break_even_price']['change_percent'] <= 15 ? 'Easy' : ($breakEvenData['break_even_price']['change_percent'] <= 35 ? 'Medium' : 'Hard') }}
                            </span>
                        </td>
                        <td style="padding: 15px; font-size: 0.9em;">Direct sales, organic certification, processing</td>
                    </tr>
                    <tr>
                        <td style="padding: 15px; font-weight: bold; color: var(--warning);">Reduce Costs</td>
                        <td style="padding: 15px;">${{ number_format($breakEvenData['break_even_costs']['current']) }}</td>
                        <td style="padding: 15px;">${{ number_format($breakEvenData['break_even_costs']['maximum']) }}</td>
                        <td style="padding: 15px;">
                            <span style="color: var(--berry-red);">
                                -{{ number_format($breakEvenData['break_even_costs']['reduction_percent'], 1) }}%
                            </span>
                        </td>
                        <td style="padding: 15px;">
                            <span class="difficulty-badge {{ $breakEvenData['break_even_costs']['reduction_percent'] <= 15 ? 'easy' : ($breakEvenData['break_even_costs']['reduction_percent'] <= 30 ? 'medium' : 'hard') }}">
                                {{ $breakEvenData['break_even_costs']['reduction_percent'] <= 15 ? 'Easy' : ($breakEvenData['break_even_costs']['reduction_percent'] <= 30 ? 'Medium' : 'Hard') }}
                            </span>
                        </td>
                        <td style="padding: 15px; font-size: 0.9em;">Automation, bulk purchasing, efficiency improvements</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Current Configuration -->
    <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;">⚙️ Analysis Assumptions</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);">Current Setup:</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>{{ $config['revenue']['yield_per_plant_lbs'] }} lbs yield per plant</li>
                    <li>${{ number_format($config['revenue']['market_price_per_lb'], 2) }} per pound price</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>${{ number_format($config['operating_costs']['current_scale_per_plant']) }} operating cost/plant</li>
                    <li>{{ $config['labor']['hours_per_plant_per_year'] }}h @ ${{ number_format($config['labor']['hourly_rate']) }}/h labor</li>
                    <li>Target: {{ $targetROI }}% ROI</li>
                </ul>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.difficulty-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}
.difficulty-badge.easy {
    background: rgba(76, 175, 80, 0.1);
    color: var(--leaf-green);
    border: 1px solid var(--leaf-green);
}
.difficulty-badge.medium {
    background: rgba(255, 143, 0, 0.1);
    color: var(--warning);
    border: 1px solid var(--warning);
}
.difficulty-badge.hard {
    background: rgba(198, 40, 40, 0.1);
    color: var(--berry-red);
    border: 1px solid var(--berry-red);
}
</style>
<script>
// Chart.js Configuration
const chartColors = {
    current: '#6A1B9A',
    breakEven: '#4CAF50',
    target: '#FF9800'
};

// Data from backend
const breakEvenData = @json($breakEvenData);
const config = @json($config);
const targetROI = {{ $targetROI }};
const plantCount = {{ $plantCount }};

// Calculate chart data ranges
const currentYield = config.revenue.yield_per_plant_lbs;
const currentPrice = config.revenue.market_price_per_lb;
const currentCosts = config.operating_costs.current_scale_per_plant * plantCount + 
                   (config.labor.hours_per_plant_per_year * config.labor.hourly_rate * plantCount);

// Yield Break-Even Chart
const yieldRange = [];
const yieldROIs = [];
for (let yield = currentYield * 0.5; yield <= currentYield * 2; yield += 0.2) {
    const revenue = plantCount * yield * currentPrice;
    const roi = currentCosts > 0 ? ((revenue - currentCosts) / currentCosts) * 100 : 0;
    yieldRange.push(yield.toFixed(1));
    yieldROIs.push(roi);
}

const yieldCtx = document.getElementById('yieldBreakEvenChart').getContext('2d');
new Chart(yieldCtx, {
    type: 'line',
    data: {
        labels: yieldRange,
        datasets: [{
            label: 'ROI %',
            data: yieldROIs,
            borderColor: chartColors.current,
            backgroundColor: 'rgba(106, 27, 154, 0.1)',
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }, {
            label: 'Target ROI',
            data: Array(yieldRange.length).fill(targetROI),
            borderColor: chartColors.target,
            borderDash: [5, 5],
            borderWidth: 2,
            fill: false
        }, {
            label: 'Break-Even ROI (0%)',
            data: Array(yieldRange.length).fill(0),
            borderColor: chartColors.breakEven,
            borderDash: [3, 3],
            borderWidth: 2,
            fill: false
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'ROI vs Yield per Plant',
                font: { size: 14, weight: 'bold' }
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Yield per Plant (lbs)'
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'ROI (%)'
                }
            }
        }
    }
});

// Price Break-Even Chart
const priceRange = [];
const priceROIs = [];
for (let price = currentPrice * 0.5; price <= currentPrice * 2; price += 0.1) {
    const revenue = plantCount * currentYield * price;
    const roi = currentCosts > 0 ? ((revenue - currentCosts) / currentCosts) * 100 : 0;
    priceRange.push(price.toFixed(2));
    priceROIs.push(roi);
}

const priceCtx = document.getElementById('priceBreakEvenChart').getContext('2d');
new Chart(priceCtx, {
    type: 'line',
    data: {
        labels: priceRange,
        datasets: [{
            label: 'ROI %',
            data: priceROIs,
            borderColor: chartColors.current,
            backgroundColor: 'rgba(106, 27, 154, 0.1)',
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }, {
            label: 'Target ROI',
            data: Array(priceRange.length).fill(targetROI),
            borderColor: chartColors.target,
            borderDash: [5, 5],
            borderWidth: 2,
            fill: false
        }, {
            label: 'Break-Even ROI (0%)',
            data: Array(priceRange.length).fill(0),
            borderColor: chartColors.breakEven,
            borderDash: [3, 3],
            borderWidth: 2,
            fill: false
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'ROI vs Market Price per Pound',
                font: { size: 14, weight: 'bold' }
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Price per Pound ($)'
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'ROI (%)'
                }
            }
        }
    }
});

// Cost Break-Even Chart
const costRange = [];
const costROIs = [];
const currentRevenue = plantCount * currentYield * currentPrice;
for (let costMultiplier = 0.5; costMultiplier <= 1.5; costMultiplier += 0.05) {
    const costs = currentCosts * costMultiplier;
    const roi = costs > 0 ? ((currentRevenue - costs) / costs) * 100 : 0;
    costRange.push((costs / plantCount).toFixed(0));
    costROIs.push(roi);
}

const costCtx = document.getElementById('costBreakEvenChart').getContext('2d');
new Chart(costCtx, {
    type: 'line',
    data: {
        labels: costRange,
        datasets: [{
            label: 'ROI %',
            data: costROIs,
            borderColor: chartColors.current,
            backgroundColor: 'rgba(106, 27, 154, 0.1)',
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }, {
            label: 'Target ROI',
            data: Array(costRange.length).fill(targetROI),
            borderColor: chartColors.target,
            borderDash: [5, 5],
            borderWidth: 2,
            fill: false
        }, {
            label: 'Break-Even ROI (0%)',
            data: Array(costRange.length).fill(0),
            borderColor: chartColors.breakEven,
            borderDash: [3, 3],
            borderWidth: 2,
            fill: false
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'ROI vs Cost per Plant',
                font: { size: 14, weight: 'bold' }
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Cost per Plant ($)'
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'ROI (%)'
                }
            }
        }
    }
});
</script>
@endpush