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

{% block title %}Website Settings Dashboard - Admin Panel{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-indigo-600">
        <div class="max-w-7xl mx-auto px-4 py-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-white">Website Settings</h1>
                    <p class="text-blue-100">Kelola pengaturan website</p>
                </div>
                <a href="{% url 'admin_panel:dashboard' %}" 
                   class="bg-white bg-opacity-20 text-white px-4 py-2 rounded-lg hover:bg-opacity-30 transition">
                    <i class="fas fa-arrow-left mr-2"></i>Kembali
                </a>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 py-6">
        <!-- Quick Stats -->
        <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="bg-white rounded-lg shadow p-4">
                <div class="text-2xl font-bold text-blue-600">{{ settings.total_members|default:0 }}</div>
                <div class="text-sm text-gray-600">Total Anggota</div>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <div class="text-2xl font-bold text-green-600">{{ settings.total_events|default:0 }}</div>
                <div class="text-sm text-gray-600">Kegiatan</div>
            </div>
        </div>

        <!-- Settings Grid -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- Branding Settings -->
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center mb-3">
                    <div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-palette text-white text-sm"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">Branding</h3>
                </div>
                <p class="text-sm text-gray-600 mb-3">Logo, nama website, dan identitas</p>
                <a href="{% url 'admin_panel:branding_settings' %}" 
                   class="group relative block w-full bg-gradient-to-r from-purple-500 to-purple-600 text-white text-center py-3 rounded-xl hover:from-purple-600 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    <span class="relative z-10 font-semibold">Kelola Branding</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
                </a>
            </div>

            <!-- Hero Section -->
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center mb-3">
                    <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-image text-white text-sm"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">Hero Section</h3>
                </div>
                <p class="text-sm text-gray-600 mb-3">Kelola multiple gambar hero untuk slider (maksimal 5 gambar)</p>
                <a href="{% url 'admin_panel:hero_images' %}" 
                   class="group relative block w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white text-center py-3 rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    <span class="relative z-10 font-semibold">Kelola Hero Images Slider</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
                </a>
            </div>

            <!-- Color Settings -->
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center mb-3">
                    <div class="w-8 h-8 bg-pink-500 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-paint-brush text-white text-sm"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">Warna Website</h3>
                </div>
                <p class="text-sm text-gray-600 mb-3">Skema warna dan tema</p>
                <a href="{% url 'admin_panel:color_settings' %}" 
                   class="group relative block w-full bg-gradient-to-r from-pink-500 to-pink-600 text-white text-center py-3 rounded-xl hover:from-pink-600 hover:to-pink-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    <span class="relative z-10 font-semibold">Kelola Warna</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
                </a>
            </div>

            <!-- Contact Settings -->
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center mb-3">
                    <div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-phone text-white text-sm"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">Kontak & Social</h3>
                </div>
                <p class="text-sm text-gray-600 mb-3">Informasi kontak dan media sosial</p>
                <a href="{% url 'admin_panel:contact_settings' %}" 
                   class="group relative block w-full bg-gradient-to-r from-green-500 to-green-600 text-white text-center py-3 rounded-xl hover:from-green-600 hover:to-green-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    <span class="relative z-10 font-semibold">Kelola Kontak</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
                </a>
            </div>

            <!-- Statistics -->
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center mb-3">
                    <div class="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-chart-bar text-white text-sm"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">Statistik</h3>
                </div>
                <p class="text-sm text-gray-600 mb-3">Data pencapaian dan prestasi</p>
                <a href="{% url 'admin_panel:statistics_settings' %}" 
                   class="group relative block w-full bg-gradient-to-r from-orange-500 to-orange-600 text-white text-center py-3 rounded-xl hover:from-orange-600 hover:to-orange-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    <span class="relative z-10 font-semibold">Kelola Statistik</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
                </a>
            </div>

            <!-- General Settings -->
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center mb-3">
                    <div class="w-8 h-8 bg-gray-500 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-cogs text-white text-sm"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">Pengaturan Umum</h3>
                </div>
                <p class="text-sm text-gray-600 mb-3">Analytics dan maintenance mode</p>
                <a href="{% url 'admin_panel:general_settings' %}" 
                   class="group relative block w-full bg-gradient-to-r from-gray-500 to-gray-600 text-white text-center py-3 rounded-xl hover:from-gray-600 hover:to-gray-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    <span class="relative z-10 font-semibold">Kelola Pengaturan</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}