{include file="sections/header.tpl"}

<div class="row">
    <div class="col-sm-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">📱 SMS Gate Gateway — sms-gate.app</h3>
            </div>
            <ul class="nav nav-tabs" style="margin:0 15px;">
                <li {if $menu neq 'config'}class="active"{/if}>
                    <a href="{$_url}plugin/smsGatewaySmSGate">Dashboard</a>
                </li>
                <li {if $menu eq 'config'}class="active"{/if}>
                    <a href="{$_url}plugin/smsGatewaySmSGate_config">Configuration</a>
                </li>
            </ul>

            {if $menu eq 'config'}
            <div class="panel-body">
                <form class="form-horizontal" method="post" role="form" action="{$_url}plugin/smsGatewaySmSGate_config">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Username</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" name="smsgate_username" value="{$_c['smsgate_username']}">
                            <p class="help-block">From the app's Home screen (e.g. HSHN-U)</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Password</label>
                        <div class="col-md-6">
                            <input type="password" class="form-control" name="smsgate_password" value="{$_c['smsgate_password']}"
                                onmouseenter="this.type='text'" onmouseleave="this.type='password'">
                            <p class="help-block">From the app's Home screen</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Device ID <small class="text-muted">(optional)</small></label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" name="smsgate_device_id" value="{$_c['smsgate_device_id']}">
                            <p class="help-block">From the app's Home screen. Only needed if you have multiple devices. Leave blank to use default.</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-3 col-md-6">
                            <button class="btn btn-primary" type="submit">Save Configuration</button>
                        </div>
                    </div>
                </form>
            </div>

            {else}
            <div class="panel-body">

                {* Status box *}
                <div class="row" style="margin-bottom:20px;">
                    <div class="col-sm-6">
                        <div class="info-box">
                            <span class="info-box-icon bg-green"><i class="glyphicon glyphicon-phone"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Gateway</span>
                                <span class="info-box-number">sms-gate.app (Private Server)</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="info-box">
                            <span class="info-box-icon bg-blue"><i class="glyphicon glyphicon-user"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Configured Username</span>
                                <span class="info-box-number">{if $_c['smsgate_username']}{$_c['smsgate_username']}{else}<span class="text-danger">Not set</span>{/if}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {* Test SMS *}
                <div class="panel panel-default">
                    <div class="panel-heading"><h4 class="panel-title">Send Test SMS</h4></div>
                    <div class="panel-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="col-md-2 control-label">Phone</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" id="test_phone" placeholder="+254712345678">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Message</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" id="test_message" value="Test from SpeedRadius SMS Gate">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-6">
                                    <button class="btn btn-success" onclick="sendTestSMS()">
                                        <i class="glyphicon glyphicon-send"></i> Send Test
                                    </button>
                                    <span id="test_result" style="margin-left:12px;"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {* SMS Logs *}
                <div class="panel panel-default">
                    <div class="panel-heading"><h4 class="panel-title">Last 10 SMS Messages</h4></div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>Date / Time</th>
                                        <th>Phone</th>
                                        <th>Message</th>
                                        <th>Status</th>
                                        <th>Message ID</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $sms_logs as $log}
                                    <tr>
                                        <td>{$log['created_at']}</td>
                                        <td>{$log['phone']}</td>
                                        <td>{$log['message']|truncate:60}</td>
                                        <td>
                                            {if $log['status'] eq 'sent'}
                                                <span class="label label-success">Sent</span>
                                            {else}
                                                <span class="label label-danger" title="{$log['status_message']}">Failed</span>
                                            {/if}
                                        </td>
                                        <td>{$log['message_id']|default:'-'}</td>
                                    </tr>
                                    {foreachelse}
                                    <tr>
                                        <td colspan="5" class="text-center text-muted">No SMS messages yet</td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
            {/if}
        </div>
    </div>
</div>

<script>var _smsgate_test_url = '{$_url}plugin/smsGatewaySmSGate_test';</script>
{literal}
<script>
function sendTestSMS() {
    var phone = document.getElementById('test_phone').value.trim();
    var message = document.getElementById('test_message').value.trim();
    var resultEl = document.getElementById('test_result');

    if (!phone || !message) {
        resultEl.innerHTML = '<span class="text-danger">Phone and message are required.</span>';
        return;
    }

    resultEl.innerHTML = '<span class="text-muted">Sending...</span>';

    $.ajax({
        url: _smsgate_test_url,
        method: 'POST',
        data: { phone: phone, message: message },
        success: function(resp) {
            if (resp.success) {
                resultEl.innerHTML = '<span class="text-success"><b>✓ Sent successfully!</b></span>';
            } else {
                resultEl.innerHTML = '<span class="text-danger"><b>✗ Failed:</b> ' + resp.message + '</span>';
            }
        },
        error: function() {
            resultEl.innerHTML = '<span class="text-danger">Request error. Check server logs.</span>';
        }
    });
}
</script>
{/literal}

{include file="sections/footer.tpl"}
