{% extends "base.html" %}

{% block title %}Send Bulk Emails{% 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; }
.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; }

.hidden { display:none; }

#lead-tag-box { min-height:45px; border:1px solid #ccc; border-radius:8px; padding:6px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; cursor:text; background:#f8f9ff; }
#lead-tag-box input { border:none; outline:none; flex:1; min-width:150px; }
.tag { background:#1d3a8a; color:white; padding:4px 8px; border-radius:6px; display:inline-flex; align-items:center; gap:6px; font-size:13px; }
#lead-suggestions { border:1px solid #ccc; max-height:150px; overflow-y:auto; list-style:none; padding:0; margin:0; display:none; position:absolute; background:white; width:calc(100% - 2px); z-index:1000; }
#lead-suggestions li { padding:8px 12px; cursor:pointer; transition:background 0.2s; }
#lead-suggestions li:hover { background:#eef2ff; }

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

<section class="page-header card">
    <!-- <p class="eyebrow">Bulk Outreach</p> -->
    <h1>Send Emails to Multiple Leads</h1>
    <p>Select your leads and send messages with templates or custom content.</p>
</section>

<section class="card form-card">

    {% if error %}
        <div class="alert alert-error">{{ error }}</div>
    {% endif %}
    {% if message %}
        <div class="alert alert-success">{{ message }}</div>
    {% endif %}

    <form action="/dashboard/bulk-email" method="post">
        <!-- ===== SELECT LEADS ===== -->
        <div class="field-group">
            <label for="leads">Select Leads</label>
            <div id="lead-tag-box">
                <input type="text" id="lead-search" placeholder="Type name or email..." autocomplete="off">
            </div>
            <ul id="lead-suggestions"></ul>
            <div id="hidden-inputs"></div>
        </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" required>
        </div>

        <!-- ===== TEMPLATE BUTTONS ===== -->
        <div class="button-row">
            <!-- <button type="button" class="btn btn-primary" onclick="showMessage('template1')">Template1</button>
            <button type="button" class="btn btn-secondary" onclick="showMessage('template2')">Template2</button> -->
            <button type="button" class="btn btn-warning" onclick="showMessage('custom')">Custom Message</button>
        </div>

        <!-- HIDDEN INPUT TO SUBMIT BODY -->
        <input type="hidden" id="body" name="body">

        <!-- MESSAGE TEXTAREAS -->
        <div class="field-group hidden" id="template1-box">
            <label for="template1-body">Template 1</label>
            <textarea id="template1-body" rows="8">Hi {{ '{{ lead.name }}' }},

Thanks for your time. Please find Proposal 1 below with scope and pricing.</textarea>
        </div>

        <div class="field-group hidden" id="template2-box">
            <label for="template2-body">Template 2</label>
            <textarea id="template2-body" rows="8">Hi {{ '{{ lead.name }}' }},

Here’s Proposal 2 with alternative options for your review.</textarea>
        </div>

        <div class="field-group hidden" id="custom-box">
            <label for="custom-body">Custom Message</label>
            <textarea id="custom-body" rows="8" placeholder="Write your custom message here..."></textarea>
        </div>

        <!-- ===== SUBMIT BUTTONS ===== -->
        <div class="button-row">
            <a class="btn btn-ghost" href="/dashboard/leads">Cancel</a>
            <button class="btn btn-primary" type="submit">Send Emails</button>
        </div>
    </form>
</section>

<script>
// ===== SELECT LEADS LOGIC =====
const searchInput = document.getElementById('lead-search');
const tagBox = document.getElementById('lead-tag-box');
const suggestions = document.getElementById('lead-suggestions');
const hiddenInputs = document.getElementById('hidden-inputs');

const leads = [
    {% for lead in leads %}
      { id: '{{ lead.id }}', text: '{{ lead.name }} | {{ lead.email }}' },
    {% endfor %}
];

const selectedLeads = new Map();

searchInput.addEventListener('input', function() {
    const query = this.value.toLowerCase();
    suggestions.innerHTML = '';
    if(query === '') { suggestions.style.display = 'none'; return; }
    const filtered = leads.filter(lead => lead.text.toLowerCase().includes(query) && !selectedLeads.has(lead.id));
    filtered.forEach(lead => {
        const li = document.createElement('li');
        li.textContent = lead.text;
        li.addEventListener('click', () => {
            addLead(lead);
            searchInput.value = '';
            suggestions.style.display = 'none';
            searchInput.focus();
        });
        suggestions.appendChild(li);
    });
    suggestions.style.display = filtered.length ? 'block' : 'none';
});

function addLead(lead) {
    if(selectedLeads.has(lead.id)) return;
    selectedLeads.set(lead.id, lead.text);
    const tag = document.createElement('span');
    tag.textContent = lead.text;
    tag.classList.add('tag');
    const removeBtn = document.createElement('span');
    removeBtn.textContent = '✖';
    removeBtn.style.cursor = 'pointer';
    removeBtn.addEventListener('click', () => removeLead(lead.id, tag));
    tag.appendChild(removeBtn);
    tagBox.insertBefore(tag, searchInput);
    const hidden = document.createElement('input');
    hidden.type = 'hidden';
    hidden.name = 'lead_ids';
    hidden.value = lead.id;
    hidden.id = 'hidden-' + lead.id;
    hiddenInputs.appendChild(hidden);
}

function removeLead(id, tagElement) {
    selectedLeads.delete(id);
    tagBox.removeChild(tagElement);
    const hidden = document.getElementById('hidden-' + id);
    if(hidden) hidden.remove();
}

tagBox.addEventListener('click', () => searchInput.focus());

// ===== TEMPLATE LOGIC =====
let selectedTemplate = 'template1';

function showMessage(type){
    selectedTemplate = type;

    document.getElementById('template1-box').classList.add('hidden');
    document.getElementById('template2-box').classList.add('hidden');
    document.getElementById('custom-box').classList.add('hidden');

    if(type==='template1') document.getElementById('template1-box').classList.remove('hidden');
    if(type==='template2') document.getElementById('template2-box').classList.remove('hidden');
    if(type==='custom') document.getElementById('custom-box').classList.remove('hidden');

    const subjectInput = document.getElementById('subject');
    if(type==='template1') subjectInput.value = 'Proposal for multiple leads';
    if(type==='template2') subjectInput.value = 'Alternative Proposal for multiple leads';
    if(type==='custom') subjectInput.value = '';
}

// Copy the selected message into hidden body field before submission
document.querySelector('form').addEventListener('submit', function(e){
    let bodyValue = '';
    if(selectedTemplate==='template1') bodyValue = document.getElementById('template1-body').value;
    if(selectedTemplate==='template2') bodyValue = document.getElementById('template2-body').value;
    if(selectedTemplate==='custom') bodyValue = document.getElementById('custom-body').value;
    document.getElementById('body').value = bodyValue;
});
</script>

{% endblock %}