<style type="text/css">
    .CenterText {
        border: 0;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    .popover-content {
        width: 230px;
    }

    .popover.top>.arrow {
        left: 35px;
    }

    .CenterText td {
        font-size: 18px;
        vertical-align: middle;
    }

    .cat_name {
        font-size: 1.2em;
        text-align: center;
        /*padding-top: 34px;*/
    }

    .panel-facebook {
        max-height: 100px;
    }

    .venobox {
        color: #fff !important;
    }

    .Working {
        text-align: center;
    }

    .panel-facebook {
        height: 150px;
        text-align: center;
        width: 100%;
        color: #fff;

    }

    .ADDCAT a {
        color: #fff !important;
        opacity: 1;
    }
</style>
<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('pos_control_panel'); ?></div>
            <?php if (smc_session()['default_setting']['sync_type'] != 2) { ?>
                <div class="pull-right">
                    <div class="col-xs-12">
                        <div class="label bg-primary ADDCAT"><a href="javascript:;" class="mainPageLinks" data-toggle="modal" data-target="#create-pos-cat-modal" type="button">+ <?php echo CommonLanguage::getMessage('Category'); ?></a></div>
                    </div>
                </div>
            <?php } ?>
            <div class="clearfix"></div>
        </div>
        <style>
            .wrapper {
                display: inline-flex;
                background: #fff;
                height: 100px;
                width: 400px;
                align-items: center;
                justify-content: space-evenly;
                border-radius: 5px;
                padding: 20px 15px;
                box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
            }

            .wrapper .option {
                background: #fff;
                height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                margin: 0 10px;
                border-radius: 5px;
                cursor: pointer;
                padding: 0 10px;
                border: 2px solid lightgrey;
                transition: all 0.3s ease;
            }

            .wrapper .option .dot {
                height: 20px;
                width: 20px;
                background: #d9d9d9;
                border-radius: 50%;
                position: relative;
            }

            .wrapper .option .dot::before {
                position: absolute;
                content: "";
                top: 4px;
                left: 4px;
                width: 12px;
                height: 12px;
                background: #0069d9;
                border-radius: 50%;
                opacity: 0;
                transform: scale(1.5);
                transition: all 0.3s ease;
            }

            input[type="radio"] {
                display: none;
            }

            #option-1:checked:checked~.option-1,
            #option-2:checked:checked~.option-2 {
                border-color: #0069d9;
                background: #0069d9;
            }

            #option-1:checked:checked~.option-1 .dot,
            #option-2:checked:checked~.option-2 .dot {
                background: #fff;
            }

            #option-1:checked:checked~.option-1 .dot::before,
            #option-2:checked:checked~.option-2 .dot::before {
                opacity: 1;
                transform: scale(1);
            }

            .wrapper .option span {
                font-size: 20px;
                color: #808080;
            }

            #option-1:checked:checked~.option-1 span,
            #option-2:checked:checked~.option-2 span {
                color: #fff;
            }
        </style>
        <div class="panel-body MainCatContainer">
            <div class="row form-group">
                <div class="col-md-1 ">
                    <div class="wrapper">
                        <input type="radio" name="select" id="option-1"  <?php echo $sort_by_check == 'Newest' ? 'checked':''; ?> >
                        <input type="radio" name="select" id="option-2"  <?php echo $sort_by_check == 'letters' ? 'checked':''; ?> >
                        <label for="option-1" class="option option-1">
                            <div class="dot"></div>
                            <span><?php print CommonLanguage::getMessage('Newest'); ?></span>
                        </label>
                        <label for="option-2" class="option option-2">
                            <div class="dot"></div>
                            <span><?php print CommonLanguage::getMessage('Letters'); ?></span>
                        </label>
                    </div>
                </div>
            </div>
            <?php for ($i = 0; $i < count($list); $i++) : ?>
                <div class="col-md-2 col-xs-3">
                    <div class="panel panel-default">
                        <a style="color:#ACB4BE" href="Inventory/POSCat/<?php echo $list[$i][0]; ?>">
                            <div style="<?php echo $list[$i][5] ? 'background:url(\'' . upload_url . 'category_photos/' . $list[$i][0] . '.jpg\');border-bottom: 1px solid black;text-shadow:0 0 3px black;background-size: contain;background-repeat: no-repeat;background-position: center center;' : 'background: #4c0870 !important;'; ?>" class="panel-facebook">
                                <table class="CenterText">
                                    <tr>
                                        <td class="BoxCaption"><?php echo $list[$i][1]; ?></td>
                                        <td class="CategoryOrder"><?php echo '(' . $list[$i][3] . ')'; ?></td>
                                    </tr>
                                </table>
                            </div>
                        </a>
                        <?php if (smc_session()['default_setting']['sync_type'] != 2) { ?>
                            <div class="panel-body">
                                <a style="color:#ACB4BE" href="">
                                    <a data-is-hide="<?php echo $list[$i][2]; ?>" data-order-id="<?php echo $list[$i][3]; ?>" data-parent-id="<?php echo $list[$i][6]; ?>" data-parent-name="<?php echo $list[$i][7] ?>" data-category-description="<?php echo $list[$i][8] ?>" data-category-prefix-barcode="<?php echo $list[$i][9] ?>" class="btn btn-primary btn-xs CategoryRenamer" data-color="<?php echo $list[$i][4]; ?>" data-toggle="confirmation-popout" data-placement="top"><?php print CommonLanguage::getMessage('Edit'); ?></a>
                                    <a data-is-hide="<?php echo $list[$i][2]; ?>" data-cat-name="<?php echo $list[$i][1]; ?>" data-href="<?php echo $list[$i][0]; ?>" class="CategoryRemoverButton btn btn-danger btn-xs" href="#"><?php print CommonLanguage::getMessage('delete'); ?></a>
                                    <?php echo $list[$i][5] ? '<span class="fa fa-trash red-star delete_image" data-content="' . $list[$i][0] . '" style="cursor:pointer;"></span>' : ''; ?>
                                </a>
                            </div>
                        <?php } ?>
                    </div>
                </div>
            <?php endfor; ?>
            <?php echo Forms::ModalLoader('MainCategoryLoader'); ?>
        </div>
    </div>
</div>
<!-- Create CAT modal -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="role-mode" id="create-pos-cat-modal" 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>
                <h5 class="semi-bold"><?php print CommonLanguage::getMessage('new_category'); ?></h5>
            </div>
            <div class="modal-body">
                <form id="AddCategoryPostForm" method="POST" onsubmit="return false">
                    <div class="row">
                        <?php echo Forms::AlertDiv('add_alert_category'); ?>
                        <div class=" col-md-12">
                            <label><?php print CommonLanguage::getMessage('category_name'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text" autocomplete="off" name="Category_Name" placeholder="<?php print CommonLanguage::getMessage('category_name'); ?>" id="Cat_Name" class="form-control input-rounded" required>
                        </div>
                        
                        <div class="col-md-12 <?php echo $permissions->hasPermission('Branches') ? '':'hidden'; ?>">
                            <label><?php echo CommonLanguage::getMessage('choose_branch') ?></label>
                            <input id="multi_branch_id" type="hidden" class="full-width" name="multi_branch_id"  >
                        </div>

                        <div class=" col-md-12 <?php echo smc_session()['default_setting']['enable_category_barcode']? "":"hidden"; ?>">
                            <label><?php print CommonLanguage::getMessage('category_description'); ?></label>
                            <input type="text" autocomplete="off" name="category_description" placeholder="<?php print CommonLanguage::getMessage('category_description'); ?>" id="category_description" class="form-control input-rounded">
                        </div>
                        <div class=" col-md-12 <?php echo smc_session()['default_setting']['enable_category_barcode']? "":"hidden"; ?>">
                            <label><?php print CommonLanguage::getMessage('category_prefix_barcode'); ?></label>
                            <span class="red-star" id="barcode_note"></span>
                            <input type="number" min="0" max="9999999999999" autocomplete="off" name="category_prefix_barcode" placeholder="<?php print CommonLanguage::getMessage('category_prefix_barcode'); ?>" id="category_prefix_barcode" class="form-control input-rounded">
                        </div>

                        <div class="col-md-12">
                            <label><?php print CommonLanguage::getMessage('sort_order'); ?></label>
                            <input type="number" min="1" value="0" name="order_id" id="order_id" class="form-control input-rounded" >
                        </div>
                        <div class="col-md-12">
                            <label><?php print CommonLanguage::getMessage('color'); ?></label>
                            <input type="text" autocomplete="off" placeholder="" id="category_color" class="form-control input-rounded">
                        </div>
                        <div class="col-md-12">
                            <label><?php print CommonLanguage::getMessage('image'); ?></label>
                            <input type="file" name="new_image_name" onchange="validateImage(this)" class="form-control input-rounded" data-max-size='60' />
                        </div>
                        <div class="col-md-12">
                            <div class="checkbox  check-primary">
                                <input type="checkbox" name="hide_pos" id="hide_pos">
                                <label for="hide_pos"><?php print CommonLanguage::getMessage('hide_pos'); ?></label>
                            </div>
                        </div>
                        <div class=" col-md-12">
                            <label><?php print CommonLanguage::getMessage('parent'); ?></label>
                            <input type="hidden" autocomplete="off" name="Parent_ID" id="Parent_ID" class="full-width input-rounded">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="CloseAdd_Cat" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button type="submit" class="btn btn-primary disabled" id="Add_Cat"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
            <?php echo Forms::ModalLoader('addCategoryLoader'); ?>
        </div>
    </div>
</div>
<!-- End of Modal -->
<!-- Edit CAT modal -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="role-mode" id="edit-pos-cat-modal" 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>
                <h5 class="semi-bold"><?php print CommonLanguage::getMessage('edit_category'); ?></h5>
            </div>
            <div class="modal-body">
                <form id="EditCategoryPostForm" method="POST" onsubmit="return false">
                    <div class="row">
                        <?php echo Forms::AlertDiv('edit_alert_category'); ?>
                        <div class="col-md-12">
                            <label><?php print CommonLanguage::getMessage('category_name'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text" name="Category_Name" placeholder="<?php print CommonLanguage::getMessage('category_name'); ?>" id="Cat_Name_To_Edit" class="form-control input-rounded" autocomplete="off" required>
                        </div>
                        
                        <div class="col-md-12 <?php echo $permissions->hasPermission('Branches') ? '':'hidden'; ?>">
                            <label><?php echo CommonLanguage::getMessage('choose_branch') ?></label>
                            <input id="multi_branch_id_edit" type="hidden" class="full-width" name="multi_branch_id_edit"  >
                        </div>

                        <div class=" col-md-12 <?php echo smc_session()['default_setting']['enable_category_barcode']? "":"hidden"; ?>">
                            <label><?php print CommonLanguage::getMessage('category_description'); ?></label>
                            <input type="text" autocomplete="off" name="category_description" placeholder="<?php print CommonLanguage::getMessage('category_description'); ?>" id="category_description_To_Edit" class="form-control input-rounded">
                        </div>
                        <div class=" col-md-12 <?php echo smc_session()['default_setting']['enable_category_barcode']? "":"hidden"; ?>">
                            <label><?php print CommonLanguage::getMessage('category_prefix_barcode'); ?></label>
                            <input type="number" min="0" max="9999999999999" autocomplete="off" name="category_prefix_barcode_edit" placeholder="<?php print CommonLanguage::getMessage('category_prefix_barcode'); ?>" id="category_prefix_barcode_edit" class="form-control input-rounded">
                        </div>

                        <div class="col-md-12">
                            <label><?php print CommonLanguage::getMessage('sort_order'); ?></label>
                            <span class="red-star">*</span>
                            <input type="number" min="1" name="order_id_edit" placeholder="" id="order_id_edit" class="form-control input-rounded" required>
                        </div>
                        <div class="col-md-12">
                            <label><?php print CommonLanguage::getMessage('color'); ?></label>
                            <input type="text" placeholder="" id="edit_category_color" class="form-control input-rounded" autocomplete="off">
                        </div>
                        <div class="col-md-12 m-t-10">
                            <label><?php print CommonLanguage::getMessage('image'); ?></label>
                            <input type="file" name="edited_image_name" onchange="validateImage(this)" class="form-control input-rounded" data-max-size='60' />
                        </div>
                        <div class="col-md-12 hidden" id="image-div">
                            <div class="form-group">
                                <img id="image-img" width="150" height="150" src="">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="checkbox check-primary">
                                <input type="checkbox" name="hide_pos_to_edit" id="hide_pos_to_edit">
                                <label for="hide_pos_to_edit"><?php print CommonLanguage::getMessage('hide_pos'); ?></label>
                            </div>
                        </div>
                        <div class=" col-md-12">
                            <label><?php print CommonLanguage::getMessage('parent'); ?></label>
                            <input type="hidden" autocomplete="off" name="Parent_ID_edit" id="Parent_ID_edit" class="full-width input-rounded">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="CloseAdd_Cat" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button type="submit" class="btn btn-primary" id="Edit_Cat"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
            <?php echo Forms::ModalLoader('editCategoryLoader'); ?>
        </div>
    </div>
</div>
<!-- End of Modal -->
<!-- DELETE Modal -->
<div class="modal fade bs-example-modal-md" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
                <h5 class="semi-bold"><?php print CommonLanguage::getMessage('Confirm_Delete'); ?></h5>
            </div>
            <div class="modal-body">
                <div class="row">
                    <?php echo Forms::AlertDiv('delete_alert_category'); ?>
                    <div class="Conf">
                        <p><?php print CommonLanguage::getMessage('About_Delete'); ?> <strong class="CatName"></strong> <?php print CommonLanguage::getMessage('irreversible_procedure'); ?></p>
                        <p><?php print CommonLanguage::getMessage('Proceed_Delete'); ?></p>
                        <div class="alert alert-danger m-t-10">
                            <i class="fa fa-ban"></i>
                            <b><?php print CommonLanguage::getMessage('warning'); ?></b><br />
                            <?php print CommonLanguage::getMessage('check_cat_not_empty'); ?>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button class=" btn btn-danger danger RemoveThisCat"><?php print CommonLanguage::getMessage('delete'); ?></button>
            </div>
            <?php echo Forms::ModalLoader('deleteCategoryLoader'); ?>
        </div>
    </div>
</div>
<script>
    var EditLang = <?php echo json_encode(CommonLanguage::getMessage('Edit')); ?>,
        Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
        Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
        parent_id = <?php echo (isset($matches[1]) ? $matches[1] : "0"); ?>;
    $(function() {
        build_select2($("#multi_branch_id"), "xhr/CommonSearch?col_name=branch_name&col_id=branch_id&table=tbl_organization_branches",1);
        build_select2($("#multi_branch_id_edit"), 'xhr/CommonSearch?col_name=branch_name&col_id=branch_id&table=tbl_organization_branches',1);
        build_select2($('input[name=Parent_ID]'), 'xhr/catSearch');
        $('#edit_category_color,#category_color').colorpicker({
            format: 'hex',
            autoInputFallback: false
        });
        $("#option-1").on("click", function(e) {
            var link = window.location.href;
            link = link.replace('/Newest','')
            link = link.replace('/letters','')
            window.location.href = link + "/Newest"
         });
        $("#option-2").on("click", function(e) {
            var link = window.location.href;

            link = link.replace('/Newest','')
            link = link.replace('/letters','')

            window.location.href = link + "/letters"

        });

        $(".panel-body.MainCatContainer").on("click", "a.CategoryRemoverButton", function(e) {
            CATID = $(this).attr("data-href");
            window.ToRemove = $(this).parents(".panel.panel-default");
            $("#confirm-delete").modal('show')
            $('#confirm-delete strong.CatName').html($(this).attr("data-cat-name"))
            $("#confirm-delete .RemoveThisCat").off("click").on("click", function(e) {
                $('#deleteCategoryLoader').removeClass('hidden')
                $.ajax({
                    url: "InventoryAjax/POSCatAjax?id=" + CATID,
                    dataType: "json",
                    complete: function(v1, v2) {
                        if (v2 == 'success' && v1.responseJSON == "OK") {
                            $(window.ToRemove).parent().remove()
                            hideModalAlert('confirm-delete', 'delete_alert_category');
                            AddAlert('#delete_alert_category', Submitted_Successfully, 'success');
                        } else {
                            AddAlert('#delete_alert_category', Failed_Submit, 'danger');
                        }
                        $('#deleteCategoryLoader').addClass('hidden')
                    }
                })
                e.preventDefault();
            })
            $('#confirm-delete').modal();
            e.preventDefault();
        })
        $(".panel-body.MainCatContainer").on("click", "a.CategoryRenamer", function(e) {
            $("#edit-pos-cat-modal").modal("show")
            window.old_cat_name = $.trim($(".BoxCaption", $(this).parent().parent()).text())
            $("#Cat_Name_To_Edit").val(old_cat_name)
            $("#order_id_edit").val($(this).attr('data-order-id'))
            $("#category_description_To_Edit").val($(this).attr('data-category-description'))
            $("#category_prefix_barcode_edit").val($(this).attr('data-category-prefix-barcode'))
            $("#edit_category_color").val($(this).attr('data-color'))
            $("#hide_pos_to_edit").prop('checked', ($(this).attr('data-is-hide') == 1))
            window.CurrentIDToEditThisCat = $(this).next();
            console.log(window.CurrentIDToEditThisCat.attr("data-href"))
            $('input[name=Parent_ID_edit]').val($(this).attr("data-parent-id")).attr("data-select-name", $(this).attr("data-parent-name"));
            build_select2($('input[name=Parent_ID_edit]'), 'xhr/catSearch?ignore_cat_id=' + window.CurrentIDToEditThisCat.attr("data-href"));

            cat_id = window.CurrentIDToEditThisCat.attr("data-href")
            $("#cat_id").val(cat_id);
             CommonViewById('InventoryAjax/getProdCatData', {cat_id: cat_id},
             '#editCategoryLoader', function (response) {
                var main = response['main'],options = response['options'];
                $('#multi_branch_id_edit').select2('val', []);
                $('#multi_branch_id_edit').data().select2.updateSelection(options);
                console.log(response['options']);
        });
        })
        //                    $("#Cat_Name_To_Edit,#hide_pos_to_edit,#order_id_edit").on("change blur keyup focus", function () {
        //                        if ($(this).attr('id') == 'Cat_Name_To_Edit') {
        //                            if ($.trim($(this).val()) != old_cat_name) {
        //                                $("#Edit_Cat").removeClass("disabled")
        //                            } 
        //                        } else {
        //                            $("#Edit_Cat").removeClass("disabled")
        //                        }
        //                    })
        $("#category_prefix_barcode,#category_prefix_barcode_edit").on("change keyup", function() {
            if ($(this).val() > 9999999999999) {
                $("#barcode_note").html("(Barcode Must be less than 13 number)")
                $("#Add_Cat, #Edit_Cat").addClass("disabled")
            } else {
                $("#barcode_note").html("")
                $("#Add_Cat, #Edit_Cat").removeClass("disabled")
            }
        })

        $("#Edit_Cat").on("click", function(e) {
            //                        var Data = {
            //                            Cat_Name: $(Cat_Name_To_Edit).val(),
            //                            hide_pos: $("#hide_pos_to_edit").is(":checked") ? 1 : 0,
            //                            CATID: CurrentIDToEditThisCat.attr("data-href")
            //                        }
            var Data = new FormData(document.getElementById("EditCategoryPostForm"));
            Data.append('Cat_Name', $(Cat_Name_To_Edit).val());
            Data.append('hide_pos', $("#hide_pos_to_edit").is(":checked") ? 1 : 0);
            Data.append('CATID', CurrentIDToEditThisCat.attr("data-href"));
            Data.append('order_id', $('#order_id_edit').val());
            Data.append('category_color', $('#edit_category_color').val());
            Data.append('category_description', $('#category_description_To_Edit').val());
            Data.append('category_prefix_barcode', $('#category_prefix_barcode_edit').val());
            Data.append('multi_branch_id', $('#multi_branch_id_edit').val());
            Data.append('Parent_ID', $('input[name=Parent_ID_edit]').val() == '' ? parent_id : $('input[name=Parent_ID_edit]').val());
            $('#editCategoryLoader').removeClass('hidden')
            $.ajax({
                url: "InventoryAjax/POSCatAjax?cmd=edit",
                method: "POST",
                data: Data,
                dataType: "json",
                processData: false,
                contentType: false,
                complete: function(v1, v2) {
                    if (v2 == 'success' && v1.responseJSON == "OK") {
                        window.newCatName = $(Cat_Name_To_Edit).val();
                        CurrentIDToEditThisCat.closest(".panel").find(".BoxCaption").text(newCatName);
                        CurrentIDToEditThisCat.closest(".panel").find(".CategoryOrder").text('(' + $('#order_id_edit').val() + ')');
                        CurrentIDToEditThisCat.parent().find(".CategoryRenamer").attr('data-is-hide', $("#hide_pos_to_edit").is(":checked") ? 1 : 0);
                        CurrentIDToEditThisCat.parent().find(".CategoryRenamer").attr('data-order-id', $('#order_id_edit').val());
                        CurrentIDToEditThisCat.parent().find(".CategoryRenamer").attr('data-parent-id', $('input[name=Parent_ID_edit]').val());
                        var parent_name = '';
                        if ($('input[name=Parent_ID_edit]').val() != '')
                            parent_name = $('input[name=Parent_ID_edit]').select2('data').text;
                        CurrentIDToEditThisCat.parent().find(".CategoryRenamer").attr('data-parent-name', parent_name);
                        AddAlert('#edit_alert_category', Submitted_Successfully, 'success');
                        hideModalAlert('edit-pos-cat-modal')
                    } else {
                        AddAlert('#edit_alert_category', Failed_Submit, 'danger');
                    }
                    $('#editCategoryLoader').addClass('hidden')
                }
            });
        });
        $("#Add_Cat").on("click", function() {
            //                        var Data = {
            //                            Cat_Name: $("#Cat_Name").val(),
            //                            hide_pos: $("#hide_pos").is(":checked") ? 1 : 0,
            //                            Parent_ID: parent_id
            //                        }
            var Data = new FormData(document.getElementById("AddCategoryPostForm"));
            Data.append('Cat_Name', $("#Cat_Name").val());
            Data.append('hide_pos', $("#hide_pos").is(":checked") ? 1 : 0);
            Data.append('Parent_ID', $('input[name=Parent_ID]').val() == '' ? parent_id : $('input[name=Parent_ID]').val());
            Data.append('order_id', $('#order_id').val());
            Data.append('category_color', $('#category_color').val());

            $('#addCategoryLoader').removeClass('hidden')
            $.ajax({
                url: "InventoryAjax/POSCatAjax?cmd=add",
                method: "POST",
                dataType: "json",
                data: Data,
                processData: false,
                contentType: false,
                complete: function(v1, v2) {
                    console.log(v1)
                    var responseType = $.type(v1.responseJSON);
                    if (v2 == 'success' && v1.responseJSON[0] == 'OK') {
                        AddAlert('#add_alert_category', Submitted_Successfully, 'success');
                        hideModalAlert('create-pos-cat-modal')
                        var parent_name = '';
                        if ($('input[name=Parent_ID]').val() != '')
                            parent_name = $('input[name=Parent_ID]').select2('data').text;

                        $('.MainCatContainer').append($('<div class="col-md-2 col-xs-3">' +
                            '<div class="panel panel-default">' +
                            '<a style="color:#ACB4BE" href="Inventory/POSCat/' + v1.responseJSON[1] + '">' +
                            '	<div style="color:#fff;background:#4c0870;" class="panel-facebook">' +
                            '		<table class="CenterText"><tr><td class="BoxCaption">' + $("#Cat_Name").val() + '</td>' +
                            '<td class="CategoryOrder">(' + $('#order_id').val() + ')</td></tr></table>' +
                            '	</div>' +
                            '</a>' +
                            '<div class="panel-body">' +
                            '<a style="color:#ACB4BE" href="">' +
                            '	<a data-is-hide="' + ($("#hide_pos").is(":checked") ? 1 : 0) + '" data-color="' + $('#category_color').val() + '" class="btn btn-primary btn-xs CategoryRenamer" data-toggle="confirmation-popout" data-order-id="' + $('#order_id').val() + '" data-parent-id="' + $('input[name=Parent_ID]').val() + '" data-parent-name="' + parent_name + '" data-placement="top">' + EditLang + '</a>' +
                            '	<a data-has-children="" data-cat-name="' + $("#Cat_Name").val() + '" data-href="' + v1.responseJSON[1] + '" class="CategoryRemoverButton btn btn-danger btn-xs" href="#">Delete</a>' +
                            '</a>' +
                            '</div>' +
                            '</div>' +
                            '</div>'));
                        $("#create-pos-cat-modal input").val('');
                    } else {
                        AddAlert('#add_alert_category', Failed_Submit, 'danger');
                    }
                    $('#addCategoryLoader').addClass('hidden')
                }
            })
        });
    });
    $('.panel-body.MainCatContainer').on('click', '.delete_image', function() {
        var parent = $(this),
            data = {
                directory_name: 'category_photos',
                image_name: parent.attr('data-content') + '.jpg'
            };
        deleteSpecificImage(data, '#MainCategoryLoader', function(response) {
            if (response[1] == "success") {
                parent.parents('.panel-default').find('.panel-facebook').removeAttr('style').css("background-color", "#4c0870 !important;");
                parent.remove();
            }
        });
    })
    $("#Cat_Name").on("keyup", function() {
        UpdateStatusButton()
    });
 
    $("#Cat_Name_To_Edit,#order_id_edit").on("keyup", function() {
        UpdateEditStatusButton()
    });
    $("#order_id_edit").on("change", function() {
        UpdateEditStatusButton()
    });

    function UpdateStatusButton() {
        var IsValidated = true;
        if ($("#Cat_Name").val() == "") {
            IsValidated = false;
        }
        if (!IsValidated) {
            $("#Add_Cat").addClass("disabled")
        } else {
            $("#Add_Cat").removeClass("disabled")
        }
    }

    function UpdateEditStatusButton() {
        var IsValidated = true;
        if ($("#Cat_Name_To_Edit").val() == "" ) {
            IsValidated = false;
        }
        if (!IsValidated) {
            $("#Edit_Cat").addClass("disabled")
        } else {
            $("#Edit_Cat").removeClass("disabled")
        }
    }
    $("#CloseAdd_Cat").on("click", function() {
        $("#Cat_Name").val('');
    })
</script>
