<?php $this->load->view('superadmin/layouts/header'); ?>

<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="mb-1">Create New Campaign</h3>
        <p class="text-muted mb-0">Set up a new SMS/message campaign</p>
    </div>
    <a href="<?= base_url('superadmin/campaigns') ?>" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-2"></i>Back to Campaigns
    </a>
</div>

<!-- Flash Messages -->
<?php if($this->session->flashdata('error')): ?>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="bi bi-exclamation-circle me-2"></i><?= $this->session->flashdata('error') ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<?php if(validation_errors()): ?>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="bi bi-exclamation-circle me-2"></i><?= validation_errors() ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<!-- Create Form -->
<div class="row">
    <div class="col-lg-8">
        <form method="POST" action="<?= base_url('superadmin/campaigns/create') ?>">
            <div class="table-card mb-4">
                <div class="card-header">
                    <h5><i class="bi bi-megaphone me-2"></i>Campaign Details</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Campaign Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="name" required 
                               value="<?= set_value('name', 'Nav Jeevan Shree Regular Premium Plan - SMS') ?>" 
                               placeholder="Enter campaign name">
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Portal <span class="text-danger">*</span></label>
                            <select class="form-select" name="portal_id" required>
                                <option value="">Select Portal</option>
                                <?php foreach($portals as $portal): ?>
                                <option value="<?= $portal->code ?>" <?= set_select('portal_id', $portal->code) ?>><?= htmlspecialchars($portal->name) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Campaign Type <span class="text-danger">*</span></label>
                            <select class="form-select" name="campaign_type" required>
                                <option value="sms" <?= set_select('campaign_type', 'sms', TRUE) ?>>SMS</option>
                                <option value="whatsapp" <?= set_select('campaign_type', 'whatsapp') ?>>WhatsApp</option>
                                <option value="email" <?= set_select('campaign_type', 'email') ?>>Email</option>
                                <option value="newsletter" <?= set_select('campaign_type', 'newsletter') ?>>Newsletter</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Message Template (Optional)</label>
                        <select class="form-select" name="template_id" id="template_select">
                            <option value="">-- No Template (Custom Message) --</option>
                            <?php if(!empty($templates)): ?>
                            <?php foreach($templates as $template): ?>
                            <option value="<?= $template->id ?>" data-content="<?= htmlspecialchars($template->content) ?>">
                                <?= htmlspecialchars($template->name) ?>
                            </option>
                            <?php endforeach; ?>
                            <?php endif; ?>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Message Content</label>
                        <textarea class="form-control" name="message_content" id="message_content" rows="5" 
                                  placeholder="Enter your message content here. Use {name}, {mobile}, {policy_no} as placeholders."><?= set_value('message_content') ?></textarea>
                        <small class="text-muted">Available placeholders: {name}, {mobile}, {email}, {policy_no}, {dob}, {city}</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Schedule Date/Time (Optional)</label>
                        <input type="datetime-local" class="form-control" name="scheduled_at" 
                               value="<?= set_value('scheduled_at') ?>">
                        <small class="text-muted">Leave empty to save as draft and schedule later</small>
                    </div>
                </div>
            </div>
            
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-sa-primary">
                    <i class="bi bi-check-circle me-2"></i>Create Campaign
                </button>
                <a href="<?= base_url('superadmin/campaigns') ?>" class="btn btn-outline-secondary">
                    Cancel
                </a>
            </div>
        </form>
    </div>
    
    <div class="col-lg-4">
        <div class="table-card mb-4">
            <div class="card-header">
                <h5><i class="bi bi-lightbulb me-2"></i>Tips</h5>
            </div>
            <div class="card-body">
                <ul class="mb-0">
                    <li class="mb-2">Choose the portal this campaign belongs to</li>
                    <li class="mb-2">Select SMS for text messages, WhatsApp for WhatsApp messages</li>
                    <li class="mb-2">You can use a pre-defined template or write a custom message</li>
                    <li class="mb-2">Use placeholders like <code>{name}</code> to personalize messages</li>
                    <li class="mb-2">After creating, you can assign data and schedule sends</li>
                </ul>
            </div>
        </div>
        
        <div class="table-card">
            <div class="card-header">
                <h5><i class="bi bi-eye me-2"></i>Message Preview</h5>
            </div>
            <div class="card-body">
                <div id="message_preview" class="p-3 bg-light rounded" style="min-height: 100px;">
                    <span class="text-muted">Enter message content to see preview...</span>
                </div>
                <div class="mt-2">
                    <small class="text-muted">Character count: <span id="char_count">0</span></small>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const templateSelect = document.getElementById('template_select');
    const messageContent = document.getElementById('message_content');
    const messagePreview = document.getElementById('message_preview');
    const charCount = document.getElementById('char_count');
    
    // Template selection
    templateSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const content = selectedOption.dataset.content || '';
        if (content) {
            messageContent.value = content;
            updatePreview();
        }
    });
    
    // Message preview
    messageContent.addEventListener('input', updatePreview);
    
    function updatePreview() {
        const text = messageContent.value;
        if (text) {
            // Replace placeholders with sample data
            let preview = text
                .replace(/{name}/g, '<strong>John Doe</strong>')
                .replace(/{mobile}/g, '<strong>9876543210</strong>')
                .replace(/{email}/g, '<strong>john@example.com</strong>')
                .replace(/{policy_no}/g, '<strong>POL123456</strong>')
                .replace(/{dob}/g, '<strong>01-Jan-1990</strong>')
                .replace(/{city}/g, '<strong>Mumbai</strong>');
            messagePreview.innerHTML = preview;
            charCount.textContent = text.length;
        } else {
            messagePreview.innerHTML = '<span class="text-muted">Enter message content to see preview...</span>';
            charCount.textContent = '0';
        }
    }
});
</script>

<?php $this->load->view('superadmin/layouts/footer'); ?>
