<!-- START BREADCRUMB -->
<ul class="breadcrumb push-down-0">
    <li><a href="<?= site_url('admin/dashboard') ?>">Home</a></li>
    <li><a href="<?= site_url('admin/region-list') ?>">Provinces</a></li>
    <li class="active"><?php echo $breadcum ?></li>
</ul>
<!-- END BREADCRUMB -->
<!-- START CONTENT FRAME -->
<div class="content-frame">
    <!-- START CONTENT FRAME TOP -->
    <div class="content-frame-top">
        <div class="page-title">
            <h2><span class="fa fa-image"></span> Gallery</h2>
        </div>
    </div>
    <!-- START CONTENT FRAME RIGHT -->
    <div class="content-frame-right">
        <div class="block push-up-10">
            <form action="<?= site_url('upload-province-images/' . $provinceData['province_id']) ?>" class="dropzone dropzone-mini" id="my-awesome-dropzone" method="post">
            </form>
        </div>
    </div>
    <!-- END CONTENT FRAME RIGHT -->
    <!-- START CONTENT FRAME BODY -->
    <?= form_open(site_url('admin/set-image-order'), array('class' => 'mws-form', 'id' => 'settings')) ?> 
    <div class="content-frame-body content-frame-body-left">
        <div class="gallery contentLeft" id="links"> 
            <?php foreach ($image_data as $image) { ?>
                <a class="gallery-item" href="<?= $this->config->item('uploads'); ?>province_images/<?php echo $provinceData['province_id'] ?>/<?php echo $image['image_name'] ?>" title="<?= $provinceData['province_name'] ?>" data-gallery id="recordsArray_<?= $image['p_img_id'] ?>" style="cursor:move;">
                    <div class="image"> <img src="<?= $this->config->item('uploads'); ?>province_images/<?php echo $provinceData['province_id'] ?>/<?php echo $image['image_name'] ?>" alt="<?= $provinceData['province_name'] ?>"/>
                        <ul class="gallery-item-controls">
                            <li data-href="<?= base_url() . 'admin/province-delete-image/' . $image['p_img_id'] ?>" class="deleteImage"><span><i class="fa fa-times"></i></span></li>
                        </ul>
                    </div>
                </a>
            <?php } ?>
        </div>
    </div>
    <?= form_close() ?>
    <!-- END CONTENT FRAME BODY -->
</div>
<!-- END CONTENT FRAME -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">< </a> <a class="next">></a> <a class="close">x</a> <a class="play-pause"></a>
    <ol class="indicator">
    </ol>
</div>
<script type="text/javascript" src="<?= $this->config->item('adminassets'); ?>js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>
<script type="text/javascript" src="<?= $this->config->item('adminassets'); ?>js/plugins/dropzone/dropzone.min.js"></script>
<!-- END THIS PAGE PLUGINS-->
<!-- END TEMPLATE -->
<script>
    $('body').delegate('.deleteImage', 'click', function () {
        var hrefUrl = $(this).attr('data-href');
        var $this = $(this);
        var box = $("#mb-remove-row");
        box.addClass("open");
        box.find(".mb-control-yes").on("click", function () {
            box.removeClass("open");
            $.ajax({
                type: "POST",
                url: hrefUrl,
                dataType: "json",
                success: function (msg) {
                    $this.parent().parent().parent().remove();
                }
            })
        });
        return false;
    });
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $(".contentLeft").sortable({opacity: 0.6, cursor: 'move', update: function () {
                    var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
                    $.get("<?= site_url('admin/set-image-order') ?>", order, function (theResponse) {
                        $("#contentRight").html(theResponse);
                    });
                }
            });
        });

    });
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
    Dropzone.options.myAwesomeDropzone = {
        addRemoveLinks: false
    };
</script>