@extends('layouts.app')
@section('title', 'Projection Configuration - Blackberry Farm Admin')
@section('content')

<!-- Page Header -->
<div class="page-header">
    <h1>⚙️ Projection Configuration</h1>
    <p>Configure parameters for ROI calculations, yield forecasting, and financial projections</p>
    <p class="subtitle">Adjust these values to model different scenarios and assumptions</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/roi-analysis" class="touch-btn touch-btn-success">💰 ROI Analysis</a>
    <a href="/config/projections/scenarios" class="touch-btn touch-btn-warning">📊 Compare Scenarios</a>
    <a href="#preview" class="touch-btn touch-btn-info">👁️ Preview Changes</a>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

@if(session('info'))
    <div class="alert alert-info">{{ session('info') }}</div>
@endif

<form method="POST" action="/config/projections">
    @csrf
    @method('PUT')

    <!-- Revenue Parameters -->
    <div class="mobile-card">
        <h3>💰 Revenue Parameters</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
            <div>
                <label for="yield_per_plant">Yield per Plant (lbs)</label>
                <input type="number" step="0.1" id="yield_per_plant" name="revenue[yield_per_plant_lbs]" 
                       value="{{ $config['revenue']['yield_per_plant_lbs'] }}" class="form-control">
                <small class="text-muted">Average pounds per mature plant annually</small>
            </div>
            <div>
                <label for="market_price">Market Price per Lb ($)</label>
                <input type="number" step="0.01" id="market_price" name="revenue[market_price_per_lb]" 
                       value="{{ $config['revenue']['market_price_per_lb'] }}" class="form-control">
                <small class="text-muted">Farm gate/wholesale pricing</small>
            </div>
            <div>
                <label for="harvest_weeks">Harvest Season (weeks)</label>
                <input type="number" id="harvest_weeks" name="revenue[harvest_season_weeks]" 
                       value="{{ $config['revenue']['harvest_season_weeks'] }}" class="form-control">
                <small class="text-muted">Length of harvest season</small>
            </div>
            <div>
                <label for="premium_multiplier">Premium Quality Multiplier</label>
                <input type="number" step="0.01" id="premium_multiplier" name="revenue[premium_quality_multiplier]" 
                       value="{{ $config['revenue']['premium_quality_multiplier'] }}" class="form-control">
                <small class="text-muted">Price boost for premium berries</small>
            </div>
        </div>
    </div>

    <!-- Plant Maturity Parameters -->
    <div class="mobile-card">
        <h3>🌱 Plant Maturity & Age Multipliers</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
            <div>
                <label for="year_1_mult">Year 1 Multiplier</label>
                <input type="number" step="0.01" id="year_1_mult" name="maturity[year_1_multiplier]" 
                       value="{{ $config['maturity']['year_1_multiplier'] }}" class="form-control">
                <small class="text-muted">First year yield fraction</small>
            </div>
            <div>
                <label for="year_2_mult">Year 2 Multiplier</label>
                <input type="number" step="0.01" id="year_2_mult" name="maturity[year_2_multiplier]" 
                       value="{{ $config['maturity']['year_2_multiplier'] }}" class="form-control">
                <small class="text-muted">Second year yield fraction</small>
            </div>
            <div>
                <label for="year_3_mult">Year 3 Multiplier</label>
                <input type="number" step="0.01" id="year_3_mult" name="maturity[year_3_multiplier]" 
                       value="{{ $config['maturity']['year_3_multiplier'] }}" class="form-control">
                <small class="text-muted">Mature yield baseline</small>
            </div>
            <div>
                <label for="year_4_mult">Year 4+ Multiplier</label>
                <input type="number" step="0.01" id="year_4_mult" name="maturity[year_4_plus_multiplier]" 
                       value="{{ $config['maturity']['year_4_plus_multiplier'] }}" class="form-control">
                <small class="text-muted">Peak production multiplier</small>
            </div>
        </div>
    </div>

    <!-- Operating Cost Parameters -->
    <div class="mobile-card">
        <h3>💸 Operating Cost Parameters</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
            <div>
                <label for="current_cost">Current Scale Cost per Plant ($)</label>
                <input type="number" step="0.01" id="current_cost" name="operating_costs[current_scale_per_plant]" 
                       value="{{ $config['operating_costs']['current_scale_per_plant'] }}" class="form-control">
                <small class="text-muted">Annual cost for current operation size</small>
            </div>
            <div>
                <label for="medium_cost">Medium Scale Cost per Plant ($)</label>
                <input type="number" step="0.01" id="medium_cost" name="operating_costs[medium_scale_per_plant]" 
                       value="{{ $config['operating_costs']['medium_scale_per_plant'] }}" class="form-control">
                <small class="text-muted">1k-10k plants</small>
            </div>
            <div>
                <label for="large_cost">Large Scale Cost per Plant ($)</label>
                <input type="number" step="0.01" id="large_cost" name="operating_costs[large_scale_per_plant]" 
                       value="{{ $config['operating_costs']['large_scale_per_plant'] }}" class="form-control">
                <small class="text-muted">10k+ plants (economies of scale)</small>
            </div>
            <div>
                <label for="medium_threshold">Medium Scale Threshold</label>
                <input type="number" id="medium_threshold" name="operating_costs[medium_scale_threshold]" 
                       value="{{ $config['operating_costs']['medium_scale_threshold'] }}" class="form-control">
                <small class="text-muted">Plants needed for medium scale</small>
            </div>
            <div>
                <label for="large_threshold">Large Scale Threshold</label>
                <input type="number" id="large_threshold" name="operating_costs[large_scale_threshold]" 
                       value="{{ $config['operating_costs']['large_scale_threshold'] }}" class="form-control">
                <small class="text-muted">Plants needed for large scale</small>
            </div>
        </div>
    </div>

    <!-- Labor Parameters -->
    <div class="mobile-card">
        <h3>👥 Labor Parameters</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
            <div>
                <label for="labor_hours">Hours per Plant per Year</label>
                <input type="number" step="0.1" id="labor_hours" name="labor[hours_per_plant_per_year]" 
                       value="{{ $config['labor']['hours_per_plant_per_year'] }}" class="form-control">
                <small class="text-muted">Total annual labor hours per plant</small>
            </div>
            <div>
                <label for="hourly_rate">Hourly Rate ($)</label>
                <input type="number" step="0.01" id="hourly_rate" name="labor[hourly_rate]" 
                       value="{{ $config['labor']['hourly_rate'] }}" class="form-control">
                <small class="text-muted">Average labor cost per hour</small>
            </div>
            <div>
                <label for="efficiency_gain">Efficiency Gain per 1000 Plants</label>
                <input type="number" step="0.001" id="efficiency_gain" name="labor[efficiency_improvement_per_1000_plants]" 
                       value="{{ $config['labor']['efficiency_improvement_per_1000_plants'] }}" class="form-control">
                <small class="text-muted">Labor efficiency improvement with scale (decimal)</small>
            </div>
        </div>
    </div>

    <!-- Setup Cost Parameters -->
    <div class="mobile-card">
        <h3>🏗️ Setup/Expansion Costs</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
            <div>
                <label for="small_setup">Small Expansion per Plant ($)</label>
                <input type="number" step="0.01" id="small_setup" name="setup_costs[small_expansion_per_plant]" 
                       value="{{ $config['setup_costs']['small_expansion_per_plant'] }}" class="form-control">
                <small class="text-muted">< 1k plants</small>
            </div>
            <div>
                <label for="medium_setup">Medium Expansion per Plant ($)</label>
                <input type="number" step="0.01" id="medium_setup" name="setup_costs[medium_expansion_per_plant]" 
                       value="{{ $config['setup_costs']['medium_expansion_per_plant'] }}" class="form-control">
                <small class="text-muted">1k-10k plants</small>
            </div>
            <div>
                <label for="large_setup">Large Expansion per Plant ($)</label>
                <input type="number" step="0.01" id="large_setup" name="setup_costs[large_expansion_per_plant]" 
                       value="{{ $config['setup_costs']['large_expansion_per_plant'] }}" class="form-control">
                <small class="text-muted">10k+ plants (bulk pricing)</small>
            </div>
        </div>
    </div>

    <!-- Growth Parameters -->
    <div class="mobile-card">
        <h3>📈 Growth Projection Parameters</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
            <div>
                <label for="air_layering">Air Layering Success Rate (%)</label>
                <input type="number" step="0.1" id="air_layering" name="growth[air_layering_success_rate]" 
                       value="{{ $config['growth']['air_layering_success_rate'] }}" class="form-control">
                <small class="text-muted">Annual plant propagation rate</small>
            </div>
            <div>
                <label for="mortality">Plant Mortality Rate (%)</label>
                <input type="number" step="0.1" id="mortality" name="growth[plant_mortality_rate]" 
                       value="{{ $config['growth']['plant_mortality_rate'] }}" class="form-control">
                <small class="text-muted">Annual plant loss rate</small>
            </div>
            <div>
                <label for="plants_per_acre">Plants per Acre</label>
                <input type="number" id="plants_per_acre" name="growth[plants_per_acre]" 
                       value="{{ $config['growth']['plants_per_acre'] }}" class="form-control">
                <small class="text-muted">Planting density</small>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="mobile-card">
        <div style="display: flex; gap: 15px; justify-content: space-between; flex-wrap: wrap;">
            <div style="display: flex; gap: 15px;">
                <button type="submit" class="touch-btn touch-btn-success">💾 Save Configuration</button>
                <a href="/config/projections/reset" class="touch-btn touch-btn-warning" 
                   onclick="return confirm('Reset all parameters to defaults?')">🔄 Reset to Defaults</a>
            </div>
            <div style="display: flex; gap: 15px;">
                <a href="/config/projections/scenarios" class="touch-btn touch-btn-info">📊 Compare Scenarios</a>
                <button type="button" id="preview-btn" class="touch-btn touch-btn-primary">👁️ Preview ROI</button>
            </div>
        </div>
    </div>

</form>

<!-- Preview Section -->
<div id="preview-section" class="mobile-card" style="display: none;">
    <h3>👁️ ROI Preview with Current Settings</h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0;">
        <label>
            Plant Count for Preview:
            <input type="number" id="preview-plants" value="1000" min="1" class="form-control">
        </label>
        <button type="button" id="calculate-preview" class="touch-btn touch-btn-info">Calculate</button>
    </div>
    <div id="preview-results"></div>
</div>

<script>
document.getElementById('preview-btn').addEventListener('click', function() {
    const section = document.getElementById('preview-section');
    section.style.display = section.style.display === 'none' ? 'block' : 'none';
});

document.getElementById('calculate-preview').addEventListener('click', function() {
    const plantCount = document.getElementById('preview-plants').value;
    const resultsDiv = document.getElementById('preview-results');
    
    resultsDiv.innerHTML = '<p>Calculating...</p>';
    
    fetch(`/config/projections/preview-roi?plant_count=${plantCount}`)
        .then(response => response.json())
        .then(data => {
            const roi = data.roi_calculation;
            resultsDiv.innerHTML = `
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; background: #f8f9fa; padding: 20px; border-radius: 8px;">
                    <div><strong>Annual Revenue:</strong><br>$${roi.annual_revenue.toLocaleString()}</div>
                    <div><strong>Annual Costs:</strong><br>$${roi.annual_costs.toLocaleString()}</div>
                    <div><strong>Annual Profit:</strong><br>$${roi.annual_profit.toLocaleString()}</div>
                    <div><strong>ROI:</strong><br>${roi.roi_percentage}%</div>
                    <div><strong>Revenue/Plant:</strong><br>$${roi.revenue_per_plant.toFixed(2)}</div>
                    <div><strong>Cost/Plant:</strong><br>$${roi.cost_per_plant.toFixed(2)}</div>
                    <div><strong>Profit/Plant:</strong><br>$${roi.profit_per_plant.toFixed(2)}</div>
                </div>
            `;
        })
        .catch(error => {
            resultsDiv.innerHTML = '<p style="color: red;">Error calculating preview</p>';
        });
});
</script>

@endsection