{% extends "admin/layout.html" %}

{% block title %}Leads{% endblock %}

{% block content %}
<div class="container-fluid">
    <h2 class="mt-4 mb-4">Lead Management & Invoicing</h2>

    <!-- Filters -->
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <form method="GET" class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Site Domain</label>
                    <select name="site_domain" class="form-select">
                        <option value="">All Sites</option>
                        {% for domain in site_domains %}
                        <option value="{{ domain }}" {{ 'selected' if current_site == domain }}>{{ domain }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Payment Status</label>
                    <select name="payment_status" class="form-select">
                        <option value="">All Statuses</option>
                        <option value="unpaid" {{ 'selected' if current_payment == 'unpaid' }}>Unpaid</option>
                        <option value="invoiced" {{ 'selected' if current_payment == 'invoiced' }}>Invoiced</option>
                        <option value="paid" {{ 'selected' if current_payment == 'paid' }}>Paid</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Flagged Spam</label>
                    <select name="disputed" class="form-select">
                        <option value="">All</option>
                        <option value="1" {{ 'selected' if current_disputed == '1' }}>Flagged Only</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">Filter</button>
                </div>
            </form>
        </div>
    </div>

    {% if leads %}
    <div class="table-responsive">
        <table class="table table-striped table-hover align-middle">
            <thead class="table-dark">
                <tr>
                    <th>ID</th>
                    <th>Site</th>
                    <th>Vendor</th>
                    <th>Lead Info</th>
                    <th>Customer</th>
                    <th>Message</th>
                    <th>Lead Status</th>
                    <th>Payment</th>
                    <th>Dispute / Admin Decision</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                {% for lead in leads %}
                <tr data-id="{{ lead.id }}" class="{{ 'table-warning' if lead.vendor_disputed == 1 and lead.admin_decision == 'pending' }}">
                    <td>{{ lead.id }}</td>
                    <td><small class="text-muted">{{ lead.site_domain }}</small></td>
                    <td>
                        <strong>{{ lead.company_name }}</strong><br>
                        <small>{{ lead.company_email }}</small>
                    </td>
                    <td>
                        <span class="badge bg-secondary">{{ lead.category_slug }}</span><br>
                        <small>{{ lead.city_slug }}</small>
                    </td>
                    <td>
                        {{ lead.user_name }}<br>
                        <small>{{ lead.user_phone }} | {{ lead.user_email }}</small>
                    </td>
                    <td>
                        <div style="max-width: 200px; max-height: 100px; overflow-y: auto; font-size: 0.85rem;">
                            {{ lead.message }}
                        </div>
                    </td>
                    <td>
                        <select class="form-select form-select-sm select-lead-status" style="width: 120px;">
                            <option value="new" {{ 'selected' if lead.lead_status == 'new' }}>New</option>
                            <option value="verified" {{ 'selected' if lead.lead_status == 'verified' }}>Verified</option>
                            <option value="trial" {{ 'selected' if lead.lead_status == 'trial' }}>Trial</option>
                            <option value="spam" {{ 'selected' if lead.lead_status == 'spam' }}>Spam</option>
                        </select>
                    </td>
                    <td>
                        <select class="form-select form-select-sm select-payment-status" style="width: 120px;">
                            <option value="unpaid" {{ 'selected' if lead.payment_status == 'unpaid' }}>Unpaid</option>
                            <option value="invoiced" {{ 'selected' if lead.payment_status == 'invoiced' }}>Invoiced</option>
                            <option value="paid" {{ 'selected' if lead.payment_status == 'paid' }}>Paid</option>
                        </select>
                    </td>
                    <td>
                        {% if lead.vendor_disputed == 1 %}
                            <div class="p-1 border rounded bg-light small mb-1">
                                <strong>Reason:</strong> {{ lead.vendor_dispute_reason or 'No reason provided' }}
                            </div>
                            <select class="form-select form-select-sm select-admin-decision" style="width: 140px;">
                                <option value="pending" {{ 'selected' if lead.admin_decision == 'pending' }}>⏳ Pending</option>
                                <option value="accepted" {{ 'selected' if lead.admin_decision == 'accepted' }}>✅ Accepted (Spam)</option>
                                <option value="rejected" {{ 'selected' if lead.admin_decision == 'rejected' }}>❌ Rejected (Valid)</option>
                            </select>
                        {% else %}
                            <span class="text-muted small">No dispute</span>
                        {% endif %}
                    </td>
                    <td><small>{{ lead.created_at }}</small></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="alert alert-info">No leads matching your criteria.</p>
    {% endif %}
</div>

<script>
document.querySelectorAll('.select-lead-status, .select-payment-status, .select-admin-decision').forEach(select => {
    select.addEventListener('change', function() {
        const row = this.closest('tr');
        const id = row.dataset.id;
        const lead_status = row.querySelector('.select-lead-status').value;
        const payment_status = row.querySelector('.select-payment-status').value;
        const admin_decision_el = row.querySelector('.select-admin-decision');
        const admin_decision = admin_decision_el ? admin_decision_el.value : '';
        
        let body = `lead_status=${lead_status}&payment_status=${payment_status}`;
        if(admin_decision) {
            body += `&admin_decision=${admin_decision}`;
        }
        
        fetch(`/update_lead_status/${id}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: body
        }).then(res => res.json()).then(data => {
            if(data.status === 'success') {
                row.classList.add('table-success');
                setTimeout(() => row.classList.remove('table-success'), 500);
                
                // If admin accepts dispute, automatically mark as spam and don't invoice
                if(admin_decision === 'accepted') {
                    row.querySelector('.select-lead-status').value = 'spam';
                    // Trigger status update for lead_status as well
                    row.querySelector('.select-lead-status').dispatchEvent(new Event('change'));
                }
            }
        });
    });
});
</script>
{% endblock %}