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

    <!-- Page Header -->
    <div class="page-header">
        <h1>🌾 Yield Mapping</h1>
        <p>Geographic visualization of harvest performance and productivity patterns</p>
        <p class="subtitle">Identify high-performing areas and optimize resource allocation</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-5" style="margin-bottom: 30px;">
        <a href="/analytics/geographic-analysis" class="touch-btn touch-btn-primary">← Geographic Analysis</a>
        <a href="/analytics/geographic/field-mapping" class="touch-btn touch-btn-info">📍 Field Mapping</a>
        <a href="/analytics/geographic/soil-analysis" class="touch-btn touch-btn-warning">🌱 Soil Analysis</a>
        <a href="/analytics/geographic/zone-performance" class="touch-btn touch-btn-purple">📊 Zone Performance</a>
        <a href="/analytics/geographic/planting-recommendations" class="touch-btn touch-btn-success">💡 Recommendations</a>
    </div>

    <!-- Analysis Settings -->
    <div class="mobile-card">
        <h3>⚙️ Mapping Settings</h3>
        <form method="GET" action="/analytics/geographic/yield-mapping" style="margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
                <div>
                    <label for="field_id" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🏞️ Field Selection
                    </label>
                    <select name="field_id" id="field_id" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="">All Fields</option>
                        @foreach($fields as $field)
                        <option value="{{ $field->id }}" {{ $selectedField == $field->id ? 'selected' : '' }}>
                            {{ $field->name ?? "Field {$field->id}" }}
                        </option>
                        @endforeach
                    </select>
                </div>
                
                <div>
                    <label for="timeframe" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📅 Time Period
                    </label>
                    <select name="timeframe" id="timeframe" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="month" {{ $timeframe == 'month' ? 'selected' : '' }}>Last Month</option>
                        <option value="quarter" {{ $timeframe == 'quarter' ? 'selected' : '' }}>Last Quarter</option>
                        <option value="year" {{ $timeframe == 'year' ? 'selected' : '' }}>Last Year</option>
                        <option value="all" {{ $timeframe == 'all' ? 'selected' : '' }}>All Time</option>
                    </select>
                </div>
                
                <div style="display: flex; align-items: end;">
                    <button type="submit" class="touch-btn touch-btn-primary" style="width: 100%; height: 48px;">
                        🔄 Update Map
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Yield Statistics Overview -->
    <div class="mobile-card">
        <h3>📊 Yield Statistics Overview</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0;">
            <div style="text-align: center; padding: 15px; background: rgba(76, 175, 80, 0.1); border-radius: 8px;">
                <div style="font-size: 24px; color: var(--leaf-green); margin-bottom: 5px;">{{ number_format($yieldData['statistics']['total_yield'], 1) }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Total Yield (lbs)</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(255, 193, 7, 0.1); border-radius: 8px;">
                <div style="font-size: 24px; color: var(--warning); margin-bottom: 5px;">{{ number_format($yieldData['statistics']['max_yield'], 1) }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Top Plant (lbs)</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(106, 27, 154, 0.1); border-radius: 8px;">
                <div style="font-size: 24px; color: var(--blackberry-purple); margin-bottom: 5px;">{{ number_format($yieldData['statistics']['avg_yield_per_plant'], 1) }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Average (lbs)</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(244, 67, 54, 0.1); border-radius: 8px;">
                <div style="font-size: 24px; color: var(--berry-red); margin-bottom: 5px;">{{ number_format($yieldData['statistics']['min_yield'], 1) }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Lowest Plant (lbs)</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(33, 150, 243, 0.1); border-radius: 8px;">
                <div style="font-size: 24px; color: var(--sky-blue); margin-bottom: 5px;">{{ $yieldData['statistics']['harvest_count'] }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Total Harvests</div>
            </div>
        </div>

        <div style="background: rgba(76, 175, 80, 0.1); padding: 15px; border-radius: 8px; margin: 20px 0;">
            <h4 style="color: var(--leaf-green); margin-bottom: 10px;">📈 Performance Analysis</h4>
            @php
                $yieldVariation = $yieldData['statistics']['max_yield'] - $yieldData['statistics']['min_yield'];
                $coefficientOfVariation = $yieldData['statistics']['avg_yield_per_plant'] > 0 ? 
                    ($yieldVariation / $yieldData['statistics']['avg_yield_per_plant']) * 100 : 0;
            @endphp
            <ul style="margin: 0; padding-left: 20px;">
                <li>Yield variation: {{ number_format($yieldVariation, 1) }} lbs between best and worst performers</li>
                <li>Coefficient of variation: {{ number_format($coefficientOfVariation, 1) }}% 
                    @if($coefficientOfVariation > 50)
                        <span style="color: var(--berry-red);">(High variation - optimization opportunity)</span>
                    @elseif($coefficientOfVariation > 30)
                        <span style="color: var(--warning);">(Moderate variation)</span>
                    @else
                        <span style="color: var(--leaf-green);">(Low variation - consistent performance)</span>
                    @endif
                </li>
                <li>Harvest frequency: {{ count($yieldData['yield_points']) > 0 ? number_format($yieldData['statistics']['harvest_count'] / count($yieldData['yield_points']), 1) : 0 }} harvests per plant</li>
            </ul>
        </div>
    </div>

    <!-- Yield Map Placeholder -->
    <div class="mobile-card">
        <h3>🗺️ Interactive Yield Map</h3>
        <div style="background: #f5f5f5; border: 2px dashed #ddd; border-radius: 8px; padding: 40px; text-align: center; margin: 20px 0;">
            <div style="font-size: 48px; margin-bottom: 20px;">🗺️</div>
            <h4 style="color: var(--soil-brown); margin-bottom: 15px;">Interactive Map Coming Soon</h4>
            <p style="color: var(--medium-gray); margin-bottom: 20px;">
                This area will display an interactive map with:
            </p>
            <ul style="text-align: left; max-width: 400px; margin: 0 auto; color: var(--soil-brown);">
                <li>Heat map visualization of yield data</li>
                <li>Plant markers with yield information</li>
                <li>Field boundary overlays</li>
                <li>Performance zone highlighting</li>
                <li>GPS coordinate integration</li>
            </ul>
            <div style="margin-top: 20px;">
                <span style="background: var(--blackberry-purple); color: white; padding: 8px 16px; border-radius: 6px; font-size: 14px;">
                    🚀 Implementation: Leaflet.js + Heat Maps
                </span>
            </div>
        </div>
    </div>

    <!-- Performance Categories -->
    <div class="mobile-card">
        <h3>🎯 Performance Categories</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
            
            @php
                $performanceGroups = [
                    'high' => ['color' => 'var(--leaf-green)', 'label' => 'High Performers (>5 lbs)', 'icon' => '🏆'],
                    'medium' => ['color' => 'var(--warning)', 'label' => 'Medium Performers (3-5 lbs)', 'icon' => '📈'],
                    'low' => ['color' => 'var(--sky-blue)', 'label' => 'Low Performers (1-3 lbs)', 'icon' => '📊'],
                    'poor' => ['color' => 'var(--berry-red)', 'label' => 'Poor Performers (<1 lb)', 'icon' => '⚠️']
                ];
                
                $categorized = [];
                foreach($yieldData['yield_points'] as $point) {
                    $performance = $point['performance'];
                    if (!isset($categorized[$performance])) {
                        $categorized[$performance] = [];
                    }
                    $categorized[$performance][] = $point;
                }
            @endphp

            @foreach($performanceGroups as $key => $group)
            @php $plants = $categorized[$key] ?? []; @endphp
            <div style="border: 1px solid {{ $group['color'] }}; border-radius: 8px; padding: 15px; background: {{ $group['color'] }}15;">
                <h4 style="color: {{ $group['color'] }}; margin-bottom: 15px;">{{ $group['icon'] }} {{ $group['label'] }}</h4>
                <div style="text-align: center; margin-bottom: 15px;">
                    <div style="font-size: 32px; color: {{ $group['color'] }}; font-weight: bold;">{{ count($plants) }}</div>
                    <div style="font-size: 14px; color: var(--soil-brown);">Plants</div>
                </div>
                
                @if(!empty($plants))
                <div style="max-height: 200px; overflow-y: auto;">
                    @foreach(array_slice($plants, 0, 5) as $plant)
                    <div style="display: flex; justify-content: space-between; margin: 5px 0; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 4px; font-size: 14px;">
                        <span>Plant #{{ $plant['plant_id'] }} - {{ $plant['variety'] }}</span>
                        <strong>{{ number_format($plant['total_yield'], 1) }} lbs</strong>
                    </div>
                    @endforeach
                    @if(count($plants) > 5)
                    <div style="text-align: center; padding: 8px; font-size: 12px; color: var(--soil-brown);">
                        ... and {{ count($plants) - 5 }} more plants
                    </div>
                    @endif
                </div>
                @else
                <div style="text-align: center; padding: 20px; color: var(--medium-gray); font-style: italic;">
                    No plants in this category
                </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    <!-- Top and Bottom Performers -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin: 30px 0;">
        <!-- Top Performers -->
        <div class="mobile-card">
            <h3 style="color: var(--leaf-green);">🏆 Top Performers</h3>
            @php $topPerformers = collect($yieldData['yield_points'])->sortByDesc('total_yield')->take(10); @endphp
            
            @foreach($topPerformers as $plant)
            <div style="border: 1px solid var(--leaf-green); border-radius: 8px; padding: 15px; margin: 10px 0; background: rgba(76, 175, 80, 0.05);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                    <strong>Plant #{{ $plant['plant_id'] }}</strong>
                    <span style="background: var(--leaf-green); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                        {{ number_format($plant['total_yield'], 1) }} lbs
                    </span>
                </div>
                <div style="font-size: 14px; color: var(--soil-brown);">
                    <div><strong>Variety:</strong> {{ $plant['variety'] }}</div>
                    <div><strong>Field:</strong> {{ $plant['field_name'] }}</div>
                    <div><strong>Harvests:</strong> {{ $plant['harvest_count'] }} ({{ number_format($plant['avg_yield_per_harvest'], 1) }} lbs avg)</div>
                    @if(isset($plant['latitude']) && isset($plant['longitude']))
                    <div><strong>Location:</strong> {{ number_format($plant['latitude'], 4) }}, {{ number_format($plant['longitude'], 4) }}</div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

        <!-- Bottom Performers -->
        <div class="mobile-card">
            <h3 style="color: var(--berry-red);">⚠️ Needs Attention</h3>
            @php $bottomPerformers = collect($yieldData['yield_points'])->sortBy('total_yield')->take(10); @endphp
            
            @foreach($bottomPerformers as $plant)
            <div style="border: 1px solid var(--berry-red); border-radius: 8px; padding: 15px; margin: 10px 0; background: rgba(244, 67, 54, 0.05);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                    <strong>Plant #{{ $plant['plant_id'] }}</strong>
                    <span style="background: var(--berry-red); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                        {{ number_format($plant['total_yield'], 1) }} lbs
                    </span>
                </div>
                <div style="font-size: 14px; color: var(--soil-brown);">
                    <div><strong>Variety:</strong> {{ $plant['variety'] }}</div>
                    <div><strong>Field:</strong> {{ $plant['field_name'] }}</div>
                    <div><strong>Harvests:</strong> {{ $plant['harvest_count'] }} ({{ number_format($plant['avg_yield_per_harvest'], 1) }} lbs avg)</div>
                    @if(isset($plant['latitude']) && isset($plant['longitude']))
                    <div><strong>Location:</strong> {{ number_format($plant['latitude'], 4) }}, {{ number_format($plant['longitude'], 4) }}</div>
                    @endif
                </div>
                <div style="background: rgba(244, 67, 54, 0.1); padding: 8px; border-radius: 4px; margin-top: 8px;">
                    <strong style="font-size: 12px; color: var(--berry-red);">Recommended Actions:</strong>
                    <ul style="margin: 5px 0; padding-left: 15px; font-size: 12px;">
                        <li>Investigate soil conditions and drainage</li>
                        <li>Check for pest or disease issues</li>
                        <li>Review watering and fertilization history</li>
                        <li>Consider plant replacement if very old</li>
                    </ul>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Yield Optimization Recommendations -->
    <div class="mobile-card">
        <h3>💡 Yield Optimization Recommendations</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 20px 0;">
            
            @if($coefficientOfVariation > 50)
            <div style="border: 1px solid var(--berry-red); border-radius: 8px; padding: 15px; background: rgba(244, 67, 54, 0.05);">
                <h4 style="color: var(--berry-red); margin-bottom: 10px;">🚨 High Yield Variation Detected</h4>
                <p style="margin: 10px 0;">Your farm shows significant yield variation ({{ number_format($coefficientOfVariation, 1) }}%), indicating optimization opportunities.</p>
                <ul style="margin: 10px 0; padding-left: 20px; font-size: 14px;">
                    <li>Focus on bottom {{ count($categorized['poor'] ?? []) + count($categorized['low'] ?? []) }} performers</li>
                    <li>Implement precision agriculture techniques</li>
                    <li>Conduct soil testing in low-yield areas</li>
                    <li>Consider irrigation system improvements</li>
                </ul>
                <div style="margin-top: 15px;">
                    <span style="background: var(--berry-red); color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px;">
                        Priority: High | Potential ROI: 25-40%
                    </span>
                </div>
            </div>
            @endif

            <div style="border: 1px solid var(--leaf-green); border-radius: 8px; padding: 15px; background: rgba(76, 175, 80, 0.05);">
                <h4 style="color: var(--leaf-green); margin-bottom: 10px;">🌱 Replicate Success</h4>
                <p style="margin: 10px 0;">Learn from your top {{ count($categorized['high'] ?? []) }} high-performing plants.</p>
                <ul style="margin: 10px 0; padding-left: 20px; font-size: 14px;">
                    <li>Study care practices in high-yield areas</li>
                    <li>Analyze soil conditions of top performers</li>
                    <li>Replicate successful varieties and spacing</li>
                    <li>Document best practices for consistency</li>
                </ul>
                <div style="margin-top: 15px;">
                    <span style="background: var(--leaf-green); color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px;">
                        Strategy: Best Practice Replication
                    </span>
                </div>
            </div>

            <div style="border: 1px solid var(--warning); border-radius: 8px; padding: 15px; background: rgba(255, 193, 7, 0.05);">
                <h4 style="color: var(--warning); margin-bottom: 10px;">📊 Data-Driven Decisions</h4>
                <p style="margin: 10px 0;">Use this yield mapping data for strategic planning.</p>
                <ul style="margin: 10px 0; padding-left: 20px; font-size: 14px;">
                    <li>Plan expansion in high-performing areas</li>
                    <li>Adjust resource allocation by performance</li>
                    <li>Schedule targeted maintenance in low-yield zones</li>
                    <li>Use GPS coordinates for precision application</li>
                </ul>
                <div style="margin-top: 15px;">
                    <span style="background: var(--warning); color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px;">
                        Approach: Precision Agriculture
                    </span>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
// Yield Mapping JavaScript functionality
document.addEventListener('DOMContentLoaded', function() {
    // Auto-submit form when selections change
    ['field_id', 'timeframe'].forEach(function(id) {
        document.getElementById(id).addEventListener('change', function() {
            this.form.submit();
        });
    });
});

// Future: Interactive map functionality
// This would include:
// - Leaflet.js map initialization
// - Heat map layer for yield data
// - Plant marker clustering
// - Performance zone overlays
// - GPS coordinate display
// - Zoom controls and legend
</script>
@endpush