<%- include('layout', { pageTitle: 'Leads', activePage: 'leads' }) %>

<div class="section-header">
    <h2><i class="fas fa-envelope"></i> Leads / Enquiries</h2>
    <div class="header-actions">
        <form class="filter-form" method="GET" action="/admin/leads">
            <select name="status" onchange="this.form.submit()">
                <option value="">All Status</option>
                <option value="new" <%= typeof filterStatus !== 'undefined' && filterStatus === 'new' ? 'selected' : '' %>>New</option>
                <option value="contacted" <%= typeof filterStatus !== 'undefined' && filterStatus === 'contacted' ? 'selected' : '' %>>Contacted</option>
                <option value="converted" <%= typeof filterStatus !== 'undefined' && filterStatus === 'converted' ? 'selected' : '' %>>Converted</option>
                <option value="closed" <%= typeof filterStatus !== 'undefined' && filterStatus === 'closed' ? 'selected' : '' %>>Closed</option>
            </select>
        </form>
    </div>
</div>

<% if (leads.length === 0) { %>
<div class="empty-state">
    <i class="fas fa-inbox"></i>
    <p>No leads found.</p>
</div>
<% } else { %>
<div class="table-responsive">
    <table class="admin-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Contact</th>
                <th>Product / Category</th>
                <th>Message</th>
                <th>Source</th>
                <th>Status</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <% leads.forEach((lead, i) => { %>
            <tr>
                <td><%= lead.id %></td>
                <td><strong><%= lead.name %></strong></td>
                <td>
                    <div><i class="fas fa-envelope"></i> <%= lead.email %></div>
                    <div><i class="fas fa-phone"></i> <%= lead.phone %></div>
                    <% if (lead.city) { %><div><i class="fas fa-map-marker-alt"></i> <%= lead.city %></div><% } %>
                </td>
                <td>
                    <% if (lead.product_name) { %><div><%= lead.product_name %></div><% } %>
                    <% if (lead.category_name) { %><small class="text-muted"><%= lead.category_name %></small><% } %>
                </td>
                <td class="message-cell"><%= lead.message || '-' %></td>
                <td><span class="badge badge-<%= lead.source %>"><%= lead.source %></span></td>
                <td>
                    <form method="POST" action="/admin/leads/<%= lead.id %>/status" class="inline-form">
                        <select name="status" onchange="this.form.submit()" class="status-select status-<%= lead.status %>">
                            <option value="new" <%= lead.status === 'new' ? 'selected' : '' %>>New</option>
                            <option value="contacted" <%= lead.status === 'contacted' ? 'selected' : '' %>>Contacted</option>
                            <option value="converted" <%= lead.status === 'converted' ? 'selected' : '' %>>Converted</option>
                            <option value="closed" <%= lead.status === 'closed' ? 'selected' : '' %>>Closed</option>
                        </select>
                    </form>
                </td>
                <td><%= new Date(lead.created_at).toLocaleDateString() %></td>
                <td>
                    <form method="POST" action="/admin/leads/<%= lead.id %>/delete" class="inline-form" onsubmit="return confirm('Delete this lead?')">
                        <button type="submit" class="btn btn-sm btn-danger" title="Delete"><i class="fas fa-trash"></i></button>
                    </form>
                </td>
            </tr>
            <% }); %>
        </tbody>
    </table>
</div>
<% } %>

<%- include('layout-footer') %>
