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


    <!-- Page Header -->
    <div class="page-header">
        <h1>🌦️ Weather Dashboard</h1>
        <p>Comprehensive Weather Data for Blackberry Farm - Booneville, AR</p>
        @if($latestData)
            <p class="subtitle">Last updated: {{ $latestData->recorded_at->format('M j, Y g:i A') }}</p>
        @endif
    </div>

    <!-- Quick Navigation -->
    <div class="responsive-grid cols-3" style="margin-bottom: 30px;">
        <a href="/weather/historical" class="touch-btn touch-btn-warning">📊 Historical Data</a>
        <a href="/weather/soil" class="touch-btn touch-btn-warning">🌱 Soil Conditions</a>
        <a href="/weather/growing" class="touch-btn touch-btn-warning">🌿 Growing Analysis</a>
        <a href="/weather/admin" class="touch-btn touch-btn-warning">⚙️ Data Management</a>
    </div>

        <!-- Weather Alerts -->
        @if(!empty($alerts))
        <div class="mobile-card" style="margin-bottom: 30px;">
            <h3>⚠️ Weather Alerts</h3>
            @foreach($alerts as $alert)
            <div style="padding: 15px 20px; border-radius: 8px; margin-bottom: 10px; font-weight: bold; display: flex; align-items: center; gap: 10px; 
                @if($alert['priority'] === 'critical') background: rgba(198, 40, 40, 0.1); border-left: 4px solid #C62828; color: #C62828;
                @elseif($alert['priority'] === 'high') background: rgba(255, 143, 0, 0.1); border-left: 4px solid #FF8F00; color: #E65100;
                @else background: rgba(106, 27, 154, 0.1); border-left: 4px solid #6A1B9A; color: #4A148C;
                @endif">
                <span style="font-size: 1.5rem;">
                    @if($alert['type'] === 'frost') ❄️
                    @elseif($alert['type'] === 'heat') 🌡️
                    @elseif($alert['type'] === 'wind') 💨
                    @elseif($alert['type'] === 'drought') 🏜️
                    @else ⚠️
                    @endif
                </span>
                <div>
                    <strong>{{ strtoupper($alert['priority']) }} ALERT:</strong>
                    {{ $alert['message'] }}
                </div>
            </div>
            @endforeach
        </div>
        @endif

        <!-- Row 1: Current Weather (Full Width) -->
        @if($currentWeather)
        <div class="mobile-card weather-current-card" style="margin-bottom: 30px;">
            <h3>☀️ Current Conditions</h3>
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
                <div>
                    <div style="font-size: 3.5rem; font-weight: bold; margin: 10px 0; text-shadow: 2px 2px 4px   rgba(0,0,0,0.3);">{{ round($currentWeather['main']['temp']) }}°F</div>
                    <div style="font-size: 1.2rem; opacity: 0.9;">
                        {{ ucfirst($currentWeather['weather'][0]['description']) }}
                    </div>
                    <div style="opacity: 0.8;">
                        Feels like {{ round($currentWeather['main']['feels_like']) }}°F
                    </div>
                </div>
                <div style="font-size: 4rem; opacity: 0.7;">
                    @if(strpos($currentWeather['weather'][0]['main'], 'Clear') !== false) ☀️
                    @elseif(strpos($currentWeather['weather'][0]['main'], 'Cloud') !== false) ☁️
                    @elseif(strpos($currentWeather['weather'][0]['main'], 'Rain') !== false) 🌧️
                    @elseif(strpos($currentWeather['weather'][0]['main'], 'Snow') !== false) ❄️
                    @else 🌤️
                    @endif
                </div>
            </div>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px;">
                <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px; text-align: center;">
                    <div>💧 Humidity</div>
                    <div style="font-size: 1.5rem; font-weight: bold;">{{ $currentWeather['main']['humidity'] }}%</div>
                </div>
                <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px; text-align: center;">
                    <div>💨 Wind</div>
                    <div style="font-size: 1.5rem; font-weight: bold;">{{ round($currentWeather['wind']['speed'] ?? 0) }} mph</div>
                </div>
                <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px; text-align: center;">
                    <div>🌫️ Pressure</div>
                    <div style="font-size: 1.5rem; font-weight: bold;">{{ round($currentWeather['main']['pressure'] ?? 0) }} hPa</div>
                </div>
                <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px; text-align: center;">
                    <div>☁️ Clouds</div>
                    <div style="font-size: 1.5rem; font-weight: bold;">{{ $currentWeather['clouds']['all'] ?? 0 }}%</div>
                </div>
            </div>
        </div>
        @endif

        <!-- Row 2: Agricultural Conditions & Recent Data (Side by Side) -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin-bottom: 30px;">
            <!-- Agricultural Conditions -->
            @if($latestData)
            <div class="mobile-card">
                <h3>🌱 Agricultural Conditions</h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 15px;">
                    <div style="background: rgba(106, 27, 154, 0.1); padding: 15px; border-radius: 8px; text-align: center;">
                        <div style="color: #5D4037; font-weight: 600;">Soil Temp</div>
                        <div style="font-weight: bold; color: #388E3C; font-size: 1.3em;">
                            {{ round($latestData->soil_temperature_6cm_f ?? 0) }}°F
                        </div>
                    </div>
                    <div style="background: rgba(25, 118, 210, 0.1); padding: 15px; border-radius: 8px; text-align: center;">
                        <div style="color: #5D4037; font-weight: 600;">Soil Moisture</div>
                        <div style="font-weight: bold; color: #1976D2; font-size: 1.3em;">
                            {{ round(($latestData->soil_moisture_3_9cm ?? 0) * 100, 1) }}%
                        </div>
                    </div>
                    <div style="background: rgba(255, 143, 0, 0.1); padding: 15px; border-radius: 8px; text-align: center;">
                        <div style="color: #5D4037; font-weight: 600;">Growing DD</div>
                        <div style="font-weight: bold; color: #FF8F00; font-size: 1.3em;">
                            {{ round($latestData->growing_degree_days ?? 0, 1) }}
                        </div>
                    </div>
                    @if($latestData->frost_risk)
                    <div style="background: rgba(198, 40, 40, 0.1); padding: 15px; border-radius: 8px; text-align: center;">
                        <div style="color: #5D4037; font-weight: 600;">❄️ Frost Risk</div>
                        <div style="font-weight: bold; color: #C62828; font-size: 1.3em;">YES</div>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            <!-- Recent Data -->
            @if($recentData && $recentData->count() > 0)
            <div class="mobile-card">
                <h3>📊 Last 24 Hours</h3>
                <div style="max-height: 300px; overflow-y: auto;">
                    @foreach($recentData->reverse()->take(10) as $record)
                    <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #E0E0E0; font-size: 0.9rem;">
                        <span style="font-weight: 600; color: #5D4037;">{{ $record->recorded_at->format('g:i A') }}</span>
                        <span style="color: #424242;">{{ round($record->temperature_2m_f ?? 0) }}°F</span>
                        <span style="color: #424242;">{{ round($record->relative_humidity_2m ?? 0) }}%</span>
                        <span style="color: #424242;">{{ round($record->wind_speed_10m_mph ?? 0) }} mph</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        <!-- Row 3: Weekly Statistics (Horizontal Layout) -->
        @if(!empty($weeklyStats))
        <div class="mobile-card" style="margin-bottom: 30px;">
            <h3>📈 7-Day Summary</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px;">
                <div style="background: rgba(106, 27, 154, 0.1); padding: 20px; border-radius: 8px; text-align: center; border: 2px solid #6A1B9A;">
                    <div style="color: #5D4037; font-weight: 600; font-size: 0.9em; margin-bottom: 8px;">Average Temperature</div>
                    <div style="font-size: 2em; font-weight: bold; color: #6A1B9A; margin-bottom: 5px;">{{ round($weeklyStats['temperature']['avg'] ?? 0) }}°F</div>
                    <small style="color: #6c757d;">Range: {{ round($weeklyStats['temperature']['min'] ?? 0) }}° - {{ round($weeklyStats['temperature']['max'] ?? 0) }}°</small>
                </div>
                
                <div style="background: rgba(56, 142, 60, 0.1); padding: 20px; border-radius: 8px; text-align: center; border: 2px solid #388E3C;">
                    <div style="color: #5D4037; font-weight: 600; font-size: 0.9em; margin-bottom: 8px;">Total Precipitation</div>
                    <div style="font-size: 2em; font-weight: bold; color: #388E3C; margin-bottom: 5px;">{{ round($weeklyStats['precipitation']['total_inches'] ?? 0, 2) }}"</div>
                    <small style="color: #6c757d;">{{ $weeklyStats['precipitation']['rain_days'] ?? 0 }} rain days</small>
                </div>
                
                <div style="background: rgba(255, 143, 0, 0.1); padding: 20px; border-radius: 8px; text-align: center; border: 2px solid #FF8F00;">
                    <div style="color: #5D4037; font-weight: 600; font-size: 0.9em; margin-bottom: 8px;">Growing Degree Days</div>
                    <div style="font-size: 2em; font-weight: bold; color: #FF8F00; margin-bottom: 5px;">{{ round($weeklyStats['growing_conditions']['total_gdd'] ?? 0) }}</div>
                    <small style="color: #6c757d;">{{ $weeklyStats['growing_conditions']['frost_days'] ?? 0 }} frost days</small>
                </div>
                
                <div style="background: rgba(25, 118, 210, 0.1); padding: 20px; border-radius: 8px; text-align: center; border: 2px solid #1976D2;">
                    <div style="color: #5D4037; font-weight: 600; font-size: 0.9em; margin-bottom: 8px;">Average Wind</div>
                    <div style="font-size: 2em; font-weight: bold; color: #1976D2; margin-bottom: 5px;">{{ round($weeklyStats['wind']['avg_speed'] ?? 0) }} mph</div>
                    <small style="color: #6c757d;">Max gust: {{ round($weeklyStats['wind']['max_gust'] ?? 0) }} mph</small>
                </div>
            </div>
        </div>
        @endif

        <!-- Additional Navigation -->
        <div class="mobile-card" style="text-align: center;">
            <h3>🌦️ Weather Navigation</h3>
            <div class="responsive-grid cols-2" style="gap: 10px;">
                <a href="/" class="touch-btn touch-btn-primary">🏠 Home</a>
                <a href="/operations" class="touch-btn touch-btn-primary">← Operations Dashboard</a>
            </div>
        </div>

@endsection