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




    <div class="container">
        <div class="header">
            <div>
                <h1>🫐 Harvest Management</h1>
                <p>Track and analyze berry harvests with quality metrics</p>
            </div>
            <div>
                <a href="/harvests/create" class="btn btn-success">📊 Record New Harvest</a>
                <a href="/harvests/bulk-create" class="btn btn-success">🫐 Bulk Field Harvest</a>
                <a href="/plants" class="btn btn-secondary">← Back to Plants</a>
            </div>
        </div>

        <!-- Statistics Cards -->
        @if($stats)
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value">{{ number_format($stats->total_harvests ?? 0) }}</div>
                <div class="stat-label">Total Harvests</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">{{ number_format($stats->total_quantity ?? 0, 1) }} lbs</div>
                <div class="stat-label">Total Quantity</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">{{ $stats->avg_brix ? number_format($stats->avg_brix, 1) : 'N/A' }}</div>
                <div class="stat-label">Avg Brix Level</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">{{ $stats->latest_harvest ? date('M j', strtotime($stats->latest_harvest)) : 'None' }}</div>
                <div class="stat-label">Latest Harvest</div>
            </div>
        </div>
        @endif

        <!-- Harvest Yield Trend Visualizations -->
        <div class="mobile-card" style="margin: 30px 0;">
            <h3>📊 Harvest Yield Analytics</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin: 20px 0;">
                <!-- Monthly Harvest Trends -->
                <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                    <h4 style="margin-bottom: 15px; color: var(--soil-brown);">📈 Monthly Harvest Trends</h4>
                    <canvas id="harvestTrendChart" style="max-height: 250px;"></canvas>
                </div>
                
                <!-- Quality Metrics Distribution -->
                <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                    <h4 style="margin-bottom: 15px; color: var(--soil-brown);">🌟 Quality Distribution</h4>
                    <canvas id="qualityChart" style="max-height: 250px;"></canvas>
                </div>
            </div>
            
            <!-- Harvest Performance by Variety -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">🫐 Top Performing Varieties</h4>
                <div style="max-height: 200px; overflow-y: auto;">
                    @if(isset($harvests) && $harvests->count() > 0)
                        @php
                            $varietyYields = $harvests->groupBy('variety_name')->map(function($group) {
                                return [
                                    'total_quantity' => $group->sum('quantity_lbs'),
                                    'avg_brix' => $group->avg('brix_level'),
                                    'harvest_count' => $group->count()
                                ];
                            })->sortByDesc('total_quantity');
                        @endphp
                        @foreach($varietyYields->take(5) as $varietyName => $data)
                        <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #E0E0E0;">
                            <div>
                                <div style="font-weight: 600; color: var(--blackberry-purple);">{{ $varietyName ?: 'Unknown Variety' }}</div>
                                <div style="font-size: 0.85em; color: #6c757d;">{{ $data['harvest_count'] }} harvests</div>
                            </div>
                            <div style="text-align: right;">
                                <div style="font-weight: bold; color: var(--leaf-green);">{{ number_format($data['total_quantity'], 1) }} lbs</div>
                                <div style="font-size: 0.85em; color: #6c757d;">Avg Brix: {{ $data['avg_brix'] ? number_format($data['avg_brix'], 1) : 'N/A' }}</div>
                            </div>
                        </div>
                        @endforeach
                    @else
                        <div style="text-align: center; color: #6c757d; padding: 20px;">
                            No harvest data available yet. Start recording harvests to see analytics.
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Filters -->
        <form method="GET" action="/harvests" class="filters">
            <div class="form-group">
                <label for="search">Search</label>
                <input type="text" id="search" name="search" class="form-control" 
                       value="{{ request('search') }}" 
                       placeholder="Plant ID, harvester, variety...">
            </div>
            <div class="form-group">
                <label for="quality_grade">Quality Grade</label>
                <select id="quality_grade" name="quality_grade" class="form-control">
                    <option value="">All Grades</option>
                    <option value="premium" {{ request('quality_grade') == 'premium' ? 'selected' : '' }}>Premium</option>
                    <option value="grade_a" {{ request('quality_grade') == 'grade_a' ? 'selected' : '' }}>Grade A</option>
                    <option value="grade_b" {{ request('quality_grade') == 'grade_b' ? 'selected' : '' }}>Grade B</option>
                    <option value="grade_c" {{ request('quality_grade') == 'grade_c' ? 'selected' : '' }}>Grade C</option>
                    <option value="processing" {{ request('quality_grade') == 'processing' ? 'selected' : '' }}>Processing</option>
                </select>
            </div>
            <div class="form-group">
                <label for="destination">Market Destination</label>
                <select id="destination" name="destination" class="form-control">
                    <option value="">All Destinations</option>
                    <option value="personal" {{ request('destination') == 'personal' ? 'selected' : '' }}>Personal</option>
                    <option value="farmers_market" {{ request('destination') == 'farmers_market' ? 'selected' : '' }}>Farmers Market</option>
                    <option value="wholesale" {{ request('destination') == 'wholesale' ? 'selected' : '' }}>Wholesale</option>
                    <option value="upick" {{ request('destination') == 'upick' ? 'selected' : '' }}>U-Pick</option>
                    <option value="value_added" {{ request('destination') == 'value_added' ? 'selected' : '' }}>Value Added</option>
                </select>
            </div>
            <div class="form-group">
                <label for="date_from">Date From</label>
                <input type="date" id="date_from" name="date_from" class="form-control" 
                       value="{{ request('date_from') }}">
            </div>
            <div class="form-group">
                <label for="date_to">Date To</label>
                <input type="date" id="date_to" name="date_to" class="form-control" 
                       value="{{ request('date_to') }}">
            </div>
            <div class="form-group">
                <label>&nbsp;</label>
                <button type="submit" class="btn">🔍 Filter</button>
            </div>
        </form>

        @if (session('success'))
            <div style="background: #d4edda; color: #155724; padding: 15px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #c3e6cb;">
                <strong>Success!</strong> {{ session('success') }}
            </div>
        @endif

        <!-- Harvests Table -->
        @if($harvests->count() > 0)
        <table class="table">
            <thead>
                <tr>
                    <th>Harvest Date</th>
                    <th>Plant</th>
                    <th>Variety</th>
                    <th>Yield</th>
                    <th>Quality</th>
                    <th>Destination</th>
                    <th>Season</th>
                    <th>Harvester</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($harvests as $harvest)
                <tr>
                    <td>{{ date('M j, Y', strtotime($harvest->harvest_date)) }}</td>
                    <td>
                        <a href="/plants/{{ $harvest->plant_id }}" class="plant-link">
                            {{ $harvest->plant_id }}
                        </a>
                        @if($harvest->plant_location)
                            <br><small style="color: #6c757d;">{{ $harvest->plant_location }}</small>
                        @endif
                    </td>
                    <td>{{ $harvest->variety_name ?? 'Unknown' }}</td>
                    <td>{{ number_format($harvest->yield_lbs, 2) }} lbs</td>
                    <td>
                        <span class="quality-badge quality-{{ str_replace('_', '-', $harvest->berry_quality_grade) }}">
                            {{ str_replace('_', ' ', ucwords($harvest->berry_quality_grade, '_')) }}
                        </span>
                        @if($harvest->average_sweetness_brix)
                            <br><small>({{ number_format($harvest->average_sweetness_brix, 1) }} Brix)</small>
                        @endif
                    </td>
                    <td>
                        <span class="destination-badge dest-{{ str_replace('_', '-', $harvest->market_destination) }}">
                            {{ str_replace('_', ' ', ucwords($harvest->market_destination, '_')) }}
                        </span>
                    </td>
                    <td>{{ ucfirst($harvest->season) }}</td>
                    <td>{{ $harvest->harvested_by ?? 'Unknown' }}</td>
                    <td>
                        <a href="/harvests/{{ $harvest->id }}" class="btn" style="padding: 5px 10px; font-size: 12px;">View</a>
                        <a href="/harvests/{{ $harvest->id }}/edit" class="btn btn-warning" style="padding: 5px 10px; font-size: 12px;">Edit</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Pagination -->
        @if($harvests->hasPages())
        <div class="pagination">
            {{ $harvests->appends(request()->query())->links() }}
        </div>
        @endif

        @else
        <div style="text-align: center; padding: 40px; color: #6c757d; background: #f8f9fa; border-radius: 8px; margin: 20px 0;">
            <h3>No Harvests Recorded Yet</h3>
            <p>Start tracking your berry harvests to analyze production and quality metrics.</p>
            <a href="/harvests/create" class="btn btn-success">📊 Record First Harvest</a>
        </div>
        @endif
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Blackberry Theme Colors for Harvest Charts
const harvestColors = {
    primary: '#6A1B9A',
    success: '#388E3C',
    warning: '#FF8F00',
    danger: '#C62828',
    info: '#1976D2'
};

@if(isset($harvests) && $harvests->count() > 0)
// Prepare monthly harvest data
const monthlyData = {};
const qualityData = { excellent: 0, good: 0, fair: 0, poor: 0 };

@foreach($harvests as $harvest)
    @php
        $monthKey = date('M Y', strtotime($harvest->harvest_date));
        $brix = $harvest->brix_level ?? 0;
        $quality = $brix >= 12 ? 'excellent' : ($brix >= 10 ? 'good' : ($brix >= 8 ? 'fair' : 'poor'));
    @endphp
    
    // Monthly trend data
    if (!monthlyData['{{ $monthKey }}']) {
        monthlyData['{{ $monthKey }}'] = { quantity: 0, count: 0 };
    }
    monthlyData['{{ $monthKey }}'].quantity += {{ $harvest->quantity_lbs ?? 0 }};
    monthlyData['{{ $monthKey }}'].count += 1;
    
    // Quality distribution
    qualityData['{{ $quality }}'] += 1;
@endforeach

// Monthly Harvest Trend Chart
const trendCtx = document.getElementById('harvestTrendChart').getContext('2d');
new Chart(trendCtx, {
    type: 'line',
    data: {
        labels: Object.keys(monthlyData),
        datasets: [{
            label: 'Total Harvest (lbs)',
            data: Object.values(monthlyData).map(item => item.quantity.toFixed(1)),
            borderColor: harvestColors.primary,
            backgroundColor: harvestColors.primary + '20',
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }, {
            label: 'Number of Harvests',
            data: Object.values(monthlyData).map(item => item.count),
            borderColor: harvestColors.success,
            backgroundColor: harvestColors.success + '20',
            borderWidth: 3,
            fill: false,
            yAxisID: 'y1'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: {
            mode: 'index',
            intersect: false,
        },
        scales: {
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                title: {
                    display: true,
                    text: 'Harvest Weight (lbs)'
                }
            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',
                title: {
                    display: true,
                    text: 'Number of Harvests'
                },
                grid: {
                    drawOnChartArea: false,
                },
            },
        },
        plugins: {
            legend: {
                position: 'top',
                labels: {
                    font: { size: 12, weight: '600' }
                }
            }
        }
    }
});

// Quality Distribution Chart
const qualityCtx = document.getElementById('qualityChart').getContext('2d');
new Chart(qualityCtx, {
    type: 'doughnut',
    data: {
        labels: [
            `Excellent (≥12 Brix): ${qualityData.excellent}`,
            `Good (10-12 Brix): ${qualityData.good}`,
            `Fair (8-10 Brix): ${qualityData.fair}`,
            `Poor (<8 Brix): ${qualityData.poor}`
        ],
        datasets: [{
            data: [qualityData.excellent, qualityData.good, qualityData.fair, qualityData.poor],
            backgroundColor: [
                harvestColors.success,
                harvestColors.info,
                harvestColors.warning,
                harvestColors.danger
            ],
            borderColor: '#fff',
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: { size: 11, 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 = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                        return `${label}: ${percentage}%`;
                    }
                }
            }
        }
    }
});

@else
// Show placeholder messages for empty charts
document.getElementById('harvestTrendChart').getContext('2d').fillText('No harvest data available', 50, 50);
document.getElementById('qualityChart').getContext('2d').fillText('No quality data available', 50, 50);
@endif

// 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);
    }
}

canvas {
    border-radius: 8px;
}

.mobile-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 16px rgba(106, 27, 154, 0.08);
    border: 1px solid #E0E0E0;
    margin: 20px 0;
}
</style>
@endpush