<%- include('layout', { pageTitle: 'Dashboard', activePage: 'dashboard' }) %>

<div class="dashboard-stats">
    <div class="stat-card stat-leads">
        <div class="stat-icon"><i class="fas fa-envelope"></i></div>
        <div class="stat-info">
            <h3><%= stats.leads %></h3>
            <p>Total Leads</p>
        </div>
    </div>
    <div class="stat-card stat-new-leads">
        <div class="stat-icon"><i class="fas fa-bell"></i></div>
        <div class="stat-info">
            <h3><%= stats.newLeads %></h3>
            <p>New Leads</p>
        </div>
    </div>
    <div class="stat-card stat-products">
        <div class="stat-icon"><i class="fas fa-box"></i></div>
        <div class="stat-info">
            <h3><%= stats.products %></h3>
            <p>Products</p>
        </div>
    </div>
    <div class="stat-card stat-categories">
        <div class="stat-icon"><i class="fas fa-folder"></i></div>
        <div class="stat-info">
            <h3><%= stats.categories %></h3>
            <p>Categories</p>
        </div>
    </div>
</div>

<div class="dashboard-section">
    <div class="section-header">
        <h2><i class="fas fa-clock"></i> Recent Leads</h2>
        <a href="/admin/leads" class="btn btn-sm btn-outline">View All</a>
    </div>

    <% if (recentLeads.length === 0) { %>
    <div class="empty-state">
        <i class="fas fa-inbox"></i>
        <p>No leads yet. They will appear here when customers submit enquiries.</p>
    </div>
    <% } else { %>
    <div class="table-responsive">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Product</th>
                    <th>Source</th>
                    <th>Status</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                <% recentLeads.forEach(lead => { %>
                <tr>
                    <td><strong><%= lead.name %></strong></td>
                    <td><%= lead.email %></td>
                    <td><%= lead.phone %></td>
                    <td><%= lead.product_name || '-' %></td>
                    <td><span class="badge badge-<%= lead.source %>"><%= lead.source %></span></td>
                    <td><span class="badge badge-<%= lead.status %>"><%= lead.status %></span></td>
                    <td><%= new Date(lead.created_at).toLocaleDateString() %></td>
                </tr>
                <% }); %>
            </tbody>
        </table>
    </div>
    <% } %>
</div>

<%- include('layout-footer') %>
