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

    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f7fa;
            line-height: 1.6;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e9ecef;
        }
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background: #3498db;
            color: white;
            text-decoration: none;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
            margin: 5px;
            font-size: 14px;
        }
        .btn:hover { background: #2980b9; }
        .btn-success { background: #8B4513; }
        .btn-secondary { background: #95a5a6; }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: linear-gradient(135deg, #8B4513, #A0522D);
            color: white;
            padding: 25px;
            border-radius: 10px;
            text-align: center;
        }
        .stat-card.green { background: linear-gradient(135deg, #27ae60, #219a52); }
        .stat-card.blue { background: linear-gradient(135deg, #3498db, #2980b9); }
        .stat-card.orange { background: linear-gradient(135deg, #f39c12, #e67e22); }
        .stat-card.red { background: linear-gradient(135deg, #e74c3c, #c0392b); }
        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 1em;
            opacity: 0.9;
        }
        .dashboard-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        .chart-section {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #e9ecef;
        }
        .info-panel {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #e9ecef;
        }
        .ph-timeline {
            margin: 20px 0;
        }
        .ph-point {
            display: flex;
            align-items: center;
            margin: 10px 0;
            padding: 10px;
            background: white;
            border-radius: 6px;
            border-left: 4px solid #8B4513;
        }
        .ph-date {
            min-width: 100px;
            font-size: 0.9em;
            color: #6c757d;
        }
        .ph-value {
            font-weight: bold;
            min-width: 60px;
            margin: 0 15px;
        }
        .ph-location {
            flex: 1;
            font-size: 0.9em;
        }
        .ph-status {
            font-size: 0.8em;
            padding: 3px 8px;
            border-radius: 12px;
            font-weight: bold;
        }
        .ph-ideal { background: #d4edda; color: #155724; }
        .ph-low { background: #f8d7da; color: #721c24; }
        .ph-high { background: #d1ecf1; color: #0c5460; }
        .nutrient-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        .nutrient-box {
            background: white;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border: 2px solid #e9ecef;
        }
        .nutrient-name {
            font-size: 0.9em;
            color: #6c757d;
            margin-bottom: 5px;
        }
        .nutrient-value {
            font-size: 1.4em;
            font-weight: bold;
            color: #2c3e50;
        }
        .nutrient-trend {
            font-size: 0.8em;
            margin-top: 5px;
        }
        .trend-up { color: #27ae60; }
        .trend-down { color: #e74c3c; }
        .trend-stable { color: #6c757d; }
        .alert-box {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
        }
        .alert-box.danger {
            background: #f8d7da;
            border-color: #f5c6cb;
        }
        .alert-box.success {
            background: #d4edda;
            border-color: #c3e6cb;
        }
        .recommendations-panel {
            background: #e8f5e8;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        .location-breakdown {
            margin: 20px 0;
        }
        .location-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background: white;
            margin: 5px 0;
            border-radius: 6px;
            border-left: 4px solid #8B4513;
        }
        .location-name {
            font-weight: bold;
        }
        .location-ph {
            font-family: monospace;
        }
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        .action-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            text-align: center;
            transition: all 0.3s ease;
        }
        .action-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        @media (max-width: 768px) {
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>

    <div class="container">
        <div class="header">
            <div>
                <h1>🧪 Soil Health Dashboard</h1>
                <p>Comprehensive soil analysis and monitoring for optimal blackberry production</p>
            </div>
            <div>
                <a href="/soil-tests/create" class="btn btn-success">New Soil Test</a>
                <a href="/soil-tests" class="btn btn-secondary">View All Tests</a>
                <a href="/operations" class="btn">Operations</a>
            </div>
        </div>

        <!-- Key Statistics -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">{{ $totalTests ?? 0 }}</div>
                <div class="stat-label">Total Soil Tests</div>
            </div>
            <div class="stat-card green">
                <div class="stat-number">{{ $averagePH ?? 'N/A' }}</div>
                <div class="stat-label">Average pH Level</div>
            </div>
            <div class="stat-card blue">
                <div class="stat-number">{{ $locationsTestedCount ?? 0 }}</div>
                <div class="stat-label">Locations Tested</div>
            </div>
            <div class="stat-card orange">
                <div class="stat-number">{{ $testsThisYear ?? 0 }}</div>
                <div class="stat-label">Tests This Year</div>
            </div>
            <div class="stat-card {{ $overdueTests > 0 ? 'red' : 'green' }}">
                <div class="stat-number">{{ $overdueTests ?? 0 }}</div>
                <div class="stat-label">Overdue Follow-ups</div>
            </div>
        </div>

        <div class="dashboard-grid">
            <!-- Main Analysis Panel -->
            <div class="chart-section">
                <h3>📊 pH Level Analysis</h3>
                
                <!-- Recent pH Readings -->
                <div class="ph-timeline">
                    <h4>Recent pH Readings</h4>
                    @if(isset($recentTests) && count($recentTests) > 0)
                        @foreach($recentTests as $test)
                        <div class="ph-point">
                            <div class="ph-date">{{ \Carbon\Carbon::parse($test->test_date)->format('M j') }}</div>
                            <div class="ph-value">{{ $test->ph_level ?? 'N/A' }}</div>
                            <div class="ph-location">{{ $test->location }}</div>
                            <div class="ph-status {{ $test->ph_level >= 5.5 && $test->ph_level <= 6.5 ? 'ph-ideal' : ($test->ph_level < 5.5 ? 'ph-low' : 'ph-high') }}">
                                @if($test->ph_level >= 5.5 && $test->ph_level <= 6.5) Ideal
                                @elseif($test->ph_level < 5.5) Too Low
                                @else Too High
                                @endif
                            </div>
                        </div>
                        @endforeach
                    @else
                        <p style="color: #6c757d; text-align: center; padding: 20px;">No recent pH readings available</p>
                    @endif
                </div>

                <!-- Nutrient Levels Summary -->
                <h4>Average Nutrient Levels</h4>
                <div class="nutrient-summary">
                    <div class="nutrient-box">
                        <div class="nutrient-name">Nitrogen (N)</div>
                        <div class="nutrient-value">{{ $averageNitrogen ?? '-' }}</div>
                        <div class="nutrient-trend trend-{{ $nitrogenTrend ?? 'stable' }}">
                            @if($nitrogenTrend === 'up') ↗ Improving
                            @elseif($nitrogenTrend === 'down') ↘ Declining
                            @else ➡ Stable
                            @endif
                        </div>
                    </div>

                    <div class="nutrient-box">
                        <div class="nutrient-name">Phosphorus (P)</div>
                        <div class="nutrient-value">{{ $averagePhosphorus ?? '-' }}</div>
                        <div class="nutrient-trend trend-{{ $phosphorusTrend ?? 'stable' }}">
                            @if($phosphorusTrend === 'up') ↗ Improving
                            @elseif($phosphorusTrend === 'down') ↘ Declining
                            @else ➡ Stable
                            @endif
                        </div>
                    </div>

                    <div class="nutrient-box">
                        <div class="nutrient-name">Potassium (K)</div>
                        <div class="nutrient-value">{{ $averagePotassium ?? '-' }}</div>
                        <div class="nutrient-trend trend-{{ $potassiumTrend ?? 'stable' }}">
                            @if($potassiumTrend === 'up') ↗ Improving
                            @elseif($potassiumTrend === 'down') ↘ Declining
                            @else ➡ Stable
                            @endif
                        </div>
                    </div>

                    <div class="nutrient-box">
                        <div class="nutrient-name">Organic Matter</div>
                        <div class="nutrient-value">{{ $averageOrganicMatter ?? '-' }}%</div>
                        <div class="nutrient-trend trend-{{ $organicMatterTrend ?? 'stable' }}">
                            @if($organicMatterTrend === 'up') ↗ Improving
                            @elseif($organicMatterTrend === 'down') ↘ Declining
                            @else ➡ Stable
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Alerts and Actions Panel -->
            <div class="info-panel">
                <h3>⚠️ Alerts & Actions</h3>

                <!-- Critical Alerts -->
                @if(isset($criticalAlerts) && count($criticalAlerts) > 0)
                    @foreach($criticalAlerts as $alert)
                        <div class="alert-box {{ $alert['type'] }}">
                            <strong>{{ $alert['title'] }}</strong><br>
                            {{ $alert['message'] }}
                        </div>
                    @endforeach
                @endif

                <!-- pH Status Summary -->
                @if(isset($phStatusSummary))
                <div class="alert-box {{ $phStatusSummary['ideal'] > $phStatusSummary['problem'] ? 'success' : 'danger' }}">
                    <strong>pH Status Summary:</strong><br>
                    {{ $phStatusSummary['ideal'] ?? 0 }} locations with ideal pH<br>
                    {{ $phStatusSummary['problem'] ?? 0 }} locations need pH adjustment
                </div>
                @endif

                <!-- Follow-up Reminders -->
                @if(isset($upcomingTests) && count($upcomingTests) > 0)
                <div class="alert-box">
                    <strong>Upcoming Follow-up Tests:</strong>
                    @foreach($upcomingTests as $test)
                        <br>• {{ $test->location }} - {{ \Carbon\Carbon::parse($test->follow_up_date)->format('M j, Y') }}
                    @endforeach
                </div>
                @endif

                <!-- Quick Actions -->
                <div class="quick-actions">
                    <div class="action-card">
                        <h5>📋 Schedule Test</h5>
                        <p>Plan soil testing for new areas</p>
                        <a href="/soil-tests/create" class="btn btn-success" style="font-size: 12px; padding: 8px 16px;">Schedule</a>
                    </div>

                    <div class="action-card">
                        <h5>📈 View Trends</h5>
                        <p>Analyze historical data</p>
                        <a href="/soil-tests" class="btn" style="font-size: 12px; padding: 8px 16px;">View All</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Location Breakdown -->
        <div class="chart-section">
            <h3>📍 Location Breakdown</h3>
            <div class="location-breakdown">
                @if(isset($locationSummary) && count($locationSummary) > 0)
                    @foreach($locationSummary as $location)
                    <div class="location-item">
                        <div class="location-name">{{ $location['name'] }}</div>
                        <div>
                            <span class="location-ph">pH: {{ $location['avg_ph'] ?? 'N/A' }}</span>
                            <span style="margin-left: 15px; font-size: 0.9em; color: #6c757d;">
                                {{ $location['test_count'] }} test{{ $location['test_count'] != 1 ? 's' : '' }}
                            </span>
                        </div>
                    </div>
                    @endforeach
                @else
                    <p style="color: #6c757d; text-align: center; padding: 20px;">No location data available</p>
                @endif
            </div>
        </div>

        <!-- Recommendations Panel -->
        <div class="recommendations-panel">
            <h3>💡 Current Recommendations</h3>
            @if(isset($recommendations) && count($recommendations) > 0)
                <ul style="margin: 15px 0;">
                    @foreach($recommendations as $recommendation)
                        <li style="margin: 8px 0;">{{ $recommendation }}</li>
                    @endforeach
                </ul>
            @else
                <p style="margin: 15px 0;">
                    🎯 <strong>General Recommendations:</strong><br>
                    • Test soil pH annually in early spring<br>
                    • Maintain pH between 5.5-6.5 for optimal blackberry production<br>
                    • Add organic matter regularly to improve soil structure<br>
                    • Monitor nutrient levels and adjust fertilization accordingly<br>
                    • Test different areas of the farm for consistency
                </p>
            @endif
        </div>

        <!-- Summary Stats -->
        <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e9ecef; font-size: 14px; color: #6c757d; text-align: center;">
            <p>
                Dashboard last updated: {{ date('M j, Y g:i A') }} | 
                Total investment in soil testing: ${{ number_format($totalTestingCost ?? 0, 2) }}
            </p>
        </div>
    </div>


@endsection