<style>
/* ############################################### */
/* ####### The Switch - the box around the slider ####### */
/* ############################################### */

.switch {
  position: relative;
  display: inline-block;
  width: 60px !important;
  height: 32px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 28px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #98cb54;
}

input:focus + .slider {
  box-shadow: 0 0 1px #98cb54;
}

input:checked + .slider:before {
  -webkit-transform: translateX(28px);
  -ms-transform: translateX(28px);
  transform: translateX(28px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 32px; -moz-border-radius: 32px; -webkit-border-radius: 32px;
}

.slider.round:before {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  
}
/* ############################################### */
/* ##############     The Switch ENDS     ############## */
/* ############################################### */
</style>
<!--
<?php $enable_square_loyalty = !empty($soptions['use_square_loyalty']) ? " checked='checked'" : ""; ?>
 <label class='switch'>
   <input class='' id='' data-toggle='toggle' type='checkbox' name="settings[use_square_loyalty]"<?= $enable_square_loyalty ?> /><span class='slider round'></span>
 </label>  
  -->                       
<div class="tab-pane accordion-content<?= $active_ssettings ?>">
<div class="form form-profile aif" style='width:auto;'>
    <h2 style="margin-top:0px;">
        Category Manager
    </h2>
    
    <table class="admintable" style="margin:10px; width:97%;">
        <tr><th width="300">Image</th><th width="150">Name</th><th width="100">Hide</th></tr>
        <?php
        foreach ($square_categories as $cat) {
            if($cat['image'] !=''){
                    $imgfix = "onerror=\"this.src='/static/images/placeholder_sqcat.jpg'\"";
            } else {
                     $imgfix = "onerror=\"this.src='/static/images/placeholder_sqcat.jpg'\"";
            }          
            if($cat['is_excluded'] == 1){
                $hidden = " checked='checked'";
            } else {
                $hidden = "";
            }     
            //$hidden = " checked='checked'";          
            echo "<tr data-id='{$cat['id']}' data-checked='{$cat['is_excluded']}'>
            <td style='padding:10px;'><img src='{$cat['image']}' alt='{$cat['name']}' style='width:100%; height:auto;' {$imgfix} /></td>
            <td style='padding:10px; font-weight:600;'>{$cat['name']}<br />
				<span style='font-weight:300;'>Sort Order:</span> <span style='color:#ff0000; font-weight:600'>{$cat['order_num']}</span>
			</td>
            <td style='padding:10px; text-align:center;'>              
                <label class='switch is_excludeddiv'>
                    <input name='switch' data-id='{$cat['id']}' class='hiddenval' data-toggle='toggle' type='checkbox' {$hidden} value='{$cat['is_excluded']}' />
                    <span class='slider round' value='{$cat['is_excluded']}'></span>
                </label>
             </td>
            </tr>
            <tr>
            <td colspan='2' style='color:#ccc;'>SQID: {$cat['square_id']}</td>
            <td style='text-align:center;'> <i class='fa fa-angle-up'></i> <a href='?square_cat&edit={$cat['id']}'>edit</a> | <a href='?square_cat&delete={$cat['id']}' class='confirm'>delete</a></td>
            </tr>";
        }
        ?>
    </table>
    
    <div style="margin:10px; display:nonex;">
        <a href='?square_cat&add' class='btn btn-blue'>Add New</a>
    </div>
                            
</div><!-- FORM AIF ENDS -->
</div><!-- TAB ENDS -->