<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bodyitem">
    <div class="page-content" style="background: #FFFFFF;">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 dropzone">
                <ul id="uploadGalleryImageFormError" class="error_message_box"></ul>
                <?php echo form_open('gkpos/online/upload_gallery_image', array('id' => 'uploadGalleryImageForm')) ?>
                <div>
                    <span class="btn btn-default btn-sm btn-file">
                        <input type="file" name="image">
                    </span>
                </div>
                <div class="fileinput-exists">
                    <input class="btn btn-block btn-danger round btn-sm" type="submit" name="submit_form" value="Upload" onclick="uploadGalleryImage('uploadGalleryImageForm', 'uploadGalleryImageFormError')">
                </div>
                <?php form_close() ?>
                <div class="clearfix"></div>
                <ul>
                    <?php if (!empty($gallery_images)): ?>
                        <?php foreach ($gallery_images as $image) : ?>    
                            <li class="col-md-2">
                                <span class="glyphicon glyphicon-remove-sign gallery-glyphicon title" onclick="deleteGalleryImage(<?php echo $image->id ?>)"></span>
                                <img class="thumbnail" src="<?php echo UPLOAD_PATH . 'gallery/' . $image->image ?>" height="150px" width="150px;"/>
                            </li>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </ul> 
            </div>
        </div>
    </div> 
</div>
<script>
    function deleteGalleryImage(id) {
        $.ajax({
            url: "<?php echo site_url('gkpos/online/delete_image') ?>",
            data: {
                id: id
            },
            type: "POST",
            dataType: "json",
            success: function (json) {
                getSettingPage('<?php echo site_url("gkpos/online/gallery_images") ?>', 'Gallery Images')
            }
        });
    }

    function uploadGalleryImage(formId, error_message_box) {
        
        $('#' + formId).validate({
            submitHandler: function () {
                var myform = document.getElementById(formId);
                var formdata = new FormData(myform);
                $.ajax({
                    url: $('#' + formId).attr('action'),
                    data: formdata,
                    cache: false,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    dataType: 'json',
                    beforeSend: function () {
                        $("#waitingAjaxLoading").show();
                    },
                    success: function (response) {
                        if (response.success) {
                            getSettingPage('<?php echo site_url("gkpos/online/gallery_images") ?>', 'Gallery Images')
                        } else {
                            alert('Image saved failed')
                        }
                    }
                });
            },
            errorClass: "has-error",
            errorLabelContainer: "#" + error_message_box,
            wrapper: "li",
            highlight: function (e) {
                $(e).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (e) {
                $(e).closest('.form-group').removeClass('has-error');
            },
            rules: {
                image: {
                    required: true
                }
            },
            messages: {
                image: "Please upload a image",
            }
        });
    }
</script>