<style>
    .PriceVal {
        text-align: center;
        border: none;
        background: #eee;
    }

    .print-only {
        display: none;
    }

    @media print {
        .print-only {
            display: block;
        }

        h4 {
            font-size: 25px !important;
            line-height: 20px !important;
            font-weight: bold;
        }

        .table thead tr th,
        .table tbody tr td {
            border: 1px solid #000 !important;
        }

        .table-bordered {
            border: 1px solid #000 !important;
        }

        .table thead tr>th,
        .table tbody tr td {
            font-size: 1.3em !important;
        }

        .no-print {
            display: none;
        }

    }

    #tableWithSearch thead th.table_price_col div.input_price_div {
        display: flex;
    }

    input.wrong {
        border: 1px solid rgba(255, 0, 0, 0.2);
        background: rgba(255, 0, 0, 0.05);
        /*        width:100%;*/
    }
</style>
<script src="<?php echo THEME_PATH; ?>plugins/jQuery-Scanner-Detection-master/jquery.scannerdetection.js"></script>
<script src="<?php echo THEME_PATH; ?>plugins/jQuery-Scanner-Detection-master/jquery.scannerdetection.compatibility.js"></script>
<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($title); ?></div>
            <div id="UpdateStockSuccess" class="alert alert-success hidden">Submitted Successfully</div>
            <div class="row  form-group">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('pricing_class') ?></label>
                    <span class="fa fa-plus-circle m-l-5 openFrame" data-src="Inventory/pricing_classes<?php echo $is_supp ? '/supp' : '' ?>?is_pop=1" style="color:#8a7dbe;cursor:pointer"></span>
                    <input required id="Class" name="Class" class="full-width Class" type="hidden" autocomplete="off" />
                </div>
                <div class="  col-md-2 <?php echo empty($purchase_id) ? '' : 'hidden' ?>">
                    <label><?php echo CommonLanguage::getMessage('Category') ?></label>
                    <input id="Category" name="Category" class="full-width Category" type="hidden" />
                </div>
                <div class="  col-md-2 <?php echo empty($purchase_id) ? '' : 'hidden' ?>">
                    <label><?php echo CommonLanguage::getMessage('brand') ?></label>
                    <input id="Brand" name="Brand" class="full-width Brand" type="hidden" />
                </div>
                <div class="  col-md-2 <?php echo empty($purchase_id) ? '' : 'hidden' ?>">
                    <label><?php echo CommonLanguage::getMessage('family') ?></label>
                    <input id="family_id" name="family_id" class="full-width family_id" type="hidden" />
                </div>
                <!--                    <div class="  col-md-3 <?php echo (empty($purchase_id) && $is_supp) ? '' : 'hidden' ?>">
<label><?php echo CommonLanguage::getMessage('supplier') ?></label>
<input  id="main_supplier"  name="main_supplier" class="full-width " type="hidden"/>
</div>-->
                <div class="  col-md-2 <?php echo empty($purchase_id) ? '' : 'hidden' ?>">
                    <label><?php echo CommonLanguage::getMessage('barcode') ?></label>
                    <input id="barcode" name="barcode" class="form-control barcode AutoComplete" type="text" autocomplete="off" />
                </div>

            </div>
            <div class="row form-group">
                <div class="  col-md-3 ">
                    <label><?php echo CommonLanguage::getMessage('classes_zero_price') ?></label>
                    <input id="class_zero_price" name="class_zero_price" class="full-width" type="hidden" />
                </div>
                <div class="col-md-3 <?php echo $permissions->hasPermission('Branches') ? '':'hidden'; ?>">
                    <label><?php echo CommonLanguage::getMessage('choose_branch') ?></label>
                    <input id="search_branch_id" type="hidden" class="full-width" name="search_branch_id" >
                </div>


                <div class=" col-md-2 <?php echo empty($purchase_id) && (($is_supp && $permissions->hasPermission('view_cost_supp_pricing_list')) || (!$is_supp && $permissions->hasPermission('view_cost_pricing_list'))) ? '' : 'hidden' ?> pull-right" id="print_with_cost">
                    <label class=""><?php echo CommonLanguage::getMessage('print_with_cost') ?> </label><br />
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table  table-bordered  inventory" id="tableWithSearch">
                    <thead>
                        <tr>
                            <th class="text-center code_table" style="width:10%"><?php print CommonLanguage::getMessage('Code'); ?></th>
                            <th class="text-center"><?php print CommonLanguage::getMessage('Item'); ?></th>
                            <th class="text-center uom_table" style="width:5%"><?php print CommonLanguage::getMessage('UOM'); ?></th>
                            <?php if ((($is_supp && $permissions->hasPermission('view_cost_supp_pricing_list')) || (!$is_supp && $permissions->hasPermission('view_cost_pricing_list')))) { ?>
                                <th class="text-center uom_table" style="width:5%"><?php print CommonLanguage::getMessage('cost'); ?></th>
                            <?php } ?>
                            <th class="text-center table_price_col"><?php print CommonLanguage::getMessage('Price'); ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <?php if ((($permissions->hasPermission('adjustPricingList') && !$is_supp) || ($is_supp && $permissions->hasPermission('adjustSupplierPricingList'))) && smc_session()['default_setting']['sync_type'] != 2) { ?>
                <div class="container-sm-height">
                    <button class=" btn  btn-cons m-b-10 pull-right" <?php echo empty($purchase_id) ? 'disabled' : '' ?> id="AdjustPriceSubmitButton" style="color:#fff;background-color:#4c0870  ;padding-top: 10px;top: 20px;min-width:253px;" type="button"><i class="pg-form"></i> <span class="bold"><?php print CommonLanguage::getMessage('adjust_prices'); ?></span></button>
                </div>
            <?php } ?>

        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-md " data-backdrop="static" id="adjust_modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="pg-close fa-22"></i></span></button>
                <h4 class="modal-title bold"><?php print CommonLanguage::getMessage('adjust') ?></h4>
                <div id="assignAlert"></div>
            </div>
            <div class="modal-body">
                <form id="assignForm">
                    <div class="row">
                        <div class=" col-md-6 m-t-10 ">
                            <label class="labelText"><?php print CommonLanguage::getMessage('source_class'); ?><span class="red-star">*</span></label>
                            <input type="hidden" class="full-width" id="adjust_class" />
                        </div>
                        <div class=" col-md-6 m-t-10 ">
                            <label><?php print CommonLanguage::getMessage('type'); ?><span class="red-star">*</span></label>
                            <select id="adjust_type" class="full-width " data-init-plugin="select2">
                                <option value=""><?php echo CommonLanguage::getMessage('select') ?></option>
                                <option value="0"><?php echo CommonLanguage::getMessage('percent') ?></option>
                                <option value="1"><?php echo CommonLanguage::getMessage('amount') ?></option>
                            </select>
                        </div>
                        <div class=" col-md-6 m-t-10 ">
                            <label><?php print CommonLanguage::getMessage('amount'); ?><span class="red-star">*</span><span class="red-star" id="amt-sym"></span><i class="fa fa-info-circle" title="<?php echo CommonLanguage::getMessage('positive_neg_tooltip') ?>"></i></label>
                            <input type="number" class="form-control" id="adjust_amount" />
                        </div>

                        <div class=" col-md-6 m-t-10 ">
                            <label><?php print CommonLanguage::getMessage('round'); ?></label>
                            <input type="number" class="form-control" id="adjust_round" />
                        </div>
                        <div class=" col-md-6 m-t-10 ">
                            <label><?php print CommonLanguage::getMessage('update_zero'); ?></label>
                            <input type="checkbox" id="update_zero" />
                        </div>

                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close') ?></button>
                <button type="button" class="btn bg-primary white" id="adjust_btn" style="width:auto"><?php print CommonLanguage::getMessage('Save') ?></button>
            </div>
        </div>
    </div>
</div>
<script>
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
        price_input = <?php echo json_encode($permissions->hasPermission('price_input')); ?>,
        supplier_price_input = <?php echo json_encode($permissions->hasPermission('supplier_price_input')); ?>,
        Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
        Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
        hundred_percent_alert = <?php echo json_encode(CommonLanguage::getMessage('hundred_percent_alert')); ?>,
        default_class_name = <?php echo json_encode(smc_session()['pricing_class_name'] . ' - ' . smc_session()['pricing_class_currency_symbol']); ?>,
        default_class_id = <?php echo json_encode(smc_session()['default_setting']['pricing_class_id']); ?>,
        is_supp = <?php echo json_encode($is_supp); ?>,
        is_disc = <?php echo json_encode($is_disc); ?>,
        is_amt = <?php echo json_encode($is_amt); ?>,
        has_cost_perm = <?php echo json_encode((($is_supp && $permissions->hasPermission('view_cost_supp_pricing_list')) || (!$is_supp && $permissions->hasPermission('view_cost_pricing_list')))); ?>,
        title = <?php echo json_encode(CommonLanguage::getMessage('pricing_list')); ?>;
    var table = $('#tableWithSearch');
    var purchase_id = <?php echo json_encode($purchase_id); ?>;
    //here maybe in _custom we overwrite dt_optns like add an options, for that here we check if defined or not
    var dt_optns = (window.init_dt_optns == undefined ? {} : window.init_dt_optns);
    dt_optns = $.extend(true, {}, {
        //        //we stop it and make them visible automatic after rebuild datatble below
        //        cb_ft: function (optns) {
        //            //we need to override columnDefs, so on select class price be able to dynamic add it and be visible
        //            optns.columnDefs = [{targets: '_all', className: 'dt-center', visible: true}];
        //        }
    }, dt_optns);
    //
    $(function() {
        build_select2($("#class_zero_price"), "xhr/PricingClassCurrencySearch?class_ids=-1");
        build_select2($("#adjust_class"), "xhr/PricingClassCurrencySearch?is_last_cost=true");
        if (purchase_id != 0) {
            build_select2($("#adjust_class"), "xhr/PricingClassCurrencySearch?purchase=1");
        }
        build_select2($("#search_branch_id"), "xhr/CommonSearch?col_name=branch_name&col_id=branch_id&table=tbl_organization_branches");

        EnableAutoComplete($('#barcode'))
        build_select2($("#Class"), "xhr/PricingClassCurrencySearch" + (is_supp ? '&is_supp=1' : ''), true);

        build_select2($("#Category"), "xhr/catSearch");
        build_select2($("#Brand"), "xhr/CommonSearch?col_id=brand_id&col_name=brand_name&table=tbl_brand_products")
        build_select2($("#family_id"), "xhr/CommonSearch?col_id=family_id&col_name=family_name&table=tbl_inventory_family")
        //        build_select2($("#main_supplier"), "xhr/supplierSearch");
        new Switchery($("#update_zero").get(0), {
            color: $.Pages.getColor("primary")
        })

        RebuildDataTable(title, [0, 1, 2], 'InventoryAjax/PricingListRequest', {
            Class_ID: $('#Class').select2('data'),
            class_ids: $('#Class').val(),
            Category_ID: $("#Category").val(),
            Brand_ID: $("#Brand").val(),
            bar_code: $("#barcode").val(),
            purchase_id: purchase_id,
            is_disc: is_disc,
            is_supp: is_supp,
            is_amt: is_amt,
            class_zero_price: $("#class_zero_price").val()
        }, '#tableWithSearch', [0, 1], dt_optns);
        add_table_print_btn();
        $("#Class,#Category,#Brand,#class_zero_price,#family_id,#search_branch_id").on("change", function() {
            rebuildPricingTable()
        });
        $("#Class").on("change", function() {
            var class_ids = $(this).val() == '' ? -1 : $(this).val();
            build_select2($("#class_zero_price"), "xhr/PricingClassCurrencySearch?class_ids=" + class_ids);
        });

        $("#tableWithSearch").on("input", ".PriceVal", function() {
            var price = $(this).val(),
                cost = $(this).attr("data-cost");
            percent = parseFloat(((price - cost) / cost) * 100).toFixed(2);
            if (percent >= 0) {
                $(this).parents("td").find(".percent-span").text(percent + ' %').removeClass("red-star")
            } else {
                $(this).parents("td").find(".percent-span").text(percent + ' %').addClass("red-star")
            }

        });
        $('#tableWithSearch').on('input', 'input[name=class_inputs]', function() {
            $('input.PriceVal[data-class=' + $(this).attr('data-class') + ']').val($(this).val())

        })
    });
    $("#tableWithSearch").on("click", "span.adjust-class-btn", function() {
        var symbol = $(this).attr("data-symbol");
        $("#amt-sym").text("( " + symbol + " )");
        $('#adjust_modal .modal-title').html('<?php echo CommonLanguage::getMessage('adjust'); ?> ( ' + $(this).attr('data-name') + ')');
        $("#adjust_modal").attr("data-class", $(this).attr("data-id")).modal("show")
    });
    $("#adjust_btn").on("click", function() {
        $("#assignAlert").addClass("hidden")
        var amount = $("#adjust_amount").val(),
            myclass = $("#adjust_class").val(),
            type = $("#adjust_type").val(),
            round = parseFloat($("#adjust_round").val() || 0),
            adjust_class = $("#adjust_modal").attr("data-class"),
            check_update = $("#update_zero").is(":checked") ? 1 : 0;
        if (amount == '' || myclass == '' || type == '') {
            $("#assignAlert").attr("class", "alert alert-danger").html(Required_Fields)
            return false;
        }
        if (type == 0 && Math.abs(amount) > 100) {
            $("#assignAlert").attr("class", "alert alert-danger").html(hundred_percent_alert)
            return false;
        }
        var is_purchase = 0;
        if (myclass == 0)
            is_purchase = 1;
        //        if (type == 0) {
        var data = {
            id: (is_purchase == 1 ? purchase_id : myclass),
            adjust_class_id: adjust_class,
            is_purchase: is_purchase,
            items: [],
            item_ids: []
        };
        $("input.PriceVal").each(function() {
            data.items.push({
                pid: $(this).attr("data-id"),
                uid: $(this).attr("data-uom")
            })
            data.item_ids.push($(this).attr("data-id"))
        });
        $.ajax({
            url: "InventoryAjax/get_item_prices",
            data: data,
            dataType: 'json',
            complete: function(v1, v2) {
                if (v2 == "success") {
                    var prices = v1.responseJSON;
                    $.each(prices, function(index, value) {
                        if (parseFloat(value['Product_Price']) == 0 && check_update == 0)
                            return;
                        var myval = 0,
                            uom_conversion = (myclass == 0 ? (parseFloat($("input.PriceVal[data-id=" + value['Product_ID'] + "][data-uom=" + value['UOM_ID'] + "][data-class=" + adjust_class + "]").attr('data-uom-conv') || 0)) : 1);
                        var price = parseFloat(value['Product_Price'] || 0) * uom_conversion;
                        //                        console.log(myclass+'==='+uom_conversion+'==='+parseFloat(value['Product_Price'] || 0)+'==='+price)
                        if (type == 0) {
                            myval = price + (parseFloat(amount) * price / 100);
                        } else {
                            myval = price + parseFloat(amount || 0);

                        }
                        if (round > 0) {
                            var roundTo = round,
                                diff = myval % roundTo;
                            var finalTotal = Math.floor(myval / roundTo);
                            //                            console.log(finalTotal+'==='+diff)
                            if (diff >= (roundTo / 2)) {
                                finalTotal++;
                            }
                            //                            console.log(finalTotal+'==='+roundTo)
                            finalTotal = round_number(finalTotal * roundTo);
                            //                            console.log(finalTotal+'===')

                        } else {
                            finalTotal = round_number(myval, 4);
                        }
                        $("input.PriceVal[data-id=" + value['Product_ID'] + "][data-uom=" + value['UOM_ID'] + "][data-class=" + adjust_class + "]").val(finalTotal).trigger("input")
                    })
                    $("#adjust_modal").modal("hide")
                }
            }
        })

        //        }

    })
    $("#AdjustPriceSubmitButton").on("click", function() {
        var Data = {
            is_disc: (is_disc == 1 || is_amt == 1) ? 1 : 0,
            is_supp: is_supp,
            Products: []
        };
        var is_valid = false;
        $("input.PriceVal").removeClass("wrong")
        $("input.PriceVal[data-is-virtual=0]").each(function() {
            var price = is_amt ? (100 - (100 * $(this).val() / (parseFloat($(this).attr("main-price")) || 0))) : $(this).val();
            //            console.log($(this).val()+'==='+$(this).attr("main-price")+'==='+(parseFloat($(this).attr("main_price"))||0))
            var tmp_data = {
                Price: price,
                Class_ID: $(this).attr("data-class"),
                ID: $(this).attr("data-id"),
                uom: $(this).attr("data-uom")
            };
            //            console.log(tmp_data.Class_ID + '===' + tmp_data.ID + '===' + tmp_data.uom + '===' + $(this).val())
            if (tmp_data.Class_ID == '' || tmp_data.ID == '' || tmp_data.uom == '' || parseFloat(tmp_data.Price) < 0 || ((is_disc || is_amt) && parseFloat(tmp_data.Price) > 100)) {
                is_valid = $(this);
                $(this).addClass("wrong");
                return false;
            }
            Data.Products.push(tmp_data);
        });
        if (is_valid !== false) {
            alert('Error Occured..');
            is_valid.focus();
            return false;
        }
        $.ajax({
            url: "InventoryAjax/PricingListAjax",
            method: "POST",
            data: Data,
            complete: function(v1, v2) {

                if (v2 == "success" && v1.responseText == 'ok') {
                    $("#UpdateStockSuccess").attr("class", "alert alert-success").html(Submitted_Successfully)
                } else {
                    $("#UpdateStockSuccess").attr("class", "alert alert-danger").html(Failed_Submit)
                }
                $(document.body).animate({
                    scrollTop: 0
                }, 800)
            }
        });

    })

    function add_table_print_btn() {
        var org_name = org_head[0]['Organization_Legal_Name'],
            org_phone = org_head[0]['Organization_Phone'],
            org_address = org_head[0]['Name'] + '-' + org_head[0]['Organization_Province'];

        var buttons = new $.fn.dataTable.Buttons(table, {
            buttons: [{
                extend: 'print',
                text: '<i class="fa fa-print"></i> Print',
                exportOptions: {
                    "columns": [0, 1, 2, 3]
                },
                title: title,
                customize: function(win) {
                    $(win.document.body)
                        .css('font-size', '50px')
                        .prepend(
                            '<div class="col-xs-6">' +
                            '<h4>' + org_name + '</h4>' +
                            '<h4>' + org_phone + '</h4>' +
                            '<h4>' + org_address + '</h4></div>' +
                            '<img src="' + window.site_link + 'img/logo_white.png" style="margin-rightt:20px;margin-bottom:20px;width:150px;heigth:150px;float:right;position:absolute;opacity:0.5; top:0; right:0;" />'
                        );

                    $(win.document.body).find('table')
                        .addClass('compact')
                        .css({
                            'margin-top': '150px'
                        });
                }
            }]
        }).container().appendTo($('#print_with_cost'));

    }

    function EnableAutoComplete(who) {
        if (!who.hasClass("AutoAdded")) {
            who.autocomplete({
                source: function(request, response) {
                    $.getJSON('xhr/getProductsBarCode?term=' + $(who).val(), request, function(s, status, xhr) {
                        response(s);
                    });
                },
                minLength: 0,
                select: function(event, ui) {
                    //                    console.log($(who).val())
                    $(who).attr('data-id', ui.item.id)
                    $(who).val(ui.item.id)
                    rebuildPricingTable();
                    return false;
                }
            }).focus(function() {
                $(this).autocomplete("search", $(this).val());
            }).autocomplete("instance")._resizeMenu = function(ul, items) {
                this.menu.element.outerWidth((who.width() * (this.element.hasClass("CODE") ? 1 : 2.3)) + parseFloat(who.css("padding-left")) + parseFloat(who.css("padding-right")) + 2);
            }
            who.autocomplete("instance")._renderItem = function(ul, item) {
                var MyType = item.id;
                return $("<li>").html("<table cellspacing='0' cellpadding='0'><tr><td class='OnlyText'>" + MyType + "</td></tr></table>").appendTo(ul)
            }
            who.addClass("AutoAdded")
        }

    }

    function rebuildPricingTable() {
        var classes_count = 0,
            classes_data = [];
        if ($("#Class").val() == '')
            $("#AdjustPriceSubmitButton").attr("disabled", "disabled");
        else {
            $("#AdjustPriceSubmitButton").removeAttr("disabled");
            classes_data = $('#Class').select2('data');
            classes_count = classes_data.length;
        }
        //
        var table_price_cols = $('#tableWithSearch thead th.table_price_col');
        var frst_table_price_col = table_price_cols.first();
        table_price_cols.not(frst_table_price_col).remove();
        var last_price_col;
        var prt_cols = [0, 1, 2],
            col_sort_disabled = [];
        for (var i = 0; i < classes_count; i++) {
            if (i == 0) //first one already exist so don't clone
                last_price_col = frst_table_price_col;
            else
                last_price_col = frst_table_price_col.clone().insertAfter(last_price_col);
            last_price_col.html('<div class="input_price_div"><div class="no-print "><span class="adjust-class-btn" data-symbol="' + (classes_data[i]['text'].split('-')[1]) + '" data-name="' + (classes_data[i]['text'].split('-')[0]) + '" data-id="' + classes_data[i]['id'] + '">' + (is_disc ? '' : (classes_data[i]['is_virtual'] == 0 ? '<i class="fa fa-pencil"></i>' : '')) + '</span>&nbsp;</div>' + classes_data[i]['text'] + ((((price_input && is_supp == 0) || (supplier_price_input && is_supp == 1)) && classes_data[i]['is_virtual'] == 0) ? '<input type="number" data-class="' + classes_data[i]['id'] + '"  name="class_inputs" class="form-control m-l-10 no-print" style="width:110px;"/>' : '') + (is_disc ? '&nbsp;%' : '') + '</div>').attr('class_id', classes_data[i]['id']);
            prt_cols.push((has_cost_perm ? 4 : 3) + i);
            col_sort_disabled.push((has_cost_perm ? 4 : 3) + i);
        }
        var dt_optns = (window.init_dt_optns == undefined ? {} : window.init_dt_optns);
        dt_optns = $.extend(true, {}, {
            cb_ft: function(dt_optns) {
                // stop sorting for column since on click on header checkbox the sorting is triggered
                dt_optns.columnDefs.push({
                    targets: col_sort_disabled,
                    "orderable": false
                });
            }
        }, dt_optns);
        //
        var pric_list_dt = RebuildDataTable(title, prt_cols, 'InventoryAjax/PricingListRequest', {
            Class_ID: $('#Class').select2('data'),
            class_ids: $('#Class').val(),
            Category_ID: $("#Category").val(),
            Brand_ID: $("#Brand").val(),
            family_id: $('#family_id').val(),
            bar_code: $("#barcode").val() ? $("#barcode").attr('data-id') : '',
            purchase_id: purchase_id,
            is_disc: is_disc,
            is_supp: is_supp,
            is_amt: is_amt,
            class_zero_price: $("#class_zero_price").val(),
            search_branch_id: $("#search_branch_id").val()
        }, '#tableWithSearch', [0, 1], dt_optns);
        add_table_print_btn();
        //for all columns make them visible, needed for the new created columns related to selected class price
        pric_list_dt.columns().visible(true);
    }
    $(window).ready(function(e) {
        $(window).scannerDetection({
            focusInputClass: 'barcode',
            minLength: default_barcode_length
        });
        $(window).bind('scannerDetectionComplete', function(e, data) {
            $('#barcode').val(data.string).attr('data-id', data.string);
            rebuildPricingTable()
        }).bind('scannerDetectionError', function(e, data) {}).bind('scannerDetectionReceive', function(e, data) {});
    })
</script>