{% extends 'layouts/base.html' %}

{% block content %}

<div class="page-head">
    <div>
        <h1>Update Lead Status</h1>
        <p class="muted">{{ lead.customer_name }}</p>
    </div>
    <a class="btn btn-sm" href="{{ url_for('leads.detail', lead_id=lead.id) }}">Back to Lead</a>
</div>

<div class="panel form-card">
    <form method="post" class="form-grid">
        <div class="form-group">
            <label>Customer Name</label>
            <input value="{{ lead.customer_name }}" readonly>
        </div>

        <div class="form-group">
            <label>Mobile Number</label>
            <input value="{{ lead.phone or lead.alternate_phone or '-' }}" readonly inputmode="tel">
        </div>

        <div class="form-group">
            <label>Current Status</label>
            <input value="{{ lead.status|replace('_', ' ')|title }}" readonly>
        </div>

        <div class="form-group">
            <label>New Status</label>
            <select name="status" required>
                {% for status in statuses %}
                <option value="{{ status }}" {% if lead.status == status %}selected{% endif %}>
                    {{ status|replace('_', ' ')|title }}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group full-width">
            <label>Update Description</label>
            <textarea name="description" rows="5" placeholder="Add details about this status update"></textarea>
        </div>

        <div class="form-actions full-width">
            <button class="btn" type="submit">Save Status Update</button>
            <a class="btn btn-sm" href="{{ url_for('leads.index') }}">Cancel</a>
        </div>
    </form>
</div>

{% endblock %}