@extends('layouts.app')
@section('title', 'Planting Recommendations - Geographic Analysis')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>💡 Planting Recommendations</h1>
        <p>Data-driven planting location and variety recommendations</p>
        <p class="subtitle">Optimize future plantings based on geographic performance data</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/zone-performance" class="touch-btn touch-btn-purple">📊 Zone Performance</a>
    </div>

    <!-- Analysis Settings -->
    <div class="mobile-card">
        <h3>⚙️ Recommendation Settings</h3>
        <form method="GET" action="/analytics/geographic/planting-recommendations" 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 Recommendations
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Optimal Planting Locations -->
    <div class="mobile-card">
        <h3 style="color: var(--leaf-green);">🎯 Optimal Planting Locations</h3>
        @if(!empty($recommendations['optimal_locations']))
            <div style="margin: 20px 0;">
                @foreach($recommendations['optimal_locations'] as $location)
                <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 {{ $location['zone_id'] }}</strong>
                        <span style="background: var(--leaf-green); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                            {{ $location['priority'] }} Priority
                        </span>
                    </div>
                    
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; font-size: 14px;">
                        <div><strong>Current Plants:</strong> {{ $location['current_plants'] }}</div>
                        <div><strong>Expansion Potential:</strong> {{ $location['expansion_potential'] }}</div>
                        <div><strong>Recommended Density:</strong> {{ $location['recommended_density'] }}</div>
                        <div><strong>Expected Yield Increase:</strong> {{ $location['expected_yield_increase'] }}</div>
                    </div>
                    
                    @if(isset($location['coordinates']))
                    <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);">Location Details:</strong>
                        <div style="font-size: 13px; margin-top: 5px;">
                            <strong>GPS Coordinates:</strong> {{ number_format($location['coordinates']['lat'], 4) }}, {{ number_format($location['coordinates']['lng'], 4) }}
                        </div>
                        <div style="font-size: 13px;">
                            <strong>Area:</strong> Approximately {{ $location['area_estimate'] ?? '0.5' }} acres available for expansion
                        </div>
                    </div>
                    @endif
                    
                    <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);">Why This Location:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 13px;">
                            <li>Proven high performance in existing plants</li>
                            <li>Optimal soil conditions and drainage</li>
                            <li>Good sun exposure and air circulation</li>
                            <li>Easy access for maintenance and harvest</li>
                        </ul>
                    </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>Gathering data to identify optimal planting locations.</p>
                <p style="font-size: 14px;">Continue monitoring existing plants to establish performance patterns.</p>
            </div>
        @endif
    </div>

    <!-- Variety Recommendations -->
    <div class="mobile-card">
        <h3 style="color: var(--blackberry-purple);">🍇 Variety Recommendations</h3>
        <div style="margin: 20px 0;">
            @foreach($recommendations['variety_recommendations'] as $recommendation)
            <div style="border: 1px solid var(--blackberry-purple); border-radius: 8px; padding: 15px; margin: 10px 0; background: rgba(106, 27, 154, 0.05);">
                <div style="margin-bottom: 10px;">
                    <strong style="color: var(--blackberry-purple);">{{ $recommendation['condition'] }}</strong>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 10px; border-radius: 6px; margin: 10px 0;">
                    <strong style="font-size: 14px; color: var(--soil-brown);">Recommended Varieties:</strong>
                    <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;">
                        @foreach($recommendation['recommended_varieties'] as $variety)
                        <span style="background: var(--blackberry-purple); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                            {{ $variety }}
                        </span>
                        @endforeach
                    </div>
                </div>
                
                <div style="background: rgba(106, 27, 154, 0.1); padding: 10px; border-radius: 6px;">
                    <strong style="font-size: 14px; color: var(--blackberry-purple);">Treatment:</strong>
                    <p style="margin: 5px 0; font-size: 13px;">{{ $recommendation['treatment'] }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Site Preparation Recommendations -->
    <div class="mobile-card">
        <h3 style="color: var(--warning);">🔧 Site Preparation</h3>
        @if(!empty($recommendations['site_preparations']))
            <div style="margin: 20px 0;">
                @foreach($recommendations['site_preparations'] as $preparation)
                <div style="border: 1px solid var(--warning); border-radius: 8px; padding: 15px; margin: 10px 0; background: rgba(255, 193, 7, 0.05);">
                    <div style="margin-bottom: 10px;">
                        <strong style="color: var(--warning);">{{ $preparation['area'] }}</strong>
                    </div>
                    
                    <div style="background: rgba(255,255,255,0.7); padding: 10px; border-radius: 6px; margin: 10px 0;">
                        <strong style="font-size: 14px; color: var(--soil-brown);">Required Actions:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 13px;">
                            @foreach($preparation['actions'] as $action)
                            <li>{{ $action }}</li>
                            @endforeach
                        </ul>
                    </div>
                    
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; font-size: 14px;">
                        <div><strong>Cost Estimate:</strong> {{ $preparation['cost_estimate'] }}</div>
                        <div><strong>Timeframe:</strong> {{ $preparation['timeframe'] }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        @else
            <div style="text-align: center; padding: 30px; color: var(--leaf-green);">
                <div style="font-size: 48px; margin-bottom: 15px;">✅</div>
                <p>Current sites are well-prepared for planting.</p>
                <p style="font-size: 14px;">Focus on optimal location selection and variety choices.</p>
            </div>
        @endif
    </div>

    <!-- Infrastructure Needs -->
    <div class="mobile-card">
        <h3 style="color: var(--sky-blue);">🏗️ Infrastructure Recommendations</h3>
        <div style="margin: 20px 0;">
            @foreach($recommendations['infrastructure_needs'] as $infrastructure)
            <div style="border: 1px solid var(--sky-blue); border-radius: 8px; padding: 15px; margin: 10px 0; background: rgba(33, 150, 243, 0.05);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <strong style="color: var(--sky-blue);">{{ $infrastructure['improvement'] }}</strong>
                    <span style="background: var(--sky-blue); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                        {{ $infrastructure['priority'] }} Priority
                    </span>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 10px; border-radius: 6px; margin: 10px 0;">
                    <div style="font-size: 14px; margin-bottom: 8px;">
                        <strong>Justification:</strong> {{ $infrastructure['justification'] }}
                    </div>
                    <div style="font-size: 14px;">
                        <strong>Coverage Area:</strong> {{ $infrastructure['coverage_area'] }}
                    </div>
                </div>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; font-size: 14px;">
                    <div><strong>Investment:</strong> {{ $infrastructure['investment'] }}</div>
                    <div><strong>ROI Timeline:</strong> {{ $infrastructure['roi_timeline'] }}</div>
                </div>
                
                <div style="background: rgba(33, 150, 243, 0.1); padding: 10px; border-radius: 6px; margin-top: 10px;">
                    <strong style="font-size: 14px; color: var(--sky-blue);">Expected Benefits:</strong>
                    <ul style="margin: 5px 0; padding-left: 15px; font-size: 13px;">
                        <li>Reduced yield variation between zones</li>
                        <li>Improved water efficiency and plant health</li>
                        <li>Better resource allocation and monitoring</li>
                        <li>Enhanced automation and labor efficiency</li>
                    </ul>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Planting Timeline -->
    <div class="mobile-card">
        <h3>📅 Recommended Planting Timeline</h3>
        <div style="margin: 20px 0;">
            @foreach($recommendations['timeline_recommendations'] as $season => $activities)
            @php
                $seasonColors = [
                    'immediate' => ['color' => 'var(--berry-red)', 'icon' => '🚨'],
                    'spring' => ['color' => 'var(--leaf-green)', 'icon' => '🌸'],
                    'summer' => ['color' => 'var(--warning)', 'icon' => '☀️'],
                    'fall' => ['color' => 'var(--soil-brown)', 'icon' => '🍂']
                ];
                $seasonInfo = $seasonColors[$season] ?? ['color' => 'var(--medium-gray)', 'icon' => '📅'];
            @endphp
            <div style="border: 1px solid {{ $seasonInfo['color'] }}; border-radius: 8px; padding: 15px; margin: 10px 0; background: {{ $seasonInfo['color'] }}08;">
                <h4 style="color: {{ $seasonInfo['color'] }}; margin-bottom: 10px;">
                    {{ $seasonInfo['icon'] }} {{ ucfirst($season) }} Activities
                </h4>
                
                <ul style="margin: 0; padding-left: 20px; font-size: 14px;">
                    @foreach($activities as $activity)
                    <li style="margin: 5px 0;">{{ $activity }}</li>
                    @endforeach
                </ul>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Planting Location Map Placeholder -->
    <div class="mobile-card">
        <h3>🗺️ Recommended Planting Locations 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 Planting 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>Recommended planting locations</li>
                <li>Variety-specific zone suggestions</li>
                <li>Site preparation status indicators</li>
                <li>Infrastructure planning overlays</li>
                <li>Optimal planting density calculations</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 + Planting Optimizer
                </span>
            </div>
        </div>
    </div>

    <!-- ROI Analysis -->
    <div class="mobile-card">
        <h3>💰 Planting Investment ROI Analysis</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 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;">🌟 High-Performance Expansion</h4>
                <div style="font-size: 14px; margin: 10px 0;">
                    <div><strong>Investment:</strong> $15,000 - $25,000</div>
                    <div><strong>New Plants:</strong> 100-150 premium variety</div>
                    <div><strong>Expected Annual Yield:</strong> 800-1,200 lbs</div>
                    <div><strong>Break-even Timeline:</strong> 2-3 years</div>
                    <div><strong>5-Year ROI:</strong> 180-250%</div>
                </div>
                <div style="background: rgba(76, 175, 80, 0.1); padding: 8px; border-radius: 4px; margin-top: 10px;">
                    <strong style="font-size: 12px; color: var(--leaf-green);">Recommended Strategy</strong>
                </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;">🔧 Infrastructure + Planting</h4>
                <div style="font-size: 14px; margin: 10px 0;">
                    <div><strong>Investment:</strong> $35,000 - $50,000</div>
                    <div><strong>Includes:</strong> Irrigation + 200 plants</div>
                    <div><strong>Expected Annual Yield:</strong> 1,500-2,000 lbs</div>
                    <div><strong>Break-even Timeline:</strong> 3-4 years</div>
                    <div><strong>5-Year ROI:</strong> 150-200%</div>
                </div>
                <div style="background: rgba(255, 193, 7, 0.1); padding: 8px; border-radius: 4px; margin-top: 10px;">
                    <strong style="font-size: 12px; color: var(--warning);">Long-term Value</strong>
                </div>
            </div>

            <div style="border: 1px solid var(--sky-blue); border-radius: 8px; padding: 15px; background: rgba(33, 150, 243, 0.05);">
                <h4 style="color: var(--sky-blue); margin-bottom: 10px;">📊 Gradual Expansion</h4>
                <div style="font-size: 14px; margin: 10px 0;">
                    <div><strong>Investment:</strong> $8,000 - $12,000</div>
                    <div><strong>New Plants:</strong> 50-75 diverse varieties</div>
                    <div><strong>Expected Annual Yield:</strong> 400-600 lbs</div>
                    <div><strong>Break-even Timeline:</strong> 2 years</div>
                    <div><strong>5-Year ROI:</strong> 120-180%</div>
                </div>
                <div style="background: rgba(33, 150, 243, 0.1); padding: 8px; border-radius: 4px; margin-top: 10px;">
                    <strong style="font-size: 12px; color: var(--sky-blue);">Conservative Approach</strong>
                </div>
            </div>
        </div>
    </div>

    <!-- Implementation Checklist -->
    <div class="mobile-card">
        <h3>✅ Implementation Checklist</h3>
        <div style="background: rgba(255,255,255,0.8); padding: 20px; border-radius: 8px; margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                <div>
                    <h4 style="color: var(--blackberry-purple); margin-bottom: 10px;">Pre-Planting (30-60 days)</h4>
                    <ul style="font-size: 14px; padding-left: 20px;">
                        <li>☐ Soil testing in recommended zones</li>
                        <li>☐ Site preparation and amendments</li>
                        <li>☐ Order recommended plant varieties</li>
                        <li>☐ Plan irrigation infrastructure</li>
                        <li>☐ Prepare planting equipment</li>
                    </ul>
                </div>
                
                <div>
                    <h4 style="color: var(--leaf-green); margin-bottom: 10px;">Planting Phase (7-14 days)</h4>
                    <ul style="font-size: 14px; padding-left: 20px;">
                        <li>☐ Install irrigation systems</li>
                        <li>☐ Plant in optimal locations</li>
                        <li>☐ Apply initial fertilization</li>
                        <li>☐ Install support structures</li>
                        <li>☐ Implement mulching</li>
                    </ul>
                </div>
                
                <div>
                    <h4 style="color: var(--sky-blue); margin-bottom: 10px;">Post-Planting (Ongoing)</h4>
                    <ul style="font-size: 14px; padding-left: 20px;">
                        <li>☐ Monitor plant establishment</li>
                        <li>☐ Track growth and health metrics</li>
                        <li>☐ Adjust care protocols</li>
                        <li>☐ Document performance data</li>
                        <li>☐ Plan next expansion phase</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
// Planting Recommendations JavaScript functionality
document.addEventListener('DOMContentLoaded', function() {
    // Auto-submit form when field selection changes
    document.getElementById('field_id').addEventListener('change', function() {
        this.form.submit();
    });
    
    // Interactive checklist functionality
    document.querySelectorAll('li').forEach(function(item) {
        if (item.textContent.includes('☐')) {
            item.style.cursor = 'pointer';
            item.addEventListener('click', function() {
                if (this.textContent.includes('☐')) {
                    this.innerHTML = this.innerHTML.replace('☐', '✅');
                    this.style.color = 'var(--leaf-green)';
                } else if (this.textContent.includes('✅')) {
                    this.innerHTML = this.innerHTML.replace('✅', '☐');
                    this.style.color = '';
                }
            });
        }
    });
});

// Future: Interactive planting recommendations functionality
// This would include:
// - Interactive planting location selection
// - Variety recommendation wizard
// - ROI calculator with adjustable parameters
// - Implementation timeline planner
// - Integration with ordering systems
</script>
@endpush