Template Redesiged:

Settings page redesigned

ui/ui/app-settings.tpl

@@ -1,31 +1,41 @@
 {include file="sections/header.tpl"}
+<style>
+    .panel-title {
+        font-weight: bolder;
+        font-size: large;
+    }
+</style>
 
 <form class="form-horizontal" method="post" role="form" action="{$_url}settings/app-post" enctype="multipart/form-data">
     <input type="hidden" name="csrf_token" value="{$csrf_token}">
-    <div class="row">
+    <div class="panel" id="accordion" role="tablist" aria-multiselectable="true">
-        <div class="col-sm-12 col-md-12">
+        <div class="panel-heading" role="tab" id="headingOne">
-            <div class="panel panel-primary panel-hovered panel-stacked mb30">
+            <h3 class="panel-title">
-                <div class="panel-heading">
+                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
-                    <div class="btn-group pull-right">
+                    aria-expanded="true" aria-controls="collapseOne">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
+                    {Lang::T('General')}
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
+                </a>
-                    </div>
+            </h3>
-                    {Lang::T('General Settings')}
         </div>
+        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
             <div class="panel-body">
                 <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Application Name / Company Name')}</label>
+                    <label class="col-md-2 control-label">{Lang::T('Application Name / Company
+                        Name')}</label>
                     <div class="col-md-6">
                         <input type="text" required class="form-control" id="CompanyName" name="CompanyName"
                             value="{$_c['CompanyName']}">
                     </div>
-                        <span class="help-block col-md-4">{Lang::T('This Name will be shown on the Title')}</span>
+                    <span class="help-block col-md-4">{Lang::T('This Name will be shown on the
+                        Title')}</span>
                 </div>
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Company Logo')}</label>
                     <div class="col-md-6">
                         <input type="file" class="form-control" id="logo" name="logo" accept="image/*">
-                            <span class="help-block">{Lang::T('For PDF Reports | Best size 1078 x 200 | uploaded image will be
+                        <span class="help-block">{Lang::T('For PDF Reports | Best size 1078 x 200 |
+                            uploaded image
+                            will be
                             autosize')}</span>
                     </div>
                     <span class="help-block col-md-4">
@@ -69,7 +79,8 @@
                         <input type="number" required class="form-control" id="printer_cols" placeholder="37"
                             name="printer_cols" value="{$_c['printer_cols']}">
                     </div>
-                        <span class="help-block col-md-4">{Lang::T('For invoice print using Thermal Printer')}</span>
+                    <span class="help-block col-md-4">{Lang::T('For invoice print using Thermal
+                        Printer')}</span>
                 </div>
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Theme')}</label>
@@ -84,19 +95,19 @@
                             {/foreach}
                         </select>
                     </div>
-                        <p class="help-block col-md-4"><a
+                    <p class="help-block col-md-4"><a href="https://github.com/hotspotbilling/phpnuxbill/wiki/Themes"
-                                href="https://github.com/hotspotbilling/phpnuxbill/wiki/Themes"
                             target="_blank">{Lang::T('Theme Info')}</a></p>
                 </div>
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Recharge Using')}</label>
                     <div class="col-md-6">
-                            <input type="text" name="payment_usings" class="form-control"
+                        <input type="text" name="payment_usings" class="form-control" value="{$_c['payment_usings']}"
-                                value="{$_c['payment_usings']}"
                             placeholder="{Lang::T('Cash')}, {Lang::T('Bank Transfer')}">
                     </div>
                     <p class="help-block col-md-4">
-                            {Lang::T('This used for admin to select payment in recharge, using comma for every new options')}
+                        {Lang::T('This used for admin to select payment in recharge, using comma for
+                        every new
+                        options')}
                     </p>
                 </div>
 
@@ -106,7 +117,8 @@
                         <input type="number" required class="form-control" id="reset_day" placeholder="20" min="1"
                             max="28" step="1" name="reset_day" value="{$_c['reset_day']}">
                     </div>
-                        <span class="help-block col-md-4">{Lang::T('Income will reset every this day')}</span>
+                    <span class="help-block col-md-4">{Lang::T('Income will reset every this
+                        day')}</span>
                 </div>
                 <div class="form-group">
                     <label class="col-md-2 control-label">APP URL</label>
@@ -115,14 +127,22 @@
                     </div>
                     <p class="help-block col-md-4">{Lang::T('edit at config.php')}</p>
                 </div>
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading" id="hide_dashboard_content">
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
         </div>
+    </div>
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="headingTwo">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
+                    aria-expanded="false" aria-controls="collapseTwo">
                     {Lang::T('Hide Dashboard Content')}
+                </a>
+            </h4>
         </div>
+        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-3 control-label"><input type="checkbox" name="hide_mrc" value="yes" {if
@@ -141,14 +161,22 @@
                     <label class="col-md-2 control-label"><input type="checkbox" name="hide_pg" value="yes" {if
                             $_c['hide_pg'] eq 'yes' }checked{/if}> Payment Gateway</label>
                 </div>
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
         </div>
+    </div>
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="headingThree">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
+                    aria-expanded="false" aria-controls="collapseThree">
                     Voucher
+                </a>
+            </h4>
         </div>
+        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Disable Voucher')}</label>
@@ -176,8 +204,7 @@
                             <option value="rand" {if $_c['voucher_format']=='rand' }selected="selected" {/if}>
                                 RaNdoM
                             </option>
-                                <option value="numbers" {if $_c['voucher_format'] == 'numbers'}selected="selected"
+                            <option value="numbers" {if $_c['voucher_format']=='numbers' }selected="selected" {/if}>
-                                    {/if}>
                                 Numbers
                             </option>
                         </select>
@@ -198,7 +225,8 @@
                         </select>
                     </div>
                     <p class="help-block col-md-4">
-                                {Lang::T('Customer just Login with Phone number and Voucher Code, Voucher will be password')}
+                        {Lang::T('Customer just Login with Phone number and Voucher Code, Voucher will be
+                        password')}
                     </p>
                 </div>
                 <div class="form-group">
@@ -208,18 +236,28 @@
                             placeholder="https://192.168.88.1/status" value="{$_c['voucher_redirect']}">
                     </div>
                     <p class="help-block col-md-4">
-                                {Lang::T('After Customer activate voucher or login, customer will be redirected to this url')}
+                        {Lang::T('After Customer activate voucher or login, customer will be redirected to this
+                        url')}
                     </p>
                 </div>
                 {/if}
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
         </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="headingFour">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"
+                    aria-expanded="false" aria-controls="collapseFour">
                     FreeRadius
+                </a>
+            </h4>
         </div>
+        <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Enable Radius')}</label>
@@ -234,14 +272,23 @@
                             href="https://github.com/hotspotbilling/phpnuxbill/wiki/FreeRadius"
                             target="_blank">{Lang::T('Radius Instructions')}</a></p>
                 </div>
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
         </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="headingFive">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive"
+                    aria-expanded="false" aria-controls="collapseFive">
                     {Lang::T('Extend Postpaid Expiration')}
+                </a>
+            </h4>
         </div>
+        <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Allow Extend')}</label>
@@ -268,14 +315,23 @@
                             placeholder="{Lang::T('i agree to extends and will paid full after this')}">{$_c['extend_confirmation']}</textarea>
                     </div>
                 </div>
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
         </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="headingSix">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix"
+                    aria-expanded="false" aria-controls="collapseSix">
                     {Lang::T('Customer Balance System')}
+                </a>
+            </h4>
         </div>
+        <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Enable System')}</label>
@@ -310,15 +366,26 @@
                             value="{$_c['minimum_transfer']}">
                     </div>
                 </div>
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
+        </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="headingSeven">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven"
+                    aria-expanded="false" aria-controls="collapseSeven">
+                    {Lang::T('Telegram Notification')}
                     <div class="btn-group pull-right">
                         <a class="btn btn-success btn-xs" style="color: black;" href="javascript:testTg()">Test TG</a>
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
                     </div>
-                    {Lang::T('Telegram Notification')}
+                </a>
+            </h4>
         </div>
+        <div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Telegram Bot Token')}</label>
@@ -338,16 +405,28 @@
                 <small id="emailHelp" class="form-text text-muted">
                     {Lang::T('You will get Payment and Error notification')}
                 </small>
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
-                    <div class="btn-group pull-right">
-                        <a class="btn btn-success btn-xs" style="color: black;"
-                            href="javascript:testSms()">{Lang::T('Test SMS')}</a>
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
         </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="heading8">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse8"
+                    aria-expanded="false" aria-controls="collapse8">
                     {Lang::T('SMS OTP Registration')}
+                    <div class="btn-group pull-right">
+                        <a class="btn btn-success btn-xs" style="color: black;" href="javascript:testSms()">
+                            {Lang::T('Test SMS')}
+                        </a>
                     </div>
+                </a>
+            </h4>
+        </div>
+        <div id="collapse8" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading8">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('SMS Server URL')}</label>
@@ -362,8 +441,7 @@
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Or use Mikrotik SMS')}</label>
                     <div class="col-md-6">
-                            <select class="form-control"
+                        <select class="form-control" onchange="document.getElementById('sms_url').value = this.value">
-                                onchange="document.getElementById('sms_url').value = this.value">
                             <option value="">{Lang::T('Select Router')}</option>
                             {foreach $r as $rs}
                             <option value="{$rs['name']}" {if $rs['name']==$_c['sms_url']}selected{/if}>
@@ -376,17 +454,29 @@
                     </p>
                 </div>
                 <small id="emailHelp" class="form-text text-muted">{Lang::T('You can use')} WhatsApp
-                        {Lang::T('in here too.')} <a href="https://wa.nux.my.id/login"
+                    {Lang::T('in here too.')} <a href="https://wa.nux.my.id/login" target="_blank">{Lang::T('Free
-                            target="_blank">{Lang::T('Free Server')}</a></small>
+                        Server')}</a></small>
+
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
+        </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="heading9">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse9"
+                    aria-expanded="false" aria-controls="collapse9">
+                    {Lang::T('Whatsapp Notification')}
                     <div class="btn-group pull-right">
                         <a class="btn btn-success btn-xs" style="color: black;" href="javascript:testWa()">Test WA</a>
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
                     </div>
-                    {Lang::T('Whatsapp Notification')}
+                </a>
+            </h4>
         </div>
+        <div id="collapse9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading9">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('WhatsApp Server URL')}</label>
@@ -398,18 +488,29 @@
                         {Lang::T('it will be replaced.')}
                 </div>
                 <small id="emailHelp" class="form-text text-muted">{Lang::T('You can use')} WhatsApp
-                        {Lang::T('in here too.')} <a href="https://wa.nux.my.id/login"
+                    {Lang::T('in here too.')} <a href="https://wa.nux.my.id/login" target="_blank">{Lang::T('Free
-                            target="_blank">{Lang::T('Free Server')}</a></small>
+                        Server')}</a></small>
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
+        </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="heading10">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse10"
+                    aria-expanded="false" aria-controls="collapse10">
+                    {Lang::T('Email Notification')}
                     <div class="btn-group pull-right">
                         <a class="btn btn-success btn-xs" style="color: black;" href="javascript:testEmail()">Test
                             Email</a>
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
                     </div>
-                    {Lang::T('Email Notification')}
+                </a>
+            </h4>
         </div>
+        <div id="collapse10" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading10">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">SMTP Host : Port</label>
@@ -466,28 +567,38 @@
                             value="{$_c['mail_reply_to']}" placeholder="support@host.tld">
                     </div>
                     <p class="help-block col-md-4">
-                            {Lang::T('Customer will reply email to this address, empty if you want to use From Address')}
+                        {Lang::T('Customer will reply email to this address, empty if you want to use From
+                        Address')}
                     </p>
                 </div>
+
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
         </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="heading11">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse11"
+                    aria-expanded="false" aria-controls="collapse11">
                     {Lang::T('User Notification')}
+                </a>
+            </h4>
         </div>
+        <div id="collapse11" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading11">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Expired Notification')}</label>
                     <div class="col-md-6">
-                            <select name="user_notification_expired" id="user_notification_expired"
+                        <select name="user_notification_expired" id="user_notification_expired" class="form-control">
-                                class="form-control">
                             <option value="none">{Lang::T('None')}</option>
-                                <option value="wa" {if $_c['user_notification_expired']=='wa' }selected="selected"
+                            <option value="wa" {if $_c['user_notification_expired']=='wa' }selected="selected" {/if}>
-                                    {/if}>{Lang::T('By WhatsApp')}</option>
+                                {Lang::T('By WhatsApp')}</option>
-                                <option value="sms" {if $_c['user_notification_expired']=='sms' }selected="selected"
+                            <option value="sms" {if $_c['user_notification_expired']=='sms' }selected="selected" {/if}>
-                                    {/if}>{Lang::T('By SMS')}</option>
+                                {Lang::T('By SMS')}</option>
                             <option value="email" {if $_c['user_notification_expired']=='email' }selected="selected"
                                 {/if}>{Lang::T('By Email')}</option>
                         </select>
@@ -497,13 +608,12 @@
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Payment Notification')}</label>
                     <div class="col-md-6">
-                            <select name="user_notification_payment" id="user_notification_payment"
+                        <select name="user_notification_payment" id="user_notification_payment" class="form-control">
-                                class="form-control">
                             <option value="none">{Lang::T('None')}</option>
-                                <option value="wa" {if $_c['user_notification_payment']=='wa' }selected="selected"
+                            <option value="wa" {if $_c['user_notification_payment']=='wa' }selected="selected" {/if}>
-                                    {/if}>{Lang::T('By WhatsApp')}</option>
+                                {Lang::T('By WhatsApp')}</option>
-                                <option value="sms" {if $_c['user_notification_payment']=='sms' }selected="selected"
+                            <option value="sms" {if $_c['user_notification_payment']=='sms' }selected="selected" {/if}>
-                                    {/if}>{Lang::T('By SMS')}</option>
+                                {Lang::T('By SMS')}</option>
                             <option value="email" {if $_c['user_notification_payment']=='email' }selected="selected"
                                 {/if}>{Lang::T('By Email')}</option>
                         </select>
@@ -514,26 +624,34 @@
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Reminder Notification')}</label>
                     <div class="col-md-6">
-                            <select name="user_notification_reminder" id="user_notification_reminder"
+                        <select name="user_notification_reminder" id="user_notification_reminder" class="form-control">
-                                class="form-control">
                             <option value="none">{Lang::T('None')}</option>
-                                <option value="wa" {if $_c['user_notification_reminder']=='wa' }selected="selected"
+                            <option value="wa" {if $_c['user_notification_reminder']=='wa' }selected="selected" {/if}>
-                                    {/if}>{Lang::T('By WhatsApp')}</option>
+                                {Lang::T('By WhatsApp')}</option>
-                                <option value="sms" {if $_c['user_notification_reminder']=='sms' }selected="selected"
+                            <option value="sms" {if $_c['user_notification_reminder']=='sms' }selected="selected" {/if}>
-                                    {/if}>{Lang::T('By SMS')}</option>
+                                {Lang::T('By SMS')}</option>
                             <option value="sms" {if $_c['user_notification_reminder']=='email' }selected="selected"
                                 {/if}>{Lang::T('By Email')}</option>
                         </select>
                     </div>
                 </div>
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
         </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="heading12">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse12"
+                    aria-expanded="false" aria-controls="collapse12">
                     {Lang::T('Tawk.to Chat Widget')}
+                </a>
+            </h4>
         </div>
+        <div id="collapse12" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading12">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">https://tawk.to/chat/</label>
@@ -547,33 +665,50 @@
                 <p class="col-md-6 help-block">/ip hotspot walled-garden<br>
                     add dst-host=tawk.to<br>
                     add dst-host=*.tawk.to</p>
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
         </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="heading13">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse13"
+                    aria-expanded="false" aria-controls="collapse13">
                     API Key
+                </a>
+            </h4>
         </div>
+        <div id="collapse13" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading13">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Access Token')}</label>
                     <div class="col-md-6">
-                            <input type="password" class="form-control" id="api_key" name="api_key"
+                        <input type="password" class="form-control" id="api_key" name="api_key" value="{$_c['api_key']}"
-                                value="{$_c['api_key']}"
                             placeholder="{Lang::T('Empty this to randomly created API key')}"
                             onmouseleave="this.type = 'password'" onmouseenter="this.type = 'text'">
                     </div>
                     <p class="col-md-4 help-block">{Lang::T('This Token will act as SuperAdmin/Admin')}</p>
                 </div>
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading">
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
         </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="heading14">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse14"
+                    aria-expanded="false" aria-controls="collapse14">
                     {Lang::T('Proxy')}
+                </a>
+            </h4>
         </div>
+        <div id="collapse14" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading14">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Proxy Server')}</label>
@@ -590,15 +725,23 @@
                             onmouseleave="this.type = 'password'" onmouseenter="this.type = 'text'">
                     </div>
                 </div>
-                </div>
+                <button class="btn btn-success btn-block" type="submit">
-                <div class="panel-heading">
+                    {Lang::T('Save Changes')}
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit">
-                            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
                 </button>
             </div>
-                    {Lang::T('Tax System')}
         </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="heading15">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse15"
+                    aria-expanded="false" aria-controls="collapse15">
+                    {Lang::T('Tax System')}
+                </a>
+            </h4>
+        </div>
+        <div id="collapse15" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading15">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Enable Tax System')}</label>
@@ -619,48 +762,57 @@
                     <div class="col-md-6">
                         <select name="tax_rate" id="tax_rate" class="form-control">
                             <option value="0.5" {if $_c['tax_rate']=='0.5' }selected="selected" {/if}>
-                                    0.5%
+                                0.5
                             </option>
                             <option value="1" {if $_c['tax_rate']=='1' }selected="selected" {/if}>
-                                    1%
+                                1
                             </option>
                             <option value="1.5" {if $_c['tax_rate']=='1.5' }selected="selected" {/if}>
-                                    1.5%
+                                1.5
                             </option>
                             <option value="2" {if $_c['tax_rate']=='2' }selected="selected" {/if}>
-                                    2%
+                                2
                             </option>
                             <option value="5" {if $_c['tax_rate']=='5' }selected="selected" {/if}>
-                                    5%
+                                5
                             </option>
                             <option value="10" {if $_c['tax_rate']=='10' }selected="selected" {/if}>
-                                    10%
+                                10
                             </option>
                             <!-- Custom tax rate option -->
                             <option value="custom" {if $_c['tax_rate']=='custom' }selected="selected" {/if}>
                                 {Lang::T('Custome')}</option>
                         </select>
                     </div>
-                        <p class="help-block col-md-4">{Lang::T('Tax Rates in percentage')}</p>
+                    <p class="help-block col-md-4">{Lang::T('Tax Rates by percentage')}</p>
                 </div>
                 <!-- Custom tax rate input field (initially hidden) -->
                 <div class="form-group" id="customTaxRate" style="display: none;">
                     <label class="col-md-2 control-label">{Lang::T('Custome Tax Rate')}</label>
                     <div class="col-md-6">
-                            <input type="text" value="{$_c['custom_tax_rate']}" class="form-control"
+                        <input type="text" value="{$_c['custom_tax_rate']}" class="form-control" name="custom_tax_rate"
-                                name="custom_tax_rate" id="custom_tax_rate"
+                            id="custom_tax_rate" placeholder="{Lang::T('Enter Custome Tax Rate')}">
-                                placeholder="{Lang::T('Enter Custome Tax Rate')}">
                     </div>
                     <p class="help-block col-md-4">{Lang::T('Enter the custom tax rate (e.g., 3.75 for 3.75%)')}</p>
                 </div>
+
+                <button class="btn btn-success btn-block" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
             </div>
-                <div class="panel-heading" id="Github_Authentication">
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-primary btn-xs" title="save" type="submit"><span
-                                class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
         </div>
+    </div>
+
+    <div class="panel">
+        <div class="panel-heading" role="tab" id="heading16">
+            <h4 class="panel-title">
+                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse16"
+                    aria-expanded="false" aria-controls="collapse16">
                     Github {Lang::T('Authentication')}
+                </a>
+            </h4>
         </div>
+        <div id="collapse16" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading16">
             <div class="panel-body">
                 <div class="form-group">
                     <label class="col-md-2 control-label">{Lang::T('Github Username')}</label>
@@ -680,23 +832,22 @@
                             onmouseleave="this.type = 'password'" onmouseenter="this.type = 'text'">
                     </div>
                     <span class="help-block col-md-4"><a href="https://github.com/settings/tokens/new"
-                                target="_blank">{Lang::T('Create GitHub personal access token')} (classic)</a>, {Lang::T('only need repo
+                            target="_blank">{Lang::T('Create GitHub personal access token')} (classic)</a>,
+                        {Lang::T('only need repo
                         scope')}</span>
                 </div>
                 <div class="form-group">
-                        <label class="control-label col-md-offset-2 col-md-8" style="text-align: left;">{Lang::T('This will allow
+                    <label class="control-label col-md-offset-2 col-md-8" style="text-align: left;">{Lang::T('This
+                        will allow
                         you to download plugin from private/paid repository')}</label>
                 </div>
-                </div>
-            </div>
-
-            <div class="panel-body">
-                <div class="form-group">
                 <button class="btn btn-success btn-block" type="submit">
                     {Lang::T('Save Changes')}
                 </button>
             </div>
         </div>
+    </div>
+</form>
 
 <pre>/ip hotspot walled-garden
     add dst-host={$_domain}
@@ -713,9 +864,6 @@ add dst-host=*.{$_domain}</pre>
     # {Lang::T('Reminder Cronjob Every 7 AM')}
     0 7 * * * cd {$dir} && {$php} cron_reminder.php
     </pre>
-        </div>
-    </div>
-</form>