<!-- Begin Page Content -->
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="row">
        <div class="col-md-8">
            <h1 class="h3 mb-2 text-gray-800"><i class="fab fa-whatsapp text-success"></i> WhatsApp API Settings</h1>
            <p class="text-muted">Configure your WhatsApp API credentials for sending messages</p>
        </div>
    </div>

    <!-- Settings Card -->
    <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-cog"></i> API Configuration
            </h6>
        </div>
        <div class="card-body">
            <div id="settings_form_container">
                <form name="whatsapp_settings_form" id="whatsapp_settings_form" method="post" onsubmit="return false;">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label><i class="fas fa-key text-warning"></i> API Key <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="api_key" id="api_key"
                                       placeholder="Enter your API Key"
                                       value="<?= isset($res_whatsapp[0]['api_key']) ? htmlspecialchars($res_whatsapp[0]['api_key']) : ''; ?>" required />
                                <small class="text-muted">Your WhatsApp API authentication key</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label><i class="fas fa-mobile-alt text-primary"></i> Sender ID (Device Number) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="sender_id" id="sender_id"
                                       placeholder="e.g., 918007819235"
                                       value="<?= isset($res_whatsapp[0]['sender_id']) ? htmlspecialchars($res_whatsapp[0]['sender_id']) : ''; ?>" required />
                                <small class="text-muted">Your registered WhatsApp device number with country code (e.g., 918007819235)</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label><i class="fas fa-link text-info"></i> API URL</label>
                                <input type="text" class="form-control bg-light" name="api_url" id="api_url"
                                       value="https://raspaysms.in/send-message" readonly />
                                <small class="text-muted">WhatsApp API endpoint (default)</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label><i class="fas fa-sticky-note text-secondary"></i> Default Footer (Optional)</label>
                                <input type="text" class="form-control" name="default_footer" id="default_footer"
                                       placeholder="e.g., Sent via <?= $res_site[0]['site_name']; ?>"
                                       value="<?= isset($res_whatsapp[0]['default_footer']) ? htmlspecialchars($res_whatsapp[0]['default_footer']) : ''; ?>" />
                                <small class="text-muted">Default footer text that appears below messages</small>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-md-6">
                            <input type="hidden" name="updte" id="updte" value="1" />
                            <input type="hidden" name="settings_id" id="settings_id"
                                   value="<?= isset($res_whatsapp[0]['id']) ? $res_whatsapp[0]['id'] : '0'; ?>" />
                            <button type="submit" name="save" id="save_btn" class="btn btn-success">
                                <i class="fas fa-save"></i> Save Settings
                            </button>
                            <button type="button" id="test_btn" class="btn btn-info">
                                <i class="fab fa-whatsapp"></i> Test Connection
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="settings_processing" style="display:none;" class="text-center">
                <?php include "processing.php"; ?>
                <p class="mt-3">Processing...</p>
            </div>
        </div>
    </div>

    <!-- API Documentation Card -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-info">
                <i class="fas fa-book"></i> API Documentation
            </h6>
        </div>
        <div class="card-body">
            <h6><strong>API Endpoint:</strong></h6>
            <code class="d-block p-2 bg-light mb-3">https://raspaysms.in/send-message</code>

            <h6><strong>Required Parameters:</strong></h6>
            <table class="table table-bordered table-sm">
                <thead class="thead-light">
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>api_key</code></td>
                        <td>string</td>
                        <td>Your API authentication key</td>
                    </tr>
                    <tr>
                        <td><code>sender</code></td>
                        <td>string</td>
                        <td>Your registered WhatsApp device number</td>
                    </tr>
                    <tr>
                        <td><code>number</code></td>
                        <td>string</td>
                        <td>Recipient number (e.g., 918007819235)</td>
                    </tr>
                    <tr>
                        <td><code>message</code></td>
                        <td>string</td>
                        <td>Message content to send</td>
                    </tr>
                    <tr>
                        <td><code>footer</code></td>
                        <td>string</td>
                        <td>Optional footer text below message</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- /.container-fluid -->
