{% extends 'admin/base.html' %}
{% load static %}

{% block title %}Statistik Layanan - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    .stat-card {
        transition: all 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
    }
    
    .progress-bar {
        height: 8px;
        border-radius: 4px;
        background: #e5e7eb;
        overflow: hidden;
    }
    
    .progress-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.3s ease;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-2 sm:px-4 lg:px-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 sm:mb-6 gap-4">
        <div>
            <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800 mb-1">Statistik Layanan & Program</h1>
            <p class="text-sm sm:text-base text-gray-600">Analisis dan laporan layanan HMI</p>
        </div>
        <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
            <a href="{% url 'admin_panel:layanan:admin_service_export' %}" class="bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                <i class="fas fa-download mr-1"></i>Export Data
            </a>
            <a href="{% url 'admin_panel:layanan:admin_service_list' %}" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                <i class="fas fa-list mr-1"></i>Kelola Layanan
            </a>
        </div>
    </div>
    
    <!-- Statistik Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
        <div class="stat-card bg-white p-4 sm:p-6 rounded-xl shadow-sm">
            <div class="flex items-center">
                <div class="w-12 h-12 sm:w-16 sm:h-16 bg-blue-500 rounded-xl flex items-center justify-center mr-3 sm:mr-4">
                    <i class="fas fa-list text-white text-lg sm:text-xl"></i>
                </div>
                <div>
                    <h3 class="text-xl sm:text-2xl font-bold text-gray-800">{{ stats.total_services }}</h3>
                    <p class="text-gray-600 text-xs sm:text-sm">Total Layanan</p>
                </div>
            </div>
        </div>
        
        <div class="stat-card bg-white p-4 sm:p-6 rounded-xl shadow-sm">
            <div class="flex items-center">
                <div class="w-12 h-12 sm:w-16 sm:h-16 bg-green-500 rounded-xl flex items-center justify-center mr-3 sm:mr-4">
                    <i class="fas fa-check-circle text-white text-lg sm:text-xl"></i>
                </div>
                <div>
                    <h3 class="text-xl sm:text-2xl font-bold text-gray-800">{{ stats.active_services }}</h3>
                    <p class="text-gray-600 text-xs sm:text-sm">Layanan Aktif</p>
                </div>
            </div>
        </div>
        
        <div class="stat-card bg-white p-4 sm:p-6 rounded-xl shadow-sm">
            <div class="flex items-center">
                <div class="w-12 h-12 sm:w-16 sm:h-16 bg-yellow-500 rounded-xl flex items-center justify-center mr-3 sm:mr-4">
                    <i class="fas fa-star text-white text-lg sm:text-xl"></i>
                </div>
                <div>
                    <h3 class="text-xl sm:text-2xl font-bold text-gray-800">{{ stats.featured_services }}</h3>
                    <p class="text-gray-600 text-xs sm:text-sm">Layanan Unggulan</p>
                </div>
            </div>
        </div>
        
        <div class="stat-card bg-white p-4 sm:p-6 rounded-xl shadow-sm">
            <div class="flex items-center">
                <div class="w-12 h-12 sm:w-16 sm:h-16 bg-purple-500 rounded-xl flex items-center justify-center mr-3 sm:mr-4">
                    <i class="fas fa-eye text-white text-lg sm:text-xl"></i>
                </div>
                <div>
                    <h3 class="text-xl sm:text-2xl font-bold text-gray-800">{{ stats.total_views }}</h3>
                    <p class="text-gray-600 text-xs sm:text-sm">Total Views</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
        <!-- Kategori Layanan -->
        <div class="mb-6">
            <div class="bg-white rounded-xl shadow-sm p-4 sm:p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Distribusi Kategori Layanan</h3>
                <div class="space-y-4">
                    {% for category in categories %}
                    <div class="flex items-center justify-between py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full mr-3" style="background-color: {{ category.color }};"></div>
                            <span class="font-medium text-gray-800 text-sm sm:text-base">{{ category.name }}</span>
                        </div>
                        <div class="flex items-center">
                            <span class="text-xs sm:text-sm text-gray-600 mr-3">{{ category.service_count }} layanan</span>
                            <div class="progress-bar" style="width: 80px;">
                                <div class="progress-fill bg-blue-500" style="width: {{ category.percentage }}%;"></div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- Status Layanan -->
        <div class="mb-6">
            <div class="bg-white rounded-xl shadow-sm p-4 sm:p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Status Layanan</h3>
                <div class="space-y-4">
                    <div class="flex items-center justify-between py-3 border-b border-gray-100">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-green-500 mr-3"></div>
                            <span class="font-medium text-gray-800 text-sm sm:text-base">Aktif</span>
                        </div>
                        <div class="flex items-center">
                            <span class="text-xs sm:text-sm text-gray-600 mr-3">{{ stats.active_services }}</span>
                            <div class="progress-bar" style="width: 80px;">
                                <div class="progress-fill bg-green-500" style="width: {{ active_percentage }}%;"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between py-3 border-b border-gray-100">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-yellow-500 mr-3"></div>
                            <span class="font-medium text-gray-800 text-sm sm:text-base">Segera Hadir</span>
                        </div>
                        <div class="flex items-center">
                            <span class="text-xs sm:text-sm text-gray-600 mr-3">{{ coming_soon_count }}</span>
                            <div class="progress-bar" style="width: 80px;">
                                <div class="progress-fill bg-yellow-500" style="width: {{ coming_soon_percentage }}%;"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between py-3">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-red-500 mr-3"></div>
                            <span class="font-medium text-gray-800 text-sm sm:text-base">Maintenance</span>
                        </div>
                        <div class="flex items-center">
                            <span class="text-xs sm:text-sm text-gray-600 mr-3">{{ maintenance_count }}</span>
                            <div class="progress-bar" style="width: 80px;">
                                <div class="progress-fill bg-red-500" style="width: {{ maintenance_percentage }}%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Layanan Populer & Terbaru -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-6 sm:mb-8">
        <!-- Layanan Populer -->
        <div class="mb-6">
            <div class="bg-white rounded-xl shadow-sm p-4 sm:p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Layanan Populer</h3>
                <div class="space-y-3">
                    {% for service in popular_services %}
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-8 h-8 sm:w-10 sm:h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-star text-blue-600 text-sm sm:text-base"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800 text-sm sm:text-base">{{ service.title }}</h4>
                                <p class="text-xs sm:text-sm text-gray-600">{{ service.views_count }} views</p>
                            </div>
                        </div>
                        <span class="text-xs sm:text-sm font-semibold text-blue-600">{{ service.views_count }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- Layanan Terbaru -->
        <div class="mb-6">
            <div class="bg-white rounded-xl shadow-sm p-4 sm:p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Layanan Terbaru</h3>
                <div class="space-y-3">
                    {% for service in recent_services %}
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-8 h-8 sm:w-10 sm:h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-plus text-green-600 text-sm sm:text-base"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800 text-sm sm:text-base">{{ service.title }}</h4>
                                <p class="text-xs sm:text-sm text-gray-600">{{ service.created_at|date:"d M Y" }}</p>
                            </div>
                        </div>
                        <span class="text-xs sm:text-sm text-gray-500">{{ service.created_at|timesince }} ago</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- Quick Actions -->
    <div class="mb-6">
        <div class="bg-white rounded-xl shadow-sm p-4 sm:p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Aksi Cepat</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                <a href="{% url 'admin_panel:layanan:admin_service_create' %}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg text-sm font-medium transition-colors text-center">
                    <i class="fas fa-plus mr-1"></i>Tambah Layanan
                </a>
                <a href="{% url 'admin_panel:layanan:admin_service_list' %}" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg text-sm font-medium transition-colors text-center">
                    <i class="fas fa-list mr-1"></i>Kelola Layanan
                </a>
                <a href="/django-admin/layanan/servicecategory/" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-3 rounded-lg text-sm font-medium transition-colors text-center">
                    <i class="fas fa-tags mr-1"></i>Kelola Kategori
                </a>
                <a href="{% url 'admin_panel:layanan:admin_service_export' %}" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-3 rounded-lg text-sm font-medium transition-colors text-center">
                    <i class="fas fa-download mr-1"></i>Export Data
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Animate progress bars on page load
    document.addEventListener('DOMContentLoaded', function() {
        const progressBars = document.querySelectorAll('.progress-fill');
        progressBars.forEach((bar, index) => {
            const width = bar.style.width;
            bar.style.width = '0%';
            setTimeout(() => {
                bar.style.width = width;
            }, 100 + (index * 50)); // Stagger animation
        });
    });
</script>
{% endblock %}