<div class="row">
    <div class="col-sm-12">
        <p><a href="<?= base_url('admin/pages'); ?>"><i class="fa fa-arrow-left" aria-hidden="true"></i> Kembali ke pages</a></p>
        <h2>Gallery : <?= ucwords('Blue Sky Mantau'); ?></h2>
        <?= $this->session->flashdata('success'); ?>  
    </div>
</div> 
<div class="row"> 
    <?= form_open(base_url().'admin/pages/add_gallery_image/' . $id_pages, array('id'=>'form_edit_gallery')); ?>
    <div class="form-inline"> 
        <div class="col-sm-10"> 
            <button type="submit" name="btn_add_newfoto" value="add_new_foto" class="btn btn-primary">
                <i class="fa fa-plus" aria-hidden="true"></i> <strong>Tambah Image Gallery Baru</strong>
            </button>
        </div>
    </div>
    <script>
        $(document).ready(function(){
            $("form#form_edit_gallery").submit(function(ev){
                ev.preventDefault(); 
                window.location.href= "<?= base_url().'admin/pages/add_gallery_image/' . $id_pages; ?>"; 
            });
        });
    </script>
    </form>
</div> 

<div class="row">
    <div class="col-sm-12">
        <?= form_open(base_url('admin/pages/delete_all_gallery'),array('id'=>'frm_delete_all')); ?>
        <table class="table table-striped"> 
            <thead>
                <tr>
                    <th style="text-align: center;">
                        <button type="submit" id="delall_slc_checkbox" style="background: transparent;border: none;font-size: 23px;cursor: pointer;">
                            <i class="fa fa fa-trash-o"></i>
                        </button>
                        <input id="slcall_checkbox" type="checkbox">
                    </th>
                    <th>Nama Gambar</th>
                    <th>Foto</th>
                   <!--  <th>Varian / SKU</th> -->
                    <th>
                        Urutan 
                        <button style="font-weight: bold;" onclick="refreshDisplayPriority_Gallery();" class="btn btn-sm btn-success" type="button">Ubah</button>
                    </th>
                    <th>Aktif?</th>
                    <th>Edit</th>
                    <th>Hapus</th>
                </tr>
            </thead>
            <tbody>
                <?php if(count($pages_gallery)) : ?> 
                <?php foreach($pages_gallery as $item): ?> 
                    <tr>
                         <td style="text-align: center;">
                            <input class="checkbox_for_del" name="checkbox_for_del[]" value="<?= $item->id; ?>" type="checkbox">
                        </td>
                        <td><?= ucwords($item->header_text_en). " | ".ucwords($item->header_text); ?></td>
                        <td><img style="width:100px;" src="<?= base_url() . 'uploads/gallery/' . $item->img_name; ?>"></td>
                         
                        <td><input data-id="<?= $item->id; ?>" class="inp_change_priority" type="text" style="border: 0;outline: 0;background: transparent;border-bottom: 1px solid gray; text-align: center; width: 40px;" value="<?= $item->priority; ?>"><td>
                        <?php if ($item->is_active == 'yes') : ?>
         
                            <button onclick="exchangeStatusAct('tidak',<?= $item->id; ?>);" type="button" style="border:none; background: transparent;">
                                <span style="padding: 5px; border-radius: 5px; background: silver;">Ya</span>
                                <span style="padding: 5px; border-radius: 5px; ">Tidak</span>                           
                            </button>

                        <?php else : ?>
                            
                            <button onclick="exchangeStatusAct('ya',<?= $item->id; ?>);" type="button" style="border:none; background: transparent;">
                                <span style="padding: 5px; border-radius: 5px; ">Ya</span>
                                <span style="padding: 5px; border-radius: 5px; background: silver;">Tidak</span>                      
                            </button>  

                        <?php endif; ?>  
                        </td>  
                        <td><?= bt_edit('admin/pages/edit_gallery_image/' .  $id_pages . '/' . $item->id); ?></td> 
                        <td><?= bt_delete('admin/pages/delete_gallery_image/' . $id_pages . '/' . $item->id); ?></td>
                    </tr>
                <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                    <td colspan="3">Foto gallery tidak ditemukan.</td>
                    </tr>
                <?php endif; ?> 
            </tbody> 
        </table>
        <?= form_close(); ?>
    </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>
jQuery(document).ready(function($){

    $("form#frm_delete_all").submit(function(ev){
        ev.preventDefault();
        var csrfHash = '<?= $this->security->get_csrf_hash(); ?>';

        if(confirm('Are you sure?')==true){

            var input_check = $( "input[type='checkbox'].checkbox_for_del:checked" );

            var checkbox_del = [[]];

            $.each(input_check,function(idx,key){
                checkbox_del[idx]=$(this).val();
            });

            $.ajax({
                'url'  : "<?= base_url('admin/pages/delete_all_gallery'); ?>",
                'type' : 'POST',  
                'dataType' :'json', 
                'data' : {
                          'checkbox_del' : checkbox_del,   
                          'id_pages': <?= $id_pages; ?>,
                          'csrftestname' : csrfHash
                        }, 
                'success'   : function(res) {
                    // console.log(res);
                    if (res.result == 'sukses') {
                        window.location.href="<?= base_url('admin/pages/edit_gallery/' . $id_pages); ?>";
                    }
                }
            });
        }
    });

    $("input#slcall_checkbox").click(function(){
        
        var input_check = $( "input[type='checkbox'].checkbox_for_del" );

        if($(this).is(':checked')){
            input_check.prop('checked',false); 
            input_check.prop('checked',true); 
        }else{
            input_check.prop('checked',false); 
        }

    });
});

function exchangeStatusAct(earlyStat,this_id){
    var toStat = '';
    var csrfHash = '<?= $this->security->get_csrf_hash(); ?>';

    if (earlyStat == 'ya') {
        toStat = 'Ya';
    }else{
        toStat = 'Tidak';
    }
    
    $.ajax({
        'url'  : "<?= base_url('admin/pages/changeStatusActImages'); ?>",
        'type' : 'POST',  
        'dataType' :'json', 
        'data' : {
                  'this_id' : this_id,
                  'toStat' : toStat,   
                  'csrftestname' : csrfHash
                }, 
        'success'   : function(res) {
            if (res.res == 'sukses') {
                // alert('Successfully');
                location.reload();
            }
        }
    });
}

function refreshDisplayPriority_Gallery(){

    /* if (confirm("Are you sure?")==true) { */

        var inp_change_priority = jQuery("input.inp_change_priority");
        var csrfHash = '<?= $this->security->get_csrf_hash(); ?>';
        var data = [[]];

        jQuery.each(inp_change_priority,function(idx,key){
            data[idx] = {
                id : jQuery(this).data('id'),
                val : jQuery(this).val(),
            };
        }); 
        
        $.ajax({
            'url'  : "<?= base_url('admin/pages/refreshDisplayPriority_Gallery'); ?>",
            'type' : 'POST',  
            'dataType' :'json', 
            'data' : {
                      'this_data' : data,   
                      'case_detail' : 'true',   
                      'csrftestname' : csrfHash
                    }, 
            'success'   : function(res) {
                if (res.res == 'sukses') {
                    // console.log(res.data);
                    // alert('Successfully');
                    location.reload();
                }
            }
        });
    /* } */
}

</script>