<style>
    #key_table tr td{
        text-align: center;
        font-weight: 600;
        width:11.111%;
        font-size:initial;
        cursor:pointer;
    }
    #key_table tr td:hover{
        background-color: #e5e5e5;
    }
    .key-cell{
        min-height:40px;
    }
    .alert-dismissible
    {
        margin-top:20px;
        margin-left:58px;
        border: 1px dashed #4c0870;
        background-color: #fff;
        color: #4E5E6A;
        font-size:16px;
        width: 50%;
    }
</style>
<div class="wrapper">
    <div class="panel invoice">
        <div class="panel-body">
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-3 form-group">
                        <label><?php echo CommonLanguage::getMessage('scale') ?></label>
                        <select id="scale_id" class="full-width" data-init-plugin="select2">
                            <option value="0" disabled selected><?php echo CommonLanguage::getMessage('select')?></option>
                            <?php foreach ($scales as $scale) { ?>
                            <option value="<?php echo $scale['scale_id'] ?>"><?php echo $scale['scale_name'] ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="table-responsive">
                        <div class ="alert alert-info alert-dismissible">
                            <?php print CommonLanguage::getMessage('select_scale_start'); ?>
                        </div>
                        <table class="table table-bordered" id="key_table">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-md" data-backdrop="static" id="updateKeyProduct" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" >
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="scale-key-form" action="javascript:void(0);">
                    <div id="updateKeymodalAlert"><span></span></div>
                    <div class="row form-group m-t-10">
                        <div class="col-md-12">
                            <label><?php echo CommonLanguage::getMessage('Product') ?></label><span class="red-star">*</span>
                            <input class="product_name full-width" id="product_name" name="product_name" type="hidden" required/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger " id="assignProduct" ><?php print CommonLanguage::getMessage('register'); ?></button>
                <button type="button" class="btn btn-primary pull-left" id="unregisterProduct" ><?php print CommonLanguage::getMessage('unregister'); ?></button>
            </div>
        </div>
    </div>
</div>
<script>
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
        Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            key_id = 0;
    $(function () {
        build_select2($("#product_name"), "xhr/ProductSearch?Status_ID=1&on_scale=1")
        $("#key_table").on("click", "tbody tr td", function () {
            var pname = $(this).attr("data-product"),
                product_id = $(this).attr("data-pid");
            key_id = $(this).attr("data-id");
            $("#product_name").val(product_id)
            $("#product_name").attr("data-select-name", pname)
            build_select2($("#product_name"), "xhr/ProductSearch?Status_ID=1&on_scale=1")
            $("#updateKeyProduct").modal("show")
        })
        //register a product on scale
        $("#assignProduct").on("click", function () {
            if(!$("#scale-key-form").valid()){
                return;
            }
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'InventoryAjax/assign_product_key',
                data: {key_id: key_id, pid: $("#product_name").val(), scale_id: $("#scale_id").val()},
                complete: function (data, vv) {
                    if (vv == "success") {
                        if (data.responseJSON[0] == 'OK') {
                            $("#updateKeymodalAlert").attr("class", "alert alert-success").html(Submitted_Successfully)
                            $("#key_table").empty().html(data.responseJSON[1])
                            setTimeout(function () {
                                $("#updateKeymodalAlert").addClass("hidden")
                                $("#updateKeyProduct").modal("hide")
                            }, 1500)
                        } else {
                            $("#updateKeymodalAlert").attr("class", "alert alert-danger").html(Failed_Submit)
                        }
                    } else {
                        $("#updateKeymodalAlert").attr("class", "alert alert-danger").html(Failed_Submit)
                    }
                }
            })
        })
        $("#unregisterProduct").on("click", function () {
            if(!$("#scale-key-form").valid()){
                return;
            }
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'InventoryAjax/unregister_product_key',
                data: {key_id: key_id, scale_id: $("#scale_id").val()},
                complete: function (data, vv) {
                    if (vv == "success") {
                        if (data.responseJSON[0] == 'OK') {
                            $("#updateKeymodalAlert").attr("class", "alert alert-success").html(Submitted_Successfully)
                            $("#key_table").empty().html(data.responseJSON[1])
                            setTimeout(function () {
                                $("#updateKeymodalAlert").addClass("hidden")
                                $("#updateKeyProduct").modal("hide")
                            }, 1500)
                        } else {
                            $("#updateKeymodalAlert").attr("class", "alert alert-danger").html(Failed_Submit)
                        }
                    } else {
                        $("#updateKeymodalAlert").attr("class", "alert alert-danger").html(Failed_Submit)
                    }
                }
            })
        })
        $("#scale_id").on("change", function () {
            $(".alert-dismissible").remove()
            $.ajax({
                url: 'InventoryAjax/product_keys_by_scale',
                data: {scale_id: $("#scale_id").val()},
                complete: function (data, vv) {
                    if (vv == "success") {
                        $("#key_table").empty().html(data.responseText)
                    }
                }
            })
        })
    })
</script>