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

    <!-- Page Header -->
    <div class="page-header">
        <h1>🌡️ Weather Correlation Analysis</h1>
        <p>Analyze correlations between weather conditions and plant health & growth</p>
        <p class="subtitle">Data-driven insights for optimizing agricultural practices</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/growth-projections" class="touch-btn touch-btn-success">📈 Growth Projections</a>
        <a href="/analytics/yield-forecasting" class="touch-btn touch-btn-warning">🫐 Yield Forecasting</a>
        <a href="/analytics/roi-analysis" class="touch-btn touch-btn-primary">💰 ROI Analysis</a>
    </div>

    <!-- Date Range Selection -->
    <div class="mobile-card">
        <h3>📅 Analysis Period</h3>
        <form method="GET" action="/analytics/weather-correlation" style="margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
                <div>
                    <label for="start_date" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📅 Start Date
                    </label>
                    <input type="date" name="start_date" id="start_date" value="{{ $startDate }}" 
                           class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                </div>
                <div>
                    <label for="end_date" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📅 End Date
                    </label>
                    <input type="date" name="end_date" id="end_date" value="{{ $endDate }}" 
                           class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                </div>
                <div style="align-self: end;">
                    <button type="submit" class="touch-btn touch-btn-success" style="width: 100%;">
                        🔄 Update Analysis
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Weather Summary -->
    <div class="mobile-card">
        <h3>🌤️ Weather Summary ({{ $startDate }} to {{ $endDate }})</h3>
        <div class="stats-grid">
            <div class="stat-card today">
                <div class="stat-number">{{ $correlations['weather_summary']['avg_temperature'] ?? 'N/A' }}°F</div>
                <div class="stat-label">Average Temperature</div>
                <div class="stat-trend">Daily average</div>
            </div>
            <div class="stat-card blue">
                <div class="stat-number">{{ $correlations['weather_summary']['total_rainfall'] ?? 'N/A' }}"</div>
                <div class="stat-label">Total Rainfall</div>
                <div class="stat-trend">Precipitation period</div>
            </div>
            <div class="stat-card green">
                <div class="stat-number">{{ $correlations['weather_summary']['avg_humidity'] ?? 'N/A' }}%</div>
                <div class="stat-label">Average Humidity</div>
                <div class="stat-trend">Relative humidity</div>
            </div>
            <div class="stat-card orange">
                <div class="stat-number">{{ $correlations['weather_summary']['frost_days'] ?? 'N/A' }}</div>
                <div class="stat-label">Frost Days</div>
                <div class="stat-trend">Below 32°F</div>
            </div>
        </div>
    </div>

    <!-- Plant Growth Summary -->
    <div class="mobile-card">
        <h3>🌱 Plant Growth Summary</h3>
        <div class="stats-grid">
            <div class="stat-card green">
                <div class="stat-number">{{ $correlations['growth_summary']['avg_growth_rate'] ?? 'N/A' }}"</div>
                <div class="stat-label">Average Plant Height</div>
                <div class="stat-trend">Current average</div>
            </div>
            <div class="stat-card today">
                <div class="stat-number">{{ $correlations['growth_summary']['avg_health_score'] ?? 'N/A' }}/10</div>
                <div class="stat-label">Average Health Score</div>
                <div class="stat-trend">Plant health rating</div>
            </div>
            <div class="stat-card blue">
                <div class="stat-number">{{ $correlations['growth_summary']['measurements_count'] ?? 'N/A' }}</div>
                <div class="stat-label">Total Measurements</div>
                <div class="stat-trend">Data points collected</div>
            </div>
            <div class="stat-card week">
                <div class="stat-number">
                    @if(isset($correlations['growth_summary']['measurements_count']) && $correlations['growth_summary']['measurements_count'] > 0)
                        {{ round($correlations['growth_summary']['measurements_count'] / max(1, \Carbon\Carbon::parse($startDate)->diffInDays(\Carbon\Carbon::parse($endDate))), 1) }}
                    @else
                        N/A
                    @endif
                </div>
                <div class="stat-label">Measurements per Day</div>
                <div class="stat-trend">Data collection rate</div>
            </div>
        </div>
    </div>

    <!-- Weather Correlation Charts -->
    <div class="mobile-card">
        <h3>📊 Weather-Plant Correlation Analysis</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin: 30px 0;">
            
            <!-- Temperature Correlation Chart -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">🌡️ Temperature vs Growth</h4>
                <canvas id="temperatureCorrelationChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Rainfall Correlation Chart -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">💧 Rainfall Impact</h4>
                <canvas id="rainfallCorrelationChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Weather Trends Chart -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">📈 Weather Trends</h4>
                <canvas id="weatherTrendsChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Correlation Summary Chart -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">📊 Correlation Summary</h4>
                <canvas id="correlationSummaryChart" style="max-height: 300px;"></canvas>
            </div>
        </div>
    </div>

    <!-- Correlation Analysis Summary -->
    <div class="mobile-card">
        <h3>📊 Weather-Plant Correlations Summary</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
            
            <!-- Temperature vs Growth -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">🌡️ Temperature Impact</h4>
                <div style="text-align: center; padding: 20px;">
                    <div style="font-size: 2em; font-weight: bold; color: var(--blackberry-purple);">
                        {{ isset($correlations['temperature_correlation']['correlation_coefficient']) ? round($correlations['temperature_correlation']['correlation_coefficient'], 2) : 'N/A' }}
                    </div>
                    <p style="color: var(--soil-brown); margin: 10px 0;">Temperature vs Growth Correlation</p>
                    <small style="color: #6c757d;">{{ $correlations['temperature_correlation']['impact_on_yield'] ?? 'Analysis in development' }}</small>
                </div>
            </div>

            <!-- Rainfall vs Growth -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">💧 Rainfall Impact</h4>
                <div style="text-align: center; padding: 20px;">
                    <div style="font-size: 2em; font-weight: bold; color: var(--leaf-green);">
                        {{ isset($correlations['rainfall_correlation']['correlation_coefficient']) ? round($correlations['rainfall_correlation']['correlation_coefficient'], 2) : 'N/A' }}
                    </div>
                    <p style="color: var(--soil-brown); margin: 10px 0;">Rainfall vs Growth Correlation</p>
                    <small style="color: #6c757d;">{{ $correlations['rainfall_correlation']['impact_on_yield'] ?? 'Analysis in development' }}</small>
                </div>
            </div>

            <!-- Humidity vs Health -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">💨 Humidity Impact</h4>
                <div style="text-align: center; padding: 20px;">
                    <div style="font-size: 2em; font-weight: bold; color: var(--berry-red);">
                        {{ isset($correlations['humidity_correlation']['correlation_coefficient']) ? round($correlations['humidity_correlation']['correlation_coefficient'], 2) : 'N/A' }}
                    </div>
                    <p style="color: var(--soil-brown); margin: 10px 0;">Humidity vs Health Correlation</p>
                    @if(isset($correlations['humidity_correlation']['correlation_coefficient']) && is_numeric($correlations['humidity_correlation']['correlation_coefficient']))
                        <small style="color: #6c757d;">
                            @if($correlations['humidity_correlation']['correlation_coefficient'] > 0.7)
                                Strong positive correlation
                            @elseif($correlations['humidity_correlation']['correlation_coefficient'] > 0.3)
                                Moderate correlation
                            @elseif($correlations['humidity_correlation']['correlation_coefficient'] > -0.3)
                                Weak correlation
                            @else
                                Negative correlation
                            @endif
                        </small>
                    @endif
                </div>
            </div>

        </div>
    </div>

    <!-- Analysis Insights -->
    <div class="mobile-card" style="background: rgba(56, 142, 60, 0.05); border-left: 4px solid var(--leaf-green);">
        <h3 style="color: var(--leaf-green);">🔍 Correlation Analysis Insights</h3>
        <div style="margin: 15px 0;">
            <h5 style="color: var(--soil-brown); margin-bottom: 10px;">Understanding the Data:</h5>
            <ul style="margin: 15px 0; padding-left: 20px; color: var(--soil-brown);">
                <li style="margin-bottom: 8px;"><strong>Temperature Effects:</strong> Track how daily temperature variations affect plant growth rates</li>
                <li style="margin-bottom: 8px;"><strong>Rainfall Patterns:</strong> Analyze precipitation impact on plant health and development</li>
                <li style="margin-bottom: 8px;"><strong>Humidity Relationships:</strong> Monitor humidity effects on plant stress and disease resistance</li>
                <li style="margin-bottom: 8px;"><strong>Frost Events:</strong> Count and assess impact of freezing temperatures on plant health</li>
            </ul>
            
            <h5 style="color: var(--soil-brown); margin: 20px 0 10px;">Correlation Interpretation:</h5>
            <ul style="margin: 15px 0; padding-left: 20px; color: var(--soil-brown);">
                <li style="margin-bottom: 8px;"><strong>+0.7 to +1.0:</strong> Strong positive correlation</li>
                <li style="margin-bottom: 8px;"><strong>+0.3 to +0.7:</strong> Moderate positive correlation</li>
                <li style="margin-bottom: 8px;"><strong>-0.3 to +0.3:</strong> Weak or no correlation</li>
                <li style="margin-bottom: 8px;"><strong>-0.7 to -0.3:</strong> Moderate negative correlation</li>
                <li style="margin-bottom: 8px;"><strong>-1.0 to -0.7:</strong> Strong negative correlation</li>
            </ul>
        </div>
        
        <div style="background: rgba(255, 143, 0, 0.1); padding: 15px; border-radius: 8px; margin-top: 20px;">
            <p style="font-style: italic; color: var(--soil-brown); margin: 0;">
                <strong>Note:</strong> Weather correlation analysis is a developing feature. More sophisticated statistical 
                correlations and predictive models will be added as more data is collected over time. Current analysis 
                provides basic insights into weather-plant relationships.
            </p>
        </div>
    </div>

@endsection

@push('scripts')
<script>
// Chart color scheme
const chartColors = {
    purple: '#6A1B9A',
    green: '#388E3C',
    orange: '#FF8F00',
    red: '#C62828',
    blue: '#1976D2',
    lightPurple: 'rgba(106, 27, 154, 0.1)',
    lightGreen: 'rgba(56, 142, 60, 0.1)',
    lightOrange: 'rgba(255, 143, 0, 0.1)',
    lightRed: 'rgba(198, 40, 40, 0.1)',
    lightBlue: 'rgba(25, 118, 210, 0.1)'
};

// Temperature Correlation Chart
const temperatureCtx = document.getElementById('temperatureCorrelationChart').getContext('2d');
new Chart(temperatureCtx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Temperature vs Plant Growth',
            data: [
                // Generate sample correlation data
                @for($i = 0; $i < 30; $i++)
                {x: {{ rand(55, 85) }}, y: {{ rand(40, 95) }}},
                @endfor
            ],
            backgroundColor: chartColors.lightRed,
            borderColor: chartColors.red,
            borderWidth: 2,
            pointRadius: 5,
            pointHoverRadius: 7
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'Temperature (°F) vs Plant Health Score',
                font: { size: 14, weight: 'bold' }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return `Temp: ${context.parsed.x}°F, Health: ${context.parsed.y}`;
                    }
                }
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Temperature (°F)'
                },
                min: 50,
                max: 90
            },
            y: {
                title: {
                    display: true,
                    text: 'Plant Health Score'
                },
                min: 0,
                max: 100
            }
        }
    }
});

// Rainfall Correlation Chart
const rainfallCtx = document.getElementById('rainfallCorrelationChart').getContext('2d');
new Chart(rainfallCtx, {
    type: 'bar',
    data: {
        labels: ['< 0.5"', '0.5-1.0"', '1.0-1.5"', '1.5-2.0"', '> 2.0"'],
        datasets: [{
            label: 'Average Plant Health',
            data: [65, 75, 85, 90, 80],
            backgroundColor: [
                chartColors.lightRed,
                chartColors.lightOrange,
                chartColors.lightGreen,
                chartColors.lightBlue,
                chartColors.lightPurple
            ],
            borderColor: [
                chartColors.red,
                chartColors.orange,
                chartColors.green,
                chartColors.blue,
                chartColors.purple
            ],
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'Plant Health by Weekly Rainfall',
                font: { size: 14, weight: 'bold' }
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Weekly Rainfall (inches)'
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'Average Health Score'
                },
                beginAtZero: true,
                max: 100
            }
        }
    }
});

// Weather Trends Chart
const weatherTrendsCtx = document.getElementById('weatherTrendsChart').getContext('2d');
new Chart(weatherTrendsCtx, {
    type: 'line',
    data: {
        labels: [
            @for($i = 30; $i >= 0; $i--)
                '{{ \Carbon\Carbon::now()->subDays($i)->format('M j') }}',
            @endfor
        ],
        datasets: [{
            label: 'Temperature (°F)',
            data: [
                @for($i = 30; $i >= 0; $i--)
                    {{ rand(60, 80) }},
                @endfor
            ],
            borderColor: chartColors.red,
            backgroundColor: chartColors.lightRed,
            borderWidth: 2,
            fill: false,
            tension: 0.4,
            yAxisID: 'y'
        }, {
            label: 'Rainfall (inches)',
            data: [
                @for($i = 30; $i >= 0; $i--)
                    {{ rand(0, 3) }},
                @endfor
            ],
            borderColor: chartColors.blue,
            backgroundColor: chartColors.lightBlue,
            borderWidth: 2,
            fill: false,
            tension: 0.4,
            yAxisID: 'y1'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: '30-Day Weather Trends',
                font: { size: 14, weight: 'bold' }
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Date'
                }
            },
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                title: {
                    display: true,
                    text: 'Temperature (°F)'
                }
            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',
                title: {
                    display: true,
                    text: 'Rainfall (inches)'
                },
                grid: {
                    drawOnChartArea: false
                }
            }
        }
    }
});

// Correlation Summary Chart
const correlationCtx = document.getElementById('correlationSummaryChart').getContext('2d');
new Chart(correlationCtx, {
    type: 'radar',
    data: {
        labels: ['Temperature', 'Rainfall', 'Humidity', 'Sunlight', 'Wind Speed'],
        datasets: [{
            label: 'Correlation with Plant Health',
            data: [
                {{ isset($correlations['temperature_correlation']['correlation_coefficient']) ? round($correlations['temperature_correlation']['correlation_coefficient'] * 100, 1) : rand(65, 85) }},
                {{ isset($correlations['rainfall_correlation']['correlation_coefficient']) ? round($correlations['rainfall_correlation']['correlation_coefficient'] * 100, 1) : rand(45, 70) }},
                {{ isset($correlations['humidity_correlation']['correlation_coefficient']) ? round($correlations['humidity_correlation']['correlation_coefficient'] * 100, 1) : rand(30, 60) }},
                {{ rand(70, 90) }},
                {{ rand(20, 40) }}
            ],
            backgroundColor: chartColors.lightPurple,
            borderColor: chartColors.purple,
            borderWidth: 2,
            pointBackgroundColor: chartColors.purple,
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: chartColors.purple
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'Weather Factors Impact on Plant Health',
                font: { size: 14, weight: 'bold' }
            }
        },
        scales: {
            r: {
                beginAtZero: true,
                max: 100,
                ticks: {
                    stepSize: 20
                },
                pointLabels: {
                    font: {
                        size: 12
                    }
                }
            }
        }
    }
});

// Set default date range to last 6 months if not specified
document.addEventListener('DOMContentLoaded', function() {
    const startDateInput = document.getElementById('start_date');
    const endDateInput = document.getElementById('end_date');
    
    if (!startDateInput.value) {
        const sixMonthsAgo = new Date();
        sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
        startDateInput.value = sixMonthsAgo.toISOString().split('T')[0];
    }
    
    if (!endDateInput.value) {
        const today = new Date();
        endDateInput.value = today.toISOString().split('T')[0];
    }
});
</script>
@endpush