@extends('layouts.app')
@section('title', 'Operations Dashboard - Blackberry Farm')
@section('content')
<style>

/* Styling for the mobile-card with a blue background */
.mobile-card.weather-current-card2 {
    background: #b6d0ecff !important;  /* Set a blue background */
    color: white;  /* Keep text white for contrast */
    border: 2px solid rgba(70, 2, 58, 1);  /* Light border with slight transparency */
    box-shadow: 0 8px 30px rgba(29, 71, 117, 0.5);  /* Stronger blue shadow for better visibility */
    border-radius: 8px;  /* Optional: Add rounded corners for a smoother look */
    padding: 20px;  /* Padding to space out content inside the card */
}

/* Style for the h3 inside the weather card */
.mobile-card.weather-current-card2 h3 {
    color: white;  /* Ensure h3 is white */
    font-size: 1.5em;  /* Adjust the size of the heading */
    margin-bottom: 15px;  /* Add space between the heading and the content */
}

/* Styling for weather details section */
.mobile-card.weather-current-card2 .weather-details {
    font-size: 1.5em;  /* Slightly smaller font for the details */
    line-height: 1.6;  /* Add space between lines for readability */
}

.mobile-card.weather-current-card2 .weather-temp {
    font-size: 4.0em;  /* Larger font for the temperature */
    font-weight: bold;  /* Bold temperature */
    margin-bottom: 15px;  /* Space between temperature and other details */
}


</style>


    <!-- Page Header -->
    <div class="page-header">
        <h1>🚜 Operations Dashboard</h1>
        <p>Farm management and monitoring center</p>
        <p class="subtitle">Real-time operations tracking and weather monitoring</p>
    </div>

        <!-- Today's Stats -->
        <div class="stats-grid">
            <div class="stat-card today">
                <div class="stat-number">{{ $todayStats['watering_logs'] ?? 0 }}</div>
                <div class="stat-label">💧 Watering Sessions Today</div>
            </div>
            <div class="stat-card today">
                <div class="stat-number">{{ $todayStats['fertilizer_applications'] ?? 0 }}</div>
                <div class="stat-label">🌱 Fertilizer Applications</div>
            </div>
            <div class="stat-card today">
                <div class="stat-number">{{ $todayStats['pest_observations'] ?? 0 }}</div>
                <div class="stat-label">🐛 Pest Observations</div>
            </div>
            <div class="stat-card today">
                <div class="stat-number">{{ $todayStats['active_plants'] ?? 0 }}</div>
                <div class="stat-label">🫐 Active Plants</div>
            </div>
        </div>

        <!-- Week Stats -->
        <div class="stats-grid">
            <div class="stat-card week">
                <div class="stat-number">{{ $weekStats['watering_sessions'] ?? 0 }}</div>
                <div class="stat-label">This Week: Watering</div>
            </div>
            <div class="stat-card week">
                <div class="stat-number">{{ $weekStats['fertilizer_treatments'] ?? 0 }}</div>
                <div class="stat-label">This Week: Fertilizer</div>
            </div>
            <div class="stat-card week">
                <div class="stat-number">{{ $weekStats['pest_issues'] ?? 0 }}</div>
                <div class="stat-label">This Week: Pest Issues</div>
            </div>
            <div class="stat-card week">
                <div class="stat-number">{{ $weekStats['soil_tests'] ?? 0 }}</div>
                <div class="stat-label">This Week: Soil Tests</div>
            </div>
        </div>

        <!-- Urgent Items -->
        @if(($urgentItems['follow_up_pests'] ?? 0) > 0 || ($urgentItems['plants_need_attention'] ?? 0) > 0 || ($urgentItems['critical_pests'] ?? 0) > 0)
        <div class="mobile-card">
            <h3>⚠️ Items Requiring Attention</h3>
            <ul class="urgent-list">
                @if(($urgentItems['critical_pests'] ?? 0) > 0)
                <li class="critical">
                    <strong>Critical Pest Issues:</strong> {{ $urgentItems['critical_pests'] }} plants have critical pest problems requiring immediate treatment
                </li>
                @endif
                @if(($urgentItems['follow_up_pests'] ?? 0) > 0)
                <li>
                    <strong>Overdue Follow-ups:</strong> {{ $urgentItems['follow_up_pests'] }} pest treatments need follow-up assessment
                </li>
                @endif
                @if(($urgentItems['plants_need_attention'] ?? 0) > 0)
                <li>
                    <strong>Plants Need Care:</strong> {{ $urgentItems['plants_need_attention'] }} plants haven't been watered in 7+ days or have other issues
                </li>
                @endif
                @if(($urgentItems['soil_tests_due'] ?? 0) > 0)
                <li>
                    <strong>Soil Tests Due:</strong> {{ $urgentItems['soil_tests_due'] }} follow-up soil tests are overdue
                </li>
                @endif
            </ul>
        </div>
        @endif

        <div class="dashboard-grid">
            <!-- Main Content -->
            <div>
                <!-- Current Weather Section -->
                @if(isset($currentWeather) && $currentWeather)
                    <div class="mobile-card weather-current-card2">
                        <h3>🌤️ Current Weather Conditions</h3>
                        <div class="weather-details">
                            @if(isset($currentWeather['temperature']))
                                <!-- OpenWeatherMap format -->
                                <div class="weather-temp">{{ $currentWeather['temperature'] }}°F</div>
                                <p><strong>Conditions:</strong> {{ $currentWeather['description'] }}</p>
                                <p><strong>Feels like:</strong> {{ $currentWeather['feels_like'] }}°F</p>
                                <p><strong>Humidity:</strong> {{ $currentWeather['humidity'] }}%</p>
                                <p><strong>Wind:</strong> {{ $currentWeather['wind_speed'] }} mph {{ \App\Services\OpenWeatherMapService::getWindDirection($currentWeather['wind_direction']) }}</p>
                                @if($currentWeather['wind_gust'] > 0)
                                    <p><strong>Gusts:</strong> {{ $currentWeather['wind_gust'] }} mph</p>
                                @endif
                                <p><strong>Pressure:</strong> {{ $currentWeather['pressure'] }}" Hg</p>
                                <p><strong>Visibility:</strong> {{ $currentWeather['visibility'] }} miles</p>
                                <p><small><strong>Updated:</strong> {{ $currentWeather['updated_at'] }} | <strong>Location:</strong> {{ $currentWeather['location'] }}</small></p>
                            @else
                                <!-- Open-Meteo fallback format -->
                                <div class="weather-temp">{{ round($currentWeather['main']['temp']) }}°F</div>
                                <p><strong>Conditions:</strong> {{ ucfirst($currentWeather['weather'][0]['description']) }}</p>
                                <p><strong>Feels like:</strong> {{ round($currentWeather['main']['feels_like']) }}°F</p>
                                <p><strong>Humidity:</strong> {{ $currentWeather['main']['humidity'] }}%</p>
                                @if(isset($currentWeather['wind']['speed']))
                                    <p><strong>Wind:</strong> {{ round($currentWeather['wind']['speed']) }} mph</p>
                                @endif
                                <p><small><strong>Source:</strong> Open-Meteo API | <strong>Note:</strong> Configure OpenWeatherMap API key for enhanced weather data</small></p>
                            @endif
                        </div>
                    </div>
                @endif


                <!-- Weather Forecast -->
                @if(isset($forecast) && $forecast)
                <div class="mobile-card.weather-current-card">
                    <h3>📅 Weather Forecast</h3>
                    @if(isset($forecast['daily']))
                        {{-- OpenWeatherMap format --}}
                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px;">
                            @foreach($forecast['daily'] as $day)
                            <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; text-align: center; border: 1px solid #dee2e6;">
                                <div style="font-weight: bold; color: #2c3e50; margin-bottom: 8px;">
                                    {{ ($day['day_name'] ?? '') === now()->format('l') ? 'Today' : ($day['day_name'] ?? 'Day ' . ($loop->index + 1)) }}
                                </div>
                                <div style="font-size: 0.9em; color: #6c757d; margin-bottom: 10px;">{{ $day['date'] ?? '' }}</div>
                                @if(isset($day['primary_icon']))
                                <div style="font-size: 2em; margin: 10px 0;">
                                    <img src="https://openweathermap.org/img/w/{{ $day['primary_icon'] }}.png" alt="{{ $day['primary_condition'] ?? 'Weather' }}" style="width: 50px; height: 50px;">
                                </div>
                                @endif
                                <div style="font-size: 1.1em; font-weight: bold; margin-bottom: 5px;">
                                    {{ $day['high_temp'] ?? '?' }}° / {{ $day['low_temp'] ?? '?' }}°
                                </div>
                                @if(isset($day['primary_condition']))
                                <div style="font-size: 0.85em; color: #6c757d; margin-bottom: 8px;">
                                    {{ $day['primary_condition'] }}
                                </div>
                                @endif
                                @if(($day['max_precipitation_chance'] ?? 0) > 0)
                                <div style="font-size: 0.8em; color: #007bff;">
                                    🌧️ {{ $day['max_precipitation_chance'] }}%
                                </div>
                                @endif
                                @if(isset($day['avg_wind']) && isset($day['avg_humidity']))
                                <div style="font-size: 0.75em; color: #6c757d; margin-top: 5px;">
                                    💨 {{ $day['avg_wind'] }} mph | 💧 {{ $day['avg_humidity'] }}%
                                </div>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    @elseif(isset($forecast['daily']))
                        {{-- Open-Meteo fallback format --}}
                        <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #dee2e6;">
                            <p style="text-align: center; color: #6c757d;">
                                📊 5-day forecast available with basic weather data<br>
                                <small>Configure OpenWeatherMap API key for detailed forecast with icons and precipitation chances</small>
                            </p>
                            @if(isset($forecast['daily']))
                                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 15px;">
                                    @foreach(array_slice($forecast['daily'], 0, 5) as $index => $day)
                                    <div style="background: white; padding: 10px; border-radius: 6px; text-align: center;">
                                        <div style="font-weight: bold; margin-bottom: 5px;">
                                            {{ $index === 0 ? 'Today' : \Carbon\Carbon::now()->addDays($index)->format('D') }}
                                        </div>
                                        <div style="font-size: 1.1em;">
                                            {{ round($day['temperature_2m_max'] ?? 0) }}° / {{ round($day['temperature_2m_min'] ?? 0) }}°
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
                @endif

                <!-- Weather Alerts -->
                @if(isset($weatherAlerts) && count($weatherAlerts) > 0)
                <div class="mobile-card">
                    <h3>⚠️ Weather Alerts</h3>
                    @foreach($weatherAlerts as $alert)
                    <div style="background: #fff3cd; border: 1px solid #ffeaa7; padding: 15px; margin: 10px 0; border-radius: 8px; border-left: 4px solid #f39c12;">
                        <div style="font-weight: bold; color: #856404;">{{ $alert['event'] ?? 'Weather Alert' }}</div>
                        <div style="font-size: 0.9em; color: #6c757d; margin: 5px 0;">
                            {{ isset($alert['start']) ? date('M j, g:i A', $alert['start']) : '' }} - 
                            {{ isset($alert['end']) ? date('M j, g:i A', $alert['end']) : '' }}
                        </div>
                        <div style="margin-top: 8px;">{{ $alert['description'] ?? 'Check local weather sources for details.' }}</div>
                    </div>
                    @endforeach
                </div>
                @endif

                <!-- Quick Actions -->
                <div class="mobile-card">
                    <h3>🚀 Quick Actions</h3>
                    <div class="responsive-grid cols-2" style="gap: 15px;">
                        <a href="/watering/create" class="touch-btn touch-btn-primary">💧 Log Watering</a>
                        <a href="/fertilizer/create" class="touch-btn touch-btn-success">🌱 Apply Fertilizer</a>
                        <a href="/pest-disease/create" class="touch-btn touch-btn-warning">🐛 Report Pest Issue</a>
                        <a href="/soil-tests/create" class="touch-btn touch-btn-primary">🧪 Record Soil Test</a>
                        <a href="/harvests/create" class="touch-btn touch-btn-success">🫐 Record Harvest</a>
                        <a href="/harvests/bulk-create" class="touch-btn touch-btn-success">🫐 Bulk Field Harvest</a>
                        <a href="/labor/create" class="touch-btn touch-btn-primary">👷 Log Labor</a>
                        <a href="/equipment/create" class="touch-btn touch-btn-primary">🚜 Add Equipment</a>
                        <a href="/watering/bulk-create" class="touch-btn touch-btn-primary">💧 Bulk Watering</a>
                        <a href="/fertilizer/bulk-create" class="touch-btn touch-btn-success">🌱 Bulk Fertilizer</a>
                        <a href="/plants/create" class="touch-btn touch-btn-success">🫐 Add New Plant</a>
                        <a href="/varieties" class="touch-btn touch-btn-primary">📋 Manage Varieties</a>
                        <a href="/employees" class="touch-btn touch-btn-primary">👥 Manage Employees</a>
                        <a href="/employees/create" class="touch-btn touch-btn-success">👷 Add Employee</a>
                    </div>
                </div>

                <!-- Operation Recommendations -->
                @if(isset($recommendations) && count($recommendations) > 0)
                <div class="mobile-card">
                    <h3>💡 Operation Recommendations</h3>
                    @foreach($recommendations as $recommendation)
                    <div style="background: 
                        @if($recommendation['priority'] === 'critical') #f8d7da; border-left-color: #dc3545;
                        @elseif($recommendation['priority'] === 'high') #fff3cd; border-left-color: #ffc107;
                        @elseif($recommendation['priority'] === 'medium') #cce5ff; border-left-color: #007bff;
                        @else #e8f5e8; border-left-color: #28a745;
                        @endif
                        padding: 15px; margin: 10px 0; border-radius: 8px; border-left: 4px solid;">
                        <div style="display: flex; align-items: center; margin-bottom: 8px;">
                            <span style="font-size: 1.2em; margin-right: 10px;">{{ $recommendation['icon'] }}</span>
                            <strong style="color: #2c3e50;">{{ $recommendation['title'] }}</strong>
                        </div>
                        <div style="margin-bottom: 8px;">{{ $recommendation['message'] }}</div>
                        <div style="font-size: 0.9em; color: #6c757d; font-style: italic;">
                            Action: {{ $recommendation['action'] }}
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="recommendations">
                    <h4>💡 Today's Recommendations</h4>
                    <ul>
                        @if(isset($currentWeather) && $currentWeather['humidity'] < 60)
                            <li>Low humidity detected ({{ $currentWeather['humidity'] }}%) - consider additional watering for stressed plants</li>
                        @endif
                        @if(isset($currentWeather) && $currentWeather['temperature'] > 85)
                            <li>High temperature ({{ $currentWeather['temperature'] }}°F) - monitor plants for heat stress</li>
                        @endif
                        @if(($urgentItems['plants_need_attention'] ?? 0) > 0)
                            <li>{{ $urgentItems['plants_need_attention'] }} plants need immediate attention - check watering and health status</li>
                        @endif
                        <li>Regular weekly tasks: Scout for pests, check soil moisture, monitor plant health</li>
                        <li>Record all observations and treatments for optimal farm management</li>
                    </ul>
                </div>
                @endif
            </div>

            <!-- Sidebar -->
            <div>
                <!-- Recent Activities -->
                <div class="mobile-card">
                    <h3>📋 Recent Activities</h3>
                    <div class="activities-list">
                        @if(isset($recentActivities) && count($recentActivities) > 0)
                            @foreach($recentActivities as $activity)
                            <div class="activity-item">
                                <div class="activity-icon {{ $activity['type'] }}">
                                    @if($activity['type'] === 'watering') 💧
                                    @elseif($activity['type'] === 'fertilizer') 🌱
                                    @elseif($activity['type'] === 'pest') 🐛
                                    @elseif($activity['type'] === 'soil') 🧪
                                    @else 📋
                                    @endif
                                </div>
                                <div class="activity-content">
                                    <div class="activity-title">{{ $activity['title'] }}</div>
                                    <div class="activity-time">{{ $activity['time'] }}</div>
                                </div>
                            </div>
                            @endforeach
                        @else
                        <p style="text-align: center; color: #7f8c8d; padding: 20px;">
                            No recent activities. Start logging your farm operations!
                        </p>
                        @endif
                    </div>
                </div>

                <!-- Navigation Links -->
                <div class="mobile-card">
                    <h3>📊 Management Areas</h3>
                    <div style="display: grid; gap: 10px;">
                        <a href="/weather" class="touch-btn touch-btn-primary">🌤️ Weather Data</a>
                        <a href="/weather/historical" class="touch-btn touch-btn-primary">📈 Weather History</a>
                        <a href="/plants" class="touch-btn touch-btn-success">🫐 Plant Management</a>
                        <a href="/watering" class="touch-btn touch-btn-primary">💧 Watering Logs</a>
                        <a href="/fertilizer" class="touch-btn touch-btn-success">🌱 Fertilizer Records</a>
                        <a href="/pest-disease" class="touch-btn touch-btn-warning">🐛 Pest Management</a>
                        <a href="/soil-tests" class="touch-btn touch-btn-primary">🧪 Soil Testing</a>
                        <a href="/harvests" class="touch-btn touch-btn-success">🫐 Harvest Records</a>
                        <a href="/labor" class="touch-btn touch-btn-primary">👷 Labor Management</a>
                        <a href="/equipment" class="touch-btn touch-btn-primary">🚜 Equipment Management</a>
                        <a href="/pest-disease-dashboard" class="touch-btn touch-btn-warning">📊 Pest Dashboard</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div style="text-align: center; margin-top: 30px; padding: 20px; color: #7f8c8d;">
            <p>Blackberry Farm Operations Dashboard | Last updated: {{ date('M j, Y g:i A') }}</p>
        </div>

@endsection