<div class="row">
    <div class="col-sm-12">
         <p><a href="<?= base_url('admin/homepage'); ?>"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back to Homepage</a></p><br>
        <h2>Slideshow Administration</h2>
        <p>Include homepage and customer references in category pages</p>
        <?= $this->session->flashdata('success'); //to display success message ?> 
        <?= $this->session->flashdata('result'); //to display result message ?> 
    </div><!-- end class="col-sm-12" -->
</div> <!-- end row -->    

<div class="row">
    <div class="col-sm-12">
        <br>
         <?php if($allowed == true) : ?>
             <p><?= anchor('admin/home_slideshow/add', '<i class="fa fa-plus" aria-hidden="true"></i> <strong>ADD A NEW HOME SLIDESHOW</strong>'); ?></p> 
         <?php endif; ?>
    </div><!-- end class="col-sm-12" -->
</div> <!-- end row -->     

<div class="row">
    <div class="col-sm-12">
        <table class="table table-striped"> 
            <thead>
                <tr>
                    <th>Banner Name</th>
                    <th>Type</th>
                    <th>Ordering</th>
                    <th>Display</th>
                    <th>View</th>
                    <?php if($allowed == true && $role != 'admin') : ?>
                        <th>Delete</th>
                    <?php endif; ?>    
                </tr>
            </thead>
            <tbody>
                <?php if(count($home_slideshow)) : ?> 
                <?php foreach($home_slideshow as $item): ?>
                    <tr>
                        <?php if(!empty($item->image)) : ?>
                        <td><img style="width:200px;" src="<?= base_url() . 'uploads/banners/' . $item->image; ?>"><br><?= ucfirst($item->title); ?></td>
                        <?php else :?>
                            <td><img style="width:200px;" src="<?= base_url() . 'uploads/banners/' . $item->image_mobile; ?>"><br><?= ucfirst($item->title); ?></td>
                        <?php endif;?>

                        <td>
                                <?= $item->slide_type; ?>
                        </td>
                        <td><?= $item->priority; ?></td>
                        <td>
                        <?php if ($item->status == 1) :?>
                               <button class="wrapper" onclick="changeStatus('Tidak',<?= $item->id_home_slideshow?>)" type="button" style="border: none; background: transparent;">
                                   <div class="on-off onoff-on"></div>
                               </button>
                        <?php else :?>
                            <button class="wrapper" onclick="changeStatus('Ya',<?= $item->id_home_slideshow?>)" type="button" style="border: none; background: transparent;">
                                   <div class="on-off onoff-off"></div>
                            </button>
                        <?php endif;?> 
                        </td>

                        <td><?= bt_edit('admin/home_slideshow/edit/' . $item->id_home_slideshow); ?></td>
                        <?php if($allowed == true && $role != 'admin') : ?>
                            <td><?= bt_delete('admin/home_slideshow/delete/' . $item->id_home_slideshow); ?></td>
                        <?php endif; ?>
                    </tr>
                <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                    <td colspan="3">We could not find any home slideshow.</td>
                    </tr>
                <?php endif; ?>

            </tbody> 
        </table>
    </div><!-- end class="col-sm-12" -->
</div> <!-- end row -->  

<div class="row">
    <div class="col-sm-12">
        <?php
        //create pagination...
        echo '<p style="text-align:center;">' . $this->pagination->create_links() . '</p>';
        ?>
    </div><!-- end class="col-sm-12" -->
</div> <!-- end row --> 

<script>
    
    $(document).on('click', '.on-off',function(){
        $(this).toggleClass('onoff-on');
        $(this).toggleClass('onoff-off');
    });


    function changeStatus(currentStat,this_id){
        var switch_slide = '';
        var csrfHash = '<?= $this->security->get_csrf_hash(); ?>';

        if (currentStat == 'Ya') {

            switch_slide = 'Ya';

        } else {

            switch_slide = 'Tidak';
        }

        $.ajax({

            'url'  : "<?= base_url('admin/home_slideshow/ajax_update_slideactive'); ?>",
            'type' : 'POST',  
            'dataType' :'json', 
            'data' : {
                      'this_id' : this_id,
                      'switch_slide' : switch_slide,   
                      'csrftestname' : csrfHash
                    }, 
            'success'   : function(res) {
                if (res.res == 'sukses') {
                    // alert('Successfully');
                    location.reload();
                }
            }

        });
    }
</script>