<style type="text/css">
@media print
{
.noprint {display:none;}
}
</style>
<?php $REMOTE=REMOTE;?>
<div class="wrapper">
    <div class="container"> 
       
    <?php if ($this->session->flashdata('success_msg') && $this->session->flashdata('success_msg') != "") { ?>
                    <div class="row hidden-print">
                        <div class="col-sm-12">
                            <div class="alert alert-success">
                                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                <strong>Success!</strong> <?php echo $this->session->flashdata('success_msg'); ?>
                            </div>
                        </div>
                    </div>
                <?php } ?>
                <?php if ($this->session->flashdata('error_msg') && $this->session->flashdata('error_msg') != "") { ?>
                    <div class="row hidden-print">
                        <div class="col-sm-12">
                            <div class="alert alert-danger">
                                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                <strong>Error!</strong> <?php echo $this->session->flashdata('error_msg'); ?>
                            </div>
                        </div>
                    </div>
                <?php } ?>
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <?php if(!isset($REMOTE) || $REMOTE=="No"){  ?>
                    <button type="button"  onclick="openaddnew();" class="btn btn-custom waves-effect waves-light" >Add <span class="m-l-5"><i class="fa fa-plus"></i></span></button>
                    <?php } ?>
                </div>
                <h4 class="page-title" ><?php echo $product[0]['product']." | ".$product[0]['id_business_products'];  ?>  Images</h4>
            </div>
        </div> 
        <div class="row">  
            <div class="col-sm-12">
                <div class="card-box table-responsive">
                    
                    <h4 class="header-title m-t-0 m-b-30">&nbsp;</h4> 
                    <table id="datatable-buttons" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th >ID</th>
                                <th>Product Name</th>
                                <th>Image</th>
                                <th>Status</th>
                                <!-- <th></th> -->
                                <th class='noprint'>Action</th>
                            </tr>
                        </thead>

                        <tbody>
                            <?php if(isset($get_product_images)) { foreach ($get_product_images as $row){ ?>
                            <tr>
                              <td><?php echo  $row->id_product_image ?></td>
                              <td><?php echo  $row->product ?></td>
                              <td><img class="card-img-top" src="<?php echo base_url(); ?>assets/images/productImages/<?php echo  $row->image_path ?>" alt="Card image cap" width="70px" height="70px" ></td>
                              <!-- <td><?php echo  $row->status ?> </td> -->
                              <td>
                              <select name="update_status_of_product_images" class="form-control change_each_img_status" data-productid="<?php echo $row->product_id  ?>" data-idproductimage="<?php echo  $row->id_product_image  ?>" >  
                                <option value="main" <?php echo $row->status == "main" ? "selected" : "" ?>>Set as product image</option>
                                <option value="ads" <?php echo $row->status == "ads" ? "selected" : "" ?>>Set as  advertisement</option>
                                <option value="none" <?php echo $row->status == "none" ? "selected" : "" ?>>Set as None</option> 
                             </select>  
                              </td>
                              <td><button type="button"  class="btn waves-effect waves-light btn-sm btn-danger m-b-5 delete_image_btn"  data-productid="<?php echo $row->product_id  ?>" data-idproductimage="<?php echo  $row->id_product_image  ?>"><i class="fa fa-trash-o"></i></button></td>
                              </tr>
                            <?php }} ?>
                        </tbody>
                    </table>
                </div>
            </div><!-- end col -->
        </div>
        <!-- end row -->
        
        <!--Modals-->
         
        <!--Add Brand Modal-->
        <div id="addproductimage" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="addproductimage" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content"> 
                <form  action="<?php echo base_url();?>storeproductimages" method="POST" enctype="multipart/form-data">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="custom-width-modalLabel">Add Product Images</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="product_image" class="control-label">Select Product Images</label> 
                                        <input type="file" class="form-control" placeholder="images"  name="product_image[]" multiple > 
                                        <input id='id_business_products' name='id_business_products' type='hidden' value="<?php echo $product[0]['id_business_products']; ?>" />
                                    </div> 
                                </div> 
                            </div> 
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <p class="text-danger">Only PNG, JPG, and JPEG files are allowed</p>
                                    </div> 
                                </div> 
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                            <!-- Change type to submit -->
                            <button type="submit" class="btn btn-custom waves-effect waves-light">Save</button>
                        </div> 
                    </form>

                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End Brand Modal--> 
        <script>
           $(document).ready(function() {    
                // updating product image 
                $(document).on("change",'.change_each_img_status',function(){
                     var product_id_for_edit = $(this).data('productid'); 
                     var id_product_img_for_edit = $(this).data('idproductimage');   
                     var img_status = $(this).val();   
                     var this_btn = $(this); 
                    $.ajax({
                        type: 'POST',
                        url: '<?php echo base_url(); ?>product_controller/update_product_image',
                        data: {productid:product_id_for_edit ,idproduct_image:id_product_img_for_edit,status:img_status},
                        dataType: "json",
                        cache: false,
                        async: true,
                        success: function(data){    
                             
                            if(data.warning_status !='success'){ 
                                swal({
                                    title: 'you had already marked the product main image, please remove that first!',
                                    type: 'warning',
                                    confirmButtonText: 'OK!'
                                });
                                return false; 
                            }else{
                                swal({
                                    title: 'Product image updated Successfully.',
                                    type: 'success',
                                    confirmButtonText: 'OK!'
                                });
                            }
                        }
                   });
                   
                });    

                // delete image btn  
                $(document).on("click",".delete_image_btn", function(){ 

                   var productid = $(this).data('productid');
                   var idproductimage = $(this).data('idproductimage');   
                   var this_btn =$(this);
                   swal({
                        title: "Are you sure?",
                        text: "This action will remove all details of this product!",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonClass: 'btn-warning',
                        confirmButtonText: "Yes, remove it!",
                        closeOnConfirm: true
                    }, function() {  

                            $.ajax({
                            type: 'POST',
                            url: '<?php echo base_url(); ?>product_controller/delete_product_image',
                            data: {product_id: productid ,idproduct_image:idproductimage},
                            dataType: "json",
                            cache: false,
                            async: true,
                            success: function(data){   
                                    if(data > 0){ 
                                        this_btn.closest('tr').remove();
                                    }

                                }
                            });
                       
                    }); 
                    
                });

                $('#datatable-buttons').DataTable({
                    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    stateSave: true,
                    dom: "Bfrtlip",
                    buttons: [{extend: "copy", className: "btn-sm btn-custom btn-trans"}, {extend: "csv", className: "btn-sm btn-pink btn-trans"}, {
                            extend: "excel",
                            className: "btn-sm btn-warning btn-trans"
                        }, {extend: "pdf", className: "btn-sm btn-purple btn-trans"}],
                    responsive: !0
                });
                
                
                 toastr.options = {
                    "closeButton": true,
                    "debug": true,
                    "newestOnTop": true,
                    "progressBar": true,
                    "positionClass": "toast-bottom-center",
                    "preventDuplicates": true,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }
                
            });

            function deletebrand(brandid){
                
                //Warning Message
                swal({
                    title: "Are you sure?",
                    text: "This action will also remove all services in this category!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonClass: 'btn-warning',
                    confirmButtonText: "Yes, remove it!",
                    closeOnConfirm: true
                }, function (){
                    $.ajax({
                        type: 'POST',
                        url: 'product_controller/delete_brand',
                        data: {id_business_brands: brandid},
                        success: function(data) {
                            var result = data.split("|");
                            
                            if (result[0] === "success") {
                                swal("Deleted!", "Brand and all its Products have been removed.", "success");
                                location.reload();
                            } else {
                                swal("Error!", "Brand was not removed!.", "error");
                            }
                        } 
                    });
                });
            }
            
            function openaddnew(){
                $("#addproductimage").modal('show');
            }
            function addnew(){ 
            
            }
            
            function openupdate(product_id , id_product_image){
                  $.ajax({
                        type: 'POST',
                        url: '<?php echo base_url(); ?>product_controller/edit_product_image',
                        data: {productid: product_id ,idproduct_image:id_product_image},
                        dataType: "json",
                        cache: false,
                        async: true,
                        success: function(data){   
                          if(data.id_product_image > 0){ 

                            var options='  <option value="main" ' + ( data.status == "main" ? 'selected' : '') + '>Set as product image</option><option value="ads" ' + ( data.status == "ads" ? 'selected' : '') + '>Set as  advertisement</option><option value="none" ' + ( data.status == "none" ? 'selected' : '') + '>Set as None</option>'; 
                            $("#update_status_of_product_images").html(options); 
                            $("#id_product_img_for_edit").val(data.id_product_image);
                            $("#product_id_for_edit").val(data.product_id); 
                           $("#editproductimage").modal('show');

                          }else{

                          }
          
                        
                    }
                });
            } 

        </script>