<!-- Begin Page Content -->
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="row mb-3">
        <div class="col-md-8">
            <h1 class="h3 mb-2 text-gray-800"><i class="fab fa-whatsapp text-success"></i> WhatsApp Templates</h1>
            <p class="text-muted">Manage message templates for different services</p>
        </div>
        <div class="col-md-4 text-right">
            <a href="whatsapp_settings.php" class="btn btn-primary">
                <i class="fas fa-cog"></i> API Settings
            </a>
        </div>
    </div>

    <!-- Variables Help Card -->
    <div class="card shadow mb-4">
        <div class="card-header py-3" data-toggle="collapse" data-target="#variablesHelp" style="cursor: pointer;">
            <h6 class="m-0 font-weight-bold text-info">
                <i class="fas fa-info-circle"></i> Available Variables (Click to expand)
            </h6>
        </div>
        <div class="collapse" id="variablesHelp">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <h6><strong>User Variables:</strong></h6>
                        <ul class="small">
                            <li><code>{username}</code> - User's username</li>
                            <li><code>{password}</code> - User's password</li>
                            <li><code>{name}</code> - User's full name</li>
                            <li><code>{mobile}</code> - User's mobile number</li>
                            <li><code>{email}</code> - User's email</li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h6><strong>Transaction Variables:</strong></h6>
                        <ul class="small">
                            <li><code>{amount}</code> - Transaction amount</li>
                            <li><code>{number}</code> - Recharge number</li>
                            <li><code>{txn_id}</code> - Transaction ID</li>
                            <li><code>{operator}</code> - Operator name</li>
                            <li><code>{balance}</code> - Current balance</li>
                            <li><code>{reason}</code> - Rejection reason</li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h6><strong>System Variables:</strong></h6>
                        <ul class="small">
                            <li><code>{site_name}</code> - Website name</li>
                            <li><code>{login_url}</code> - Login page URL</li>
                            <li><code>{otp}</code> - One Time Password</li>
                            <li><code>{date}</code> - Current date</li>
                            <li><code>{time}</code> - Current time</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Templates List -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-list"></i> Message Templates
            </h6>
        </div>
        <div class="card-body">
            <div id="templates_container">
                <?php if(count($res_templates) > 0): ?>
                    <?php foreach($res_templates as $template): ?>
                    <div class="card mb-3 template-card" id="template_<?= $template['id']; ?>">
                        <div class="card-header d-flex justify-content-between align-items-center py-2">
                            <div>
                                <strong><i class="fas fa-envelope text-primary"></i> <?= htmlspecialchars($template['template_name']); ?></strong>
                                <small class="text-muted ml-2">(<?= htmlspecialchars($template['template_key']); ?>)</small>
                            </div>
                            <div>
                                <span class="badge <?= $template['is_active'] ? 'badge-success' : 'badge-secondary'; ?>">
                                    <?= $template['is_active'] ? 'Active' : 'Inactive'; ?>
                                </span>
                            </div>
                        </div>
                        <div class="card-body py-2">
                            <form class="template-form" data-id="<?= $template['id']; ?>">
                                <div class="form-group mb-2">
                                    <textarea class="form-control" name="template_message" rows="4"
                                              placeholder="Enter template message..."><?= htmlspecialchars($template['template_message']); ?></textarea>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input"
                                               id="active_<?= $template['id']; ?>"
                                               name="is_active"
                                               <?= $template['is_active'] ? 'checked' : ''; ?>>
                                        <label class="custom-control-label" for="active_<?= $template['id']; ?>">Enable</label>
                                    </div>
                                    <div>
                                        <button type="button" class="btn btn-sm btn-info test-template-btn" data-id="<?= $template['id']; ?>">
                                            <i class="fas fa-paper-plane"></i> Test
                                        </button>
                                        <button type="submit" class="btn btn-sm btn-success">
                                            <i class="fas fa-save"></i> Save
                                        </button>
                                    </div>
                                </div>
                                <input type="hidden" name="template_id" value="<?= $template['id']; ?>">
                                <input type="hidden" name="template_key" value="<?= $template['template_key']; ?>">
                            </form>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i> No templates found.
                        <a href="create_whatsapp_table.php">Click here to create default templates</a>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<!-- Test Template Modal -->
<div class="modal fade" id="testTemplateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fab fa-whatsapp text-success"></i> Test Template</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Mobile Number (with country code)</label>
                    <input type="text" class="form-control" id="test_mobile" placeholder="e.g., 918007819235">
                </div>
                <div class="form-group">
                    <label>Preview Message</label>
                    <textarea class="form-control" id="test_message" rows="5" readonly></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="send_test_btn">
                    <i class="fab fa-whatsapp"></i> Send Test
                </button>
            </div>
        </div>
    </div>
</div>
<!-- /.container-fluid -->
