{% extends "base.html" %}

{% block title %}Meeting Schedule{% endblock %}

{% block content %}

<style>
    .leads-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

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

    .leads-table th {
        background-color: #f8f8f8;
        color: #333;
        font-weight: 600;
        text-transform: uppercase;
        position: sticky;
        top: 0;
    }

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

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

    .status-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: bold;
        color: white;
        background-color: #1d3a8a;
    }

    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        gap: 5px;
    }

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

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

    .pagination a:hover {
        background-color: #0f1a3b;
    }

    .pagination a.disabled {
        background-color: #ccc;
        color: #666;
        cursor: default;
    }
</style>

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
    <h2><i class="fa fa-calendar" aria-hidden="true"></i> Meeting Schedule</h2>
    <form id="searchForm" action="{{ request.url_for('dashboard_meetings') }}" method="get"
        style="display: flex; gap: 8px; align-items: center;">
        <input type="text" name="query" id="searchInput" placeholder="Search meetings..." value="{{ search_query }}"
            style="width: 280px; padding: 10px; border-radius: 6px; border: 1px solid #ccc; font-size: 15px;">
        <button type="submit"
            style="padding: 10px 15px; border-radius: 6px; border: none; background-color: #1d3a8a; color: white; font-size: 15px; cursor: pointer;">
            🔍 Search
        </button>
    </form>
</div>

<div style="overflow-x: auto; width: 100%;">
    <table class="leads-table" style="min-width: 1200px;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Meeting Date</th>
                <th>Scheduled At</th>
                <th>Last Follow-up</th>
                <th>Status</th>
                <th>Calendly</th>
            </tr>
        </thead>
        <tbody>
            {% for m in meetings %}
            <tr>
                <td>{{ m.name or "N/A" }}</td>
                <td>{{ m.email or "N/A" }}</td>
                <td>{{ m.meeting_date.strftime("%d-%b-%Y") if m.meeting_date else "N/A" }}</td>
                <td>{{ m.meeting_scheduled_at.strftime("%d-%b-%Y %H:%M") if m.meeting_scheduled_at else "N/A" }}</td>
                <td>{{ m.last_followup_sent_at.strftime("%d-%b-%Y %H:%M") if m.last_followup_sent_at else "Not Sent" }}
                </td>
                <td>
                    <span class="status-badge">{{ m.meeting_status or "N/A" }}</span>
                </td>
                <td>
                    {% if m.calendly_event_uri %}
                    <a href="{{ m.calendly_event_uri }}" target="_blank">View</a>
                    {% else %}
                    —
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="7" style="text-align:center; padding: 20px;">No meetings found</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if page > 1 or has_next %}
<div class="pagination">
    {% if page > 1 %}
    <a href="{{ request.url_for('dashboard_meetings') }}?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_meetings') }}?query={{ search_query }}&page={{ page + 1 }}">Next &#8594;</a>
    {% else %}
    <a class="disabled">Next &#8594;</a>
    {% endif %}
</div>
{% endif %}

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

{% endblock %}