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

@guest
    <!-- Welcome Section for Guests -->
    <div class="welcome-section" style="background: linear-gradient(135deg, var(--blackberry-purple), var(--blackberry-purple-light)); color: white; padding: 3rem 2rem; border-radius: 15px; margin-bottom: 2rem; text-align: center;">
        <h1 class="display-4 mb-3">🫐 Welcome to Blackberry Farm</h1>
        <p class="lead mb-4">Professional farm management system for sustainable blackberry cultivation</p>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <p class="mb-4">Our comprehensive system helps you track plants, manage operations, monitor weather, and optimize your harvest. Sign up to access all features including notifications, task management, and analytics.</p>
                <div class="d-flex justify-content-center gap-3 flex-wrap">
                    <a href="{{ route('register') }}" class="btn btn-light btn-lg">
                        <i class="fas fa-user-plus me-2"></i>Get Started - It's Free
                    </a>
                    <a href="{{ route('login') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-sign-in-alt me-2"></i>Login
                    </a>
                </div>
            </div>
        </div>
        <div class="row mt-4 text-center">
            <div class="col-md-4">
                <i class="fas fa-seedling fa-2x mb-2"></i>
                <h5>Plant Tracking</h5>
                <p class="small">Monitor every plant's growth journey</p>
            </div>
            <div class="col-md-4">
                <i class="fas fa-bell fa-2x mb-2"></i>
                <h5>Smart Alerts</h5>
                <p class="small">Weather alerts & task reminders</p>
            </div>
            <div class="col-md-4">
                <i class="fas fa-chart-line fa-2x mb-2"></i>
                <h5>Analytics</h5>
                <p class="small">Data-driven farm insights</p>
            </div>
        </div>
    </div>
@endguest

    <!-- Dashboard Header -->
    <div class="page-header">
        <h1>🫐 Blackberry Farm Management System</h1>
        <p>Professional Plant Tracking & Farm Management</p>
        <p class="subtitle">📍 Booneville, AR (72927) | {{ date('M j, Y - g:i A') }}</p>
    </div>
    
    <div class="status-indicator" style="background: linear-gradient(135deg, #388E3C, #4CAF50); color: white; padding: 12px; text-align: center; font-weight: bold; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(56, 142, 60, 0.3);">
        ✅ System Operational | Laravel {{ app()->version() }} | PHP {{ phpversion() }} | Database Connected
    </div>
        
    <div class="dashboard-content">
        <!-- Quick Stats -->
        <div class="responsive-grid cols-4">
            <div class="stat-card today">
                <div class="stat-number">{{ $dashboardStats['current_plants'] }}</div>
                <div class="stat-label">🫐 Active Plants</div>
            </div>
            <div class="stat-card green">
                <div class="stat-number">{{ $dashboardStats['goal_progress'] }}%</div>
                <div class="stat-label">Progress to 500 Plants</div>
                <div style="background: rgba(255,255,255,0.3); height: 8px; border-radius: 4px; margin-top: 10px; overflow: hidden;">
                    <div style="background: rgba(255,255,255,0.9); height: 100%; width: {{ $dashboardStats['goal_progress'] }}%; border-radius: 4px; transition: width 0.3s ease;"></div>
                </div>
            </div>
            <div class="stat-card week">
                <div class="stat-number">{{ $dashboardStats['total_varieties'] }}</div>
                <div class="stat-label">Blackberry Varieties</div>
            </div>
            <div class="stat-card orange">
                <div class="stat-number">{{ number_format($dashboardStats['total_harvest_lbs'], 1) }}</div>
                <div class="stat-label">Total Harvest (lbs) 2025</div>
            </div>
        </div>
        
        <!-- Additional Stats Row -->
        <div class="responsive-grid cols-4">
            <div class="stat-card">
                <div class="stat-number">{{ $dashboardStats['qr_codes_generated'] }}</div>
                <div class="stat-label">QR Codes Generated</div>
            </div>
            <div class="stat-card green">
                <div class="stat-number">500</div>
                <div class="stat-label">First Goal Target</div>
            </div>
            <div class="stat-card week">
                <div class="stat-number">1,000</div>
                <div class="stat-label">Ultimate Scale Target</div>
            </div>
            <div class="stat-card orange">
                <div class="stat-number">{{ $dashboardStats['current_plants'] > 0 ? number_format(($dashboardStats['total_harvest_lbs'] / max($dashboardStats['current_plants'], 1)), 2) : '0.00' }}</div>
                <div class="stat-label">Avg Yield/Plant (lbs)</div>
            </div>
        </div>
            
        <!-- Action Cards -->
        <div class="responsive-grid cols-2">
                <div class="mobile-card">
                    <h3>🌱 Plant Management</h3>
                    <p>Add, edit, and track individual blackberry plants. Generate QR codes for field identification and monitor plant status.</p>
                    <a href="/plants" class="touch-btn touch-btn-primary">Manage Plants</a>
                    <a href="/plants/create" class="touch-btn touch-btn-success">Add New Plant</a>
                </div>
                
                <div class="mobile-card">
                    <h3>🫐 Plant Varieties</h3>
                    <p>Manage blackberry varieties including Prime Ark Freedom, Traveler, Ouachita, and more. View characteristics and yields.</p>
                    <a href="/varieties" class="touch-btn touch-btn-primary">View Varieties</a>
                </div>
                
                <div class="mobile-card">
                    <h3>📊 Growth Tracking</h3>
                    <p>Log plant measurements, health scores, cane counts, and berry quality. Track growth over time with detailed records.</p>
                    <a href="/measurements" class="touch-btn touch-btn-primary">Track Growth</a>
                </div>
                
                <div class="mobile-card">
                    <h3>📱 QR Code System</h3>
                    <p>Generate and print QR codes for plant identification. Scan codes in the field for quick plant access.</p>
                    <a href="/qr-codes" class="touch-btn touch-btn-primary">QR Codes</a>
                    <a href="/scan" class="touch-btn touch-btn-warning">Scan QR</a>
                </div>
                
                <div class="mobile-card">
                    <h3>🌡️ Weather Integration</h3>
                    <p>Monitor weather conditions for Booneville, AR. Track temperature, precipitation, and frost warnings.</p>
                    <a href="/weather" class="touch-btn touch-btn-primary">Weather Data</a>
                    <a href="/weather/historical" class="touch-btn touch-btn-primary">Historical Data</a>
                </div>
                
                <div class="mobile-card">
                    <h3>🚜 Operations Dashboard</h3>
                    <p>Central hub for farm operations, quick actions, weather monitoring, and management tools.</p>
                    <a href="/operations" class="touch-btn touch-btn-primary">Operations Center</a>
                    <a href="/watering" class="touch-btn touch-btn-primary">Watering Logs</a>
                </div>
                
                <div class="mobile-card">
                    <h3>🏪 Nursery Management</h3>
                    <p>Manage plant suppliers and nurseries. Track contact information, purchase history, and ratings for your suppliers.</p>
                    <a href="/nurseries" class="touch-btn touch-btn-primary">Manage Nurseries</a>
                    <a href="/nurseries/create" class="touch-btn touch-btn-success">Add Nursery</a>
                </div>
                
                <div class="mobile-card">
                    <h3>👥 Employee Management</h3>
                    <p>Manage farm workforce, track hours, wages, and payroll. Onboard new employees and monitor attendance.</p>
                    <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 class="mobile-card">
                    <h3>📈 Reports & Analytics</h3>
                    <p>Generate reports on plant growth, yield projections, and farm performance. Plan for expansion to 1,000+ plants.</p>
                    <a href="/reports" class="touch-btn touch-btn-primary">View Reports</a>
                </div>
            </div>
            
        <!-- Interactive Data Visualizations -->
        <div class="mobile-card">
            <h3>📊 Plant Metrics Overview</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin: 20px 0;">
                <!-- Variety Distribution Chart -->
                <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                    <h4 style="margin-bottom: 15px; color: var(--soil-brown);">🫐 Plant Varieties Distribution</h4>
                    <canvas id="varietyChart" style="max-height: 300px;"></canvas>
                </div>
                
                <!-- Goal Progress Chart -->
                <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                    <h4 style="margin-bottom: 15px; color: var(--soil-brown);">🎯 Progress to Goals</h4>
                    <canvas id="goalChart" style="max-height: 300px;"></canvas>
                </div>
            </div>
            
            <!-- Plant Health Status Visualization -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">🌱 Plant Health Status</h4>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px;">
                    <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid var(--leaf-green);">
                        <div style="font-size: 2em; color: var(--leaf-green); font-weight: bold;">{{ $dashboardStats['current_plants'] }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Active Plants</div>
                        <div style="background: var(--leaf-green); height: 4px; border-radius: 2px; margin-top: 8px; opacity: 0.8;"></div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid #FF8F00;">
                        <div style="font-size: 2em; color: #FF8F00; font-weight: bold;">{{ max(0, 500 - $dashboardStats['current_plants']) }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Plants to Goal</div>
                        <div style="background: #FF8F00; height: 4px; border-radius: 2px; margin-top: 8px; opacity: 0.8;"></div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid var(--blackberry-purple);">
                        <div style="font-size: 2em; color: var(--blackberry-purple); font-weight: bold;">{{ $dashboardStats['total_varieties'] }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Varieties</div>
                        <div style="background: var(--blackberry-purple); height: 4px; border-radius: 2px; margin-top: 8px; opacity: 0.8;"></div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid var(--berry-red);">
                        <div style="font-size: 2em; color: var(--berry-red); font-weight: bold;">{{ number_format($dashboardStats['total_harvest_lbs'], 1) }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Harvest (lbs)</div>
                        <div style="background: var(--berry-red); height: 4px; border-radius: 2px; margin-top: 8px; opacity: 0.8;"></div>
                    </div>
                </div>
            </div>
        </div>
            
        <!-- Farm Progress Alert -->
        <div class="mobile-card" style="background: rgba(25, 118, 210, 0.1) !important; border-left: 4px solid #1976D2 !important; margin-top: 30px;">
            <h3>🚀 Farm Progress</h3>
            @if($dashboardStats['current_plants'] == 0)
                <p>Begin by adding your first plants to the system. Generate QR codes for field identification and start tracking growth measurements.</p>
                <a href="/plants/create" class="touch-btn touch-btn-success">Add your first plant →</a>
            @elseif($dashboardStats['current_plants'] < 50)
                <p>Great start! You have {{ $dashboardStats['current_plants'] }} plants registered. Continue adding plants and generating QR codes for field identification.</p>
                <a href="/plants/create" class="touch-btn touch-btn-success">Add more plants →</a>
            @elseif($dashboardStats['current_plants'] < 500)
                <p>Excellent progress! {{ $dashboardStats['current_plants'] }} plants registered ({{ $dashboardStats['goal_progress'] }}% to first goal). Focus on harvest tracking and plant optimization.</p>
                <a href="/harvests/create" class="touch-btn touch-btn-success">Record harvest →</a>
            @else
                <p>Congratulations! You've reached {{ $dashboardStats['current_plants'] }} plants, exceeding your 500-plant goal. Ready to scale to 1,000+!</p>
                <a href="/reports" class="touch-btn touch-btn-success">View analytics →</a>
            @endif
        </div>
        
        <!-- System Information -->
        <div class="mobile-card" style="margin-top: 30px;">
            <h3>🔧 System Information</h3>
            <div class="responsive-grid cols-2" style="margin-top: 16px;">
                <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #E0E0E0;">
                    <span>Database:</span>
                    <strong style="color: #388E3C;">
                        @php
                            try {
                                DB::connection()->getPdo();
                                echo 'Connected';
                            } catch(Exception $e) {
                                echo 'Failed';
                            }
                        @endphp
                    </strong>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #E0E0E0;">
                    <span>Weather API:</span>
                    <strong style="color: #388E3C;">Active</strong>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #E0E0E0;">
                    <span>Laravel:</span>
                    <strong>{{ app()->version() }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 8px 0;">
                    <span>Location:</span>
                    <strong>Booneville, AR</strong>
                </div>
            </div>
        </div>
        
        <div style="text-align: center; margin-top: 40px; padding: 20px; color: #6c757d; border-top: 1px solid #E0E0E0;">
            <p>&copy; {{ date('Y') }} Blackberry Farm Management System | Homesteading Outlaws</p>
            <p style="font-size: 0.9em;">Scale from 40 plants to 10,000+ with comprehensive tracking and QR identification</p>
        </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart.js Configuration with Blackberry Theme
const blackberryColors = {
    purple: '#6A1B9A',
    purpleLight: '#8E24AA',
    green: '#388E3C',
    greenLight: '#66BB6A',
    orange: '#FF8F00',
    red: '#C62828',
    brown: '#966252',
    gray: '#E0E0E0'
};

// Variety Distribution Pie Chart
const varietyCtx = document.getElementById('varietyChart').getContext('2d');
new Chart(varietyCtx, {
    type: 'doughnut',
    data: {
        labels: ['Active Plants', 'Target Growth', 'Ultimate Goal'],
        datasets: [{
            data: [{{ $dashboardStats['current_plants'] }}, {{ max(0, 500 - $dashboardStats['current_plants']) }}, {{ max(0, 1000 - 500) }}],
            backgroundColor: [
                blackberryColors.purple,
                blackberryColors.orange,
                blackberryColors.gray
            ],
            borderColor: '#fff',
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 20,
                    font: {
                        size: 12,
                        weight: '600'
                    }
                }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const label = context.label || '';
                        const value = context.parsed;
                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                        const percentage = ((value / total) * 100).toFixed(1);
                        return `${label}: ${value} plants (${percentage}%)`;
                    }
                }
            }
        }
    }
});

// Goal Progress Bar Chart
const goalCtx = document.getElementById('goalChart').getContext('2d');
new Chart(goalCtx, {
    type: 'bar',
    data: {
        labels: ['First Goal (500)', 'Ultimate Goal (1000)'],
        datasets: [{
            label: 'Current Progress',
            data: [{{ $dashboardStats['current_plants'] }}, {{ $dashboardStats['current_plants'] }}],
            backgroundColor: [
                blackberryColors.green,
                blackberryColors.purple
            ],
            borderColor: [
                blackberryColors.green,
                blackberryColors.purple
            ],
            borderWidth: 2
        }, {
            label: 'Remaining',
            data: [{{ max(0, 500 - $dashboardStats['current_plants']) }}, {{ max(0, 1000 - $dashboardStats['current_plants']) }}],
            backgroundColor: [
                blackberryColors.gray,
                blackberryColors.gray
            ],
            borderColor: [
                blackberryColors.gray,
                blackberryColors.gray
            ],
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            x: {
                stacked: true,
                grid: {
                    display: false
                }
            },
            y: {
                stacked: true,
                beginAtZero: true,
                grid: {
                    color: '#f0f0f0'
                }
            }
        },
        plugins: {
            legend: {
                position: 'top',
                labels: {
                    font: {
                        size: 12,
                        weight: '600'
                    }
                }
            },
            tooltip: {
                callbacks: {
                    title: function(context) {
                        return context[0].label;
                    },
                    label: function(context) {
                        const datasetLabel = context.dataset.label;
                        const value = context.parsed.y;
                        return `${datasetLabel}: ${value} plants`;
                    }
                }
            }
        }
    }
});

// Animate charts on load
window.addEventListener('load', function() {
    document.querySelectorAll('canvas').forEach(canvas => {
        canvas.style.animation = 'fadeInUp 0.6s ease-out';
    });
});
</script>

<style>
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-card canvas {
    border-radius: 8px;
}
</style>
@endpush