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

    <!-- Page Header -->
    <div class="page-header">
        <h1>🗺️ Geographic Analysis</h1>
        <p>Location-based analytics and precision agriculture insights</p>
        <p class="subtitle">Optimize farm performance through geographic intelligence</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-5" style="margin-bottom: 30px;">
        <a href="/analytics" class="touch-btn touch-btn-primary">← Analytics Dashboard</a>
        <a href="/analytics/geographic/field-mapping" class="touch-btn touch-btn-info">📍 Field Mapping</a>
        <a href="/analytics/geographic/yield-mapping" class="touch-btn touch-btn-success">🌾 Yield 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>
    </div>

    <!-- Field Selection -->
    <div class="mobile-card">
        <h3>⚙️ Analysis Settings</h3>
        <form method="GET" action="/analytics/geographic-analysis" style="margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 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 style="display: flex; align-items: end;">
                    <button type="submit" class="touch-btn touch-btn-primary" style="width: 100%; height: 48px;">
                        🔄 Update Analysis
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Farm Overview Statistics -->
    <div class="mobile-card">
        <h3>🏞️ Farm 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($farmStats['total_plants']) }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Total Plants</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;">{{ $farmStats['total_fields'] }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Fields</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;">{{ $farmStats['total_area_acres'] }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Acres</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;">{{ $farmStats['avg_plant_density'] }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Plants/Acre</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(244, 67, 54, 0.1); border-radius: 8px;">
                <div style="font-size: 20px; color: var(--berry-red); margin-bottom: 5px;">{{ number_format($farmStats['yield_per_acre'], 1) }} lbs</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Yield/Acre</div>
            </div>
        </div>
    </div>

    <!-- Field Performance Overview -->
    <div class="mobile-card">
        <h3>📊 Field Performance Overview</h3>
        <div style="max-height: 400px; overflow-y: auto; margin: 20px 0;">
            @foreach($geoAnalysis['field_overview']['fields'] as $field)
            <div style="border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin: 10px 0; background: rgba(255,255,255,0.8);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <h4 style="margin: 0; color: var(--blackberry-purple);">{{ $field['field_name'] }}</h4>
                    <span style="background: var(--leaf-green); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                        {{ number_format($field['yield_per_acre'], 1) }} lbs/acre
                    </span>
                </div>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; font-size: 14px;">
                    <div><strong>Area:</strong> {{ $field['area_acres'] }} acres</div>
                    <div><strong>Plants:</strong> {{ number_format($field['plant_count']) }}</div>
                    <div><strong>Density:</strong> {{ $field['plant_density'] }}/acre</div>
                    <div><strong>Total Yield:</strong> {{ number_format($field['total_yield_lbs'], 1) }} lbs</div>
                    <div><strong>Soil pH:</strong> {{ number_format($field['avg_soil_ph'], 1) }}</div>
                    <div><strong>Soil Tests:</strong> {{ $field['soil_tests_count'] }}</div>
                </div>
                
                @if($field['last_soil_test'])
                <div style="font-size: 13px; color: var(--soil-brown); margin-top: 10px;">
                    <strong>Last Soil Test:</strong> {{ $field['last_soil_test'] }}
                </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    <!-- Zone Analysis -->
    <div class="mobile-card">
        <h3>📍 Zone Analysis</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;">{{ $geoAnalysis['zone_analysis']['total_zones'] }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Total Zones</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;">{{ $geoAnalysis['performance_zones']['summary']['high_performance_count'] }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">High Performance</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;">{{ $geoAnalysis['performance_zones']['summary']['problem_areas_count'] }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Problem Areas</div>
            </div>
        </div>

        <div style="max-height: 350px; overflow-y: auto;">
            @foreach(array_slice($geoAnalysis['zone_analysis']['zones'], 0, 8) as $zone)
            @php
                $performanceColor = $zone['performance_rating'] >= 80 ? 'var(--leaf-green)' : 
                                   ($zone['performance_rating'] >= 60 ? 'var(--warning)' : 'var(--berry-red)');
            @endphp
            <div style="border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin: 10px 0; background: rgba(255,255,255,0.8);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <strong>Zone {{ $zone['zone_id'] }}</strong>
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <span style="background: {{ $performanceColor }}; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                            {{ $zone['performance_rating'] }}% Performance
                        </span>
                    </div>
                </div>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; font-size: 14px;">
                    <div><strong>Plants:</strong> {{ $zone['plant_count'] }}</div>
                    <div><strong>Avg Yield:</strong> {{ number_format($zone['avg_yield'], 1) }} lbs</div>
                    <div><strong>Total Yield:</strong> {{ number_format($zone['total_yield'], 1) }} lbs</div>
                    <div><strong>Avg Height:</strong> {{ number_format($zone['avg_plant_height'], 1) }} cm</div>
                    <div><strong>Health Score:</strong> {{ number_format($zone['avg_health_score'], 1) }}</div>
                </div>
                
                @if(!empty($zone['recommendations']))
                <div style="background: rgba(106, 27, 154, 0.05); padding: 10px; border-radius: 6px; margin-top: 10px;">
                    <strong style="font-size: 14px; color: var(--blackberry-purple);">Recommendations:</strong>
                    <ul style="margin: 5px 0; padding-left: 15px; font-size: 13px;">
                        @foreach($zone['recommendations'] as $recommendation)
                        <li>{{ $recommendation }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    <!-- Yield Mapping Summary -->
    <div class="mobile-card">
        <h3>🌾 Yield Mapping Summary</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: 20px; color: var(--leaf-green); margin-bottom: 5px;">{{ number_format($geoAnalysis['yield_mapping']['statistics']['total_yield'], 1) }} lbs</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Total Yield</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(255, 193, 7, 0.1); border-radius: 8px;">
                <div style="font-size: 20px; color: var(--warning); margin-bottom: 5px;">{{ number_format($geoAnalysis['yield_mapping']['statistics']['max_yield_per_plant'], 1) }} lbs</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Top Plant Yield</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(106, 27, 154, 0.1); border-radius: 8px;">
                <div style="font-size: 20px; color: var(--blackberry-purple); margin-bottom: 5px;">{{ number_format($geoAnalysis['yield_mapping']['statistics']['avg_yield_per_plant'], 1) }} lbs</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Avg Plant Yield</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(33, 150, 243, 0.1); border-radius: 8px;">
                <div style="font-size: 20px; color: var(--sky-blue); margin-bottom: 5px;">{{ $geoAnalysis['yield_mapping']['statistics']['total_harvest_points'] }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Harvest Points</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 Insights</h4>
            <ul style="margin: 0; padding-left: 20px;">
                <li>Yield variation: {{ number_format($geoAnalysis['yield_mapping']['statistics']['max_yield_per_plant'] - $geoAnalysis['yield_mapping']['statistics']['min_yield_per_plant'], 1) }} lbs between best and worst plants</li>
                <li>High performers represent potential for farm-wide improvement</li>
                <li>Location-specific factors may explain performance differences</li>
                <li>Consider precision agriculture techniques for optimization</li>
            </ul>
        </div>
    </div>

    <!-- Soil Analysis Summary -->
    <div class="mobile-card">
        <h3>🌱 Soil Analysis Summary</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(96, 125, 139, 0.1); border-radius: 8px;">
                <div style="font-size: 24px; color: #607D8B; margin-bottom: 5px;">{{ number_format($geoAnalysis['soil_analysis']['analysis']['avg_ph'], 1) }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Average pH</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(76, 175, 80, 0.1); border-radius: 8px;">
                <div style="font-size: 20px; color: var(--leaf-green); margin-bottom: 5px;">{{ number_format($geoAnalysis['soil_analysis']['analysis']['nutrient_averages']['nitrogen'], 1) }} ppm</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Avg Nitrogen</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(255, 193, 7, 0.1); border-radius: 8px;">
                <div style="font-size: 20px; color: var(--warning); margin-bottom: 5px;">{{ number_format($geoAnalysis['soil_analysis']['analysis']['nutrient_averages']['phosphorus'], 1) }} ppm</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Avg Phosphorus</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(106, 27, 154, 0.1); border-radius: 8px;">
                <div style="font-size: 20px; color: var(--blackberry-purple); margin-bottom: 5px;">{{ number_format($geoAnalysis['soil_analysis']['analysis']['nutrient_averages']['potassium'], 1) }} ppm</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Avg Potassium</div>
            </div>
        </div>

        <div style="background: rgba(96, 125, 139, 0.1); padding: 15px; border-radius: 8px; margin: 20px 0;">
            <h4 style="color: #607D8B; margin-bottom: 10px;">🧪 Soil Quality Distribution</h4>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;">
                @foreach($geoAnalysis['soil_analysis']['analysis']['soil_quality_distribution'] as $quality => $count)
                <div style="text-align: center; padding: 10px; background: rgba(255,255,255,0.7); border-radius: 6px;">
                    <div style="font-size: 18px; font-weight: bold;">{{ $count }}</div>
                    <div style="font-size: 12px; text-transform: capitalize;">{{ str_replace('_', ' ', $quality) }}</div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Plant Distribution -->
    <div class="mobile-card">
        <h3>🌿 Plant Distribution Analysis</h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
            <!-- By Variety -->
            <div>
                <h4 style="color: var(--blackberry-purple); margin-bottom: 15px;">🍇 By Variety</h4>
                @foreach($geoAnalysis['plant_distribution']['by_variety'] as $variety => $count)
                <div style="display: flex; justify-content: space-between; margin: 8px 0; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 6px;">
                    <span>{{ $variety }}</span>
                    <strong>{{ number_format($count) }} plants</strong>
                </div>
                @endforeach
            </div>

            <!-- By Age -->
            <div>
                <h4 style="color: var(--leaf-green); margin-bottom: 15px;">📅 By Age Group</h4>
                @foreach($geoAnalysis['plant_distribution']['by_age'] as $ageGroup => $count)
                <div style="display: flex; justify-content: space-between; margin: 8px 0; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 6px;">
                    <span>{{ $ageGroup }}</span>
                    <strong>{{ number_format($count) }} plants</strong>
                </div>
                @endforeach
            </div>

            <!-- By Field -->
            <div>
                <h4 style="color: var(--warning); margin-bottom: 15px;">🏞️ By Field</h4>
                @foreach($geoAnalysis['plant_distribution']['by_field'] as $field => $count)
                <div style="display: flex; justify-content: space-between; margin: 8px 0; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 6px;">
                    <span>{{ $field }}</span>
                    <strong>{{ number_format($count) }} plants</strong>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Optimization Recommendations -->
    <div class="mobile-card">
        <h3>💡 Geographic Optimization Recommendations</h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 20px 0;">
            <!-- Immediate Actions -->
            @if(!empty($geoAnalysis['optimization_recommendations']['immediate_actions']))
            <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;">🚨 Immediate Actions</h4>
                @foreach($geoAnalysis['optimization_recommendations']['immediate_actions'] as $action)
                <div style="margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.7); border-radius: 6px;">
                    <div style="font-weight: bold; margin-bottom: 5px;">{{ $action['action'] }}</div>
                    <div style="font-size: 14px; margin-bottom: 5px;">{{ $action['description'] }}</div>
                    <div style="font-size: 12px; color: var(--soil-brown);">
                        <strong>Priority:</strong> {{ ucfirst($action['priority']) }} | 
                        <strong>Impact:</strong> {{ $action['estimated_impact'] }}
                    </div>
                </div>
                @endforeach
            </div>
            @endif

            <!-- Resource Allocation -->
            @if(!empty($geoAnalysis['optimization_recommendations']['resource_allocation']))
            <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;">🎯 Resource Allocation</h4>
                @foreach($geoAnalysis['optimization_recommendations']['resource_allocation'] as $resource)
                <div style="margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.7); border-radius: 6px;">
                    <div style="font-weight: bold; margin-bottom: 5px;">{{ $resource['action'] }}</div>
                    <div style="font-size: 14px; margin-bottom: 5px;">{{ $resource['description'] }}</div>
                    <div style="font-size: 12px; color: var(--soil-brown);">
                        <strong>Cost:</strong> {{ $resource['cost_estimate'] ?? 'TBD' }} | 
                        <strong>Timeframe:</strong> {{ $resource['timeframe'] ?? 'TBD' }}
                    </div>
                </div>
                @endforeach
            </div>
            @endif

            <!-- Planting Recommendations -->
            @if(!empty($geoAnalysis['optimization_recommendations']['planting_recommendations']))
            <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;">🌱 Planting Recommendations</h4>
                @foreach($geoAnalysis['optimization_recommendations']['planting_recommendations'] as $planting)
                <div style="margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.7); border-radius: 6px;">
                    <div style="font-weight: bold; margin-bottom: 5px;">{{ $planting['action'] }}</div>
                    <div style="font-size: 14px; margin-bottom: 5px;">{{ $planting['description'] }}</div>
                    <div style="font-size: 12px; color: var(--soil-brown);">
                        <strong>ROI:</strong> {{ $planting['potential_roi'] ?? 'TBD' }} | 
                        <strong>Cost:</strong> {{ $planting['implementation_cost'] ?? 'TBD' }}
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="mobile-card">
        <h3>🚀 Quick Actions</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0;">
            <a href="/analytics/geographic/field-mapping" class="touch-btn touch-btn-info" style="text-decoration: none;">📍 View Field Maps</a>
            <a href="/analytics/geographic/yield-mapping" class="touch-btn touch-btn-success" style="text-decoration: none;">🌾 Analyze Yield Patterns</a>
            <a href="/analytics/geographic/soil-analysis" class="touch-btn touch-btn-warning" style="text-decoration: none;">🌱 Soil Condition Maps</a>
            <a href="/analytics/geographic/zone-performance" class="touch-btn touch-btn-purple" style="text-decoration: none;">📊 Zone Performance</a>
            <a href="/analytics/geographic/planting-recommendations" class="touch-btn touch-btn-secondary" style="text-decoration: none;">💡 Planting Recommendations</a>
        </div>
    </div>

@endsection

@push('scripts')
<script>
// Geographic Analysis JavaScript functionality
document.addEventListener('DOMContentLoaded', function() {
    // Auto-submit form when field selection changes
    document.getElementById('field_id').addEventListener('change', function() {
        this.form.submit();
    });
});

// Future: Interactive map functionality would go here
// - Leaflet or Google Maps integration
// - Heat maps for yield data
// - Zone boundary overlays
// - Plant location markers
</script>
@endpush