<div class="section-card">
    <div class="section-title">💬 SMS Settings</div>
    <div class="row g-2">
        <div class="col-md-4">
            <label class="form-label small mb-1">Provider</label>
            <select class="form-select form-select-sm sms-setting" id="smsProvider">
                <!-- filled by JS -->
            </select>
        </div>
        <div class="col-12">
            <small class="text-muted" id="smsHelp"></small>
        </div>
        <div id="smsFields" class="col-12 row g-2 mt-1"></div>
        <div class="col-12 mt-2 d-flex gap-2">
            <button class="btn btn-sm btn-outline-primary" id="btnTestSms"><i class="bi bi-chat-dots me-1"></i> Test SMS</button>
            <button class="btn btn-sm btn-outline-secondary" id="btnAddCustomProvider"><i class="bi bi-plus me-1"></i> Add Custom Provider</button>
        </div>
    </div>
</div>

<!-- Documentation Panel (initially hidden) -->
<div id="smsDocsPanel" class="mt-3" style="display:none;">
    <div class="card border-info">
        <div class="card-header bg-info text-white">
            <i class="bi bi-info-circle me-2"></i> Provider Documentation
        </div>
        <div class="card-body small" id="smsDocsContent">
            <!-- filled dynamically by JS -->
        </div>
    </div>
</div>

<!-- Custom Provider Modal -->
<div class="modal fade" id="customProviderModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-secondary text-white py-2">
                <h6 class="modal-title"><i class="bi bi-gear me-2"></i><span id="cpModalTitle">Add Custom Provider</span></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close custom SMS provider"></button>
            </div>
            <div class="modal-body py-2">

                <input type="hidden" id="cpEditKey">
                <div class="mb-2">
                    <label class="form-label small mb-1">Provider Key (unique ID)</label>
                    <input type="text" class="form-control form-control-sm" id="cpKey" placeholder="e.g., myprovider">
                </div>
                <div class="mb-2">
                    <label class="form-label small mb-1">Display Label</label>
                    <input type="text" class="form-control form-control-sm" id="cpLabel" placeholder="My SMS Provider">
                </div>
                <div class="mb-2">
                    <label class="form-label small mb-1">API URL</label>
                    <input type="text" class="form-control form-control-sm" id="cpUrl" placeholder="https://sms.example.com/api/send">
                </div>
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label small mb-1">Method</label>
                        <select class="form-select form-select-sm" id="cpMethod">
                            <option value="POST">POST</option>
                            <option value="GET">GET</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label small mb-1">"to" param name</label>
                        <input type="text" class="form-control form-control-sm" id="cpToParam" value="to">
                    </div>
                </div>
                <div class="row g-2 mt-2">
                    <div class="col-6">
                        <label class="form-label small mb-1">"message" param name</label>
                        <input type="text" class="form-control form-control-sm" id="cpMsgParam" value="message">
                    </div>
                    <div class="col-6">
                        <label class="form-label small mb-1">"from" param name</label>
                        <input type="text" class="form-control form-control-sm" id="cpFromParam" value="from">
                    </div>
                </div>
                <div class="mt-2">
                    <label class="form-label small mb-1">Extra Params (comma sep key=value)</label>
                    <input type="text" class="form-control form-control-sm" id="cpExtraParams" placeholder="api_key=abc123,type=sms">
                </div>

            </div>

            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-danger me-auto d-none" id="btnDeleteCustomProvider" data-tt="Remove this custom SMS provider."><i class="bi bi-trash"></i> Delete</button>
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnSaveCustomProvider" data-tt="Save this custom SMS provider so it appears in the provider dropdown.">Save</button>
            </div>
            
        </div>
    </div>
</div>
