<script src="<?php echo THEME_PATH ?>js/jquery-barcode.js"></script>
<script src="<?php echo THEME_PATH ?>js/jQuery.print.js"></script>
<div id="Barcode" ></div>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"> <?php print CommonLanguage::getMessage('print_barcodes'); ?></div>
        </div>
        <div class="panel-body">
            <div class="row m-b-20">
                <div class="col-md-3"><label><?php print CommonLanguage::getMessage('Item'); ?></label></div>
                <div class="col-md-3"> <label><?php print CommonLanguage::getMessage('UOM'); ?></label></div>
                <div class="col-md-3"><label><?php print CommonLanguage::getMessage('pricing_class'); ?></label></div>
                <!--                <div class="col-md-3"> <label><?php print CommonLanguage::getMessage('paper_size'); ?></label> </div>-->
            </div>
            <div class="row m-b-20">
                <div class="col-md-3"><input type="text" id="Product" class="form-control AutoComplete "> </div>
                <div class="col-md-3">        <select required name="UOM_ID"  class="full-width UOM_ID " data-init-plugin="select2">
                    <?php foreach ($all_uom as $uom): ?>
                    <option value="<?php echo $uom['UOM_ID']; ?>"><?php echo $uom['UOM_Name']; ?></option>
                    <?php endforeach; ?>
                    </select> </div>
                <div class="col-md-3">
                    <select required id="Select_Class" name="Select_Class"  class="full-width Select_Class " data-init-plugin="select2">
                    </select>
                </div>
                <!--
<div class="col-md-3">        <select required id = "paper_size" name="paper_size"  class="full-width paper_size " data-init-plugin="select2">
<?php foreach ($printer_size as $size): ?>
<option value="<?php echo $size['paper_size']; ?>"><?php echo $size['paper_size']; ?></option>
<?php endforeach; ?>
</select> </div>
-->
            </div>
            <div class="row m-b-20">
                <div class="col-md-3 inline">    
                    <strong><h3><?php echo CommonLanguage::getMessage('barcode') ?> : </h3></strong>
                    <h3><span class="myBarcode" data-code=""></span></h3>
                </div>
            </div>
            <!--
<div class="row">
<div class="col-md-3"><label><?php print CommonLanguage::getMessage('nb_copies'); ?></label> </div>
</div>
-->
            <div class="row">
                <!--                <div class="col-md-3"><input type="number" min="1" value="1" id="print_count" class="form-control  "> </div>-->
                <div class="col-md-3">                        
                    <button class=" btn btn-primary btn-cons m-b-10 "value="Print" onclick="" id="printbtn" type="button"><i class="pg-form"></i> <span class="bold"><?php print CommonLanguage::getMessage('print'); ?></span></button>
                </div>
            </div>
        </div>
    </div>
</div>
 <iframe id="barcode_frame" name="ifrm" style="width:0;height:0;visibility: hidden;" ></iframe><br>
<select required id="Select_UOM" name="Select_UOM"  class="full-width Select_UOM hidden" data-init-plugin="select2">
    <?php foreach ($all_uom as $uom): ?>
    <option value="<?php echo $uom['UOM_ID']; ?>"><?php echo $uom['UOM_Name']; ?></option>
    <?php endforeach; ?>
</select>
<script>
    var zero_price= <?php echo json_encode(CommonLanguage::getMessage('zero_price'))?>;
    $(function () {
        EnableAutoComplete($("#Product"))
        //            $("#Barcode").barcode(Code, "code128",{barWidth:1, barHeight:30,fontSize:13});
        $("#printbtn").on("click", function () {
            $('#barcode_frame').attr('src',"InventoryAjax/PrintBarCode?Code="+$(".myBarcode").attr("data-code")+"&Desc="+$(".myBarcode").attr("data-desc")+"&price="+$("#Select_Class option:selected").attr("data-price"));
            /*var Data = {
                Code: $(".myBarcode").attr("data-code"),
                Desc: $(".myBarcode").attr("data-desc"),
                repeat: $("#print_count").val(),
                price : $("#Select_Class option:selected").attr("data-price"),
                paper_size : $("#paper_size").val()
            };
            $.ajax({
                url: "InventoryAjax/PrintBarCode",
                data: Data,
                dataType:'json',
                complete: function (v1, v2) {
                    $('#barcode_frame').attr('src',v1.responseJSON);
                    //window.frames['ifrm'].document.body.innerHTML = v1.responseJSON;
                    $('#barcode_frame').load(function(){
                        window.frames['ifrm'].print();
                    });
                }
            })*/
        })
    })
    $('.UOM_ID').on("change",function(){
        var Current_Data = {
            uom_id     :$(this).val(),
            product_id :$(".myBarcode").attr("data-id")
        };
        $.ajax({
            url: "xhr/getBarcodebyUom",
            data: Current_Data,
            dataType:'json',
            complete: function (v1, v2) {
                var data = v1.responseJSON;    
                if(v2 == 'success'){
                    $(".myBarcode").attr("data-code",data[0]['Bar_Code'])
                    $(".myBarcode").html(data[0]['Bar_Code'])
                }
            }
        })
    })
    function EnableAutoComplete(who) {
        if (!who.hasClass("AutoAdded")) {
            who.autocomplete({
                source: function (request, response) {
                    $.getJSON('xhr/ajaxProducts', request, function (s, status, xhr) {
                        response(s);
                    });
                },
                minLength: 0,
                select: function (event, ui) {
                    $("#Product").val((ui.item.Name + ' - ' + ui.item.Code))
                    $("select[name=UOM_ID]").empty().html($("#Select_UOM").html()).select2()
//                    $("select[name=UOM_ID] > option[value=" + ui.item.UOM_ID + "]").attr("selected", true)
                    $("select[name=UOM_ID]").val(ui.item.UOM_ID).select2()
                    $(".myBarcode").html(ui.item.Bar_Code)
                    $(".myBarcode").attr("data-id", ui.item.ID)
                    $(".myBarcode").attr("data-code", ui.item.Bar_Code)
                    $(".myBarcode").attr("data-desc", ui.item.Disc)
//                    $("select[name=UOM_ID]").empty().html($("#Select_UOM").html())
                    //                    var units_arr = ui.item.uom;
                    $("select[name=UOM_ID] > option").each(function () {
                        if (!($(this).attr("value") in ui.item.uom)) {
                            $(this).remove()
                        }
                    })
                    $("#Select_Class").empty()
                    var price_select='';
                    price_select += '<option data-price="0" value="0">'+zero_price+'</option>'
                    for( var i = 0 ; i<ui.item.prices.length;i++){
                        price_select += '<option data-price="'+ui.item.prices[i]['Price']+'" value="'+ui.item.prices[i]['Class_ID']+'">'+ui.item.prices[i]['Class_Name']+'</option>'
                    }
                    $("#Select_Class").html(price_select)
                    $("#Select_Class").select2()
                    return false;
                }
            }).focus(function () {
                $(this).autocomplete("search", $(this).val());
            }).autocomplete("instance")._resizeMenu = function (ul, items) {
                this.menu.element.outerWidth((who.width()) + parseFloat(who.css("padding-left")) + parseFloat(who.css("padding-right")) + 2);
            }
            who.autocomplete("instance")._renderItem = function (ul, item) {
                return $("<li>").html("<table cellspacing='0' cellpadding='0'><tr><td class='OnlyText'>" + (item.Name + ' - ' + item.Code) + "</td></tr></table>").appendTo(ul)
            }
            who.addClass("AutoAdded")
        }
        $(document).keydown(function (e) {
            if (e.which == 8 && e.target.tagName.toLowerCase() != "input") {
                e.preventDefault()
            }
        })
    }
</script>
