
<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('Category') ?></label>
                        <select id="category_id" class="full-width" data-init-plugin="select2">
                            <option value="0" disabled selected><?php echo CommonLanguage::getMessage('select')?></option>
                            <?php foreach ($categories as $category) { ?>
                            <option value="<?php echo $category['Cat_ID'] ?>"><?php echo $category['Cat_Name'] ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="col-md-3 form-group">
                        <label><?php echo CommonLanguage::getMessage('page_number') ?></label>
                        <select id="page_number" class="full-width" data-init-plugin="select2">
                            <?php for ($i=1;$i<=10;$i++) { ?>
                            <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="table-responsive">
                        <div class ="alert alert-info alert-dismissible">
                            <?php print CommonLanguage::getMessage('select_category_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-wrapper">
            <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>
                    <h5 class="add-label semi-bold"></h5>

                </div>
                <div class="modal-body">
                    <?php echo Forms::AlertDiv('updateKeymodalAlert'); ?>
                    <input type="hidden" name="current_row" id="current_row"/>
                    <input type="hidden" name="current_column" id="current_column"/>
                    <form>
                        <div class="row">
                            <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"/>
                            </div> 
                        </div>
                        <div class="row m-t-10">
                            <div class="col-md-12">
                                <label><?php echo CommonLanguage::getMessage('color');?></label>
                                <input type="text" name="product_color" id="product_color" class="form-control full-width" autocomplete="off"/>
                            </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>
                <?php echo Forms::ModalLoader('assignUnregisterDisabler'); ?>
            </div>
        </div>
    </div>
</div>
<script>
    var Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
        Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>;
            $(function () {
                $('#product_color').colorpicker({format:'hex',autoInputFallback: false});
                build_select2($("#product_name"), "xhr/ProductSearch?cat="+$('#category_id').val())
                $("#key_table").on("click", "tbody tr td", function () {
                    var pname = $(this).attr("data-product"),
                        product_id = $(this).attr("data-pid"),
                        product_color = $(this).attr("data-product-color");
                    $("#product_name").val(product_id)
                    $("#product_name").attr("data-select-name", pname)
                    build_select2($("#product_name"), "xhr/ProductSearch?cat="+$('#category_id').val())
                    $('#current_row').val($(this).attr('data-row'));
                    $('#current_column').val($(this).attr('data-column'));
                    $('#product_color').val(product_color)
                    $("#product_color").trigger('change');
                    $("#updateKeyProduct").modal("show")
                });
                $("#product_name").on('change',function(){
                    CommonViewById('POSAjax/getProductColor',{product_id:$(this).val()},'#assignUnregisterDisabler',function(color){
                        if(color !=0){
                            $('#product_color').val(color)
                            $("#product_color").trigger('change');
                        }

                    }); 
                });

                $("#assignProduct").on("click", function () {
                    if ($("#product_name").val() == '') {
                        $("#updateKeymodalAlert").attr("class", "alert alert-danger").html(Required_Fields)
                        return false;
                    }
                    $('#assignUnregisterDisabler').removeClass('hidden');
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: 'InventoryAjax/assign_product_skip_key',
                        data: { category_id: $("#category_id").val(),page_number:$('#page_number').val(),
                               row_number:$('#current_row').val(),column_number:$('#current_column').val(),
                               product_id:$('#product_name').val(),product_color:$("#product_color").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)
                            }
                            $('#assignUnregisterDisabler').addClass('hidden');
                        }
                    });
                });
                $("#unregisterProduct").on("click", function () {
                    if ($("#product_name").val() == '') {
                        $("#updateKeymodalAlert").attr("class", "alert alert-danger").html(Required_Fields)
                        return false;
                    }
                    $('#assignUnregisterDisabler').removeClass('hidden');
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: 'InventoryAjax/unregister_product_skip_key',
                        data: { category_id: $("#category_id").val(),page_number:$('#page_number').val(),
                               row_number:$('#current_row').val(),column_number:$('#current_column').val(),
                               product_id:$('#product_name').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)
                            }
                            $('#assignUnregisterDisabler').addClass('hidden');
                        }
                    });
                });

                $("#category_id,#page_number").on("change", function () {
                    $(".alert-dismissible").remove()
                    $.ajax({
                        type: 'GET',
                        url: 'InventoryAjax/product_skip_keys',
                        data: {category_id: $("#category_id").val(),page_number:$('#page_number').val()},
                        complete: function (data, vv) {
                            if (vv == "success") {
                                $("#key_table").empty().html(data.responseText)
                            }
                        }
                    });
                });
            });
</script>