@extends('layouts.app')
@section('title', 'Zone Performance - Geographic Analysis')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>📊 Zone Performance Analysis</h1>
        <p>Detailed performance analysis by geographic zones</p>
        <p class="subtitle">Identify optimization opportunities through zone-based insights</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/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/planting-recommendations" class="touch-btn touch-btn-secondary">💡 Recommendations</a>
    </div>

    <!-- Analysis Settings -->
    <div class="mobile-card">
        <h3>⚙️ Zone Analysis Settings</h3>
        <form method="GET" action="/analytics/geographic/zone-performance" 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 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>

    <!-- Zone Performance Summary -->
    <div class="mobile-card">
        <h3>📈 Zone Performance Summary</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 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;">{{ $zoneData['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;">{{ $performanceZones['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;">{{ $performanceZones['summary']['medium_performance_count'] }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Medium Performance</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;">{{ $performanceZones['summary']['problem_areas_count'] }}</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Problem Areas</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;">{{ number_format($zoneData['avg_performance_rating'] ?? 0, 1) }}%</div>
                <div style="font-size: 14px; color: var(--soil-brown);">Avg Performance</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>{{ $zoneData['total_zones'] > 0 ? number_format(($performanceZones['summary']['high_performance_count'] / $zoneData['total_zones']) * 100, 1) : 0 }}% of zones are high-performing</li>
                <li>{{ $zoneData['total_zones'] > 0 ? number_format(($performanceZones['summary']['problem_areas_count'] / $zoneData['total_zones']) * 100, 1) : 0 }}% of zones need immediate attention</li>
                <li>Average yield varies by {{ number_format($zoneData['yield_variation_coefficient'] ?? 0, 1) }}% between zones</li>
                <li>Top performing zones yield {{ number_format($zoneData['top_zone_yield_advantage'] ?? 0, 1) }}% more than average</li>
            </ul>
        </div>
    </div>

    <!-- Zone Performance Map Placeholder -->
    <div class="mobile-card">
        <h3>🗺️ Zone Performance 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 Zone 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>Color-coded performance zones</li>
                <li>Yield data overlays</li>
                <li>Plant health score visualization</li>
                <li>Zone boundary definitions</li>
                <li>Performance trend analysis</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 + Performance Zones
                </span>
            </div>
        </div>
    </div>

    <!-- High Performance Zones -->
    <div class="mobile-card">
        <h3 style="color: var(--leaf-green);">🏆 High Performance Zones</h3>
        @if(!empty($performanceZones['zones']['high_performance']))
            <div style="max-height: 400px; overflow-y: auto; margin: 20px 0;">
                @foreach($performanceZones['zones']['high_performance'] as $zone)
                <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: 10px;">
                        <strong>Zone {{ $zone['zone_id'] }}</strong>
                        <span style="background: var(--leaf-green); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                            {{ $zone['performance_rating'] }}% Performance
                        </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>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><strong>Success Rate:</strong> {{ number_format($zone['success_factors']['growth_rate'], 1) }}%</div>
                    </div>
                    
                    <div style="background: rgba(76, 175, 80, 0.1); padding: 10px; border-radius: 6px; margin-top: 10px;">
                        <strong style="font-size: 14px; color: var(--leaf-green);">Success Factors:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 13px;">
                            @foreach($zone['success_factors']['factors'] as $factor)
                            <li>{{ $factor }}</li>
                            @endforeach
                        </ul>
                    </div>
                    
                    <div style="background: rgba(255,255,255,0.7); padding: 10px; border-radius: 6px; margin-top: 10px;">
                        <strong style="font-size: 14px; color: var(--blackberry-purple);">Replication Strategy:</strong>
                        <p style="margin: 5px 0; font-size: 13px;">
                            Apply similar conditions to other zones: 
                            {{ $zone['replication_strategy'] ?? 'Analyze soil conditions, drainage, and care practices for replication' }}
                        </p>
                    </div>
                </div>
                @endforeach
            </div>
        @else
            <div style="text-align: center; padding: 40px; color: var(--medium-gray);">
                <div style="font-size: 48px; margin-bottom: 15px;">🌱</div>
                <p>No high-performance zones identified yet.</p>
                <p style="font-size: 14px;">Continue monitoring to establish performance baselines.</p>
            </div>
        @endif
    </div>

    <!-- Medium Performance Zones -->
    <div class="mobile-card">
        <h3 style="color: var(--warning);">📈 Medium Performance Zones</h3>
        @if(!empty($performanceZones['zones']['medium_performance']))
            <div style="max-height: 300px; overflow-y: auto; margin: 20px 0;">
                @foreach($performanceZones['zones']['medium_performance'] as $zone)
                <div style="border: 1px solid var(--warning); border-radius: 8px; padding: 15px; margin: 10px 0; background: rgba(255, 193, 7, 0.05);">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <strong>Zone {{ $zone['zone_id'] }}</strong>
                        <span style="background: var(--warning); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                            {{ $zone['performance_rating'] }}% Performance
                        </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>Plants:</strong> {{ $zone['plant_count'] }}</div>
                        <div><strong>Avg Yield:</strong> {{ number_format($zone['avg_yield'], 1) }} lbs</div>
                        <div><strong>Health Score:</strong> {{ number_format($zone['avg_health_score'], 1) }}</div>
                        <div><strong>Improvement Potential:</strong> {{ $zone['improvement_potential'] ?? 'Medium' }}</div>
                    </div>
                    
                    @if(!empty($zone['improvement_opportunities']))
                    <div style="background: rgba(255, 193, 7, 0.1); padding: 10px; border-radius: 6px; margin-top: 10px;">
                        <strong style="font-size: 14px; color: var(--warning);">Improvement Opportunities:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 13px;">
                            @foreach($zone['improvement_opportunities'] as $opportunity)
                            <li>{{ $opportunity }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        @else
            <div style="text-align: center; padding: 30px; color: var(--medium-gray);">
                <p>No medium performance zones identified.</p>
            </div>
        @endif
    </div>

    <!-- Problem Areas -->
    <div class="mobile-card">
        <h3 style="color: var(--berry-red);">⚠️ Problem Areas - Immediate Attention Required</h3>
        @if(!empty($performanceZones['zones']['problem_areas']))
            <div style="max-height: 400px; overflow-y: auto; margin: 20px 0;">
                @foreach($performanceZones['zones']['problem_areas'] as $zone)
                <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: 10px;">
                        <strong>Zone {{ $zone['zone_id'] }} - CRITICAL</strong>
                        <span style="background: var(--berry-red); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                            {{ $zone['performance_rating'] }}% Performance
                        </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>Plants:</strong> {{ $zone['plant_count'] }}</div>
                        <div><strong>Avg Yield:</strong> {{ number_format($zone['avg_yield'], 1) }} lbs</div>
                        <div><strong>Health Score:</strong> {{ number_format($zone['avg_health_score'], 1) }}</div>
                        <div><strong>Severity:</strong> {{ $zone['problem_severity'] ?? 'High' }}</div>
                    </div>
                    
                    @if(!empty($zone['identified_problems']))
                    <div style="background: rgba(244, 67, 54, 0.1); padding: 10px; border-radius: 6px; margin-top: 10px;">
                        <strong style="font-size: 14px; color: var(--berry-red);">Identified Problems:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 13px;">
                            @foreach($zone['identified_problems'] as $problem)
                            <li>{{ $problem }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    
                    @if(!empty($zone['immediate_actions']))
                    <div style="background: rgba(255,255,255,0.9); padding: 10px; border-radius: 6px; margin-top: 10px; border-left: 4px solid var(--berry-red);">
                        <strong style="font-size: 14px; color: var(--berry-red);">Immediate Actions Required:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 13px;">
                            @foreach($zone['immediate_actions'] as $action)
                            <li>{{ $action }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    
                    <div style="margin-top: 15px;">
                        <span style="background: var(--berry-red); color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px;">
                            Priority: URGENT | Est. Recovery: {{ $zone['recovery_timeline'] ?? '3-6 months' }}
                        </span>
                    </div>
                </div>
                @endforeach
            </div>
        @else
            <div style="text-align: center; padding: 40px; color: var(--leaf-green);">
                <div style="font-size: 48px; margin-bottom: 15px;">✅</div>
                <p>Great news! No critical problem areas identified.</p>
                <p style="font-size: 14px;">All zones are performing within acceptable ranges.</p>
            </div>
        @endif
    </div>

    <!-- Zone Comparison Analysis -->
    <div class="mobile-card">
        <h3>📊 Zone Comparison Analysis</h3>
        <div style="max-height: 400px; overflow-y: auto; margin: 20px 0;">
            @foreach($zoneData['zones'] as $zone)
            @php
                $performanceColor = $zone['performance_rating'] >= 80 ? 'var(--leaf-green)' : 
                                   ($zone['performance_rating'] >= 60 ? 'var(--warning)' : 'var(--berry-red)');
                $performanceIcon = $zone['performance_rating'] >= 80 ? '🏆' : 
                                  ($zone['performance_rating'] >= 60 ? '📈' : '⚠️');
            @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>{{ $performanceIcon }} 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'] }}%
                        </span>
                    </div>
                </div>
                
                <!-- Performance Metrics Bar Chart -->
                <div style="margin: 15px 0;">
                    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; font-size: 12px;">
                        <div>
                            <div style="color: var(--soil-brown); margin-bottom: 4px;">Yield</div>
                            <div style="background: #f0f0f0; height: 8px; border-radius: 4px; overflow: hidden;">
                                @php $yieldPercentage = min(100, ($zone['avg_yield'] / 10) * 100); @endphp
                                <div style="background: var(--leaf-green); height: 100%; width: {{ $yieldPercentage }}%;"></div>
                            </div>
                            <div style="font-size: 11px; margin-top: 2px;">{{ number_format($zone['avg_yield'], 1) }} lbs</div>
                        </div>
                        
                        <div>
                            <div style="color: var(--soil-brown); margin-bottom: 4px;">Health</div>
                            <div style="background: #f0f0f0; height: 8px; border-radius: 4px; overflow: hidden;">
                                <div style="background: var(--sky-blue); height: 100%; width: {{ $zone['avg_health_score'] }}%;"></div>
                            </div>
                            <div style="font-size: 11px; margin-top: 2px;">{{ number_format($zone['avg_health_score'], 1) }}/100</div>
                        </div>
                        
                        <div>
                            <div style="color: var(--soil-brown); margin-bottom: 4px;">Growth</div>
                            <div style="background: #f0f0f0; height: 8px; border-radius: 4px; overflow: hidden;">
                                @php $heightPercentage = min(100, ($zone['avg_plant_height'] / 200) * 100); @endphp
                                <div style="background: var(--blackberry-purple); height: 100%; width: {{ $heightPercentage }}%;"></div>
                            </div>
                            <div style="font-size: 11px; margin-top: 2px;">{{ number_format($zone['avg_plant_height'], 0) }} cm</div>
                        </div>
                        
                        <div>
                            <div style="color: var(--soil-brown); margin-bottom: 4px;">Plants</div>
                            <div style="background: #f0f0f0; height: 8px; border-radius: 4px; overflow: hidden;">
                                @php $plantPercentage = min(100, ($zone['plant_count'] / 50) * 100); @endphp
                                <div style="background: var(--warning); height: 100%; width: {{ $plantPercentage }}%;"></div>
                            </div>
                            <div style="font-size: 11px; margin-top: 2px;">{{ $zone['plant_count'] }} plants</div>
                        </div>
                    </div>
                </div>
                
                @if(!empty($zone['key_insights']))
                <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);">Key Insights:</strong>
                    <ul style="margin: 5px 0; padding-left: 15px; font-size: 13px;">
                        @foreach($zone['key_insights'] as $insight)
                        <li>{{ $insight }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    <!-- Zone Optimization Recommendations -->
    <div class="mobile-card">
        <h3>💡 Zone Optimization Recommendations</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 20px 0;">
            
            <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;">🎯 Performance Standardization</h4>
                <p style="margin: 10px 0;">Replicate high-performance zone conditions across the farm.</p>
                <ul style="margin: 10px 0; padding-left: 20px; font-size: 14px;">
                    <li>Study soil conditions in top zones</li>
                    <li>Analyze care practices and timing</li>
                    <li>Implement precision irrigation systems</li>
                    <li>Standardize fertilization protocols</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 Improvements</h4>
                <p style="margin: 10px 0;">Use zone performance data for targeted interventions.</p>
                <ul style="margin: 10px 0; padding-left: 20px; font-size: 14px;">
                    <li>Variable rate fertilizer application</li>
                    <li>Zone-specific pest management</li>
                    <li>Targeted soil amendments</li>
                    <li>Performance monitoring systems</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 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;">🚨 Problem Zone Recovery</h4>
                <p style="margin: 10px 0;">Immediate action plan for underperforming zones.</p>
                <ul style="margin: 10px 0; padding-left: 20px; font-size: 14px;">
                    <li>Comprehensive soil testing</li>
                    <li>Plant health assessment</li>
                    <li>Infrastructure evaluation</li>
                    <li>Replanting consideration</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: URGENT | Timeline: 30-90 days
                    </span>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
// Zone Performance 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 zone performance functionality
// This would include:
// - Dynamic zone performance charts
// - Zone comparison tools
// - Performance trend analysis
// - Interactive zone boundaries
// - Drill-down zone details
</script>
@endpush