
<style>


    .b-r {
        border-left-width: 1px;
    }

    .dropdown a{
        color: #4c0870  !important;
    }

    .HideMe{
        display:none !important;
        position:absolute;
        top:-1000px;
    }


    body{
        overflow:auto
    }
    .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="col-lg-12">
    <div class="panel">
        <ul class="nav nav-tabs nav-tabs-primary nav-tabs-simple" role="tablist" data-init-reponsive-tabs="collapse">
            <li class="active"><a href="#MergeCatTab" data-toggle="tab" role="tab"><?php print CommonLanguage::getMessage('categories');?></a>
            </li>
            <li><a href="#MergeItemTab" data-toggle="tab" role="tab"><?php print CommonLanguage::getMessage('items');?></a>
            </li>
            
        </ul>
        <div class="tab-content">
             <div id="MergeCatSuccess" class="alert alert-success hidden"></div>
            <div class="tab-pane active" id="MergeCatTab">
                <div class="row">
             
            
                <div class="HideMe" id="AjaxIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:1"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" width="200px" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>
                
                <div class="col-md-12" id="MyTable" >
                    
                    <div class="MergeByCategory ">
                    <div class="col-md-12">
                        <div class="col-md-2"><h3> <?php print CommonLanguage::getMessage('Type');?></h3></div>
                        <div class="col-md-3"><h3><?php print CommonLanguage::getMessage('merge_on');?></h3></div>
                        <div class="col-md-6"><h3> <?php print CommonLanguage::getMessage('categories_to_merge');?></h3></div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-md-2">
                            <select id="Product_Type" class="full-width " data-init-plugin="select2">
                                <?php for($i=0;$i<count($productTypes);$i++){?>
                                <option value="<?php echo $productTypes[$i]['Material_Category_ID']?>"><?php echo $productTypes[$i]['Material_Category_Name']?></option>
                                <?php } ?>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select id="Product_Category" class="full-width " data-init-plugin="select2">
                            </select>
                        </div>

                    
                    <div class="col-md-6">
                        <select id="all_types" class="full-width " multiple tabindex="-1" data-init-plugin="select2">
                           <?php for($i=0;$i<count($all_categories);$i++){?>
                                <option value="<?php echo $all_categories[$i]['ID']?>"><?php echo $all_categories[$i]['Name']?></option>
                                <?php } ?>

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

                <br>

            </div>
                 <div class="container-sm-height">
                <button class=" btn  btn-cons m-b-10 pull-right" id="MergeCatSubmit" 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('Save');?></span></button>
            </div>
          
            </div>
            <div class="tab-pane" id="MergeItemTab">
                                <div class="row">
             
            
                <div class="HideMe" id="AjaxIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:1"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" width="200px" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>
                
                <div class="col-md-12" id="MyTable" >
                    
                    <div class="MergeByItem ">
                    <div class="col-md-12">
                        <div class="col-md-2"><h3> <?php print CommonLanguage::getMessage('Type');?></h3></div>
                        <div class="col-md-3"><h3><?php print CommonLanguage::getMessage('merge_on');?></h3></div>
                        <div class="col-md-6"><h3> <?php print CommonLanguage::getMessage('items_to_merge');?></h3></div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-md-2">
                            <select id="Item_Product_Type" class="full-width " data-init-plugin="select2">
                                <?php for($i=0;$i<count($productTypes);$i++){?>
                                <option value="<?php echo $productTypes[$i]['Material_Category_ID']?>"><?php echo $productTypes[$i]['Material_Category_Name']?></option>
                                <?php } ?>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select id="Product_ID" class="full-width " data-init-plugin="select2">
                            </select>
                        </div>

                    
                    <div class="col-md-6">
                        <select id="all_Items" class="full-width " multiple tabindex="-1" data-init-plugin="select2">
                      

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

                <br>

            </div>
                 <div class="container-sm-height">
                <button class=" btn  btn-cons m-b-10 pull-right" id="MergeItemSubmit" 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('Save');?></span></button>
            </div>
       
            </div>
        </div>
    </div>
</div>
</div>

<div class="modal fade stick-up " id="addMergeCatModal" tabindex="-1" role="dialog" aria-hidden="true" style="width:30%;margin:0 auto">
    <div class="modal-dialog  width:5px;">
        <div class="modal-content width: 494px;">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i></button>
                <h5><span class="semi-bold"><?php print CommonLanguage::getMessage('new_category');?></span></h5>
                <div id="addMergeCatAlert"></div>
            </div>
            <div class="modal-body">
                <form id="addMergeCatAlertPostForm" method="POST" onsubmit="return false">
                    <div class="row">
                        <div class="col-md-12" >
                            <div class="col-md-8">
                                <div><label><?php print CommonLanguage::getMessage('Category');?></label></div>
                                <div class="input-group required">
                                    <span class="input-group-addon bg-primary">
                                        <i class="fa fa-ship inputIcon" ></i>
                                    </span>
                                    <input type="text" placeholder="<?php print CommonLanguage::getMessage('Category');?>" id="CategoryToAdd" name="CategoryToAdd" class="form-control "  style="width: 252px; " required>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer ">
                <div class="pull-right">
                    <button class="btn btn-default" id="CloseCategoryToAdd"   > <?php print CommonLanguage::getMessage('Close');?> </button>
                    <button class="btn btn-primary" id="SubmitCategoryToAdd"  > <?php print CommonLanguage::getMessage('Save');?>   </button>
                </div>
            </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'));?>;
     $(function(){

        /***********************************Building Material or product codes on change of category**************************/
        //onChange of Categories of material or product
        $("#Product_Type").on("change",function(){
            var Type = $(this).data("TypeListTarget"),
                Catolder = $("#s2id_"+$(this).attr("id"));
            $("#s2id_Product_Category,#s2id_all_types").append("<div class='LoadingCities' style='position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(180,180,180,0.5);text-align:center'><img style='height:25px;margin-top:5px;' src='img/demo/progress.svg' /></div>")
            Catolder.append("<div class='LoadingCities' style='position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(180,180,180,0.5);text-align:center'></div>")
            $.ajax({
                url:"InventoryAjax/mergeCategoriesItemsAjax",
                dataType:"json",
                data:{ProdType:$(this).val()},
                complete:function(v,vv){
                    $("#Product_Category").select2("destroy").empty()
                    if(vv == "success"){
                        var ToBeAdded = "";
                        for(var x=0;x<v.responseJSON.length;x++){
                            ToBeAdded += "<option value='"+v.responseJSON[x]["ID"]+"'>"+v.responseJSON[x]["Name"]+"</option>"
                        }
                        $("#all_types").html(ToBeAdded);
                        ToBeAdded += "<option value='More'>More</option>"

                        $("#Product_Category").html(ToBeAdded);
                    }
                    $("#Product_Category,#all_types").select2();
                    $(">.LoadingCities",Catolder).remove()
                }
            })
        }).data("MyModuleListTarget","#Module_ID").trigger("change")
        //End of onChange of categories
        
        
        $("#MergeCatSubmit").on("click",function(){
            var Data={
                Type_ID     : $("#Product_Type").val(),
                Category_ID : $("#Product_Category").val(),
                CatToMerge  : $("#all_types").val()
            }
            
            $.ajax({
                url:"InventoryAjax/mergeCategoriesItemsAjax",
                data:Data,
                complete:function(v,vv){
                    
                    if(vv == "success"){
                         $("#MergeCatSuccess").attr("class","alert alert-success").html(Submitted_Successfully)
                        
                    }else{
                        $("#MergeCatSuccess").attr("class","alert alert-danger").html(Failed_Submit)
                    }
                    $(document.body).animate({scrollTop:0},800)
                }
            })
        
            
            
        })
        
        $("#Product_Category").on("change",function(){
            if($(this).val() === 'More'){
                $("#addMergeCatModal").modal("show")
            }
        })
        
        $("#SubmitCategoryToAdd").on("click",function(){
            var Data = {
                Cat_Type: $("#Product_Type").val(),
                CategoryToAdd:$("#CategoryToAdd").val()
            }
//            console.log(Data)
             $.ajax({
                url:"InventoryAjax/mergeCategoriesItemsAjax",
                 dataType:"json",
                data:Data,
                complete:function(v,vv){
                    
                    if(vv == "success" && v1.responseJSON[0] =="OK"){
                        var Data = v.responseJSON[1];
                         $("#addMergeCatAlert").attr("class","alert alert-success").html(Submitted_Successfully)
                         $("#Product_Category").append('<option value="'+Data['ID']+'">'+Data['Name']+'</option>')
                         $("#Product_Category option[value='"+Data['ID']+"']").attr("selected","selected")
                         $("#Product_Category").select2()
                    }else{
                        $("#addMergeCatAlert").attr("class","alert alert-danger").html(v.responseJSON[1][0])
                    }
                     $("#addMergeCatModal").modal("hide")
                     $("#addMergeCatAlert").hide()
                   
                }
            })
        })

   
/********************************************************Merge by Item********************************************************/

 $("#Item_Product_Type").on("change",function(){
            var Type = $(this).data("TypeListTarget"),
                Catolder = $("#s2id_"+$(this).attr("id"));
            $("#s2id_Product_ID,#s2id_all_Items").append("<div class='LoadingCities' style='position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(180,180,180,0.5);text-align:center'><img style='height:25px;margin-top:5px;' src='img/demo/progress.svg' /></div>")
            Catolder.append("<div class='LoadingCities' style='position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(180,180,180,0.5);text-align:center'></div>")
            $.ajax({
                url:"InventoryAjax/mergeCategoriesItemsAjax",
                dataType:"json",
                data:{Material_Category_ID:$(this).val()},
                complete:function(v,vv){
                    $("#Product_ID").select2("destroy").empty()
                    if(vv == "success"){
                        var ToBeAdded = "";
                        for(var x=0;x<v.responseJSON.length;x++){
							ToBeAdded += "<option value='"+v.responseJSON[x]["ID"]+"'>"+v.responseJSON[x]["Code"]+"-"+v.responseJSON[x]["Name"]+"</option>"
						}
                        $("#all_Items,#Product_ID").html(ToBeAdded);

                    }
                    $("#Product_ID,#all_Items").select2();
                    $(">.LoadingCities",Catolder).remove()
                }
            })
        }).data("MyModuleListTarget","#Module_ID").trigger("change")
 
         $("#MergeItemSubmit").on("click",function(){
            var Data={
                Item_Product_Type     : $("#Item_Product_Type").val(),
                Product_ID            : $("#Product_ID").val(),
                ItemToMerge           : $("#all_Items").val()
            }
            
            $.ajax({
                url:"InventoryAjax/mergeCategoriesItemsAjax",
                data:Data,
                complete:function(v,vv){
                    
                    if(vv == "success"){
                         $("#MergeCatSuccess").attr("class","alert alert-success").html(Submitted_Successfully)
                        
                    }else{
                        $("#MergeCatSuccess").attr("class","alert alert-danger").html(Failed_Submit)
                    }
                    $(document.body).animate({scrollTop:0},800)
                }
            })
        
            
            
        })

    })














</script>
