000

@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<style>
.chart-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 24px;
            margin-bottom: 20px;
        }

.chart-card h3 {
            font-size: 18px;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

.chart-card h3 i {
            color: #667E06;
            font-size: 16px;
        }

/* Tasks Container */
        .tasks-list-container {
            max-height: 369px;
            overflow-y: auto;
            padding-right: 4px;
        }

.tasks-list-container::-webkit-scrollbar {
            width: 6px;
        }

.tasks-list-container::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }

.tasks-list-container::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }

.tasks-list-container::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* Task Item */
        .task-item {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            margin-bottom: 12px;
            padding: 16px;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }

.task-item:hover {
            border-color: #667E06;
            box-shadow: 0 2px 8px rgba(102, 126, 6, 0.1);
            transform: translateY(-1px);
        }

/* Priority Border */
        .task-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #667E06;
        }

.notification-priority-high::before {
            background: #ef4444;
        }

.notification-priority-medium::before {
            background: #f59e0b;
        }

.notification-priority-low::before {
            background: #10b981;
        }

/* Task Header */
        .task-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
            flex-wrap: wrap;
            gap: 8px;
        }

.task-assignee {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 1;
        }

.assignee-label {
            font-size: 12px;
            font-weight: 500;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

.assignee-name {
            font-size: 14px;
            font-weight: 600;
            color: #1e293b;
            background: #f1f5f9;
            padding: 4px 8px;
            border-radius: 4px;
        }

.task-type {
            display: flex;
            align-items: center;
            gap: 6px;
        }

.type-label {
            font-size: 12px;
            font-weight: 500;
            color: #64748b;
        }

.type-name {
            font-size: 12px;
            font-weight: 600;
            color: #667E06;
            background: rgba(102, 126, 6, 0.1);
            padding: 4px 8px;
            border-radius: 12px;
            text-transform: capitalize;
        }

/* Task Content */
        .task-content {
            margin-bottom: 12px;
        }

.task-message {
            font-size: 14px;
            color: #334155;
            line-height: 1.5;
            margin-bottom: 10px;
            font-weight: 400;
        }

/* Task Details */
        .task-details {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 8px;
        }

.detail-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: #64748b;
            background: #f8fafc;
            padding: 4px 8px;
            border-radius: 4px;
        }

.detail-item i {
            font-size: 10px;
            opacity: 0.7;
        }

/* Status Specific Colors */
        .status-pending {
            color: #f59e0b;
            background: rgba(245, 158, 11, 0.1);
        }

.status-completed {
            color: #10b981;
            background: rgba(16, 185, 129, 0.1);
        }

.status-resolved {
            color: #10b981;
            background: rgba(16, 185, 129, 0.1);
        }

.status-in-progress {
            color: #3b82f6;
            background: rgba(59, 130, 246, 0.1);
        }

/* Task Footer */
        .task-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            border-top: 1px solid #f1f5f9;
            padding-top: 8px;
            margin-top: 8px;
        }

.timestamp {
            font-size: 11px;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 4px;
        }

.timestamp i {
            font-size: 10px;
        }

.created-at {
            color: #64748b;
        }

.updated-at {
            color: #667E06;
        }

/* No Tasks State */
        .no-tasks {
            text-align: center;
            padding: 40px 20px;
            color: #64748b;
        }

.no-tasks p:first-child {
            font-size: 16px;
            font-weight: 500;
            color: #334155;
            margin-bottom: 8px;
        }

.no-tasks p:first-child i {
            color: #10b981;
            margin-right: 8px;
        }

.no-tasks .text-muted {
            font-size: 14px;
            color: #94a3b8;
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .task-header {
                flex-direction: column;
                align-items: flex-start;
            }

.task-details {
                flex-direction: column;
                gap: 6px;
            }

.task-footer {
                flex-direction: column;
                align-items: flex-start;
            }
        }

/* Animation for new tasks */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

.task-item {
            animation: slideIn 0.3s ease;
        }
    </style>
<link href="{{ asset('css/dashboard.css') }}" rel="stylesheet" />
<div class="dashboard-container" style="margin: -35px auto;">

@if(isset($displayMessage) && $displayMessage)
        <div class="alert alert-warning chart-card" style="margin-bottom: 20px; padding: 15px; background-color: #fff3cd; border-color: #ffeeba; color: #856404;">
            {{ $displayMessage }}
        </div>
    @endif

<div class="banner">
        <div class="banner-content">
            <h2>Seamless Farm-to-Fork Management with End-to-End Traceability!</h2>
            <p>Our system helps you manage Farms, Harvests, Inventory, Customer Orders, Processing and Dispatch to provide traceability across the entire supply chain.</p>
        </div>
        <div class="banner-image">
            <img src="{{ asset('dashboard/farmer.png') }}" alt="Farmer with phone" onerror="this.style.display='none'"> </div>
    </div>

{{-- STATS GRID - HTML REMAINS THE SAME --}}
    <div class="summary-container-wrapper">

<div class="stats-cards-grid">
            <div class="stat-card-summary sites">
                <div class="icon-area"><i class="fas fa-users"></i></div>
                <div class="info-area">
                    <div class="title">Users</div>
                    <div class="value">{{ $userCount ?? 0 }}</div>
                </div>
            </div>
            <div class="stat-card-summary area">
                <div class="icon-area"><i class="fas fa-chart-area"></i></div>
                <div class="info-area">
                    <div class="title">Fertilizer Types</div>
                    <div class="value">{{ $fertilizerCount ?? 0 }}</div>
                </div>
            </div>
         <div class="stat-card-summary production">
    <div class="icon-area"><i class="fas fa-seedling"></i></div>
    <div class="info-area">
        <div class="title">Crops</div>
        <div class="value">{{ $cropCount ?? 0 }}</div>
    </div>
</div>
            <div class="stat-card-summary machines">
                <div class="icon-area"><i class="fas fa-tractor"></i></div>
                <div class="info-area">
                    <div class="title">Total Machines</div>
                    <div class="value">{{ $machineCount ?? 0 }}</div>
                </div>
            </div>
        </div>

</div>

<div class="main-content-grid">
        <div class="left-column">
            <div class="weather-widget">
                <div class="weather-header">
                    <div class="location-info">
                        <div class="location-name">Lucknow</div>
                        <div class="location-day">Friday</div> </div>
                    <div class="temp-display">
                        <div class="current-temp">38°C</div> </div>
                </div>

<div class="weather-metrics">
                    <div class="metric-item">
                        <div class="metric-icon"><i class="fas fa-temperature-high"></i></div>
                        <div class="metric-value">40°C</div> <div class="metric-label">Feels Like</div>
                    </div>

<div class="metric-item">
                        <div class="metric-icon"><i class="fas fa-tint"></i></div>
                        <div class="metric-value humidity-value">35%</div> <div class="metric-label">Humidity</div>
                    </div>

<div class="metric-item">
                        <div class="metric-icon"><i class="fas fa-cloud-rain"></i></div>
                        <div class="metric-value precipitation-value">0.0 mm</div> <div class="metric-label">Precipitation</div>
                    </div>
                </div>

<div class="sun-timeline">
                    <div class="sun-time">
                        <div class="sunrise">
                            <div class="time">7:00 am</div> <div class="label">Sunrise</div>
                        </div>
                        <div class="sun-progress">
                            <div class="progress-bar">
                                <div class="sun-position"></div>
                            </div>
                        </div>
                        <div class="sunset">
                            <div class="time">8:00 pm</div> <div class="label">Sunset</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chart-card land-chart">
                <h3><i class="fas fa-chart-area"></i> Total Land</h3>
                <div class="chart-container">
                    @php
                        $months = range(1, 12);
                        // Ensure $monthlyData is an array, even if it's not set or is null from the controller
                        $monthlyDataPHP = isset($monthlyData) && is_array($monthlyData) ? $monthlyData : [];
                        $currentMonthlyData = array_replace(array_fill_keys($months, 0), $monthlyDataPHP);
                        $monthLabels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
                    @endphp
                    <canvas id="landAreaChart"></canvas>
                </div>
            </div>

<div class="chart-card land-stage-report">
                <h3><i class="fas fa-chart-pie"></i> Land Stage Report</h3>
                <div class="report-content">
                    <div class="chart-container">
                        <canvas id="landStageChart"></canvas>
                    </div>
                    <div class="legend">
                        <div class="legend-item">
                            <span class="color-indicator standing-crop"></span>
                            <span class="legend-label">Standing Crop</span>
                        </div>
                        <div class="legend-item">
                            <span class="color-indicator crop-sowing"></span>
                            <span class="legend-label">Crop Sowing</span>
                        </div>
                        <div class="legend-item">
                            <span class="color-indicator empty-plot"></span>
                            <span class="legend-label">Empty Plot</span>
                        </div>
                    </div>
                </div>
            </div>

<div class="chart-card user-details-section">
                <h3><i class="fas fa-users"></i> User Details</h3>
                 <div class="user-details-grid">
                        <div class="detail-box user-status">
                            <div class="detail-header">User Online Status</div>
                            <div class="detail-row">
                                <span>Online</span>
                                <span class="value online">{{ $onlineUsersCount ?? 0 }}</span> {{-- UPDATED HERE --}}
                            </div>
                            <div class="detail-row">
                                <span>Offline</span>
                                <span class="value offline">{{ $offlineUsersCount ?? 0 }}</span> {{-- UPDATED HERE --}}
                            </div>
                        </div>

<div class="detail-box moving-status">
                            <div class="detail-header">Moving Counting</div>
                            <div class="detail-row">
                                <span>Moving</span>
                                <span class="value moving">{{ $movingUsersCount ?? 0 }}</span>
                            </div>
                            <div class="detail-row">
                                <span>Not Moving</span>
                                <span class="value not-moving">{{ $notMovingUsersCount ?? 0 }}</span>
                            </div>
                        </div>

<div class="detail-box gps-status">
                            <div class="detail-header">Mobile User GPS</div>
                            <div class="detail-row">
                                <span>On</span>
                                <span class="value gps-on">{{ $gpsOnUsersCount ?? 0 }}</span>
                            </div>
                            <div class="detail-row">
                                <span>Off</span>
                                <span class="value gps-off">{{ $gpsOffUsersCount ?? 0 }}</span>
                            </div>
                        </div>
                </div>
            </div>
        </div>

<div class="right-column">
            <div class="chart-card upcoming-week">
                <h3><i class="fas fa-calendar-week"></i> Upcoming Week Notification</h3>
                <div class="week-grid">
                    <div class="day-item">
                        <div class="day-name">Mon</div>
                        <div class="day-status pending"></div>
                        <div class="status-label">Pending</div>
                    </div>
                    <div class="day-item">
                        <div class="day-name">Tue</div>
                        <div class="day-status completed"></div>
                        <div class="status-label">Completed</div>
                    </div>
                    <div class="day-item">
                        <div class="day-name">Wed</div>
                        <div class="day-status on-it"></div>
                        <div class="status-label">On it</div>
                    </div>
                    <div class="day-item">
                        <div class="day-name">Thu</div>
                        <div class="day-status assigned"></div>
                        <div class="status-label">Assigned</div>
                    </div>
                    <div class="day-item">
                        <div class="day-name">Fri</div>
                        <div class="day-status assigned"></div>
                        <div class="status-label">Assigned</div>
                    </div>
                    <div class="day-item">
                        <div class="day-name">Sat</div>
                        <div class="day-status assigned"></div>
                        <div class="status-label">Assigned</div>
                    </div>
                    <div class="day-item">
                        <div class="day-name">Sun</div>
                        <div class="day-status assigned"></div>
                        <div class="status-label">Assigned</div>
                    </div>
                </div>
            </div>

<div class="chart-card current-tasks">
    <h3><i class="fas fa-tasks"></i> Current Tasks</h3>
    <div class="tasks-list-container custom-scrollbar">
        @forelse($notifications as $notification)
            <div class="task-item notification-priority-{{ strtolower($notification->priority ?? 'low') }}">
                <div class="task-header">
                    <div class="task-assignee">
                        <span class="assignee-label">Assigned:</span> 
                        <span class="assignee-name">{{ $notification->user_name ?? $notification->user_no ?? 'N/A' }}</span>
                    </div>
                    <div class="task-type">
                        <span class="type-label">Type:</span> 
                        <span class="type-name">{{ $notification->notification_type ?? 'Task' }}</span>
                    </div>
                </div>
                <div class="task-content">
                    <p class="task-message">{{ $notification->message ?? 'No message' }}</p>
                    <div class="task-details">
                        @if($notification->block_name)
                            <span class="detail-item"><i class="fas fa-cube"></i> Block: {{ $notification->block_name }}</span>
                        @endif
                        @if($notification->plot_name)
                            <span class="detail-item"><i class="fas fa-map-marker-alt"></i> Plot: {{ $notification->plot_name }}</span>
                        @endif
                        @if($notification->status)
                            <span class="detail-item status-{{ strtolower($notification->status) }}"><i class="fas fa-info-circle"></i> Status: {{ $notification->status }}</span>
                        @endif
                    </div>
                </div>
                <div class="task-footer">
                    <span class="timestamp created-at"><i class="far fa-clock"></i> Created: {{ Carbon\Carbon::parse($notification->created_at)->diffForHumans() }}</span>
                    @if($notification->updated_at && $notification->updated_at != $notification->created_at)
                        <span class="timestamp updated-at"><i class="fas fa-redo-alt"></i> Updated: {{ Carbon\Carbon::parse($notification->updated_at)->diffForHumans() }}</span>
                    @endif
                </div>
            </div>
        @empty
            <div class="no-tasks">
                <p><i class="fas fa-check-circle"></i> No current tasks or notifications found.</p>
                <p class="text-muted">Good job, everything is up-to-date!</p>
            </div>
        @endforelse
    </div>
</div>

<div class="report-grid">
                <div class="chart-card report-card">
                    <h3><i class="fas fa-fertilizer"></i> Fertilizer</h3>
                    <div class="chart-container">
                        <canvas id="fertilizerChart"></canvas>
                    </div>
                    <div class="chart-legend">
                        <div class="legend-item">
                            <span class="color-indicator total"></span>
                            <span class="legend-label">Remaining Stock</span>
                        </div>
                        <div class="legend-item">
                            <span class="color-indicator consumed"></span>
                            <span class="legend-label">Consumed</span>
                        </div>
                    </div>
                </div>

<div class="chart-card report-card">
                    <h3><i class="fas fa-hay"></i> Hay Report</h3>
                    <div class="chart-container">
                        <canvas id="hayChart"></canvas>
                    </div>
                    <div class="chart-legend">
                        <div class="legend-item">
                            <span class="color-indicator total"></span>
                            <span class="legend-label">Remaining Stock</span>
                        </div>
                        <div class="legend-item">
                            <span class="color-indicator consumed"></span>
                            <span class="legend-label">Consumed</span>
                        </div>
                    </div>
                </div>
            </div>

<div class="chart-card seed-stock">
                <h3><i class="fas fa-seedling"></i> Seed Stock</h3>
                <div class="chart-container">
                    <canvas id="seedChart"></canvas>
                </div>
                <div class="chart-legend">
                    <div class="legend-item">
                        <span class="color-indicator total"></span>
                        <span class="legend-label">Total Seed</span>
                    </div>
                    <div class="legend-item">
                        <span class="color-indicator consumed"></span>
                        <span class="legend-label">Used Seed</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

// Set coordinates and location name based on user role
    if (userRole === 3) {
        lat = '13.3378381'; // Alandhi latitude
        lon = '80.1928933'; // Alandhi longitude
        locationName = 'Alamadhi';
    } else {
        lat = '28.028404622457526'; // Lakhimpur (Lucknow) latitude
        lon = '80.74739795870505'; // Lakhimpur (Lucknow) longitude
        locationName = 'Lakhimpur';
    }
    
    function updateWeather() {
        const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`;
        
        fetch(apiUrl)
            .then(response => {
                if (!response.ok) {
                    console.error('Weather API response error:', response.status, response.statusText);
                    return response.json().then(errData => { 
                        throw new Error(`Network response was not ok: ${response.status} ${response.statusText}. API Message: ${errData.message || 'No specific message'}`);
                    }).catch(() => { 
                         throw new Error(`Network response was not ok: ${response.status} ${response.statusText}. Could not parse error response.`);
                    });
                }
                return response.json();
            })
            .then(data => {
                updateCurrentWeather(data);
                positionSun(data); 
            })
            .catch(error => {
                console.error('Error fetching or processing weather data:', error);
            });
    }
    
    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    const today = new Date();
    const locationDayElement = document.querySelector('.location-day');
    if (locationDayElement) {
        locationDayElement.textContent = days[today.getDay()];
    }
    
    function updateCurrentWeather(data) {
        if (!data || !data.weather || data.weather.length === 0 || !data.main || !data.wind) {
            console.error('Invalid or incomplete weather data received for current weather:', data);
            document.querySelector('.current-temp').textContent = 'N/A';
            document.querySelector('.weather-metrics .metric-item:nth-child(1) .metric-value').textContent = 'N/A';
            document.querySelector('.humidity-value').textContent = 'N/A';
            document.querySelector('.wind-speed').textContent = 'N/A';
            document.querySelector('.precipitation-value').textContent = 'N/A';
            document.querySelector('.location-name').textContent = 'Weather Unavailable';
            return;
        }
        
        const weather = data.weather[0]; 
        const main = data.main;           
        const wind = data.wind;           
        
        const currentTempElement = document.querySelector('.current-temp');
        if (currentTempElement) currentTempElement.textContent = `${Math.round(main.temp)}°C`;
        
        const feelsLikeElement = document.querySelector('.weather-metrics .metric-item:nth-child(1) .metric-value');
        if (feelsLikeElement) feelsLikeElement.textContent = `${Math.round(main.feels_like)}°C`;
        
        const humidityElement = document.querySelector('.humidity-value');
        if (humidityElement) humidityElement.textContent = `${main.humidity}%`;
        
        const windElement = document.querySelector('.wind-speed');
        if (windElement) windElement.textContent = `${wind.speed.toFixed(1)} m/s`;
        
        let precipitation = 0;
        if (data.rain && data.rain['1h']) {
            precipitation = data.rain['1h'];
        } else if (data.rain && data.rain['3h']) { 
             precipitation = data.rain['3h'];
        } else if (data.snow && data.snow['1h']) {
            precipitation = data.snow['1h'];
        } else if (data.snow && data.snow['3h']) { 
            precipitation = data.snow['3h'];
        }
        const precipitationElement = document.querySelector('.precipitation-value');
        if (precipitationElement) precipitationElement.textContent = `${precipitation.toFixed(1)} mm`;

if (typeof updateWeather === "function") {
        updateWeather(); 
        setInterval(updateWeather, 30 * 60 * 1000); 
    }

// Chart.js Initializations
    const landAreaChartData = @json(isset($currentMonthlyData) && is_array($currentMonthlyData) ? array_values($currentMonthlyData) : array_fill(0, 12, 0));
    const landAreaChartLabels = @json(isset($monthLabels) && is_array($monthLabels) ? $monthLabels : []);
    const landAreaChartCtx = document.getElementById('landAreaChart');

if (landAreaChartCtx && landAreaChartData.length > 0 && landAreaChartLabels.length > 0) {
        new Chart(landAreaChartCtx, {
            type: 'bar',
            data: {
                labels: landAreaChartLabels,
                datasets: [{
                    label: 'Land Area',
                    data: landAreaChartData,
                    backgroundColor: function(context) {
                        const colors = ['#667E06', '#F5D020', '#909B37', '#4C701D', '#A6B44F', '#D4AC0D'];
                        return colors[context.dataIndex % colors.length];
                    },
                    borderColor: function(context) {
                        const colors = ['#506205', '#C4A001', '#727A2B', '#3A5416', '#8A963F', '#A98A0A'];
                        return colors[context.dataIndex % colors.length];
                    },
                    borderWidth: 1,
                    borderRadius: 4, 
                }]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                scales: { 
                    y: { 
                        beginAtZero: true, 
                        ticks: { 
                            color: '#64748b' 
                        },
                        grid: { color: '#e5e7eb' } 
                    },
                    x: {
                        ticks: { color: '#64748b' }, 
                        grid: { display: false } 
                    }
                },
                plugins: { 
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: '#334155', 
                        titleColor: '#ffffff',
                        bodyColor: '#f1f5f9', 
                        callbacks: {
                            label: function(context) {
                                return `${context.dataset.label}: ${context.formattedValue} units`;
                            }
                        }
                    }
                }
            }
        });
    } else {
        console.warn('Land Area Chart: Missing canvas element, data, or labels.');
    }
    
    const landStageDataValues = [
        {{ isset($landStageData['Standing Crop']) ? (float)$landStageData['Standing Crop'] : 0 }},
        {{ isset($landStageData['Crop Sowing within month']) ? (float)$landStageData['Crop Sowing within month'] : 0 }},
        {{ isset($landStageData['Empty Plot']) ? (float)$landStageData['Empty Plot'] : 0 }}
    ];
    const landStageChartCtx = document.getElementById('landStageChart');
    if (landStageChartCtx && landStageDataValues.some(v => v > 0)) { 
        new Chart(landStageChartCtx, {
            type: 'pie',
            data: {
                labels: ['Standing Crop', 'Crop Sowing', 'Empty Plot'],
                datasets: [{ 
                    data: landStageDataValues, 
                    backgroundColor: ['#4C701D', '#F5D020', '#909B37'],
                    borderColor: '#ffffff', 
                    borderWidth: 2
                }]
            },
            options: { 
                responsive: true, maintainAspectRatio: false, 
                plugins: { 
                    legend: { display: false }, 
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.label || '';
                                if (label) {
                                    label += ': ';
                                }
                                if (context.parsed !== null) {
                                    label += context.parsed.toFixed(2) + '%'; 
                                }
                                return label;
                            }
                        }
                    }
                } 
            }
        });
    } else if (landStageChartCtx) {
         landStageChartCtx.getContext('2d').fillText("No data available for Land Stage Report.", 10, 50);
         console.warn('Land Stage Chart: No data to display or sum of data is zero.');
    } else {
        console.warn('Land Stage Chart: Canvas element not found.');
    }
    
    const fertilizerRemaining = {{ (isset($totalStock) ? (float)$totalStock : 0) - (isset($totalUsed) ? (float)$totalUsed : 0) }};
    const fertilizerConsumed = {{ isset($totalUsed) ? (float)$totalUsed : 0 }};
    const fertilizerChartCtx = document.getElementById('fertilizerChart');
    if (fertilizerChartCtx && (fertilizerRemaining >= 0 || fertilizerConsumed > 0)) { // Ensure remaining can be 0
        new Chart(fertilizerChartCtx, {
            type: 'doughnut',
            data: {
                labels: ['Remaining Stock', 'Consumed'],
                datasets: [{ 
                    data: [Math.max(0, fertilizerRemaining), fertilizerConsumed], 
                    backgroundColor: ['#667E06', '#F2C401'],
                    borderColor: '#ffffff',
                    borderWidth: 2
                }]
            },
            options: { 
                responsive: true, maintainAspectRatio: false, cutout: '65%', 
                plugins: { 
                    legend: {display: false},
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ${context.formattedValue} units`;
                            }
                        }
                    }
                } 
            }
        });
    } else if(fertilizerChartCtx) {
        fertilizerChartCtx.getContext('2d').fillText("No fertilizer data.", 10, 50);
        console.warn('Fertilizer Chart: No data to display.');
    } else {
         console.warn('Fertilizer Chart: Canvas element not found.');
    }
    
    const hayRemaining = {{ (isset($totalHay) ? (float)$totalHay : 0) - (isset($usedHay) ? (float)$usedHay : 0) }};
    const hayConsumed = {{ isset($usedHay) ? (float)$usedHay : 0 }};
    const hayChartCtx = document.getElementById('hayChart');
    if (hayChartCtx && (hayRemaining >= 0 || hayConsumed > 0)) { // Ensure remaining can be 0
        new Chart(hayChartCtx, {
            type: 'doughnut',
            data: {
                labels: ['Remaining Hay', 'Used Hay'],
                datasets: [{ 
                    data: [Math.max(0, hayRemaining), hayConsumed], 
                    backgroundColor: ['#667E06', '#F2C401'],
                    borderColor: '#ffffff',
                    borderWidth: 2
                }]
            },
            options: { 
                responsive: true, maintainAspectRatio: false, cutout: '65%', 
                plugins: { 
                    legend: { display: false },
                     tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ${context.formattedValue} units`;
                            }
                        }
                    }
                } 
            }
        });
    } else if(hayChartCtx) {
        hayChartCtx.getContext('2d').fillText("No hay data.", 10, 50);
        console.warn('Hay Chart: No data to display.');
    } else {
        console.warn('Hay Chart: Canvas element not found.');
    }

@section('scripts')
    {{-- This section can be used for additional page-specific scripts if needed --}}
@endsection