{% extends "base.html" %}

{% block title %}Send Message · {{ lead.name }}{% endblock %}

{% block content %}

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

.page-header.card {
    background: #fff; padding: 25px; border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px; margin-top: -50px;
}
.page-header h1 { font-size: 28px; margin-bottom: 10px; }
.page-header p { color: #6c757d; font-size: 14px; }

.card.form-card {
    background: #fff; padding: 25px; border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-top: -85px; margin-bottom: 30px;
}

.field-group { margin-bottom: 20px; }
.field-group label { display: block; font-weight: 600; margin-bottom: 8px; }
.field-group input, .field-group textarea {
    width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #ccc;
    font-size: 14px; outline: none; transition: border-color 0.2s;
}
.field-group input:focus, .field-group textarea:focus {
    border-color: #1d3a8a;
}

.helper-text { font-size: 12px; color: #6c757d; margin-top: 4px; }

.button-row {
    display: flex; gap: 15px; margin-top: 25px; flex-wrap: wrap;
}
.btn {
    text-decoration: none; padding: 10px 18px; border-radius: 8px;
    font-weight: 600; cursor: pointer; text-align: center; font-size: 14px;
    border: none;
}
.btn-primary {
    background: #1d3a8a; color: #fff;
}
.btn-primary:hover {
    background: #142a6b;
}
.btn-secondary {
    background: #6c757d; color: #fff;
}
.btn-secondary:hover {
    background: #495057;
}
.btn-warning {
    background: #f59e0b; color: #fff;
}
.btn-warning:hover {
    background: #b45309;
}
.btn-ghost {
    background: #f0f4ff; color: #1d3a8a;
}
.btn-ghost:hover {
    background: #e0e7ff;
}

.alert {
    padding: 12px 15px; border-radius: 8px; margin-bottom: 20px;
}
.alert-error {
    background: #f8d7da; color: #842029;
}
.alert-success {
    background: #d1e7dd; color: #0f5132;
}

@media (max-width: 768px) {
    .button-row {
        flex-direction: column; width: 100%;
    }
    .btn {
        width: 100%;
    }
}
</style>

<section class="page-header card">

    <p class="eyebrow">Messages</p>
    <h1>Send Message to {{ lead.name }}</h1>
    <p>
      {% set count = email_templates | length %}
      You have {{ count }} email template{{ 's' if count != 1 else '' }}.
    </p>
</section>

<section class="card form-card">

    <form action="/dashboard/leads/{{ lead.id }}/send-message" method="post" id="sendMessageForm">
        <!-- To -->
        <div class="field-group">
            <label for="email">To</label>
            <input type="email" id="email" name="email" value="{{ lead.email }}" required>
        </div>

        <!-- CC -->
        <div class="field-group">
            <label for="cc">CC (optional)</label>
            <input type="text" id="cc" name="cc" placeholder="cc1@example.com, cc2@example.com">
            <p class="helper-text">Separate multiple emails with commas.</p>
        </div>

        <!-- Subject -->
        <div class="field-group">
            <label for="subject">Subject</label>
            <input type="text" id="subject" name="subject" placeholder="Your message subject" required>
        </div>
        <div class="field-group">
            <label for="subject">Template</label>
        </div>
        <!-- Template buttons -->
        <div class="button-row" style="margin-bottom: 20px;">
            {% for template in email_templates %}
            <button 
                type="button" 
                class="btn btn-primary template-btn"
                data-template='{{ {"subject": template.subject, "body": template.body} | tojson }}'
            >
                {{ template.name }}
            </button>
            {% endfor %}
            <button type="button" class="btn btn-warning" id="customMessageBtn">Custom Message</button>
        </div>

        <!-- Message textarea -->
        <div class="field-group">
            <label for="body">Message</label>
            <textarea id="body" name="body" rows="10" placeholder="Write your custom message here..." required></textarea>
        </div>

        <!-- Submit buttons -->
        <div class="button-row" style="margin-top: 25px;">
            <button type="submit" class="btn btn-primary">Send Message</button>
            <a class="btn btn-ghost" href="/dashboard/leads">Cancel</a>
        </div>
    </form>
</section>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const templateButtons = document.querySelectorAll(".template-btn");
    const subjectInput = document.getElementById("subject");
    const bodyTextarea = document.getElementById("body");
    const customMessageBtn = document.getElementById("customMessageBtn");

    function fillTemplate(subject, body) {
        subjectInput.value = subject;
        bodyTextarea.value = body;
        bodyTextarea.focus();
    }

    templateButtons.forEach(button => {
        button.addEventListener("click", () => {
            const data = JSON.parse(button.getAttribute('data-template'));
            fillTemplate(data.subject, data.body);
        });
    });

    customMessageBtn.addEventListener("click", () => {
        subjectInput.value = "";
        bodyTextarea.value = "";
        bodyTextarea.focus();
    });
});
</script>

{% endblock %}