<style>
    .AddButtons .fa{
        cursor:pointer;
    }
    .fa-minus-circle{
        color:#ed9421;
    }
    .fa-plus-circle{
        color:#4c0870; 
    }
</style>
<div class="modal fade " id="EditDepot" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header 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 h-labels bold hidden"> <?php echo CommonLanguage::getMessage('Add_Depot'); ?></h5>
                <h5 class="edit-label h-labels bold hidden"> <?php echo CommonLanguage::getMessage('Edit_Depot'); ?></h5>
            </div>
            <div class="modal-body">
                <div class="row"><?php echo Forms::AlertDiv('depot_alert'); ?></div>
                <form id="EditDepotPostForm" method="POST" onsubmit="return false">
                    <input type="hidden" id="Depot_ID" name="Depot_ID" >
                    <div class="row form-group">
                        <div class="col-md-4">
                            <label><?php print CommonLanguage::getMessage('Name'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text" placeholder="<?php print CommonLanguage::getMessage('Name'); ?>" id="Depot_Name" name="Depot_Name" class="form-control " required>
                        </div>
                        <div class="col-md-4">
                            <label><?php print CommonLanguage::getMessage('Code'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text" placeholder="<?php print CommonLanguage::getMessage('Code'); ?>" id="Depot_Code" name="Depot_Code" class="form-control " required>
                        </div> 
                        <div class="col-md-4">
                            <label><?php print CommonLanguage::getMessage('branch'); ?></label>
                            <span class="red-star">*</span>
                            <?php if ($permissions->hasPermission('org_branches')){ ?>
                                <span class="fa fa-plus-circle m-l-5 openFrame" data-src="ACC/org_branches?is_pop=1" style="color:#4c0870;cursor:pointer"></span>
                            <?php } ?>
                            <input class=" full-width" id="branch_id" name="branch_id" type="hidden"  value="" data-select-name='' required/>
                        </div>
                    </div>
                    <hr class="b-dashed">
                    <div class="row form-group">
                        <div class="col-md-4">
                            <label><?php print CommonLanguage::getMessage('Maximum_Goods'); ?></label>
                            <input type="text" placeholder="<?php print CommonLanguage::getMessage('Maximum_Goods'); ?>" id="Depot_Max_Num_Goods" name="Depot_Max_Num_Goods" class="form-control digits">
                        </div>
                        <div class="col-md-4">
                            <label><?php print CommonLanguage::getMessage('Minimum_Goods'); ?></label>
                            <input type="text" placeholder="<?php print CommonLanguage::getMessage('Maximum_Goods'); ?>" id="Depot_Min_Num_Goods" name="Depot_Min_Num_Goods" class="form-control digits"  >
                        </div> 
                        <div class="col-md-4">
                            <label><?php print CommonLanguage::getMessage('UOM'); ?></label>
                            <span class="fa fa-plus-circle m-l-5 openFrame" data-src="Inventory/GeneralSetting?is_pop=1&ID=2" style="color:#4c0870;cursor:pointer"></span>
                            <input  id="Depot_UOM" name="Depot_UOM" class="full-width Depot_UOM" type="hidden" data-old="" value="" data-select-name='' />
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-4">
                            <label><?php print CommonLanguage::getMessage('location'); ?></label>
                            <input type="text" placeholder="<?php print CommonLanguage::getMessage('location'); ?>" id="Depot_Location" name="Depot_Location" class="form-control " >
                        </div>
                        <div class="col-md-4">
                            <label><?php print CommonLanguage::getMessage('Depot_Area'); ?></label>
                            <input type="text" placeholder="Depot Area" id="Depot_Area" name="Depot_Area" class="form-control digits"  >
                        </div> 
                        <div class="col-md-4">
                            <label><?php print CommonLanguage::getMessage('Type_of_Storage'); ?></label>
                            <input type="text" placeholder="<?php print CommonLanguage::getMessage('Type_of_Storage'); ?>" id="Depot_Type_Of_Storage" name="Depot_Type_Of_Storage" class="form-control " >
                        </div>
                    </div> 
                    <div class="row form-group">
                        <div class="col-md-4">
                            <label><?php print CommonLanguage::getMessage('PIC'); ?></label>
                            <input  id="Depot_PIC_ID" name="Depot_PIC_ID" class="full-width Depot_PIC_ID" type="hidden" data-old="" value="" data-select-name='' />
                        </div>
                        <div class="col-md-4">
                            <label><?php print CommonLanguage::getMessage('Category'); ?></label>
                            <span class="fa fa-plus-circle m-l-5 openFrame" data-src="Inventory/GeneralSetting?is_pop=1&ID=8" style="color:#4c0870;cursor:pointer"></span>
                            <input  id="Depot_Category_ID" name="Depot_Category_ID" class="full-width Depot_Category_ID" type="hidden" data-old="" value="" data-select-name='' />
                        </div> 
                    </div>
                    <div class="row form-group">
                        <div class="col-md-4">
                            <label><?php echo CommonLanguage::getMessage('shelfs_name') ?></label>
                        </div>
                    </div>
                    <div class="form-group row Setting"> 
                        <div  class=" col-md-4 "> 
                            <input type="text" name="depot_shelf_name" autocomplete="off" class="shelf_name form-control">
                        </div>
                        <div class="col-md-2 AddButtons">
                            <span class="fa fa-plus-circle m-t-10 m-r-10" ></span>
                            <span class="fa fa-minus-circle m-t-10" ></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal"> <?php print CommonLanguage::getMessage('Close'); ?> </button>
                <button class="btn btn-bg-complete-darker" id="SubmitUpdateDepot"  > <?php print CommonLanguage::getMessage('Save'); ?>   </button>
            </div>
            <?php echo Forms::ModalLoader('EditDepot_Disabler'); ?>
        </div>
    </div>
</div>
<script>
    $(function(){
        build_select2($(".Depot_UOM"), "xhr/uomSearch")
        build_select2($(".Depot_Category_ID"), "xhr/depotcatSearch")
        build_select2($(".Depot_PIC_ID"), "xhr/employeeSearch")
        build_select2($("#branch_id"), "xhr/CommonSearch?col_id=branch_id&col_name=branch_name&table=tbl_organization_branches");
        $('.new_depot').on('click',function(){
            $("#EditDepot .add-label").removeClass('hidden');
            $('.Setting:gt(0)').remove();
            $('#Depot_ID').val(0);
        });
        $('.edit_depot').on('click',function(){
            $("#EditDepot .edit-label").removeClass('hidden');
            $('#Depot_ID').val($(this).attr('data-id'));
            CommonViewById('StockAjax/getDepotDetails', {Depot_ID: $(this).attr('data-id')},
                           '#EditDepot_Disabler', function (response) {
                var depot_main = response[0],
                    current_shelf_row = $('#EditDepotPostForm .Setting:eq(0)').clone();
                $('#Depot_Name').val(depot_main.Depot_Name);
                $('#Depot_Code').val(depot_main.Depot_Code);               $('#Depot_Max_Num_Goods').val(depot_main.Depot_Max_Num_Goods);
                $('#Depot_Min_Num_Goods').val(depot_main.Depot_Min_Num_Goods);
                $('#Depot_Location').val(depot_main.Depot_Location);
                $('#Depot_Area').val(depot_main.Depot_Area);
                $('#Depot_Type_Of_Storage').val(depot_main.Depot_Type_Of_Storage);

                $('#branch_id').val(depot_main.branch_id).attr('data-select-name',depot_main.branch_name).trigger('change');
                $('#Depot_UOM').val(depot_main.UOM_ID).attr('data-select-name',depot_main.UOM_Name).trigger('change');
                $('#Depot_PIC_ID').val(depot_main.Employee_ID).attr('data-select-name',depot_main.Employee_Name).trigger('change');
                $('#Depot_Category_ID').val(depot_main.Category_ID).attr('data-select-name',depot_main.Category_Name).trigger('change');

                if("shelfs" in response){
                    var shelfs = response['shelfs'];
                    $("#EditDepotPostForm .Setting").remove()
                    $.each(shelfs,function(index,value){
                        current_shelf_row = current_shelf_row == null ? $("#EditDepotPostForm .Setting:eq(0)").clone() : current_shelf_row;
                        $('input[name=depot_shelf_name]',current_shelf_row).val(shelfs[index].shelf_name);
                        $('input[name=depot_shelf_name]',current_shelf_row).attr('data-id',shelfs[index].shelf_depot_id);
                        $("#EditDepotPostForm").append(current_shelf_row);
                        current_shelf_row = null
                    }); 
                }
            });
        });
        $("#EditDepotPostForm").on("click", " .Setting .AddButtons .fa-plus-circle", function (e) {
            var Parent = $(this).closest(".Setting"), NewItem = Parent.clone(false).insertAfter(Parent);
            NewItem.find("input").val('').removeAttr('data-id').removeAttr('value');
            $(".fa-minus-circle",NewItem).css("display", "");
        });
        $("#EditDepotPostForm").on("click", ".Setting .AddButtons .fa-minus-circle", function (e) {
            if($(".Setting").length > 1)
                $(this).closest(".Setting").empty().remove();
        });
        $("#SubmitUpdateDepot").on("click", function () {
            if (!$("#EditDepotPostForm").valid())
                return;
            var Data = new FormData(document.getElementById("EditDepotPostForm")),shelfs_name = [];
            $("#EditDepotPostForm > .Setting").each(function () {
                var me = $(this);
                if ($('.shelf_name',me).val()) {
                    shelfs_name.push({
                        shelf_name: $('.shelf_name',me).val(),
                        shelf_depot_id: $('.shelf_name',me).attr('data-id')
                    });
                }
            });
            Data.append('shelfs_name',JSON.stringify(shelfs_name));
            $("#EditDepot_Disabler").removeClass('hidden');
            $.ajax({
                url: "StockAjax/submitDepot",
                method: "POST",
                dataType:'json',
                data: Data,
                processData: false,
                contentType: false,
                complete: function (jqXHR, status) {
                    if (status == "success") {
                        if (jqXHR.responseJSON[1] == "success") {
                            if($('#Depot_ID').val() != 0){
                                setTimeout(function () {
                                    window.location.href = document.URL;
                                }, 1500);
                            }else{
                                RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2, 3, 4], 'StockAjax/ListDepotRequest');
                            }
                            hideModalAlert('EditDepot', 'depot_alert');
                        }
                        AddAlert("#depot_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#EditDepot_Disabler").addClass("hidden");
                }
            });
        });
    });
</script>