<!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>Reports - 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">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .badge-purple { background: #ede9fe; color: #6b21a8; }
    </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">Reports & Analytics</h1>
                </div>
            </header>
            
            <div class="content-area">
                <div class="grid grid-2" style="margin-bottom: 24px;">
                    <div class="card" style="padding: 24px;">
                        <h3 style="margin-bottom: 16px;">Subscription Distribution</h3>
                        <canvas id="subscriptionChart" height="200"></canvas>
                    </div>
                    <div class="card" style="padding: 24px;">
                        <h3 style="margin-bottom: 16px;">Company Growth</h3>
                        <canvas id="growthChart" height="200"></canvas>
                    </div>
                </div>
                
                <div class="grid grid-3" style="margin-bottom: 24px;">
                    <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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3>{{ @stats.total_services }}</h3>
                            <p>Total Services</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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3>{{ @stats.total_customers }}</h3>
                            <p>Total Customers</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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3>{{ @stats.total_reminders }}</h3>
                            <p>Total Reminders</p>
                        </div>
                    </div>
                </div>
                
                <div class="card" style="padding: 24px;">
                    <h3 style="margin-bottom: 16px;">Top Companies by Vehicles</h3>
                    <div class="data-table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>Rank</th>
                                    <th>Company</th>
                                    <th>Vehicles</th>
                                    <th>Customers</th>
                                    <th>Services</th>
                                </tr>
                            </thead>
                            <tbody>
                                <repeat group="{{ @top_companies }}" value="{{ @company }}" counter="{{ @rank }}">
                                    <tr>
                                        <td><span class="badge badge-purple">#{{ @rank }}</span></td>
                                        <td>{{ @company.name }}</td>
                                        <td>{{ @company.vehicle_count }}</td>
                                        <td>{{ @company.customer_count }}</td>
                                        <td>{{ @company.service_count }}</td>
                                    </tr>
                                </repeat>
                            </tbody>
                        </table>
                    </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');
        }
        
        const subscriptionData = {
            labels: ['Premium', 'Basic', 'Trial'],
            datasets: [{
                data: [{{ @subscription_stats.premium }}, {{ @subscription_stats.basic }}, {{ @subscription_stats.trial }}],
                backgroundColor: ['#7c3aed', '#3b82f6', '#6b7280']
            }]
        };
        
        new Chart(document.getElementById('subscriptionChart'), {
            type: 'doughnut',
            data: subscriptionData,
            options: {
                responsive: true,
                plugins: {
                    legend: { position: 'bottom' }
                }
            }
        });
        
        const growthData = {
            labels: {!! json_encode(@growth_labels) !!},
            datasets: [{
                label: 'New Companies',
                data: {!! json_encode(@growth_data) !!},
                borderColor: '#7c3aed',
                backgroundColor: 'rgba(124, 58, 237, 0.1)',
                fill: true,
                tension: 0.4
            }]
        };
        
        new Chart(document.getElementById('growthChart'), {
            type: 'line',
            data: growthData,
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });
    </script>
</body>
</html>
