<!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>Users - 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">
    <style>
        .badge-purple { background: #ede9fe; color: #6b21a8; }
        .badge-secondary { background: #f3f4f6; color: #4b5563; }
    </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">All Users</h1>
                </div>
            </header>
            
            <div class="content-area">
                <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="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 }}</h3>
                            <p>Total Users</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="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>{{ @stats.company_admins }}</h3>
                            <p>Company Admins</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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <h3>{{ @stats.staff }}</h3>
                            <p>Staff Members</p>
                        </div>
                    </div>
                </div>
                
                <div class="card" style="padding: 0; overflow: hidden;">
                    <div class="data-table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Role</th>
                                    <th>Company</th>
                                    <th>Status</th>
                                    <th>Joined</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <repeat group="{{ @users }}" value="{{ @u }}">
                                    <tr>
                                        <td>{{ @u.name }}</td>
                                        <td>{{ @u.email }}</td>
                                        <td>
                                            <check if="{{ @u.role_name == 'super_admin' }}">
                                                <true><span class="badge badge-purple">Super Admin</span></true>
                                                <false>
                                                    <check if="{{ @u.role_name == 'company_admin' }}">
                                                        <true><span class="badge badge-info">Company Admin</span></true>
                                                        <false><span class="badge badge-secondary">Staff</span></false>
                                                    </check>
                                                </false>
                                            </check>
                                        </td>
                                        <td>{{ @u.company_name ? @u.company_name : '-' }}</td>
                                        <td>
                                            <check if="{{ @u.is_active }}">
                                                <true><span class="badge badge-success">Active</span></true>
                                                <false><span class="badge badge-danger">Inactive</span></false>
                                            </check>
                                        </td>
                                        <td>{{ date('M d, Y', strtotime(@u.created_at)) }}</td>
                                        <td>
                                            <div class="action-buttons">
                                                <check if="{{ @u.role_name == 'company_admin' }}">
                                                    <true>
                                                        <button class="btn btn-primary btn-sm" onclick="loginAs({{ @u.id }}, 'company_admin')">Login</button>
                                                    </true>
                                                </check>
                                                <check if="{{ @u.role_name == 'staff' }}">
                                                    <true>
                                                        <button class="btn btn-secondary btn-sm" onclick="loginAs({{ @u.id }}, 'staff')">Login</button>
                                                    </true>
                                                </check>
                                            </div>
                                        </td>
                                    </tr>
                                </repeat>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <div class="toast-container" id="toast-container"></div>
    
    <script>
        const BASE_PATH = '{{ @BASE_PATH }}';
        
        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 showToast(message, type = 'info') {
            const container = document.getElementById('toast-container');
            const toast = document.createElement('div');
            toast.className = 'toast ' + type;
            toast.textContent = message;
            container.appendChild(toast);
            setTimeout(() => toast.remove(), 4000);
        }
        
        async function loginAs(userId, role) {
            if (!confirm('Login as this user?')) return;
            
            try {
                const response = await fetch(BASE_PATH + '/api/super-admin/login-as', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ user_id: userId, role: role })
                });
                const data = await response.json();
                if (data.success) {
                    window.location.href = data.redirect;
                } else {
                    showToast(data.message || 'Failed to login as user', 'error');
                }
            } catch (error) {
                showToast('Failed to login as user', 'error');
            }
        }
    </script>
</body>
</html>
