<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex align-items-center gap-2">
                <i class="bi bi-megaphone" style="color: var(--brand);"></i> New Campaign
            </div>
            <div class="card-body">
                <form action="<?= site_url('campaigns') ?>" method="post">
                    <?= csrf_field() ?>

                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Subject</label>
                        <input type="text" class="form-control" name="subject" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Message</label>
                        <textarea class="form-control" name="body" rows="8" required placeholder="Write your message..."></textarea>
                        <div class="form-text">Use <code>{name}</code> anywhere to insert the guest's name.</div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Segment</label>
                            <select class="form-select" name="segment" id="segmentSelect">
                                <option value="">All segments</option>
                                <?php foreach ($lookups->guestSegments as $key => $meta): ?>
                                    <option value="<?= esc($key) ?>"><?= esc($meta['label']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Nationality</label>
                            <select class="form-select" name="nationality" id="nationalitySelect">
                                <option value="">All nationalities</option>
                                <?php foreach ($nationalities as $n): ?>
                                    <option value="<?= esc($n) ?>"><?= esc($n) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="alert alert-light border small d-flex align-items-center gap-2">
                        <i class="bi bi-people" style="color: var(--brand);"></i>
                        <span id="audiencePreview">Calculating audience…</span>
                    </div>
                    <p class="text-muted small">Blacklisted guests and guests with no email on file are always excluded, regardless of the filters above.</p>

                    <div class="d-flex gap-2 mt-3">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>Save as Draft</button>
                        <a href="<?= site_url('campaigns') ?>" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                    <p class="text-muted small mt-2 mb-0">Saving creates a draft — nothing is emailed until you review and send it from the campaign page.</p>
                </form>
            </div>
        </div>
    </div>
</div>

<?= $this->endSection() ?>
<?= $this->section('scripts') ?>
<script>
function updateAudiencePreview() {
    const segment = document.getElementById('segmentSelect').value;
    const nationality = document.getElementById('nationalitySelect').value;
    const params = new URLSearchParams({ segment, nationality });

    fetch('<?= site_url('campaigns/preview-audience') ?>?' + params.toString())
        .then((r) => r.json())
        .then((data) => {
            document.getElementById('audiencePreview').textContent = data.count + ' guest' + (data.count === 1 ? '' : 's') + ' will receive this campaign.';
        });
}

document.getElementById('segmentSelect').addEventListener('change', updateAudiencePreview);
document.getElementById('nationalitySelect').addEventListener('change', updateAudiencePreview);
updateAudiencePreview();
</script>
<?= $this->endSection() ?>
