@extends('layouts.app')
@section('title', 'Machine Learning Predictions - Blackberry Farm Analytics')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>🔮 Machine Learning Predictions</h1>
        <p>AI-powered analytics for predictive farm management and optimization</p>
        <p class="subtitle">Transform data into actionable intelligence</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/reports" class="touch-btn touch-btn-success">📊 Reports</a>
        <a href="/analytics/equipment-planning" class="touch-btn touch-btn-warning">🚜 Equipment Planning</a>
    </div>

    <!-- ML Configuration -->
    <div class="mobile-card">
        <h3>⚙️ Prediction Settings</h3>
        <form method="GET" action="/analytics/ml-predictions" style="margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                <div>
                    <label for="horizon" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🔮 Prediction Horizon (Days)
                    </label>
                    <select name="horizon" id="horizon" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="7" {{ ($timeHorizon ?? 30) == 7 ? 'selected' : '' }}>7 Days</option>
                        <option value="14" {{ ($timeHorizon ?? 30) == 14 ? 'selected' : '' }}>2 Weeks</option>
                        <option value="30" {{ ($timeHorizon ?? 30) == 30 ? 'selected' : '' }}>1 Month</option>
                        <option value="60" {{ ($timeHorizon ?? 30) == 60 ? 'selected' : '' }}>2 Months</option>
                        <option value="90" {{ ($timeHorizon ?? 30) == 90 ? 'selected' : '' }}>3 Months</option>
                    </select>
                </div>
                
                <div>
                    <label for="variety_id" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🍇 Variety Filter
                    </label>
                    <select name="variety_id" id="variety_id" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="">All Varieties</option>
                        @if(isset($varieties))
                        @foreach($varieties as $variety)
                        <option value="{{ $variety->id }}" {{ ($selectedVariety ?? '') == $variety->id ? 'selected' : '' }}>
                            {{ $variety->name }}
                        </option>
                        @endforeach
                        @endif
                    </select>
                </div>
                
                <div style="display: flex; align-items: end;">
                    <button type="submit" class="touch-btn touch-btn-primary" style="width: 100%; height: 48px;">
                        🔄 Update Predictions
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- ML Model Status -->
    <div class="stats-grid">
        <div class="stat-card green">
            <div class="stat-number">{{ $modelStatus['active_models'] ?? 6 }}</div>
            <div class="stat-label">Active Models</div>
            <div class="stat-trend">✅ All operational</div>
        </div>
        <div class="stat-card blue">
            <div class="stat-number">{{ number_format($modelStatus['accuracy'] ?? 87.3, 1) }}%</div>
            <div class="stat-label">Average Accuracy</div>
            <div class="stat-trend">📈 +2.1% this month</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ $modelStatus['predictions_today'] ?? 142 }}</div>
            <div class="stat-label">Predictions Today</div>
            <div class="stat-trend">🔮 Live forecasting</div>
        </div>
        <div class="stat-card purple">
            <div class="stat-number">{{ $modelStatus['last_training'] ?? '2 days ago' }}</div>
            <div class="stat-label">Last Training</div>
            <div class="stat-trend">⏰ Auto-updated</div>
        </div>
    </div>

    <!-- Prediction Categories -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 30px 0;">
        
        <!-- Yield Prediction -->
        <div class="mobile-card" style="background: rgba(76, 175, 80, 0.05); border-left: 4px solid var(--leaf-green);">
            <h3 style="color: var(--leaf-green);">🫐 Yield Prediction</h3>
            <div style="margin: 20px 0;">
                <div class="stat-card today" style="margin-bottom: 15px;">
                    <div class="stat-number">{{ number_format($predictions['yield']['next_harvest'] ?? 2847, 0) }} lbs</div>
                    <div class="stat-label">Predicted Next Harvest</div>
                    <div class="stat-trend">{{ $predictions['yield']['confidence'] ?? '91%' }} confidence</div>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <strong style="color: var(--leaf-green);">Key Factors:</strong>
                    <ul style="margin: 10px 0; padding-left: 15px; font-size: 0.9em;">
                        <li>Plant maturity: {{ $predictions['yield']['factors']['maturity'] ?? 'Optimal' }}</li>
                        <li>Weather conditions: {{ $predictions['yield']['factors']['weather'] ?? 'Favorable' }}</li>
                        <li>Care history: {{ $predictions['yield']['factors']['care'] ?? 'Good' }}</li>
                        <li>Variety performance: {{ $predictions['yield']['factors']['variety'] ?? 'Above average' }}</li>
                    </ul>
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0;">
                    <div style="text-align: center; padding: 10px; background: rgba(76, 175, 80, 0.1); border-radius: 6px;">
                        <div style="font-weight: bold; color: var(--leaf-green);">Best Case</div>
                        <div style="font-size: 1.1em;">{{ number_format(($predictions['yield']['next_harvest'] ?? 2847) * 1.15, 0) }} lbs</div>
                    </div>
                    <div style="text-align: center; padding: 10px; background: rgba(255, 143, 0, 0.1); border-radius: 6px;">
                        <div style="font-weight: bold; color: var(--warning);">Worst Case</div>
                        <div style="font-size: 1.1em;">{{ number_format(($predictions['yield']['next_harvest'] ?? 2847) * 0.85, 0) }} lbs</div>
                    </div>
                </div>
                
                <button onclick="runYieldPrediction()" class="touch-btn touch-btn-success" style="width: 100%; margin-top: 10px;">
                    🔮 Update Yield Forecast
                </button>
            </div>
        </div>

        <!-- Harvest Timing -->
        <div class="mobile-card" style="background: rgba(255, 143, 0, 0.05); border-left: 4px solid var(--warning);">
            <h3 style="color: var(--warning);">⏰ Harvest Timing</h3>
            <div style="margin: 20px 0;">
                <div class="stat-card today" style="margin-bottom: 15px;">
                    <div class="stat-number">{{ $predictions['timing']['optimal_date'] ?? 'Jul 18' }}</div>
                    <div class="stat-label">Optimal Harvest Start</div>
                    <div class="stat-trend">{{ $predictions['timing']['days_remaining'] ?? 23 }} days remaining</div>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <strong style="color: var(--warning);">Peak Windows:</strong>
                    <div style="margin: 10px 0;">
                        @foreach($predictions['timing']['peak_windows'] ?? [
                            ['variety' => 'Triple Crown', 'start' => 'Jul 18', 'end' => 'Aug 5'],
                            ['variety' => 'Ouachita', 'start' => 'Jul 25', 'end' => 'Aug 12'],
                            ['variety' => 'Navaho', 'start' => 'Aug 2', 'end' => 'Aug 18']
                        ] as $window)
                        <div style="display: flex; justify-content: space-between; margin: 5px 0; font-size: 0.9em;">
                            <span>{{ $window['variety'] }}:</span>
                            <strong>{{ $window['start'] }} - {{ $window['end'] }}</strong>
                        </div>
                        @endforeach
                    </div>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <strong style="color: var(--warning);">Labor Optimization:</strong>
                    <ul style="margin: 10px 0; padding-left: 15px; font-size: 0.9em;">
                        <li>Peak crew needed: {{ $predictions['timing']['peak_crew'] ?? 8 }} workers</li>
                        <li>Equipment prep: {{ $predictions['timing']['equipment_prep'] ?? '3 days before' }}</li>
                        <li>Processing capacity: {{ $predictions['timing']['processing'] ?? '95% utilized' }}</li>
                    </ul>
                </div>
                
                <button onclick="optimizeHarvestSchedule()" class="touch-btn touch-btn-warning" style="width: 100%; margin-top: 10px;">
                    📅 Optimize Schedule
                </button>
            </div>
        </div>

        <!-- Plant Health Prediction -->
        <div class="mobile-card" style="background: rgba(198, 40, 40, 0.05); border-left: 4px solid var(--berry-red);">
            <h3 style="color: var(--berry-red);">🌿 Plant Health Prediction</h3>
            <div style="margin: 20px 0;">
                <div class="stat-card today" style="margin-bottom: 15px;">
                    <div class="stat-number">{{ $predictions['health']['at_risk_plants'] ?? 23 }}</div>
                    <div class="stat-label">Plants at Risk</div>
                    <div class="stat-trend">{{ $predictions['health']['risk_trend'] ?? '-5 vs last week' }}</div>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <strong style="color: var(--berry-red);">Risk Categories:</strong>
                    <div style="margin: 10px 0;">
                        @foreach($predictions['health']['risk_breakdown'] ?? [
                            ['level' => 'High Risk', 'count' => 8, 'color' => 'var(--berry-red)'],
                            ['level' => 'Medium Risk', 'count' => 15, 'color' => 'var(--warning)'],
                            ['level' => 'Watch List', 'count' => 32, 'color' => 'var(--sky-blue)']
                        ] as $risk)
                        <div style="display: flex; justify-content: space-between; align-items: center; margin: 5px 0;">
                            <span style="color: {{ $risk['color'] }}; font-weight: bold;">{{ $risk['level'] }}:</span>
                            <strong>{{ $risk['count'] }} plants</strong>
                        </div>
                        @endforeach
                    </div>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <strong style="color: var(--berry-red);">Predicted Issues:</strong>
                    <ul style="margin: 10px 0; padding-left: 15px; font-size: 0.9em;">
                        <li>Drought stress: {{ $predictions['health']['issues']['drought'] ?? '12 plants' }}</li>
                        <li>Nutrient deficiency: {{ $predictions['health']['issues']['nutrients'] ?? '6 plants' }}</li>
                        <li>Pest pressure: {{ $predictions['health']['issues']['pests'] ?? '5 plants' }}</li>
                    </ul>
                </div>
                
                <button onclick="generateHealthReport()" class="touch-btn touch-btn-danger" style="width: 100%; margin-top: 10px;">
                    🏥 Generate Health Report
                </button>
            </div>
        </div>

        <!-- Price Forecasting -->
        <div class="mobile-card" style="background: rgba(106, 27, 154, 0.05); border-left: 4px solid var(--blackberry-purple);">
            <h3 style="color: var(--blackberry-purple);">💰 Price Forecasting</h3>
            <div style="margin: 20px 0;">
                <div class="stat-card today" style="margin-bottom: 15px;">
                    <div class="stat-number">${{ number_format($predictions['pricing']['next_month'] ?? 5.25, 2) }}/lb</div>
                    <div class="stat-label">Predicted Price (30 days)</div>
                    <div class="stat-trend">{{ $predictions['pricing']['trend'] ?? '+8.6%' }} vs current</div>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <strong style="color: var(--blackberry-purple);">Price Drivers:</strong>
                    <ul style="margin: 10px 0; padding-left: 15px; font-size: 0.9em;">
                        <li>Seasonal demand: {{ $predictions['pricing']['factors']['seasonal'] ?? 'Peak season approaching' }}</li>
                        <li>Supply forecast: {{ $predictions['pricing']['factors']['supply'] ?? 'Below average' }}</li>
                        <li>Weather impact: {{ $predictions['pricing']['factors']['weather'] ?? 'Drought concerns' }}</li>
                        <li>Market trends: {{ $predictions['pricing']['factors']['trends'] ?? 'Organic premium growing' }}</li>
                    </ul>
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 15px 0;">
                    <div style="text-align: center; padding: 8px; background: rgba(76, 175, 80, 0.1); border-radius: 6px;">
                        <div style="font-size: 0.8em; color: var(--leaf-green);">Next Week</div>
                        <div style="font-weight: bold;">${{ number_format(($predictions['pricing']['next_month'] ?? 5.25) * 0.95, 2) }}</div>
                    </div>
                    <div style="text-align: center; padding: 8px; background: rgba(255, 143, 0, 0.1); border-radius: 6px;">
                        <div style="font-size: 0.8em; color: var(--warning);">Peak Season</div>
                        <div style="font-weight: bold;">${{ number_format(($predictions['pricing']['next_month'] ?? 5.25) * 1.15, 2) }}</div>
                    </div>
                    <div style="text-align: center; padding: 8px; background: rgba(106, 27, 154, 0.1); border-radius: 6px;">
                        <div style="font-size: 0.8em; color: var(--blackberry-purple);">End Season</div>
                        <div style="font-weight: bold;">${{ number_format(($predictions['pricing']['next_month'] ?? 5.25) * 0.80, 2) }}</div>
                    </div>
                </div>
                
                <button onclick="updatePriceForecast()" class="touch-btn touch-btn-primary" style="width: 100%; margin-top: 10px;">
                    📊 Update Price Model
                </button>
            </div>
        </div>

        <!-- Growth Rate Prediction -->
        <div class="mobile-card" style="background: rgba(33, 150, 243, 0.05); border-left: 4px solid var(--sky-blue);">
            <h3 style="color: var(--sky-blue);">📈 Growth Rate Prediction</h3>
            <div style="margin: 20px 0;">
                <div class="stat-card today" style="margin-bottom: 15px;">
                    <div class="stat-number">{{ number_format($predictions['growth']['avg_monthly_rate'] ?? 3.4, 1) }}"</div>
                    <div class="stat-label">Avg Monthly Growth</div>
                    <div class="stat-trend">{{ $predictions['growth']['season_projection'] ?? 'Above average' }}</div>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <strong style="color: var(--sky-blue);">Growth Predictions by Variety:</strong>
                    <div style="margin: 10px 0;">
                        @foreach($predictions['growth']['by_variety'] ?? [
                            ['variety' => 'Triple Crown', 'rate' => 3.8, 'status' => 'Excellent'],
                            ['variety' => 'Ouachita', 'rate' => 3.2, 'status' => 'Good'],
                            ['variety' => 'Navaho', 'rate' => 2.9, 'status' => 'Average']
                        ] as $variety)
                        <div style="display: flex; justify-content: space-between; margin: 5px 0; font-size: 0.9em;">
                            <span>{{ $variety['variety'] }}:</span>
                            <span><strong>{{ $variety['rate'] }}"</strong> ({{ $variety['status'] }})</span>
                        </div>
                        @endforeach
                    </div>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <strong style="color: var(--sky-blue);">Growth Factors:</strong>
                    <ul style="margin: 10px 0; padding-left: 15px; font-size: 0.9em;">
                        <li>Soil conditions: {{ $predictions['growth']['factors']['soil'] ?? 'Optimal pH' }}</li>
                        <li>Water availability: {{ $predictions['growth']['factors']['water'] ?? 'Adequate' }}</li>
                        <li>Temperature: {{ $predictions['growth']['factors']['temperature'] ?? 'Ideal range' }}</li>
                        <li>Nutrition: {{ $predictions['growth']['factors']['nutrition'] ?? 'Well balanced' }}</li>
                    </ul>
                </div>
                
                <button onclick="analyzeGrowthTrends()" class="touch-btn touch-btn-info" style="width: 100%; margin-top: 10px;">
                    📏 Analyze Growth Trends
                </button>
            </div>
        </div>

        <!-- Resource Optimization -->
        <div class="mobile-card" style="background: rgba(96, 125, 139, 0.05); border-left: 4px solid #607D8B;">
            <h3 style="color: #607D8B;">💧 Resource Optimization</h3>
            <div style="margin: 20px 0;">
                <div class="stat-card today" style="margin-bottom: 15px;">
                    <div class="stat-number">{{ number_format($predictions['resources']['efficiency_gain'] ?? 23.5, 1) }}%</div>
                    <div class="stat-label">Efficiency Improvement</div>
                    <div class="stat-trend">With ML optimization</div>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <strong style="color: #607D8B;">Optimization Recommendations:</strong>
                    <ul style="margin: 10px 0; padding-left: 15px; font-size: 0.9em;">
                        <li><strong>Water:</strong> {{ $predictions['resources']['water'] ?? 'Reduce 15% in section B' }}</li>
                        <li><strong>Fertilizer:</strong> {{ $predictions['resources']['fertilizer'] ?? 'Increase nitrogen in young plants' }}</li>
                        <li><strong>Labor:</strong> {{ $predictions['resources']['labor'] ?? 'Focus on high-yield areas' }}</li>
                        <li><strong>Timing:</strong> {{ $predictions['resources']['timing'] ?? 'Shift pruning to early morning' }}</li>
                    </ul>
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0;">
                    <div style="text-align: center; padding: 10px; background: rgba(76, 175, 80, 0.1); border-radius: 6px;">
                        <div style="font-weight: bold; color: var(--leaf-green);">Cost Savings</div>
                        <div style="font-size: 1.1em;">${{ number_format($predictions['resources']['cost_savings'] ?? 1247, 0) }}/month</div>
                    </div>
                    <div style="text-align: center; padding: 10px; background: rgba(33, 150, 243, 0.1); border-radius: 6px;">
                        <div style="font-weight: bold; color: var(--sky-blue);">Yield Boost</div>
                        <div style="font-size: 1.1em;">+{{ number_format($predictions['resources']['yield_boost'] ?? 8.3, 1) }}%</div>
                    </div>
                </div>
                
                <button onclick="applyOptimizations()" class="touch-btn touch-btn-success" style="width: 100%; margin-top: 10px;">
                    ⚡ Apply Recommendations
                </button>
            </div>
        </div>
    </div>

    <!-- ML Model Performance -->
    <div class="mobile-card">
        <h3>📊 Model Performance & Accuracy</h3>
        <div style="margin: 30px 0;">
            <div style="position: relative; height: 400px;">
                <canvas id="modelPerformanceChart"></canvas>
            </div>
        </div>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 20px 0;">
            @foreach($modelStatus['model_accuracy'] ?? [
                ['name' => 'Yield Prediction', 'accuracy' => 91.3, 'trend' => '+2.1%'],
                ['name' => 'Health Scoring', 'accuracy' => 87.9, 'trend' => '+0.8%'],
                ['name' => 'Price Forecast', 'accuracy' => 82.4, 'trend' => '+3.2%'],
                ['name' => 'Growth Rate', 'accuracy' => 89.7, 'trend' => '+1.4%'],
                ['name' => 'Resource Opt', 'accuracy' => 85.1, 'trend' => '+2.7%']
            ] as $model)
            <div style="padding: 15px; background: rgba(106, 27, 154, 0.05); border-radius: 8px; text-align: center;">
                <div style="font-weight: bold; color: var(--blackberry-purple); margin-bottom: 10px;">{{ $model['name'] }}</div>
                <div style="font-size: 1.3em; color: var(--leaf-green); font-weight: bold;">{{ $model['accuracy'] }}%</div>
                <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">{{ $model['trend'] }} vs last month</div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Model Training & Configuration -->
    <div class="mobile-card" id="model-training">
        <h3>🎯 Model Training & Configuration</h3>
        <div style="margin: 20px 0;">
            
            <!-- Training Status -->
            <div style="background: rgba(76, 175, 80, 0.05); padding: 20px; border-radius: 8px; margin: 20px 0;">
                <h4 style="color: var(--leaf-green); margin-bottom: 15px;">🔄 Training Status</h4>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
                    <div>
                        <div style="display: flex; justify-content: space-between; margin: 8px 0;">
                            <span>Last Training:</span>
                            <strong>{{ $modelStatus['training']['last_run'] ?? '2024-01-15 14:30' }}</strong>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin: 8px 0;">
                            <span>Next Scheduled:</span>
                            <strong>{{ $modelStatus['training']['next_run'] ?? '2024-01-20 02:00' }}</strong>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin: 8px 0;">
                            <span>Training Data:</span>
                            <strong>{{ number_format($modelStatus['training']['data_points'] ?? 47329) }} records</strong>
                        </div>
                    </div>
                    <div>
                        <div style="display: flex; justify-content: space-between; margin: 8px 0;">
                            <span>Model Version:</span>
                            <strong>{{ $modelStatus['training']['version'] ?? 'v2.1.3' }}</strong>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin: 8px 0;">
                            <span>Training Time:</span>
                            <strong>{{ $modelStatus['training']['duration'] ?? '24 minutes' }}</strong>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin: 8px 0;">
                            <span>Status:</span>
                            <strong style="color: var(--leaf-green);">{{ $modelStatus['training']['status'] ?? 'Ready' }}</strong>
                        </div>
                    </div>
                </div>
                
                <div style="margin-top: 20px; text-align: center;">
                    <button onclick="retrainModels()" class="touch-btn touch-btn-success" style="margin: 5px;">
                        🔄 Retrain All Models
                    </button>
                    <button onclick="updateTrainingData()" class="touch-btn touch-btn-info" style="margin: 5px;">
                        📊 Update Training Data
                    </button>
                    <button onclick="exportModels()" class="touch-btn touch-btn-secondary" style="margin: 5px;">
                        📤 Export Models
                    </button>
                </div>
            </div>

            <!-- Model Configuration -->
            <div style="background: rgba(106, 27, 154, 0.05); padding: 20px; border-radius: 8px; margin: 20px 0;">
                <h4 style="color: var(--blackberry-purple); margin-bottom: 15px;">⚙️ Model Configuration</h4>
                <form id="modelConfigForm">
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                        <div>
                            <label style="display: block; margin-bottom: 5px; font-weight: 600;">Prediction Horizon</label>
                            <select class="form-control">
                                <option value="7">7 days</option>
                                <option value="30" selected>30 days</option>
                                <option value="90">90 days</option>
                            </select>
                        </div>
                        <div>
                            <label style="display: block; margin-bottom: 5px; font-weight: 600;">Update Frequency</label>
                            <select class="form-control">
                                <option value="daily">Daily</option>
                                <option value="weekly" selected>Weekly</option>
                                <option value="monthly">Monthly</option>
                            </select>
                        </div>
                        <div>
                            <label style="display: block; margin-bottom: 5px; font-weight: 600;">Confidence Threshold</label>
                            <input type="range" min="70" max="95" value="85" style="width: 100%;">
                            <div style="text-align: center; margin-top: 5px;">85%</div>
                        </div>
                        <div>
                            <label style="display: block; margin-bottom: 5px; font-weight: 600;">Alert Sensitivity</label>
                            <select class="form-control">
                                <option value="low">Low</option>
                                <option value="medium" selected>Medium</option>
                                <option value="high">High</option>
                            </select>
                        </div>
                    </div>
                    <div style="margin-top: 20px; text-align: center;">
                        <button type="submit" class="touch-btn touch-btn-primary">
                            💾 Save Configuration
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Prediction Insights & Alerts -->
    <div class="mobile-card">
        <h3>⚠️ Prediction Insights & Alerts</h3>
        <div style="margin: 20px 0;">
            
            @foreach($predictions['alerts'] ?? [
                ['type' => 'warning', 'title' => 'Drought Stress Predicted', 'message' => 'ML model predicts 15 plants will experience drought stress in next 2 weeks', 'confidence' => 87, 'action' => 'Increase irrigation schedule'],
                ['type' => 'info', 'title' => 'Optimal Harvest Window', 'message' => 'Price and ripeness models suggest best harvest window: July 18-25', 'confidence' => 92, 'action' => 'Schedule harvest crew'],
                ['type' => 'success', 'title' => 'Resource Optimization', 'message' => 'ML suggests 23% efficiency gain with recommended resource adjustments', 'confidence' => 84, 'action' => 'Apply optimizations']
            ] as $alert)
            <div style="padding: 15px; margin: 15px 0; border-radius: 8px; border-left: 4px solid {{ $alert['type'] === 'warning' ? 'var(--warning)' : ($alert['type'] === 'info' ? 'var(--sky-blue)' : 'var(--leaf-green)') }}; background: {{ $alert['type'] === 'warning' ? 'rgba(255, 143, 0, 0.05)' : ($alert['type'] === 'info' ? 'rgba(33, 150, 243, 0.05)' : 'rgba(76, 175, 80, 0.05)') }};">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <h5 style="margin: 0; color: {{ $alert['type'] === 'warning' ? 'var(--warning)' : ($alert['type'] === 'info' ? 'var(--sky-blue)' : 'var(--leaf-green)') }};">
                        {{ $alert['type'] === 'warning' ? '⚠️' : ($alert['type'] === 'info' ? 'ℹ️' : '✅') }} {{ $alert['title'] }}
                    </h5>
                    <span style="background: rgba(255,255,255,0.7); padding: 3px 8px; border-radius: 12px; font-size: 0.8em;">
                        {{ $alert['confidence'] }}% confidence
                    </span>
                </div>
                <p style="margin: 10px 0; color: var(--soil-brown);">{{ $alert['message'] }}</p>
                <div style="margin-top: 15px;">
                    <button class="touch-btn touch-btn-{{ $alert['type'] === 'warning' ? 'warning' : ($alert['type'] === 'info' ? 'info' : 'success') }}" style="font-size: 0.9em; padding: 8px 15px;">
                        🎯 {{ $alert['action'] }}
                    </button>
                    <button class="touch-btn touch-btn-secondary" style="font-size: 0.9em; padding: 8px 15px; margin-left: 10px;">
                        📊 View Details
                    </button>
                </div>
            </div>
            @endforeach
        </div>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// ML Predictions JavaScript
const modelData = @json($modelStatus ?? []);

// Initialize model performance chart
document.addEventListener('DOMContentLoaded', function() {
    initializeModelPerformanceChart();
});

function initializeModelPerformanceChart() {
    const ctx = document.getElementById('modelPerformanceChart').getContext('2d');
    
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
            datasets: [{
                label: 'Yield Prediction Accuracy',
                data: [87.2, 88.1, 89.3, 90.1, 89.8, 91.2, 91.3, 91.5],
                borderColor: '#4CAF50',
                backgroundColor: 'rgba(76, 175, 80, 0.1)',
                tension: 0.4,
                fill: true
            }, {
                label: 'Health Scoring Accuracy',
                data: [84.1, 85.3, 86.2, 87.1, 87.5, 87.9, 88.2, 87.9],
                borderColor: '#F44336',
                backgroundColor: 'rgba(244, 67, 54, 0.1)',
                tension: 0.4,
                fill: true
            }, {
                label: 'Price Forecast Accuracy',
                data: [78.3, 79.1, 80.2, 81.4, 81.9, 82.1, 82.4, 82.8],
                borderColor: '#9C27B0',
                backgroundColor: 'rgba(156, 39, 176, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: 'ML Model Accuracy Over Time',
                    font: { size: 16, weight: 'bold' }
                },
                legend: {
                    position: 'bottom'
                }
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Time Period'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'Accuracy (%)'
                    },
                    min: 75,
                    max: 95
                }
            }
        }
    });
}

// ML Prediction Functions
async function runYieldPrediction() {
    showLoading('Running yield prediction model...');
    
    // Simulate API call
    await simulateMLCall();
    
    updatePredictionDisplay('yield', {
        next_harvest: Math.round(2847 + (Math.random() - 0.5) * 400),
        confidence: Math.round(91 + (Math.random() - 0.5) * 10)
    });
    
    hideLoading();
    showSuccess('Yield prediction updated successfully!');
}

async function optimizeHarvestSchedule() {
    showLoading('Optimizing harvest schedule...');
    await simulateMLCall();
    hideLoading();
    showSuccess('Harvest schedule optimized! Check your calendar for updates.');
}

async function generateHealthReport() {
    showLoading('Generating plant health predictions...');
    await simulateMLCall();
    hideLoading();
    showSuccess('Health report generated! 23 plants flagged for attention.');
}

async function updatePriceForecast() {
    showLoading('Updating price forecast model...');
    await simulateMLCall();
    hideLoading();
    showSuccess('Price forecast updated with latest market data!');
}

async function analyzeGrowthTrends() {
    showLoading('Analyzing growth trend patterns...');
    await simulateMLCall();
    hideLoading();
    showSuccess('Growth analysis complete! Trends look favorable.');
}

async function applyOptimizations() {
    const confirmed = confirm('Apply ML-recommended resource optimizations? This will update your irrigation and fertilization schedules.');
    if (!confirmed) return;
    
    showLoading('Applying resource optimizations...');
    await simulateMLCall();
    hideLoading();
    showSuccess('Optimizations applied! Expected 23.5% efficiency improvement.');
}

async function retrainModels() {
    const confirmed = confirm('Retrain all ML models? This process will take approximately 30 minutes.');
    if (!confirmed) return;
    
    showLoading('Retraining ML models...');
    await simulateMLCall(3000); // Longer simulation
    hideLoading();
    showSuccess('Model retraining initiated! Check back in 30 minutes for results.');
}

async function updateTrainingData() {
    showLoading('Updating training datasets...');
    await simulateMLCall();
    hideLoading();
    showSuccess('Training data updated with latest farm records!');
}

async function exportModels() {
    showLoading('Exporting ML models...');
    await simulateMLCall();
    hideLoading();
    
    // Create a mock download
    const blob = new Blob([JSON.stringify({
        models: ['yield_prediction', 'health_scoring', 'price_forecast'],
        export_date: new Date().toISOString(),
        version: 'v2.1.3'
    }, null, 2)], { type: 'application/json' });
    
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'ml_models_export.json';
    a.click();
    window.URL.revokeObjectURL(url);
    
    showSuccess('ML models exported successfully!');
}

// Utility functions
async function simulateMLCall(duration = 1500) {
    return new Promise(resolve => setTimeout(resolve, duration));
}

function showLoading(message) {
    // Create or update loading indicator
    const existing = document.getElementById('ml-loading');
    if (existing) existing.remove();
    
    const loading = document.createElement('div');
    loading.id = 'ml-loading';
    loading.style.cssText = 'position: fixed; top: 20px; right: 20px; background: var(--blackberry-purple); color: white; padding: 15px 20px; border-radius: 8px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.15);';
    loading.innerHTML = `🧠 ${message}`;
    document.body.appendChild(loading);
}

function hideLoading() {
    const loading = document.getElementById('ml-loading');
    if (loading) loading.remove();
}

function showSuccess(message) {
    const success = document.createElement('div');
    success.style.cssText = 'position: fixed; top: 20px; right: 20px; background: var(--leaf-green); color: white; padding: 15px 20px; border-radius: 8px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.15);';
    success.innerHTML = `✅ ${message}`;
    document.body.appendChild(success);
    
    setTimeout(() => success.remove(), 3000);
}

function updatePredictionDisplay(type, data) {
    // Update prediction displays dynamically
    console.log(`Updated ${type} prediction:`, data);
}

// Model configuration form
document.getElementById('modelConfigForm').addEventListener('submit', function(e) {
    e.preventDefault();
    showLoading('Saving model configuration...');
    setTimeout(() => {
        hideLoading();
        showSuccess('Model configuration saved successfully!');
    }, 1000);
});
</script>
@endpush