{% extends 'user_dashboard/dashboard_base.html' %}

{% block title %}Dashboard - User Dashboard{% endblock %}

{% block content %}
<div class="dashboard-section">
<!-- KPI Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 mb-8">
    <!-- Total Population -->
    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500">
        <div class="flex items-center">
            <div class="flex-shrink-0">
                <i class="fa-solid fa-users text-2xl text-green-600"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Populasi Total</p>
                <p class="text-2xl font-bold text-gray-900">125.430</p>
                <p class="text-sm text-gray-500">ekor</p>
            </div>
        </div>
    </div>

    <!-- Feed Consumption -->
    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500">
        <div class="flex items-center">
            <div class="flex-shrink-0">
                <i class="fa-solid fa-utensils text-2xl text-green-600"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Konsumsi Pakan</p>
                <p class="text-2xl font-bold text-gray-900">135</p>
                <p class="text-sm text-gray-500">g/ekor/hari</p>
            </div>
        </div>
    </div>

    <!-- Feed Waste -->
    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-yellow-500">
        <div class="flex items-center">
            <div class="flex-shrink-0">
                <i class="fa-solid fa-trash text-2xl text-yellow-600"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Pemborosan Pakan</p>
                <p class="text-2xl font-bold text-gray-900">4,8</p>
                <p class="text-sm text-gray-500">%</p>
            </div>
        </div>
    </div>

    <!-- FCR -->
    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500">
        <div class="flex items-center">
            <div class="flex-shrink-0">
                <i class="fa-solid fa-chart-line text-2xl text-green-600"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">FCR (Real-time)</p>
                <p class="text-2xl font-bold text-gray-900">1,62</p>
                <p class="text-sm text-gray-500"></p>
            </div>
        </div>
    </div>

    <!-- Mortality -->
    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-yellow-500">
        <div class="flex items-center">
            <div class="flex-shrink-0">
                <i class="fa-solid fa-exclamation-triangle text-2xl text-yellow-600"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Mortalitas Hari Ini</p>
                <p class="text-2xl font-bold text-gray-900">58</p>
                <p class="text-sm text-gray-500">ekor</p>
            </div>
        </div>
    </div>

    <!-- Temperature -->
    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-yellow-500">
        <div class="flex items-center">
            <div class="flex-shrink-0">
                <i class="fa-solid fa-thermometer-half text-2xl text-yellow-600"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Suhu Rata-rata</p>
                <p class="text-2xl font-bold text-gray-900">31,8</p>
                <p class="text-sm text-gray-500">°C</p>
            </div>
        </div>
    </div>
</div>

<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Left Column - Charts -->
    <div class="lg:col-span-2 space-y-8">
        <!-- Environment Chart -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Monitoring Lingkungan (12 Jam Terakhir)</h3>
            <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
                <p class="text-gray-500">Grafik monitoring lingkungan akan ditampilkan di sini</p>
            </div>
        </div>

        <!-- Cages Overview Chart -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">Cages Overview</h3>
                <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                    <i class="fa-solid fa-chart-heatmap mr-2"></i>
                    Detail
                </a>
            </div>
            
            <div class="h-80 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-lg relative overflow-hidden">
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative w-full h-full">
                        <div class="absolute inset-4 bg-gradient-to-br from-purple-200 via-orange-300 to-yellow-400 rounded-lg opacity-80"></div>
                        <div class="absolute inset-8 bg-gradient-to-tr from-blue-200 via-green-300 to-red-400 rounded-lg opacity-60"></div>
                        <div class="absolute inset-12 bg-gradient-to-bl from-yellow-200 via-orange-300 to-red-500 rounded-lg opacity-70"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Column - AI Recommendations and Alerts -->
    <div class="lg:col-span-1 space-y-8">
        <!-- AI Recommendations -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">AI Insights & Rekomendasi Kritis</h3>
            
            <!-- Recommendation 1 -->
            <div class="border-l-4 border-red-500 pl-4 mb-4">
                <div class="flex items-center mb-2">
                    <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">Tinggi</span>
                    <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">Kesehatan</span>
                </div>
                <p class="text-sm text-gray-700 mb-2">
                    Bobot rata-rata secara konsisten berada di bawah standar Ross 308 hingga hari ke-34. Investigasi potensi isu kesehatan atau kualitas pakan.
                </p>
                <div class="text-xs text-gray-500 mb-2">
                    <p><strong>Target:</strong> Manajemen & Dokter Hewan</p>
                    <p><strong>Untuk:</strong> Manajer</p>
                </div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 text-xs bg-red-100 text-red-800 rounded-full">Tertunda</button>
                    <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Dikerjakan</button>
                    <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Selesai</button>
                </div>
            </div>

            <!-- Recommendation 2 -->
            <div class="border-l-4 border-red-500 pl-4 mb-4">
                <div class="flex items-center mb-2">
                    <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">Tinggi</span>
                    <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">Kesehatan</span>
                </div>
                <p class="text-sm text-gray-700 mb-2">
                    Tingkat mortalitas harian (58 ekor) lebih tinggi dari rata-rata. Lakukan patroli untuk investigasi penyebab.
                </p>
                <div class="text-xs text-gray-500 mb-2">
                    <p><strong>Target:</strong> Semua Kandang</p>
                    <p><strong>Untuk:</strong> Operator</p>
                </div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 text-xs bg-red-100 text-red-800 rounded-full">Tertunda</button>
                    <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Dikerjakan</button>
                    <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Selesai</button>
                </div>
            </div>

            <!-- Recommendation 3 -->
            <div class="border-l-4 border-yellow-500 pl-4">
                <div class="flex items-center mb-2">
                    <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">Sedang</span>
                    <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Pakan</span>
                </div>
                <p class="text-sm text-gray-700 mb-2">
                    Konsumsi pakan menurun 5% dari target. Periksa kualitas pakan dan kondisi lingkungan.
                </p>
                <div class="text-xs text-gray-500 mb-2">
                    <p><strong>Target:</strong> Kandang A, B, C</p>
                    <p><strong>Untuk:</strong> Manajer</p>
                </div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 text-xs bg-red-100 text-red-800 rounded-full">Tertunda</button>
                    <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Dikerjakan</button>
                    <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Selesai</button>
                </div>
            </div>
        </div>

        <!-- Alert Feed -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">System Alerts</h3>
            <div class="space-y-3">
                <div class="flex items-start space-x-3">
                    <div class="flex-shrink-0">
                        <i class="fa-solid fa-exclamation-circle text-red-500"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-900">Sensor suhu di Kandang A menunjukkan peningkatan</p>
                        <p class="text-xs text-gray-500">2 menit yang lalu</p>
                    </div>
                </div>
                <div class="flex items-start space-x-3">
                    <div class="flex-shrink-0">
                        <i class="fa-solid fa-info-circle text-blue-500"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-900">Jadwal pakan berikutnya dalam 30 menit</p>
                        <p class="text-xs text-gray-500">15 menit yang lalu</p>
                    </div>
                </div>
                <div class="flex items-start space-x-3">
                    <div class="flex-shrink-0">
                        <i class="fa-solid fa-check-circle text-green-500"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-900">Sistem backup berhasil dijalankan</p>
                        <p class="text-xs text-gray-500">1 jam yang lalu</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Floating Action Buttons -->
<div class="fixed bottom-6 right-6 flex flex-col space-y-3">
    <button class="w-12 h-12 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition-colors flex items-center justify-center">
        <i class="fa-solid fa-clock"></i>
    </button>
    <button class="w-12 h-12 bg-red-500 text-white rounded-full shadow-lg hover:bg-red-600 transition-colors flex items-center justify-center">
        <i class="fa-solid fa-microphone"></i>
    </button>
    <button class="w-12 h-12 bg-red-500 text-white rounded-full shadow-lg hover:bg-red-600 transition-colors flex items-center justify-center">
        <i class="fa-solid fa-phone"></i>
    </button>
</div>
</div>
{% endblock %}