{% extends "base.html" %}
{% block title %}Dashboard - Infyrus Tech{% endblock %}

{% block content %}
<section class="pt-24 pb-16 min-h-screen" style="background:#0A1220;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
            <div>
                <h1 class="font-display font-bold text-2xl text-white">Welcome back, <span class="gradient-text">Rajesh!</span></h1>
                <p class="text-slate-400 text-sm mt-1">Business Plan · Renews on July 20, 2026</p>
            </div>
            <div class="flex gap-3">
                <button class="btn-outline text-sm py-2 px-4"><i class="fa-solid fa-plus mr-2"></i>Add Domain</button>
                <button class="btn-primary text-sm py-2 px-4"><i class="fa-solid fa-arrow-up mr-2"></i>Upgrade</button>
            </div>
        </div>
        
        <!-- Status cards -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            {% set stats = [
                ('fa-globe', 'blue', '3', 'Active Websites', '+1 this month'),
                ('fa-server', 'green', '18.2 GB', 'Storage Used', '50 GB limit'),
                ('fa-envelope', 'purple', '5', 'Email Accounts', 'of 20'),
                ('fa-shield-halved', 'amber', 'Active', 'SSL Status', 'All secured')
            ] %}
            {% for icon, color, val, label, sub in stats %}
            <div class="glass rounded-2xl p-5" data-aos="fade-up" data-aos-delay="{{ loop.index0 * 60 }}">
                <div class="flex items-center justify-between mb-3">
                    <div class="w-9 h-9 bg-{{ color }}-500/15 rounded-xl flex items-center justify-center">
                        <i class="fa-solid {{ icon }} text-{{ color }}-400 text-sm"></i>
                    </div>
                    <span class="text-xs text-green-400 bg-green-400/10 px-2 py-0.5 rounded-full">Active</span>
                </div>
                <div class="font-display font-bold text-2xl text-white mb-0.5">{{ val }}</div>
                <div class="text-xs text-slate-400">{{ label }}</div>
                <div class="text-xs text-slate-600 mt-0.5">{{ sub }}</div>
            </div>
            {% endfor %}
        </div>
        
        <div class="grid lg:grid-cols-3 gap-6">
            <!-- Websites -->
            <div class="lg:col-span-2 glass rounded-2xl p-6" data-aos="fade-up">
                <div class="flex items-center justify-between mb-5">
                    <h2 class="font-semibold text-white">My Websites</h2>
                    <button class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors">Manage all</button>
                </div>
                
                <div class="space-y-3">
                    {% set sites = [
                        ('rajeshbusiness.com.np', 'WordPress', 'green', '4.2 GB', True),
                        ('mystore.com.np', 'OpenCart', 'blue', '8.7 GB', True),
                        ('blog.rajesh.com', 'Static Site', 'purple', '5.3 GB', True)
                    ] %}
                    {% for domain, cms, color, usage, ssl in sites %}
                    <div class="flex items-center gap-4 p-4 bg-[#0F172A]/60 rounded-xl hover:bg-[#0F172A]/80 transition-colors">
                        <div class="w-9 h-9 bg-{{ color }}-500/15 rounded-xl flex items-center justify-center flex-shrink-0">
                            <i class="fa-solid fa-globe text-{{ color }}-400 text-sm"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-medium text-white truncate">{{ domain }}</div>
                            <div class="text-xs text-slate-500 mt-0.5">{{ cms }} · {{ usage }} used</div>
                        </div>
                        <div class="flex items-center gap-2 flex-shrink-0">
                            {% if ssl %}<span class="text-xs text-green-400 bg-green-400/10 px-2 py-1 rounded-lg"><i class="fa-solid fa-lock mr-1"></i>SSL</span>{% endif %}
                            <button class="text-slate-500 hover:text-white transition-colors p-1">
                                <i class="fa-solid fa-ellipsis-v text-sm"></i>
                            </button>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                
                <!-- Storage bar -->
                <div class="mt-5 pt-5 border-t border-white/10">
                    <div class="flex justify-between text-xs mb-2">
                        <span class="text-slate-400">Storage Used</span>
                        <span class="text-white">18.2 GB / 50 GB</span>
                    </div>
                    <div class="w-full bg-[#0F172A] rounded-full h-2">
                        <div class="h-2 rounded-full bg-gradient-to-r from-blue-500 to-purple-500" style="width: 36.4%"></div>
                    </div>
                </div>
            </div>
            
            <!-- Quick Actions & Tickets -->
            <div class="space-y-6">
                <div class="glass rounded-2xl p-6" data-aos="fade-up" data-aos-delay="100">
                    <h2 class="font-semibold text-white mb-4">Quick Actions</h2>
                    <div class="grid grid-cols-2 gap-3">
                        {% for icon, label, color in [('fa-folder-open', 'File Manager', 'blue'), ('fa-database', 'phpMyAdmin', 'green'), ('fa-envelope', 'Webmail', 'purple'), ('fa-rotate', 'Backups', 'amber'), ('fa-chart-bar', 'Analytics', 'indigo'), ('fa-ticket', 'Support', 'red')] %}
                        <button class="bg-{{ color }}-500/10 hover:bg-{{ color }}-500/20 border border-{{ color }}-500/20 rounded-xl p-3 text-center transition-all group">
                            <i class="fa-solid {{ icon }} text-{{ color }}-400 mb-2 text-lg block group-hover:scale-110 transition-transform"></i>
                            <span class="text-xs text-slate-400">{{ label }}</span>
                        </button>
                        {% endfor %}
                    </div>
                </div>
                
                <div class="glass rounded-2xl p-6" data-aos="fade-up" data-aos-delay="150">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-semibold text-white">Recent Tickets</h2>
                        <a href="/contact" class="text-xs text-indigo-400">New ticket</a>
                    </div>
                    <div class="space-y-3">
                        <div class="flex items-center gap-3 p-3 bg-[#0F172A]/60 rounded-xl">
                            <div class="w-2 h-2 bg-green-400 rounded-full flex-shrink-0"></div>
                            <div class="flex-1 min-w-0">
                                <div class="text-xs text-white truncate">SSL not renewing</div>
                                <div class="text-xs text-slate-600">Resolved · 2 days ago</div>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 p-3 bg-[#0F172A]/60 rounded-xl">
                            <div class="w-2 h-2 bg-amber-400 rounded-full flex-shrink-0"></div>
                            <div class="flex-1 min-w-0">
                                <div class="text-xs text-white truncate">Email delivery issue</div>
                                <div class="text-xs text-slate-600">In progress · 5 days ago</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Invoices -->
        <div class="mt-6 glass rounded-2xl p-6" data-aos="fade-up">
            <div class="flex justify-between items-center mb-5">
                <h2 class="font-semibold text-white">Recent Invoices</h2>
                <button class="text-xs text-indigo-400">View all</button>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full min-w-[500px]">
                    <thead>
                        <tr class="border-b border-white/10">
                            <th class="text-left pb-3 text-xs text-slate-500 font-medium">Invoice</th>
                            <th class="text-left pb-3 text-xs text-slate-500 font-medium">Plan</th>
                            <th class="text-left pb-3 text-xs text-slate-500 font-medium">Date</th>
                            <th class="text-left pb-3 text-xs text-slate-500 font-medium">Amount</th>
                            <th class="text-left pb-3 text-xs text-slate-500 font-medium">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5 text-sm">
                        <tr><td class="py-3 text-slate-400 text-xs">#INV-2026-06</td><td class="py-3 text-white text-xs">Business Plan</td><td class="py-3 text-slate-500 text-xs">Jun 1, 2026</td><td class="py-3 text-white text-xs font-medium">Rs. 199</td><td class="py-3"><span class="text-xs text-green-400 bg-green-400/10 px-2 py-0.5 rounded-full">Paid</span></td></tr>
                        <tr><td class="py-3 text-slate-400 text-xs">#INV-2026-05</td><td class="py-3 text-white text-xs">Business Plan</td><td class="py-3 text-slate-500 text-xs">May 1, 2026</td><td class="py-3 text-white text-xs font-medium">Rs. 199</td><td class="py-3"><span class="text-xs text-green-400 bg-green-400/10 px-2 py-0.5 rounded-full">Paid</span></td></tr>
                        <tr><td class="py-3 text-slate-400 text-xs">#INV-2026-04</td><td class="py-3 text-white text-xs">Domain .com.np</td><td class="py-3 text-slate-500 text-xs">Apr 15, 2026</td><td class="py-3 text-white text-xs font-medium">Rs. 500</td><td class="py-3"><span class="text-xs text-green-400 bg-green-400/10 px-2 py-0.5 rounded-full">Paid</span></td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
{% endblock %}