{% extends "base.html" %}

{% block title %}Dashboard - Leads{% endblock %}

{% block content %}

<style>
    body {
        font-family: 'Inter', sans-serif;
        background-color: #f5f7ff;
    }

    /* ===== Card container ===== */
    .card {
        background-color: #fff;
        border-radius: 20px;
        padding: 25px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        margin-bottom: 30px;
    }

    h2 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #111322;
    }

    /* ===== Table styles ===== */
    .leads-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        min-width: 1200px;
    }

    .leads-table th,
    .leads-table td {
        padding: 12px 15px;
        border: 1px solid #e0e0e0;
        font-size: 14px;
        vertical-align: top;
        text-align: left;
    }

    .leads-table th {
        background-color: #f0f4ff;
        font-weight: 600;
        color: #1d3a8a;
        text-transform: uppercase;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .leads-table tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .leads-table tbody tr:hover {
        background-color: #eef2ff;
    }

    /* ===== Status badges ===== */
    .status-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 12px;
        color: white;
        text-align: center;
        min-width: 75px;
    }

    .status-new {
        background-color: #007bff;
    }

    .status-replied {
        background-color: #ffc107;
        color: #333;
    }

    .status-followup {
        background-color: #28a745;
    }

    .status-rejected {
        background-color: #dc3545;
    }

    .status-other {
        background-color: #6c757d;
    }

    /* ===== Action buttons ===== */
    .action-button {
        display: inline-block;
        padding: 6px 12px;
        background-color: #1d3a8a;
        color: white;
        text-decoration: none;
        border-radius: 6px;
        font-size: 13px;
        transition: background-color 0.2s;
        white-space: nowrap;
    }

    .action-button:hover {
        background-color: #142a6b;
    }

    /* ===== Search and Export ===== */
    .search-export {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        gap: 10px;
    }

    .search-export form {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .search-export input[type="text"] {
        padding: 10px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 15px;
        min-width: 250px;
    }

    .search-export button {
        padding: 8px 14px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 15px;
        color: white;
    }

    .search-btn {
        background-color: #1d3a8a;
    }

    .search-btn:hover {
        background-color: #142a6b;
    }

    .export-btn {
        background-color: #344baf;
    }

    .export-btn:hover {
        background-color: #1d2d88;
    }

    /* ===== Pagination ===== */
    .pagination {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }

    .pagination a {
        padding: 6px 12px;
        border-radius: 6px;
        text-decoration: none;
        background-color: #1d3a8a;
        color: white;
        transition: background-color 0.2s;
    }

    .pagination a.active {
        background-color: #142a6b;
        font-weight: bold;
    }

    .pagination a.disabled {
        background-color: #ccc;
        color: #666;
        cursor: default;
        pointer-events: none;
    }

    .pagination a:hover:not(.active):not(.disabled) {
        background-color: #0f1a3b;
    }
</style>

<div class="card">
    <div
        style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;margin-top: -50px;">
        <h2>Leads Information</h2>
        <div>
            <a href="/dashboard/bulk-email" style="margin-left: 15px; 
              text-decoration: none; 
              color: white; 
              background-color: #1d3a8a; 
              padding: 10px 18px; 
              border-radius: 6px; 
              display: inline-block;
              font-weight: 600;">
                📧 Send Bulk Emails
            </a>
        </div>


    </div>

    <div class="search-export">
        <form id="searchForm" action="{{ request.url_for('dashboard_leads') }}" method="get">
            <input type="text" name="query" id="searchInput" placeholder="Search leads..." value="{{ search_query }}">
            <button type="submit" name="action" value="search" class="search-btn">🔍 Search</button>
            <button type="submit" name="action" value="export" class="export-btn">⬇ Export CSV</button>
        </form>
    </div>

    <div class="table-wrapper">
        <table class="leads-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Company</th>
                    <th>Status</th>
                    <th>Created At</th>
                    <th style="text-align:center;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for lead in leads %}
                <tr>
                    <td>{{ lead.name or "N/A" }}</td>
                    <td>{{ lead.email or "N/A" }}</td>
                    <td>{{ lead.company or "N/A" }}</td>
                    <td>
                        {% set status_class = "status-other" %}
                        {% if lead.status == "New" %} {% set status_class = "status-new" %} {% endif %}
                        {% if lead.status == "Replied" %} {% set status_class = "status-replied" %} {% endif %}
                        {% if lead.status == "Follow-up" %} {% set status_class = "status-followup" %} {% endif %}
                        {% if lead.status == "Rejected" %} {% set status_class = "status-rejected" %} {% endif %}
                        <span class="status-badge {{ status_class }}">{{ lead.status or "N/A" }}</span>
                    </td>
                    <td>{{ lead.created_at.strftime("%d-%b-%Y %H:%M") if lead.created_at else "N/A" }}</td>
                    <td>
                        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                            <a href="/dashboard/send-proposal/{{ lead.id }}" class="action-button">Send Proposal</a>
                            <a href="/dashboard/email-scheduler/{{ lead.id }}" class="action-button">Email Schedule</a>
                             <a href="/dashboard/leads/{{ lead.id }}" class="action-button"
                                style="background-color: #2563eb;">View Details</a>

                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" style="text-align: center; padding: 20px;">No leads found matching your criteria.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if page > 1 or has_next %}
    <div class="pagination">
        {% if page > 1 %}
        <a href="{{ request.url_for('dashboard_leads') }}?query={{ search_query }}&page={{ page - 1 }}">&#8592;
            Previous</a>
        {% else %}
        <a class="disabled">&#8592; Previous</a>
        {% endif %}

        <a class="active">{{ page }}</a>

        {% if has_next %}
        <a href="{{ request.url_for('dashboard_leads') }}?query={{ search_query }}&page={{ page + 1 }}">Next &#8594;</a>
        {% else %}
        <a class="disabled">Next &#8594;</a>
        {% endif %}
    </div>
    {% endif %}
</div>

<script>


    // Search input cleanup
    document.getElementById("searchForm").addEventListener("submit", function (e) {
        let input = document.getElementById("searchInput");
        input.value = input.value.replace(/\s+/g, " ").trim();
    });
</script>

{% endblock %}