<script type="text/javascript">
    var mydata = new Array();
    var data = <?php echo $fields; ?>;
    // alert(data);
    $(document).ready(function () {
        $("button").button();
        $("#fields").empty();
        fields = "";
        for (var k in data) {
            if (data.hasOwnProperty(k)) {
                if (k=="photo") {
                        fields = fields + "<div class='form-group'><label for='" + k + "' class='col-sm-2 control-label no-padding-right'>" + k + "</label><div class='col-sm-10'><a href='' class='btn btn-blue' data-toggle='modal' data-target='#customersimagelist' onclick='return imageListFunction(this.id)' id='<?php echo $customerid; ?>'>Choose Photo</a><div id='imagediv' style='margin-top: 15px;'></div><input type='hidden' name='"+ k +"' id='" + k + "' value=''></div></div>";
                } else {
                    fields = fields + "<div class='form-group'><label for='" + k + "' class='col-sm-2 control-label no-padding-right'>" + k + "</label><div class='col-sm-10'><input type='text' name='"+ k +"' class='form-control' id='" + k + "' value='" + data[k] + "'></div></div>";
                }
            }
        }
        $("#fields").append(fields);
    });

    function imageListFunction(id) {
        $.ajax({
            url: base_url + 'partner/customers/Chooosecustomerimage/' + id,
            success: function (data) {
                $("#customerphotogallery").html(data);
            }
        });
    }

    function chooseImageFunction(imgId){
        var img =   $("#img_"+imgId).attr("src");
        $("#imagediv").html("<img src='"+img+"' style='width: 400px;' />");
        $("#photo").val(imgId);
        $("#customersimagelist").modal('toggle');
    }
</script>
<!-- Page Content -->
<div class="page-content">

    <!-- Page Header -->
    <div class="page-header position-relative">
        <div class="header-title">
            <h1><?php echo $customer[0]->NAME; ?></h1>
        </div>
        <!--Header Buttons-->
        <div class="header-buttons">
            <a class="sidebar-toggler" href="#">
                <i class="fa fa-arrows-h"></i>
            </a>
            <a class="refresh" id="refresh-toggler" href="">
                <i class="glyphicon glyphicon-refresh"></i>
            </a>
            <a class="fullscreen" id="fullscreen-toggler" href="#">
                <i class="glyphicon glyphicon-fullscreen"></i>
            </a>
        </div>
        <!--Header Buttons End-->
    </div>
    <!-- /Page Header -->
    <!-- Page Body -->
    <div class="page-body">
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget">
                    <div class="widget-header bordered-bottom bordered-blue">
                        <span class="widget-caption">Label</span>
                    </div>
                    <div class="widget-body">
                        <form class="form-horizontal" role="form" action="<?= site_url() . 'partner/customers/printlabel'; ?>" method="post" name="prodlabel" >
                            <input id="customerid" name="customerid" value="<?= $customerid ?>" type="hidden"/>
                            <div id="fields"></div>
                            <div class='form-group'>
                                <div class='col-sm-offset-2 col-sm-10'>
                                    <button type='submit' class='btn btn-blue'>Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="customersimagelist" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Images list</h4>
                <div class="content" id="customerphotogallery">

                </div>
            </div>
        </div>
    </div>
</div>