<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <title>Dashboard - TyreCare 360</title>
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/variables.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/base.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/layout.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/components.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/mobile.css">
    <style>
/* =====================================================
   ANIMATIONS
===================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.animate-fade-in { animation: fadeInUp 0.5s ease-out forwards; }
.animate-slide { animation: slideInRight 0.4s ease-out forwards; }

/* =====================================================
   STAT CARDS
===================================================== */
.stat-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.5s ease-out forwards;
}
.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.15);
}

.stat-icon {
    transition: transform 0.3s ease;
}
.stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(5deg);
}

/* =====================================================
   COMMON CARDS
===================================================== */
.card {
    transition: all 0.3s ease;
    animation: fadeInUp 0.6s ease-out forwards;
}
.card:hover {
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.12);
}

/* =====================================================
   ANALYTICS CARD
===================================================== */
.analytics-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f5ff 100%);
    border: 1px solid rgba(124, 58, 237, 0.1);
    animation-delay: 0.5s;
}

.analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}

.analytics-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.analytics-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FD4326 0%, #c92d12 100%);
box-shadow: 0 10px 30px rgba(253, 67, 38, 0.35);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* =====================================================
   ANALYTICS METRICS GRID
===================================================== */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1024px) {
    .analytics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .analytics-grid { grid-template-columns: 1fr; }
}

.analytics-metric {
    background: white;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.analytics-metric:hover {
    border-color: #FD4326;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.1);
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: #FD4326;
    line-height: 1.2;
}

.metric-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 4px;
}

.metric-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 20px;
}

.metric-change.up {
    background: #dcfce7;
    color: #16a34a;
}
.metric-change.down {
    background: #fef2f2;
    color: #dc2626;
}

/* =====================================================
   CHARTS
===================================================== */
.chart-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    min-height: 300px;
}

.chart-placeholder {
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f5ff 0%, #ffffff 100%);
    border-radius: 8px;
    border: 2px dashed rgba(124, 58, 237, 0.2);
}

.chart-placeholder svg {
    width: 48px;
    height: 48px;
    color: #FD4326;
    margin-bottom: 12px;
}

.chart-placeholder p {
    color: #6b7280;
    font-size: 0.875rem;
}



/* =====================================================
   QUICK ACTIONS
===================================================== */
.quick-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.quick-actions .btn {
    transition: all 0.3s ease;
}

.quick-actions .btn:hover {
    transform: translateY(-2px);
}

/* =====================================================
   TWO COLUMN ANALYTICS
===================================================== */
.grid-2-analytics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 1024px) {
    .grid-2-analytics { grid-template-columns: 1fr; }
}

/* =====================================================
   ✅ MOBILE-ONLY RESPONSIVE FIX (SAFE PATCH)
===================================================== */
@media (max-width: 768px) {

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .content-area {
        padding: 16px !important;
    }

    .header {
        padding: 12px 16px;
    }

    .page-title {
        font-size: 18px;
    }

    /* Stat cards stack */
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .stat-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px;
    }

    .stat-icon {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .stat-content h3 {
        font-size: 22px;
    }

    /* Analytics header stack */
    .analytics-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Charts */
    .chart-container {
        padding: 16px;
        min-height: auto;
    }

    .chart-placeholder {
        height: 180px;
    }

    /* Quick actions full width */
    .quick-actions {
        flex-direction: column;
    }

    .quick-actions .btn {
        width: 100%;
        text-align: center;
    }
}
</style>

</head>
<body>
    <div class="app-container">
        <div class="sidebar-overlay" onclick="closeSidebar()"></div>
        <include href="super-admin/_sidebar.html" />
        
        <main class="main-content">
            <header class="header">
                <div class="header-left">
                    <button class="menu-toggle" onclick="toggleSidebar()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                    <h1 class="page-title">Dashboard</h1>
                </div>
            </header>
            
            <div class="content-area">
                <div class="grid grid-4">
                    <div class="card stat-card">
                        <div class="stat-icon purple">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3 class="counter" data-target="{{ @stats.total_companies }}">0</h3>
                            <p>Total Companies</p>
                        </div>
                    </div>
                    
                    <div class="card stat-card">
                        <div class="stat-icon green">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3 class="counter" data-target="{{ @stats.active_companies }}">0</h3>
                            <p>Active Companies</p>
                        </div>
                    </div>
                    
                    <div class="card stat-card">
                        <div class="stat-icon blue">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3 class="counter" data-target="{{ @stats.total_users }}">0</h3>
                            <p>Total Users</p>
                        </div>
                    </div>
                    
                    <div class="card stat-card">
                        <div class="stat-icon cyan">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3 class="counter" data-target="{{ @stats.total_vehicles }}">0</h3>
                            <p>Total Vehicles</p>
                        </div>
                    </div>
                </div>
                
                <div class="card analytics-card" style="margin-top: 24px; padding: 24px;">
                    <div class="analytics-header">
                        <div class="analytics-title">
                            <div class="analytics-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                                </svg>
                            </div>
                            Google Analytics
                        </div>
                        <button class="btn btn-secondary btn-sm" onclick="refreshAnalytics()">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                            Refresh
                        </button>
                    </div>
                    
                    <div class="analytics-grid">
                        <div class="analytics-metric">
                            <div class="metric-value" id="ga-users">{{ @analytics.users ?? '1,234' }}</div>
                            <div class="metric-label">Active Users</div>
                            <span class="metric-change up">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                                </svg>
                                +12.5%
                            </span>
                        </div>
                        <div class="analytics-metric">
                            <div class="metric-value" id="ga-sessions">{{ @analytics.sessions ?? '3,456' }}</div>
                            <div class="metric-label">Sessions</div>
                            <span class="metric-change up">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                                </svg>
                                +8.3%
                            </span>
                        </div>
                        <div class="analytics-metric">
                            <div class="metric-value" id="ga-pageviews">{{ @analytics.pageviews ?? '8,901' }}</div>
                            <div class="metric-label">Page Views</div>
                            <span class="metric-change up">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                                </svg>
                                +15.2%
                            </span>
                        </div>
                        <div class="analytics-metric">
                            <div class="metric-value" id="ga-bounce">{{ @analytics.bounce ?? '32.4%' }}</div>
                            <div class="metric-label">Bounce Rate</div>
                            <span class="metric-change down">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
                                </svg>
                                -5.1%
                            </span>
                        </div>
                    </div>
                    
                    <div class="grid-2-analytics">
                        <div class="chart-container">
                            <h4 style="margin-bottom: 16px; color: #374151;">Visitors Overview</h4>
                            <div class="chart-placeholder" id="visitors-chart">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
                                </svg>
                                <p>Connect Google Analytics to view real-time data</p>
                            </div>
                        </div>
                        <div class="chart-container">
                            <h4 style="margin-bottom: 16px; color: #374151;">Traffic Sources</h4>
                            <div class="chart-placeholder" id="traffic-chart">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
                                </svg>
                                <p>Connect Google Analytics to view traffic data</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card" style="margin-top: 24px; padding: 24px;">
                    <h3 style="margin-bottom: 16px;">Quick Actions</h3>
                    <div class="quick-actions">
                        <a href="{{ @BASE_PATH }}/super-admin/companies" class="btn btn-primary">Manage Companies</a>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <script>
        function toggleSidebar() {
            document.querySelector('.sidebar').classList.toggle('open');
            document.querySelector('.sidebar-overlay').classList.toggle('open');
        }
        
        function closeSidebar() {
            document.querySelector('.sidebar').classList.remove('open');
            document.querySelector('.sidebar-overlay').classList.remove('open');
        }
        
        function refreshAnalytics() {
            const btn = event.currentTarget;
            btn.style.transform = 'rotate(360deg)';
            btn.style.transition = 'transform 0.5s ease';
            setTimeout(() => {
                btn.style.transform = '';
                showToast('Analytics refreshed', 'success');
            }, 500);
        }
        
        function showToast(message, type = 'info') {
            const container = document.getElementById('toast-container') || createToastContainer();
            const toast = document.createElement('div');
            toast.className = 'toast ' + type;
            toast.textContent = message;
            container.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        }
        
        function createToastContainer() {
            const container = document.createElement('div');
            container.id = 'toast-container';
            container.className = 'toast-container';
            document.body.appendChild(container);
            return container;
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            const counters = document.querySelectorAll('.counter');
            counters.forEach(counter => {
                const target = parseInt(counter.dataset.target) || 0;
                const duration = 1500;
                const start = 0;
                const startTime = performance.now();
                
                function update(currentTime) {
                    const elapsed = currentTime - startTime;
                    const progress = Math.min(elapsed / duration, 1);
                    const easing = 1 - Math.pow(1 - progress, 3);
                    const current = Math.floor(start + (target - start) * easing);
                    counter.textContent = current.toLocaleString();
                    if (progress < 1) {
                        requestAnimationFrame(update);
                    }
                }
                requestAnimationFrame(update);
            });
        });
    </script>
</body>
</html>
