<?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">Send New Message</h3>
        <p class="text-muted mb-0">Schedule messages to be sent to a portal's data</p>
    </div>
    <a href="<?= base_url('superadmin/messages') ?>" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-2"></i>Back to Messages
    </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; ?>

<!-- Send Message Form -->
<div class="table-card">
    <div class="card-header">
        <h5><i class="bi bi-send-fill me-2"></i>Message Details</h5>
    </div>
    <div class="card-body">
        <form method="post" action="<?= base_url('superadmin/messages/send') ?>">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Select Portal <span class="text-danger">*</span></label>
                    <select name="portal_id" class="form-select" required>
                        <option value="">Choose a portal...</option>
                        <?php foreach($portals as $portal): ?>
                        <option value="<?= $portal->code ?>"><?= htmlspecialchars($portal->name) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Number of Recipients <span class="text-danger">*</span></label>
                    <input type="number" name="send_count" class="form-control" min="1" max="100000" value="100" required>
                    <small class="text-muted">Maximum 100,000 recipients per batch</small>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Scheduled Date</label>
                    <input type="date" name="scheduled_date" class="form-control" value="<?= date('Y-m-d') ?>">
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Scheduled Time</label>
                    <input type="time" name="scheduled_time" class="form-control" value="<?= date('H:i') ?>">
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Message Template <span class="text-danger">*</span></label>
                <textarea name="message" class="form-control" rows="5" required placeholder="Enter your message here..."></textarea>
                <small class="text-muted">
                    Available placeholders: <code>{name}</code>, <code>{phone}</code>, <code>{email}</code>, <code>{city}</code>
                </small>
            </div>

            <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>
                <strong>Note:</strong> Messages will be scheduled for the selected number of recipients from the portal's master data. 
                Placeholders will be replaced with actual data for each recipient.
            </div>

            <hr class="my-4">
            
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-sa-primary">
                    <i class="bi bi-send-fill me-2"></i>Schedule Messages
                </button>
                <a href="<?= base_url('superadmin/messages') ?>" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<!-- Preview Section -->
<div class="table-card mt-4">
    <div class="card-header">
        <h5><i class="bi bi-eye me-2"></i>Message Preview</h5>
    </div>
    <div class="card-body">
        <div class="border rounded p-4 bg-light" id="messagePreview">
            <p class="text-muted mb-0">Enter a message above to see a preview...</p>
        </div>
    </div>
</div>

<script>
document.querySelector('textarea[name="message"]').addEventListener('input', function() {
    const preview = document.getElementById('messagePreview');
    let message = this.value || 'Enter a message above to see a preview...';
    
    // Replace placeholders with sample data
    message = message.replace(/{name}/g, '<strong>John Doe</strong>');
    message = message.replace(/{phone}/g, '<strong>+91 98765 43210</strong>');
    message = message.replace(/{email}/g, '<strong>john@example.com</strong>');
    message = message.replace(/{city}/g, '<strong>Mumbai</strong>');
    
    preview.innerHTML = '<p class="mb-0">' + message.replace(/\n/g, '<br>') + '</p>';
});
</script>

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